/* general */
.hamburger{display: none;flex-direction: column;gap: 1px;width: 36px;height: 36px;justify-content: space-evenly;padding: 3px;cursor: pointer;}
.hamburger .bar{height: 4px; width: 100%; background-color: #003055; border-radius: 30px;}
/* header */
body.scrolled header{position: fixed; top: 0; max-width: 100%; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 0; background: white; height: auto; z-index: 2;}
body.scrolled header .content .logo{padding: 10px 0;}
body.scrolled header .content .logo img{margin-top: 5px;}
header{position: fixed; top: 25px; width: 100%; left: 0; right: 0; height: 40px; transition: all 300ms; background: transparent; z-index: 5;}
header .content{display: flex; justify-content: space-between; align-items: center;}

header .content .menu-container{display: flex; gap: 70px; align-items: center;}
header .content .menu-container .menu ul{display: flex; gap: 21px; list-style: none; align-items: center;}

header .content .menu-container .menu ul li a{color: #000;font-size: 0.937rem;font-style: normal;font-weight: 400;line-height: normal; transition: all 300ms;}
header .content .menu-container .menu ul li:hover a{color: #0B3454;}

header .content .menu-container .socials{display: flex; gap: 3px; align-items: center;}
header .content .menu-container .socials a svg path{transition: all 300ms;}
header .content .menu-container .socials a:hover svg path{fill: #19659f;}
header .content .menu-container .menu .socials{display: none;}

/* banner */

.banner{height: 100vh;}
.banner .content{display: flex; height: 100vh; overflow: hidden;}
.banner .content .text-separator{width: 50%;}
.banner .content .image{width: 50%; height: 100vh;}
.banner .content .image .splide{width: 100%; height: 100%;}
.banner .content .image .splide .splide__slide{height: 100%;}
.banner .content .image .splide .splide__track{height: 100%;}
.banner .content .image .splide .splide__slide img{width: 100%; height: 100%; object-fit: cover;}
.banner .text-content{position: absolute;width: 100%;height: calc(100% - 80px);top: 80px;display: flex;}
.banner .text-content .text{max-width: 50%; width: 100%; margin-top: 200px; padding-right: 50px;}
.banner .text-content .text .prefix{color: #0B3454;font-size: 1.062rem;font-style: normal;font-weight: 500;line-height: normal;}
.banner .text-content .text h1{color: #161616;font-size: clamp(2.125rem, 2.010rem + 0.513vw, 2.625rem) /*42px->34px*/;font-style: normal;font-weight: 400;line-height: normal; margin-left: -3px; margin-top: 12px; max-width: 509px;}
.banner .text-content .text .sufix{color: #161616;font-size: 1.3rem /*27px*/;font-style: normal;font-weight: 600;line-height: normal; margin-top: 10px;}
.banner .text-content .text .content{color: #161616;font-size: 1.187rem /*19px*/;font-style: normal;font-weight: 400;line-height: normal; margin-top: 15px; height: auto; max-width: 444px;}
.banner .text-content .text .btn{margin-top: 60px; color: #FFF;font-size: 18px;font-style: normal;font-weight: 600;line-height: 14px; /* 77.778% */letter-spacing: 0.02em;}

/* .fixedContent */

.fixedContent{position: fixed;left: 0;bottom: 80px;align-items: center;display: flex;height: 100%;width: 90px;writing-mode: vertical-lr;text-orientation: mixed;max-width: 100vh;transform: translateX(-100px) rotate(180deg); color: #7C7C7C;font-size: 1.5rem;font-style: normal;font-weight: 300;line-height: normal; animation: fromLeft; animation-duration: 0.6s; animation-fill-mode: forwards; animation-delay: 0.45s; }

@keyframes fromLeft {
  0%{
    transform: translateX(-100px) rotate(180deg);
  }
  100%{
    transform: translateX(0) rotate(180deg);
  }
}

.aboutus-container{height: 905px;display: flex;align-items: flex-end;justify-content: space-between; position: relative;}
.aboutus-container .box{background-color: rgba(58, 119, 166, 0.30); height: 100%; width: 50%;}
.aboutus-container .box:nth-child(1){height: 750px; width: 50%;}
.aboutus-container .content{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.aboutus-container .content .image{height: 100%; max-width: 50%; width: 100%;}
.aboutus-container .content .image img{height: 100%; object-fit: cover; width: 100%;}
.aboutus-container .content .grid{height: 100%; display: flex; position: relative;}
.aboutus-container .content .text{padding-left: 70px; padding-top: 90px; width: 50%;}
.aboutus-container .content .text .sectionTitle{margin-bottom: 75px;}
.aboutus-container .content .text .title{margin-bottom: 45px;}
.aboutus-container .content .text .text-content{color: #161616;font-size: 1.187rem !important;font-style: normal;font-weight: 400;line-height: normal;}
.aboutus-container .content .bottomBar{color: #FFF;font-family: Montserrat;font-size: 29px;font-style: normal;font-weight: 400;line-height: normal;max-width: 647px;width: 100%;padding: 20px;background: #1C4B6F;height: 80px;position: absolute;bottom: 120px;right: 30px;display: flex;padding-left: 170px;justify-content: flex-start;align-items: center;}


.product-container{display: flex; width: 100%; position: relative; height: 835px;}
.product-container .box-separator{width: 50%;}
.product-container .content .grid{height: 100%;}
.product-container .content{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.product-container .content .text{width: 50%; padding-right: 70px; padding-top: 90px; height: 100%; position: relative;}
.product-container .content .text .sectionTitle{margin-bottom: 100px;}
.product-container .content .text .title{margin-bottom: 60px; user-select: none;}
.product-container .content .text .slide_num{position: absolute; left: 0; bottom: 100px; user-select: none;}
.product-container .content .text .block{opacity: 0; pointer-events: none; transition: all 400ms; position: absolute; max-width: 515px; padding-right: 40px; user-select: none;}
.product-container .content .text .block.active{opacity: 1; pointer-events: all;}
.product-container .content .text .block p{color: #161616;font-size: 18px !important;font-style: normal;font-weight: 400;line-height: normal; max-width: 515px;}


.product-container .image{width: 50%; position: relative;}
.product-container .image .splide{height: 100%;}
.product-container .image .splide .splide__slide{height: 100%;}
.product-container .image .splide .splide__slide img{height: 100%; object-fit: cover;}
.product-container .image .splide .splide__track{height: 100%;}
.product-container .image .navigation{width: 230px; gap: 2px; height: 60px; display: flex; position: absolute; bottom: 25px; left: 30px; z-index: 1;}
.product-container .image .navigation .button{width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #D9D9D9; transition: all 300ms; cursor: pointer;}
.product-container .image .navigation .button svg path{transition: all 300ms;}
.product-container .image .navigation .button:hover svg path{stroke: white;}
.product-container .image .navigation .button:hover{background-color: #1C4B6F;}

.product-container .image .splide__arrows{display: none;}

/* services */
.services{display: flex; flex-direction: column;}
.services .top{background-color: rgba(58, 119, 166, 0.30); padding: 40px 0;}
.services .top .grid{display: flex; align-items: center;}
.services .content{min-height: 675px; height: auto; display: flex; background-image: url(../images/services/services-background.svg); background-position: center center; background-size: contain;}
.services .content .grid .box.one{display: flex; max-width: 45%; width: 100%; gap: 10px;}
.services .content .grid .box.two{display: flex; flex-direction: column; max-width: 55%; width: 100%; gap: 10px;}
.services .content .grid .box.one .element{width: 100%; height: 100%; position: relative;}
.services .content .grid .box .tag{color: #FFF;font-size: 20px;font-style: normal;font-weight: 500;line-height: normal; padding: 18px 20px; background: rgba(28, 75, 111, 0.87);}
.services .content .grid .box.one .tag{position: absolute; bottom: 0; left: 0;}
.services .content .grid .box.two .tag{position: absolute; bottom: 0; right: 0;}
.services .content .grid .box.two .element{width: 100%; height: 50%; position: relative;}
.services .content .grid .box .element{overflow: hidden;}
.services .content .grid .box .element img{width: 100%; height: 100%; object-fit: cover; transition: all 300ms;}
.services .content .grid .box .element:hover img{transform: scale(1.1);}
.services .content .grid{display: flex; margin-top: 120px; margin-bottom: 80px; gap: 10px; position: relative;}
.services .content .grid .label{color: #FFF;font-size: 24px;font-style: normal;font-weight: 400;line-height: normal;padding: 18px 35px;background-color: #0B3454;position: absolute;top: -30px;z-index: 1;display: flex;justify-content: center;left: 30px;}

/* gallery */
.gallery{display: flex; flex-direction: column;}
.gallery .top{background-color: rgba(58, 119, 166, 0.30); padding: 40px 0;}
.gallery .top .grid{display: flex; align-items: center;}
.gallery .content{background-image: url(../images/gallery/gallery-background.svg); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.gallery .content .grid{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 80px; margin-bottom: 100px;}
.gallery .content .photo{flex-basis: calc(33.3333% - 8px); height: 330px; overflow: hidden;}
.gallery .content .photo img{height: 100%; width: 100%; object-fit: cover; transition: all 300ms;}
.gallery .content .photo:hover img{transform: scale(1.1);}

/* contact */
.contact{display: flex; flex-direction: column;}
.contact .top{padding: 40px 0;}
.contact .top .grid{display: flex; align-items: center;}
.contact .content{background-color: rgba(58, 119, 166, 0.3); margin-right: 50px; margin-left: 100px; min-height: 864px; margin-bottom: 50px; display: flex; position: relative;}
.contact .content .box-separator{width: 60%;}
.contact .content .map{max-width: 40%; width: 100%; min-height: 864px; z-index: 1;}
.contact .content .main-content{position: absolute; width: 100%; height: 100%;}
.contact .content .main-content .grid{height: 100%;}
.contact .content .main-content .box{max-width: 60%; padding-right: 70px; height: 100%; padding-top: 75px; margin-left: -20px; padding-bottom: 30px;}
.contact .content .main-content .box .label{color: #1C4B6F;font-size: 20px;font-style: normal;font-weight: 400;line-height: normal; margin-bottom: 30px;}
.contact .content .main-content .box .company{color: #0c314d;font-size: 19px;font-style: normal;font-weight: 600;line-height: normal; margin-bottom: 20px;}
.contact .content .main-content .box .contact-details{display: flex; gap: 35px; color: #003055;font-size: 20px;font-style: normal;font-weight: 500;line-height: normal; margin-bottom: 50px;}
.contact .content .main-content .box .contact-details .contact-field{display: flex; align-items: center; gap: 15px;}
.contact .content .main-content .box .contact-details a{color: #003055;font-size: 20px;font-style: normal;font-weight: 500;line-height: normal;}
.contact .content .main-content .box .formIntroducing{color: #1C4B6F;font-size: 24px;font-style: normal;font-weight: 400;line-height: normal; margin-bottom: 40px; max-width: 460px;}

.contact .content .main-content .box form{}


/* contact form */


.contact form{width: 100%;}
.contact form .headline{font-style: normal;font-weight: 700;font-size: clamp(1.563rem, 1.346rem + 0.962vw, 2.500rem) /*40px->25px*/;line-height: 112%;color: #202020; margin-bottom: 0.5rem;}
.contact form .subtitle{font-style: normal;font-weight: 500;font-size: clamp(0.875rem, 0.803rem + 0.321vw, 1.188rem) /*19px->14px*/;line-height: 112%;color: #BDBDBD; margin-bottom: 4rem;}

.contact form .input-half{display: flex; flex-wrap: wrap; gap: 10px;}
.contact form .input-half input{padding: 14px 20px; color: #1C4B6F; border: 1px solid #E8E8E8; background-color: white; width: 100%; transition: all 300ms;}
.contact form .input-half input:focus{border-color: #1C4B6F;}
.contact form .input-half input:focus::placeholder{color: #1C4B6F;}
.contact form .input-half input::-webkit-autofill{color: #1C4B6F;}
.contact form .message textarea{padding: 14px 20px; color: #1C4B6F; border: 1px solid #E8E8E8; background-color: white; width: 100%; height: 150px; margin-top: 10px; max-width: 594px;}
.contact form .message textarea::-webkit-autofill{color: #1C4B6F;}
.contact form .message textarea:focus{border-color: #1C4B6F;}
.contact form .message textarea:focus::placeholder{color: #1C4B6F;}

.contact form .input-half .phone{padding-left: 0;}
.contact form .input-half .phone::before{content: none;}
.contact form .input-half div{flex-basis: calc(50% - 5px);}

.contact form .veryfication{margin-top: 20px; margin-bottom: 20px;}

.contact form .veryfication .rules{margin-bottom: 20px;}
.contact form .veryfication .rules label{font-style: normal;font-weight: 400;font-size: 12px;line-height: 101.7%;color: #545353; display: flex; gap: 10px; align-items: flex-start;}
.contact form .veryfication .rules label span p{font-style: normal;font-weight: 400;font-size: 12px !important;line-height: 101.7%;color: #545353;}

.contact form .progress{width: 100%; height: 0; display: flex; justify-content: center; opacity: 0; overflow: hidden; transition: all 300ms;}
.contact form .progress.active{height: 40px; opacity: 1;}
.contact form .progress img{height: 100%; width: 75px; object-fit: cover;}

.contact form .submiter{border: none;cursor: pointer;position: relative;border-radius: 4px;background: #1C4B6F;}
.contact form .submiter::before{content: ''; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); background-image: url(../images/icons/arrow-right.svg); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 16px; height: 17px;} 
.contact form .btn.submit{border: none; background-color: transparent;}
.contact form .submiter input[type='submit']{padding-right: 70px;}

.contact form input::placeholder,
.contact form textarea::placeholder{color: #81A5C1;font-family: Inter;font-size: 12px;font-style: normal;font-weight: 400;line-height: 12px; /* 100% */ letter-spacing: -0.36px; transition: all 300ms;}

.contact form .veryfication .rules label span{color: #1C4B6F;font-family: Inter;font-size: 11px;font-style: normal;font-weight: 400;line-height: 12px; /* 120% */letter-spacing: -0.3px;}
.contact form .veryfication .wrapper{display: flex; justify-content: space-between; gap: 30px; align-items: center;}

/* footer */
footer{background: #1C4B6F; margin-right: 50px; margin-left: 100px; padding: 50px 30px; margin-bottom: 50px; display: flex; position: relative; display: flex; align-items: center; justify-content: space-between;}
footer .grid{display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; height: 100%; padding: 0; flex-wrap: wrap;}
footer .menu-items{display: flex; gap: 25px; flex-wrap: wrap;}
footer .menu-items .item{color: #FFF;font-size: 15px;font-style: normal;font-weight: 400;line-height: normal; transition: all 300ms;}
footer .menu-items .item:hover{color: #000;}


/* media width */

@media screen and (max-width: 1400px){
  .fixedContent{font-size: 1rem;}
  .aboutus-container .content .bottomBar{font-size: 23px; padding: 15px; padding-left: 170px;}
  .aboutus-container .content .text .text-content{font-size: 15px !important;}
  .product-container .content .text .block p{font-size: 15px !important;}
  .product-container .content .text .sectionTitle{margin-bottom: 80px;}
}

@media screen and (max-width: 1300px){
  
  
  .contact .content .main-content .box{padding-left: 30px;}
  
}

@media screen and (max-width: 1280px){
  .fixedContent{display: none;}
  .contact .content{margin-left: 50px;}
  footer{margin-left: 50px;}

  .contact .content .main-content .box .contact-details{flex-wrap: wrap;}

  .contact .top{padding: 40px 25px;}
}

@media screen and (max-width: 1050px){
  header .content .menu-container{gap: 30px;}
}

@media screen and (max-width: 1024px){
  .contact .content .main-content .box{padding-right: 20px;}
}

@media screen and (max-width: 996px){
  .contact .content{flex-direction: column-reverse;}
  .contact .content .main-content{position: relative;}
  .contact .content .map{max-width: 100%; min-height: 350px;}
  .contact .content .main-content .box{max-width: 100%;}
  .contact form .message textarea{max-width: 100%;}
  .contact form .veryfication .wrapper{flex-wrap: wrap;}
  .contact .content{margin-left: 30px; margin-right: 30px;}
  .contact .content .main-content .box{padding-right: 0;}
  .gallery .content .grid{margin-bottom: 60px;}

  .aboutus-container .content .text{padding-left: 40px;}

  footer{margin-left: 30px; margin-right: 30px;}
  
}

@media screen and (max-width: 950px){
  .hamburger{display: flex;}
  .menu{position: fixed; box-shadow: 0px 0px 14px #00000057; width: 250px; top: 52px; padding-top: 50px !important; right: -100%;height: calc(100% - 50px);padding: 30px;background: #1c4b6f;border-bottom: 1px solid #0e5689;z-index: -1;transition: all 350ms;}
  .menu.active{right: 0;}
  .menu ul{flex-direction: column; align-items: flex-start !important;}
  .menu ul li{opacity: 0; transition: all 700ms;}
  .menu.active ul li{opacity: 1;}
  
  body.menuActive header .content{background-color: white;}
  body.menuActive header{background-color: white; top: 0; padding-top: 15px;}
  body.menuActive header .content .menu-container .menu ul li a{color: #fff;}
  
  body.scrolled.menuActive header{padding-top: 0;}
}

@media screen and (max-width: 900px){
  .animate{opacity: 1 !important;}
  .animate.animated{animation: none !important;}
}

@media screen and (max-width: 850px){
  .gallery .content .photo{flex-basis: calc(50% - 8px);}
}

@media screen and (max-width: 800px){
  .aboutus-container .content .text .sectionTitle{margin-bottom: 40px;}
  .aboutus-container .content .text .title{font-size: 1.8rem !important; margin-bottom: 30px;}
  .aboutus-container{height: 610px !important;}
  .aboutus-container .box:nth-child(1){height: 100%;}
  .aboutus-container .content .bottomBar{font-size: 1.2rem;padding: 5px;padding-left: 0;justify-content: flex-end;padding-right: 30px; height: 40px; bottom: 40px;}
}


@media screen and (max-width: 767px){
  .banner .content .text-separator{display: none;}
  .banner .content .image{width: 100%;}
  .banner .text-content .text{max-width: 100%;}
  .banner .content .image{position: relative;}
  .banner .content .image::before{content: ''; position: absolute; width: 100%; height: 100%; background-color: #ffffff; opacity: 0.6; top: 0; left: 0; z-index: 1;}
  .banner .text-content{z-index: 1;}

  .aboutus-container{height: 100% !important; background-color: rgba(58, 119, 166, 0.30); padding-top: 60px; padding-bottom: 60px;}
  .aboutus-container .box:nth-child(1){display: none;}
  .aboutus-container .box{display: none;}
  .aboutus-container .content{position: relative;}
  
  .aboutus-container .content .grid{flex-direction: column-reverse; gap: 50px;}
  .aboutus-container .content .text{padding: 0; width: 100%;}

  .aboutus-container .content .image{height: 430px; max-width: 100%; width: 100%;}

  .aboutus-container .content .bottomBar{max-width: 100%; width: 100%; position: relative;}


  .product-container{height: 100% !important; flex-direction: column-reverse;}
  .product-container .box-separator{display: none;}
  .product-container .image{height: 450px; width: 100%; position: relative;}
  .product-container .content{position: relative;}
  .product-container .content .grid{height: 100%;}
  .product-container .content .text{position: relative; height: 100%; padding-bottom: 30px;}
  .product-container .content .text .block.active{position: relative;}
  .product-container .content .text .block{transition: all 100ms;}
  .product-container .content .text .slide_num{display: none;}

  .product-container .content .text{width: 100%; padding-right: 0; padding-top: 50px;}

  .product-container .image .splide .splide__slide img{width: 100%; object-fit: cover;}
  .product-container .content .text .sectionTitle{margin-bottom: 50px;}
  .product-container .content .text .title{margin-bottom: 30px;}

  .product-container .image .navigation{width: 176px;gap: 2px;height: 42px;display: flex;position: absolute;bottom: 25px;left: 30px;z-index: 1;}
  

  .services .content .grid{flex-wrap: wrap;}
  .services .content .grid .label{left: 0; position: relative; width: 100%;}
  .services .content .grid .box.one{width: 100%; height: 350px; max-width: 100%;}
  .services .content .grid .box.two{width: 100%; max-width: 100%;}

  .sectionTitle::before{content: none;}
  .sectionTitle{padding-left: 0;}

  
}

@media screen and (max-width: 600px){
  .gallery .content .photo{height: 270px;}
}

@media screen and (max-width: 550px){
  .contact .top{padding: 30px 0;}
  .contact .content{margin-left: 15px; margin-right: 15px;}

  footer{margin-left: 15px; margin-right: 15px;}
  .product-container .content .text .block{padding-right: 0;}
  .banner .text-content .text{padding-right: 0;}
}

@media screen and (max-width: 500px){
  .product-container .image{height: 340px;}
  .services .content .grid .box.one{height: 260px;}
  .services .content .grid .box.two .tag{right: auto; left: 0;}

  .contact .content .main-content .box{padding-left: 0; margin-left: 0;}

  footer .menu-items{gap: 15px;}

  header .content .menu-container .socials{display: none;}

  .menu .socials{display: flex !important; margin-top: 60px !important; position: absolute; bottom: 20px; left: 30px;}
  .menu .socials .item svg path{fill: white !important;}

  .banner .text-content .text{ margin-top: auto !important; top: 43% !important; transform: translateY(-50%) !important; position: relative;}
  
}

@media screen and (max-width: 470px){
  .gallery .content .photo{height: 210px;}
  .gallery .content .grid{gap: 5px;}
  .gallery .content .photo{flex-basis: calc(50% - 3px);}
  .contact form .submiter{width: 130px;}

  .services .content .grid .label{font-size: 18px;}
  .services .content .grid .box .tag{font-size: 1rem;}
}

@media screen and (max-width: 430px){
  .banner .text-content{height: 100vh;}
  .aboutus-container .content .bottomBar{padding: 10px; height: auto;}

  .aboutus-container .content .image{height: 320px;}
  .contact form .input-half div{flex-basis: 100%;}
}

@media screen and (max-width: 400px){
  .aboutus-container .content .bottomBar{right: 0;}
}

@media screen and (max-width: 390px){
  .gallery .content .photo{height: 180px;}
}


/* Media queryies height */

@media screen and (max-height: 830px){
  .banner .text-content .text{margin-top: 150px;}
}

@media screen and (max-height: 765px){
  .aboutus-container{height: 830px;}
  .product-container{height: 780px;}
  
}

@media screen and (max-height: 700px){
  .banner .text-content .text{margin-top: 120px;}
}

@media screen and (max-height: 650px){
  .banner .text-content .text{margin-top: 80px;}
}