body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* Header section */
.header-bg {
  background-color: #12475F;
}
.main_menu{
    height: 65px;
}
.navbar-nav .nav-link:hover {
    background-color: #F7921B; /* Change to your desired color */
    color: #fff; /* Change text color on hover */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition effect */
}
@media (min-width: 992px) {
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
    }
}

.navbar-nav .dropdown-menu {
    margin-top: 0;
}
.img-first {
  height: 40px;
  width: 140px;
  margin-top: 15px;
}
/* Carusel section  */
.caru-image {
  height: 500px;
}
@media screen and (min-width: 200px) and (max-width: 576px) {
  .caru-image {
    height: 300px;
  }
}
@media screen and (min-width: 577px) and (max-width: 991px) {
  .caru-image {
    height: 400px;
  }
}
.carousel-indicators button {
  height: 13px !important;
  width: 13px !important;
  border-radius: 100%;
  background-color: rgb(249 115 22) !important ;
}
.carousel-indicators .active {
  background-color: rgb(249 115 22) !important;
}
.carousel-control-prev-icon {
  background-color: rgb(249 115 22);
}
.carousel-control-next-icon {
  background-color: rgb(249 115 22);
}
/* company section */
.coma-img {
  width: 300px;
}
.btn-1 {
  background-color: rgb(23 37 84);
  color: white;
}
/* Products section */
.product-img {
  width: 70px;
}
.parasect {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #2c4964;
}

.parasect::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.parasect::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: rgb(22, 38, 91);
  bottom: 0;
  left: calc(49.5% - 20px);
}
/* Read our latest */
.read-para {
  color: rgb(249 115 22);
}
.card-image {
  height: 220px;
}
/* footer section */
.lastimage-fo {
  width: 50px;
  height: 50px;
}
.foo-image2 {
  margin-top: -43px;
}

.copy_section{
    background-color: #35383a;
}
.copy{
    color: white;
    margin-top:5px;
}

/* Product Slider css  */
*{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	word-wrap: break-word
}

$base-font			: 'Montserrat', sans-serif;
$base-color-font  : #fff;
$base-size-font   : 14px;
$base-weight-font	: 400;

.hide{display: none!important}

$primary-color 	: #ed1b28;
$secondary-color	: #2b2c36;

body{
	margin: 0;
	font-family: $base-font;
	font-size: $base-size-font;
	font-weight: $base-weight-font;
	color: $base-color-font;
	line-height: normal;
	letter-spacing: normal
}

/*loader thx:https://codepen.io/aurer*/
.loader{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background: darken($secondary-color, 12%);
	background: linear-gradient(to left, darken($secondary-color, 8%), darken($secondary-color, 12%));
	display: flex;
	align-items: center;
	justify-content: center;

	svg path,
	svg rect{
		fill: $primary-color
	}
}

/*gallery*/

.gallery-wrapper{
	position: relative;
	z-index: 1;

	.content{
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 3vh 0;
		background: darken($secondary-color, 12%);
		background: linear-gradient(to left, darken($secondary-color, 8%), darken($secondary-color, 12%));



		.gallery{
			&.full{
				position: relative;
				display: flex;
				align-items: center;

				.swiper-container{
					.swiper-wrapper{
						display: flex;
						height: 80vh;
						align-items: center;
						
						.swiper-slide{
							position: relative;
							height: 50vh;
							transition: all .4s ease-out;
							box-sizing: border-box;
							width: auto;
							opacity: .25;

							&.swiper-slide-prev,
							&.swiper-slide-next{width: 20%!important}

							&.swiper-slide-active{
								height: 80vh;
								width: 60%!important;
								opacity: 1;

								&:hover{
									.zoom{
										opacity: 1;
										pointer-events: auto;
										visibility: visible
									}
								}
							}

							.image{
								width: 100%;
								height: 100%;

								img{
									width: 100%;
									height: 100%;
									display: block;
									object-fit: cover
								}
							}

							.overlay{
								position: absolute;
								left: 0;
								bottom: 0;
								z-index: 2;
								width: 100%;
								height: auto;
								padding: 50px 50px 30px 50px;
								background: rgb(0,0,0);
								background: linear-gradient(0deg, rgba(0,0,0, .8) 0%, rgba(0,0,0, .4) 50%, rgba(0,0,0,0) 100%);
								display: flex;
								align-items: center;
								opacity: 0;
								visibility: hidden;
								transition: all .3s ease-out;

								&.show{
									opacity: 1;
									visibility: visible;

									.text-wrap{
										opacity: 1;
										visibility: visible;
										transform: translateY(0)
									}
								}

								.text-wrap{
									display: flex;
									flex-direction: column;
									max-width: 600px;
									opacity: 0;
									visibility: hidden;
									transform: translateY(50px);
									transition: all .4s linear;

									.name{
										span{
											font-size: 2.2em;
											font-weight: 700;
										}
									}

									.caption{
										p{
											font-size: 1.16em;
											color: #fff;
											line-height: 1.7;
										}
									}
								}
							}
						}
					}
				}

				.swiper-next-button,
				.swiper-prev-button{
					position: absolute;
					z-index: 99;
					outline: none;
					transition: all .2s linear;
					width: 20%;
					height: 50vh;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					cursor: pointer;

					&.swiper-button-disabled{opacity: .2}

					em{
						font-size: 68px
					}
				}

				.swiper-next-button{
					right: 0;
					padding-left: 5vw;
					justify-content: flex-start
				}

				.swiper-prev-button{
					left: 0; 
					padding-right: 5vw
				}
			}

			&.thumb{
				position: relative;
				width: 100%;
				max-width: 1020px;
				margin: 0 auto;
				display: flex;
				align-items: center;
				padding-left: 12px;

				.swiper-container{
					width: 100%;
					.swiper-wrapper{
						.swiper-slide{
							position: relative;
							height: 10vh;
							box-sizing: border-box;
							cursor: pointer;
							
							&.swiper-slide-thumb-active{
								.image{
									box-shadow: inset 0px 0px 0px 2px $primary-color;
									padding: 2px;

									.overlay{opacity: 1}
								}
							}

							.image{
								width: 100%;
								height: 100%;
								position: relative;

								img{
									width: 100%;
									height: 100%;
									display: block;
									object-fit: cover;
								}

								.overlay{
									position: absolute;
									left: 2px;
									top: 2px;
									background-color: rgba($secondary-color, .6);
									display: flex;
									align-items: center;
									justify-content: center;
									color: #fff;
									width: calc(100% - 4px);
									height: calc(100% - 4px);
									opacity: 0;
									transition: all .2s linear
								}
							}
						}
					}
				}

				.swiper-next-button{right: -15px}
				.swiper-prev-button{left: -5px;
					em{transform: rotate(180deg)}
				}

				.swiper-next-button,
				.swiper-prev-button{
					position: absolute;
					z-index: 99;
					outline: none;
					transition: all .2s linear;
					width: 32px;
					height: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $primary-color;
					cursor: pointer;

					&:hover{
						background-color: darken($primary-color, 10%);
					}

					&.swiper-button-disabled{opacity: .2}
				}
			}
		}
	}
}


/*signature*/

.signature{
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	padding: 20px;

	h3{
		font-weight: 600;
		font-size: .926em;
		color: $primary-color;
		display: flex;
		margin-bottom: 5px
	}

	a,
	em{
		text-decoration: none;
		color: #777;
		margin-right: 5px;
		font-size: .88em;
		transition: all .2s linear;

		&:hover{
			color: #aaa
		}
	}
}

/*Mobile*/
@media only screen and (max-width: 1024px){
     .gallery-wrapper{
          .content{
               padding: 5vh 0;

               .gallery{
                    &.full{
                         .swiper-container{
                              .swiper-wrapper{
                                   height: 70vh;
                                   
                                   .swiper-slide{
                                        height: 50vh;

                                        &.swiper-slide-prev,
                                        &.swiper-slide-next{width: 10%!important}

                                        &.swiper-slide-active{
                                             height: 70vh;
                                             width: 80%!important
                                        }

                                        .overlay{
                                             padding: 20px;
     
                                             .text-wrap{
                                                  transform: translateY(0);
     
                                                  .name{
                                                       span{
                                                            font-size: 1.6em
                                                       }
                                                  }
     
                                                  .caption{
                                                       p{
                                                            font-size: 1.06em
                                                       }
                                                  }
                                             }
                                        }
                                   }
                              }
                         }

                         .swiper-next-button,
                         .swiper-prev-button{
                              width: 10%;
                              height: 50vh;
                              align-items: center;
                              justify-content: center;

                              em{
                                   font-size: 45px
                              }
                         }

                         .swiper-next-button{padding-left: 0}
                         .swiper-prev-button{padding-right: 0}
                    }

                    &.thumb{
                         padding: 0 30px;
								 max-width: 100%;
                         .swiper-container{
                              .swiper-wrapper{
                                   .swiper-slide{
                                        height: 80px
                                   }
                              }
                         }

                         .swiper-next-button{right: 20px}
                         .swiper-prev-button{left: 20px}
                    }
               }
          }
     }

     .signature{display: none}
}