/* @import url('https://fonts.cdnfonts.com/css/graphik-trial'); */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');





/* Reset some default browser styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

  }



        @font-face {

          font-family: 'MyCustomFont';

          src: url('fonts/Graphik-Regular-Trial.otf') format('truetype');

          /* Add more src lines for additional font file formats if necessary */

      }

      

   

      

      body {

          font-family: 'MyCustomFont', sans-serif;

          background-color:#E5E6E6;

      }

  

  .container {

    max-width: 1235px;

    margin: 0 auto;

    padding: 0 20px;

  }

  

  /* Style headings */

  h1, h2, h3 {

    margin-bottom: 20px;

  }

  header{

    /* background-image:url(images/Rectangle\ 32.png) ; */

    /* background-size: cover; */

    /* width: 1512px; */

    /* height: 1008px; */

    /* left: 0px;

    top: 0px; */

    display: flex;

    justify-content: center;

    align-items: center;

    /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(0deg, rgba(53, 120, 113, 0.3), rgba(53, 120, 113, 0.3)), url(bg.png);

    background-blend-mode: normal, color, normal; */

  }

 /* Reset some default browser styles */

 * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

  }



  /* Apply a basic font style */

  /* body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

  } */



  /* Navbar styles */

  .navbar {

    position: fixed;

    width: 100vw;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 1000; /* Ensures it's above other content */

    box-sizing: border-box;

    height: 80px;

    left: 0px;

    top: 0px;

    background: rgba(0, 0, 0, 0.2);

    border-bottom: 0.8px solid rgba(255, 255, 255, 0.5);

  }



  .logo {

    width: 100px; /* Adjust width as needed */

    margin-left:100px;

  }



  .navbar ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

  }



  /* .navbar ul li {

    margin-left: 20px;

  } */



  .navbar ul li a {

    color: #fff;

    text-decoration: none;

    font-size: 18px;

    transition: color 0.3s;

    padding: 20px;

  }



  .navbar ul li a:hover {

    font-size: 20px;

    font-weight: 800; /* Change to desired hover color */

  }



  /* Hamburger menu for mobile */

  .hamburger-menu {

    display: none; /* Hide by default for desktop */

    cursor: pointer;

  }

  .track{

    background-color:#46AdA2;

    padding: 28px !important;

  }

  h1 {

    font-size: 56px;

    color: #fff;

    /* text-align: center; */

  }

  .box1{

    color: #000;

    /* width: 1000px; */

    height: 1008px;

    display: flex;

    /* justify-content: space-between; */

    align-items: center;

    background-color:#fff;

  }

  .box1 h1{

    color: #000;

  }

  .box2 h1,.box2 p{

    color: #fff;

  }

  .box2{

    background-color:#46AdA2;

  }

  .text3{

    width:30%;

  }

  .text4{

    width: 70%;

    position: relative;

  }

  .text3 span {

    font-family: 'HelveticaNeue';

    font-style: normal;

    font-weight: 400;

    font-size: 20px;

    line-height: 25px;

    color: #357871;

  }

  .text3 h1, .text3 p{

    color: #000;

  }

  .vector{

    position: absolute;

    height: 16px;

    left: 31.42%;

    right: 66.73%;

    top: 409px;

    background: #BC9756;

    transform: rotate(90deg);

  }



 .div2 {

  height:    658px;

  /* left: 		  50%;

  top: 			  50%; */

  /* transform:  translatex(-50%) translatey(-50%); */

  width:      611px;

  border:1px solid green;

  border-radius:10%;

  rotate: 20deg;

  margin-top:15%;

  /* transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); */

  }

   /* .

  .div2 {

    height:     45px;

    left: 		  50%;

    top: 			  50%;

    transform:  translatex(-50%) translatey(-50%);

    width:      45px;

    border:1px solid red;

    border-radius:10%;

    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

  } */



  .image1{

    position: absolute;

    width: 330px;

    height: 530px;

    left: -20px;

 bottom: 70px;

  }

  .div3{

    position: absolute;

    width: 300px;

    height: 580px;

    left: 350px;

bottom: 71px;

    background: #D9D9D9;

    border-radius: 30px;

    rotate: 5deg;

    padding: 50px;

  }

  .button {

    background-color: transparent;

    border:1px solid #BC9756;

    color: #BC9756;

    padding: 20px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    border-radius: 50%;

  }

  .container {

    width: 100%; /* Adjust as needed */

    max-width: 1200px; /* Adjust as needed */

    margin: 0 auto; /* Center the container horizontally */

    padding: 20px; /* Add padding inside the container */

    box-sizing: border-box; /* Include padding and border in the container's total width */

    /* background-color: red; */

  }



  .rotate90 {

    /* width: 100px;

    height: 100px; */

    /* background-color: blue; */

    transform : rotate(25deg);

    transition: transform 0.5s ease; /* Transition for smooth animation */

  }



  .slider-container {

    position: relative;

    overflow: hidden;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 50px;

  }



  .card-slider {

    display: flex;

    transition: transform 0.5s ease;

    overflow: hidden;

    max-width: 1000px; /* Max width of one card */

    width: 100%;

    justify-content: center;

    align-items: center;

  }



  .card {

    width: 100%; /* Full width of the container */

    max-width: 900px; /* Max width of one card */

    margin: 0 auto; /* Center the card horizontally */

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

    border-radius: 10px;

    height: 365px;

    background-color: #fff;

  }



  .card img {

    /* width: 30%; */

    border-radius: 10px 0 0 10px; /* Rounded corners on the left side */

  }



  .card-content {

    flex: 1;

    padding: 20px;

  }



  .card-heading {

    font-size: 30px;

    font-weight: bold;

    margin-bottom: 10px;

    color: #000;

    font-family: 'Oswald', sans-serif;;

  }



  .card-text {

    margin-bottom: 20px;

  }



  .dots-container {

    position: absolute;

    bottom: -50px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

  }



  .dot {

    width: 10px;

    height: 10px;

    background-color: gray;

    border-radius: 50%;

    margin: 0 5px;

    cursor: pointer;

  }



  .dot.active {

    background-color: blue;

  }

  .card-title{

    /* border: 1px solid #357871; */

    border-radius: 5px;

    margin: 10px;

    padding: 10px 10px 10px;

    font-size: 18px;

    /* color: #357871; */

    font-weight: 400;

    white-space: nowrap;

  }

  

 .key-milestone-items{

  display: flex;

  align-items: center;

 }



.swiper {

  /* width: 900px; */

  /* height: 300px; */

}

.card-title-container {

  display: flex;

}

.card-title {

  cursor: pointer;

  margin-right: 10px;

}

.swiper-pagination-bullet {

  cursor: pointer;

  margin-right: 5px;

}

.swiper-pagination-bullet-active {

  color: blue;

}

.sec3,.our-key-mobile{

  display: none;

}



.our-key{

  margin-bottom: 120px;

}

.scrollable-container {

  overflow-x: auto;

}

.scrollable-container{

  -ms-overflow-style: none;

  /* Internet Explorer 10+ */

  scrollbar-width: none;

}

.scrollable-container::-webkit-scrollbar {

  display: none;

  /* Safari and Chrome */

}

.hide-nav{

  display: none;

}

.md-sec3-1{

  padding-inline: 42px;

  padding-top: 70px;

  padding-bottom: 50px;

}

.md-sec3-img{

  height: 500px;

}

.md-sec3-img img{

  height: 100%;

  object-fit: cover;

  object-position: center;

}

.first-h, .first-p{

  color: 

  #141414 !important;

}









  /* ---------------------------------------------------------- footer section css wrap---------------------------------------- */



  



footer{

  background-color: #002A32;

  margin-top:50px;

  padding-block: 49px 44px;

}

.foo1 {

  width:25%;

  /* padding:10px; */

  /* margin:10px; */

}

/* .foo3{

  padding:10px;

  margin:10px;

} */

.foo2{

 width: 17%;

}

.flogo{

  padding-top: 10px;

}

footer .logos img{

  padding: 0px 20px;

}

.logos{

  margin-top: 80px;

}

footer p{

  margin-top: 50px;

}

footer .logos ,footer p {

  /* margin-top:20px; */

  color: #fff;

  font-family: "Montserrat";

  

}

footer h2{

  color:#C69949;

}

footer ul{

  list-style: none;

}

footer ul li a{

  color: #fff;

  text-decoration: none;

  font-family: "Montserrat";

}

footer ul li{

  margin:24px 0px;

}



/* Style the container */

.foo3 {



width: 540px;



}

.footer2 {

background-color: #002026;



padding-block: 30px;

}

.footer-container{

  max-width: 1235px;

  margin: auto;

  padding-inline: 15px;

}

.container2 {

  /* width: 80%;

  max-width: 1200px;

  margin: 0 auto; */

  

  box-sizing: border-box;

  display: flex;

  justify-content: space-between;

  width: 100%;

  flex-wrap: wrap;

  /* background-color: red; */

  

}

.str-foot{

  justify-content: space-between;

  align-items: center;

}

.foo2 h2, .foo3 h2{

  font-family: "Oswald";

}

.foo1 p{

  color: 

  rgba(255, 255, 255, 0.8);

}



.form {

  /* padding: 20px; */

  /* background-color: #f9f9f9; */

  border-radius: 8px;

  padding-left: 0px;

  padding-top: 30px;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  font-family: "Manrope", sans-serif;

}



/* Style form inputs */

.form input[type="text"],

.form input[type="email"],

.form input[type="tel"],

.form textarea {

  /* width: calc(50% - 20px); */

  /* margin-bottom: 10px; */

  padding: 10px;

  border: 1px solid #0D353C;

  border-radius: 5px;

  background-color: #0D353C;



}

.form textarea{

  grid-area: 3 / 1 / 3 /3;

  width: 100%;

}





.form input::placeholder, .form textarea{

  font-family: "Manrope";

}



/* Style the submit button */

.form button {

  /* background-color: #C69949; */

  background: linear-gradient(rgba(74, 174, 164, 1),rgba(57, 168, 156, 1));

  color: #fff;

  border: none;

  padding: 10px 20px;

  cursor: pointer;

  border-radius: 73px;

font-family: "Manrope", sans-serif;

  max-width: 170px;

}



/* Change button color on hover */

.form button:hover {

  background-color: #0056b3;

}

.footer2 a{

  color: #fff;

  text-decoration: none;

  padding-block: 10px;

}

.footer_nav{

  font-family: "Montserrat";

  display: flex;

  gap: 38px;



}

.Quick-link{

  display: none;

}

.copy a{

  font-family: "graphic";

  font-size: 14px;

}

.logos a img{

  transition: transform 0.3s ease;

}

.logos a img:hover{

transform: scale(1.2);

}

.footer_nav a, .foo2 ul li a{

  transition: transform 0.6s ease;

}

 .foo2 ul li a:hover{

  /* transform: scaleY(1.2); */

  font-weight: 800;

  color: #06b091d7;

  



}

 .key-milestone{

    display: flex;

    align-items: center;

    gap: 100px;

  }



  section{

    padding: 0;

 }

 #sec2{

    padding: unset !important;

 }

.our-key{

  overflow: hidden;

}





    /* ---------------------------------------------------------- footer section css---------------------------------------- */











































































  /* Media query for smaller screens */

  @media screen and (max-width: 768px) {

    .navbar {

      padding: 10px;

      height: 70px !important;

    }

    .container{

      width: 90%;;

    }

    .card-heading {

      font-size: 18px;

    }

    /* p{

      font-size: 14px;

    } */

    /* .our-key-mobile .div3 {

      width: 305px !important;

      height: 448px !important;

    }

    .our-key-mobile img {

      width: 319px !important;

      height: 350px !important;

    } */



    /* .navbar ul {

      display: none; 

      flex-direction: column;

      position: absolute;

      top: 60px;

      left: 0;

      background-color: #333; 

      width: 100%;

      padding: 20px;

      z-index: 999; 

    } */



    .navbar ul.active {

      display: flex; /* Show the navigation links when active */

    }



    .navbar ul li {

      margin-left: 0; /* Reset margin for mobile */

      margin-bottom: 10px;

    }



    .hamburger-menu {

      display: block; /* Show hamburger menu for mobile */

    }

    .sec1,.our-key,.swiper-hide{

      display: none;

    }

    .md-swiper-btns{

      position: relative;

    }

    .sec3 ,.our-key-mobile{

      display: block;

    }

    .sec3 img{

      width:100vw;

    }

    h1{

      font-size: 24px;

    }

    .swiper{

      width: unset;

    }

    .block1{

      display: block !important;

    }

    .card {

      height: auto;

    }

    .card img {

      width: -webkit-fill-available;

      border-radius: 10px;

    }

    footer .logos img {

      padding: 0px 10px !important;

   }

   #sec2{

    display: none;

   }

   /* footer{

    margin-top: 400px;

   } */

   .rotate90 {

    transform : rotate(26deg);

    transition: transform 0.5s ease; /* Transition for smooth animation */

  }

  .our-key-mobile{

    padding-inline: 42px;

  }

  }



  .block1{

    display: flex;align-items: center;

  }



  .our-key-mobile .div2 {

    width: 300px;

    height: 300px;

    /* margin-top: 173px;

    margin-bottom: 250px;

    margin-left: 40px; */

    /* overflow: hidden !important; */

  }

  .our-key-mobile img ,.our-key-mobile .div3 {

    width: 305px;

    height: 448px;

    top: 100px;

    left: 60px;

  }

  .our-key-mobile .image1{

   top:-130px;

   left: 10px;;

  }

   .our-key-mobile .div3 {

      width: 305px ;

      height: 448px ;

      top: -140px;

      left: 30px;

      position: relative;

    }

    .our-key-mobile img {

      width: 319px ;

      height: 350px ;

    }

  .btn{

    position: absolute;

  }

  





  /* .card {

    display: none;

}



.card.active {

    display: block;

} */

/* 

.dot {

  height: 15px;

  width: 15px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  margin: 0 2px;

  cursor: pointer;

}



.active-dot {

  background-color: #717171;

} */





  

.active {

  font-weight: bold; /* Add your desired styles for active title */

    color: #357871;

  border: 1px solid #357871;

}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after ,.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {

  content: '';

}

.swiper-button-next ,.swiper-button-prev{

  margin:10px -40px;

}

.swiper-container{

  position: relative;

  /* width: 70%;

  margin: 0 auto; */

}

.swiper-container .swiper-pagination{

  bottom: -30px!important;

}

.swiper{

  overflow: visible;

  overflow-x: clip;

}

.swiper-pagination{

  position: absolute !important;

  bottom: -45px !important;

}



.card-content a{

  float: right;

  text-decoration: none;

  /* background: #357871;

  padding: 4px 8px;

  border-radius: 10px;

  color:#fff; */

  background: linear-gradient(rgba(74, 174, 164, 1),rgba(57, 168, 156, 1));

    border-radius: 73px;

    max-width: 106px;

    color: var(--acolor);

    font-family: "Montserrat";

    font-size: 14px;

    font-weight: 500;

    text-align: center;

    padding: 6px 12px;

    box-shadow: 0 16px 20px rgba(0, 0, 0, 0.15);

    margin-left: auto;

}



.sticky {

  gap: 20px;

  position: fixed;

  right: 0;

  bottom: 50px;

  right: 50px;

  z-index: 4;

}



.sticky a{

    background: #fff;

    text-decoration: none;

    padding: 13px;

    border-radius: 25px;

    color: #357871;

}

#background-video {

  width: 100vw;

  height: 100vh;

  object-fit: cover;

  /* position: fixed; */

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  z-index: -1;

  /* overflow: hidden; */

}



/* #mobile-video {

    width: 100vw;

    height: 100vh;

    object-fit: cover;

    position: fixed;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    z-index: -1;

} */



/* @media only screen and (max-width: 768px) {

    #background-video {

        display: none; 

    }

    #mobile-video {

        display: block; 

    }

} */



.sidebar {

  height: 100%;

  width: 0;

  position: fixed;

  top: 0;

  right: 0;

  background-color: #fff;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 60px;

  z-index: 1000;

}



.sidebar a {

  padding: 10px 15px;

  text-decoration: none;

  font-size: 15px;

  color: #000;

  display: block;

  transition: 0.3s;

}



.sidebar a:hover {

  color: #f1f1f1;

}



.sidebar .close-btn {

  position: absolute;

  top: 20px;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

  color: #000;

}



.content {

  padding: 16px;

}



#openSidebarBtn {

  font-size: 20px;

  cursor: pointer;

  border: none;

  background: none;

  padding: 0;

}



/* Show sidebar when it's opened */

.sidebar.open {

  width: 40%;

}





.search{

  /* position: absolute;

  top:50%;

  left:50%; */

  /* background:black ; */

  border: 1px solid #002026;

  height: 50px;

  border-radius: 40px;

  padding: 5px 4px 5px 20px;

  margin:auto;

  /* width: 60%; */

}

.search-btn{

  color: red;

  float: right;

  width: 80px;

  height: 40px;

  border-radius: 40%;

  background:#357871 ;

  display: flex;

  justify-content: center;

  align-items: center;

}



.search-txt{

  border: none;

  background: none;

  outline: none;

  float: left;

  padding: 0;

  color:wheat ;

  font-size: 16px;

  line-height: 40px;

  width: 220px;

}

.sidesec1{

  padding: 20px 100px;

}

.hidden {

  display: none;

}





/* .box1 {

  width: 100%; 

  animation: narrow 10s forwards; 

}



@keyframes narrow {

  to {

    width: 1000px; 

  }

}

  h1 {

    opacity: 0; 

    animation: fadeIn 3s forwards; 

  }



  @keyframes fadeIn {

    to {

      opacity: 1; 

    }

  } */



/* 

  wrap {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    grid-template-rows: 1fr;

    width: 100%;

    max-width: 720px;

    margin: 0 auto;

    padding: 64px 0;

  }

  

  .title {

    grid-column: 1 / 5;

    grid-row: 1;

    position: relative;

    font-size: 3.6rem;

    font-weight: bold;

    letter-spacing: 0.025em;

    line-height: 1.1;

    z-index: 2;

    

    span {

      &:not(:first-child) {

        position: absolute;

        top: 0;

        left: 0;

      }

    }

  }

  

  .images {

    grid-column: 4 / -1;

    grid-row: 1;

    position: relative;

    

    img {

      width: 100%;

      height: auto;

      

      &:not(:first-child) {

        position: absolute;

        top: 0;

        right: 0;

      }

    }

  }

  

  

 */

 .container {

  max-width: 1200px;

  margin: 0 auto;

}







/* Media queries for responsiveness */









.sidebar h1,.sidebar h2,.sidebar h3 {

  font-family: 'Oswald', sans-serif;

}



*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

section{

  width: 100%;

  padding-bottom: 50px;

  

}

.white-bg-sec{

  display: flex;

  justify-content: flex-start;

  height: 100%;

  overflow: hidden;

}

.left-sec{

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  text-align: left;

  padding: 0 5rem;

  width: 70%;

  flex: 70%;

}

.left-sec .text-wrapper h2{

  font-size: 55px;

  line-height: 70px;

  margin-bottom: 2rem ;

  color: rgba(255, 255, 255, 1);

}

.text-wrapper p{

  font-size: 18px;

  line-height: 26.63px;

  color: 

  rgba(255, 255, 255, 1);

  font-weight: 400;

}

.common-p{

  font-size: 18px;

  line-height: 26.63px;

}

.text-wrapper{

  max-width: 70%;

}

img{

  max-width: 100%;

  height: auto;

}

.img-right {

  max-width: 30%;

  margin-left: auto;

  flex: 30%;

  height: 100%;

}

.img-right img{

  height: 100%;

  object-fit: cover;

  object-position: right top;

}

#sec2{

  position: relative;

  height: 100vh;

}

.bg-2{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

}

.background-blue,.background-blue h2,  .background-blue p, .background-blue img{

  display: none;

  opacity: 0;

}



.sidebar ul{

  list-style: none;

}

.sidebar ul li a{ 

  font-size: 20px;

  /* color: goldenrod; */

  font-family: "Montserrat", sans-serif;

}















.str-foot{

  justify-content: space-between;

  align-items: center;

}



.Quick-link{

  display: none;

}

.copy a{

  font-family: "graphic";

  font-size: 14px;

}

.logos a img{

  transition: transform 0.3s ease;

}

.logos a img:hover{

transform: scale(1.2);

}

.footer_nav a, .foo2 ul li a{

  transition: transform 0.6s ease;

}

.foo2 ul li a:hover {

  font-weight: 800;

  color: #06b091; /* Corrected color value */

}



.navbar {

  position: fixed;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 1000; /* Ensures it's above other content */

  box-sizing: border-box;

  height: 80px;

  left: 0px;

  top: 0px;

  background: rgba(0, 0, 0, 0.2);

  border-bottom: 0.8px solid rgba(255, 255, 255, 0.5);

  font-family: "Montserrat";

}

/* .navbar ul li:nth-child(4){

  height: 80px;

} */

.logo {

  width: 100px;

  margin-left: 100px;

}

.navbar ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  align-items: center;

  height: 100%;

}



/* .navbar ul li {

  margin-left: 20px;

} */



.navbar ul li a {

  color: #fff;

  text-decoration: none;

  font-size: 18px;

  transition: color 0.3s;

  padding: 20px;

  height: 100%;

  display: block;

  transition: 0.3s ease;

}







/* Hamburger menu for mobile */

.hamburger-menu {

  display: none; /* Hide by default for desktop */

  cursor: pointer;

}

.track{

  background-color:#46AdA2;

  padding: 28px !important;

}

#hamburger {

  font-size: 20px;

  cursor: pointer;

  border: none;

  background: none;

  padding: 0;

}

#openButton{

  height: 80px;

}

.shipment-fixed-section{

  max-width: 

  598px;

  margin: auto;

  display: grid;

  grid-template-columns: 1fr;

  justify-content: center;

  align-content: center;

 

  background-color: white;

  display: none;

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: white;

  z-index: 2;

  border-radius: 10px;

  gap: 30px;

  padding-block: 40px;

  padding-left: 72px;

  padding-right: 72px;

}

.shipment-fixed-section h2{

  font-size: 40px;

  font-weight: 400;

  font-family: "Oswald";

}

.shipment-fixed-section input{

  width: 452px;

  border: 1px;

  border-radius: 45px;

  height: 56px;

  padding-left: 20px;

  border: 1px solod rgb(24, 24, 24);

}

.shipment-fixed-section input[type=text] {

  font-size: 18px;

}

.shipment-fixed-section input::placeholder{

  font-family: "Montserrat";

  font-size: 18px;

  font-weight: 400;

  padding-left: 10px;

}

.shipment-fixed-section button{

  

  background: linear-gradient(rgba(74, 174, 164, 1), rgba(57, 168, 156, 1));

  border-radius: 40px;

  width: 118px;

  border: none;

  position: absolute;

top: 1px;

right: 1px;

bottom: 1px;

font-size: 18px;

color: #fff;





}

#closeButton, #close-hamb-Button{

  top: 17px;

  position: absolute;

  right: 22px;

  cursor: pointer;

}

.shipment-fixed-section p{

  font-size: 16px;

  line-height: 19px;

  font-weight: 400;

  font-family: "Montserrat";

  color: gba(88, 89, 91, 1);

  margin-top: 20px;

}

#overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 1;

}

.input-container {

  display: inline-block;

  position: relative;

  border:  1px solid rgba(53, 120, 113, 1);

  border-radius: 45px;

  margin-top: 20px;

}



.hamburger-container{

  position: fixed;

top: 80px;

right: -700px; /* Sidebar initially hidden */

width: 300px;

height: calc(100vh - 80px);

background-color: #f4f4f4;

padding: 20px;

transition: right 0.6s;

z-index: 12;

width: 429px;

padding: 30px 50px;



}

#sidebar.active {

  right: 0;

}

.quick-h2{

  font-size: 40px;

  font-weight: 400;

  line-height: 59.28px;

  color: rgba(66, 66, 66, 1);

  font-family: "Oswald";

}

#sidebar{

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.first-hamb ul{

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 20px;

  margin-top: 30px;

}

.first-hamb ul li a{

  font-family: "Montserrat";

  font-size: 20px;

  line-height: 24.38px;

  font-weight: 500;

  gap: 20px;

  list-style: none;

  display: block;

  color: rgba(45, 45, 45, 1);

}

a{

  text-decoration: none;

}

.icons-hamb{

  display: flex;

  gap: 6px;

  margin-top: 30px;

}



.first-hamb ul li a {

  background-image: linear-gradient(

    to right,

    #54b3d6,

    #54b3d6 50%,

    #000 50%

  );

  background-size: 200% 100%;

  background-position: -100%;

  display: inline-block;

  padding: 5px 0;

  position: relative;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  transition: all 0.3s ease-in-out;

}



.first-hamb ul li a:before{

  content: '';

  background: #54b3d6;

  display: block;

  position: absolute;

  bottom: -3px;

  left: 0;

  width: 0;

  height: 3px;

  transition: all 0.3s ease-in-out;

}



.first-hamb ul li a:hover {

 background-position: 0;

}



.first-hamb ul li a:hover::before{

  width: 100%;

}



.li-common a:after, .footer_nav a::after{

  display: block;

  content: '';

  border-bottom: solid 3px #46AdA2;

  transform: scaleX(0);

  transition: transform 250ms ease-in-out;

  transform-origin: 0% 50%;

}

.li-common a:hover, .footer_nav a:hover{

  color: #46AdA2;

  font-weight: 600;

}

.li-common a:hover::after, .footer_nav a:hover::after{

  transform: scaleX(1);

}



/* .icons-hamb a img{

  transform: scale(1.2);

} */

.icons-hamb a img{

  transition: transform 0.4s ease;

}

.icons-hamb a img:hover {

  transform: scale(1.2);

}





  @media (max-width: 1350px) {

    .text4{

      padding-right: 30px;

    }

    /* .div2 {

      max-width: 540px;

    } */

    /* .image1 {

     

      width: 270px;

    }

    .div3{

      width: 270px;

    } */

    /* .div3{

   left: 324px;

    } */

  }





@media (max-width: 1250px) {

  .footer-container{

    max-width: 1030px;

  }

  .foo2, .foo1, .foo3{

    margin-top: 30px;

  }

  .footer_nav{

    width: 100%;

  }

  .container{

    max-width: 1030px;

  }

}

@media (max-width: 1200px) {

  .image1{

    width: 300px;

  }

  /* .div3{

    width: 250px;

    padding: 30px;

    left: 270px;

  } */

  #paragraph2{

font-size: 14px;

  }

  .div3{

    left: 290px;

  }

}

@media (max-width: 1030px) {

  .container2{

    flex-direction: column-reverse;

  }

  .foo2, .foo1, .foo3{

    width: 100%;

  }

  .foo2 ul {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    padding-top: 20px;

}



.footer-container{

  max-width: 770px;

}

.key-milestone-items{

  flex-direction: column;

  margin: 90px;

}

.text3{

  width: 100%;

}

.div3{

  left: 310px;

}

.container{

  max-width: 770px;

}

.key-milestone {

  flex-direction: column;

}

.our-key {

 

  overflow-x: hidden;

  padding-top: 30px;

}

.pin-spacer{

  margin: 0 !important;

}

}



@media screen and  (max-width: 880px) {

  .Quick-link{

    display: flex;

  }

  /* .footer-last{

    display: none;

  } */

  .container2{

    flex-direction: column-reverse;

  }

  .Quick-link , .foo2{

    flex-direction: column;

    width: 100%;

    align-items: flex-start;

    text-align: left;

    display: flex;

  }

  .Quick-link ul, .foo2 ul{

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    padding-top: 20px;

    

  }

  .foo3{

    max-width: unset;

  }

  .foo2{

    padding: unset;

    margin-top: 30px;

  }

  /* .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea{

       margin-bottom: 20px;

  } */

  .form{

    padding-inline: 0;

  }

  .footer-container{

    padding-inline: 42px;

  }

  .foo1{

    width: 100%;

    margin-top: 30px;

  }

  footer ul li {

  margin: 0;

  }

  .navbar ul li:nth-child(1),

  .navbar ul li:nth-child(2),

  .navbar ul li:nth-child(3),

  .navbar ul li:nth-child(4),

  .navbar ul li:nth-child(5),

  .navbar ul li:nth-child(6) {

    display: none;

  }

  .footer_nav {

    display: none;

}

/* .div2 {

  max-width: 451px;

} */

.image1{

  left: -52px;

}

.div3 {

  left: 249px;

}

.swiper1{

  display: none;

}

.hide-nav{

  display: block;

  margin: 0;

}

.first-hamb ul {

  gap: 15px;

}

.cont{

  width: 100%;

  position: relative;

}

.swiper-button-next1  {

  margin-right: 42px;

}

.swiper-button-prev1{

  margin-left: 42px;

}

.our-key-mobile .div2 {

  width: 370px;

  height: 360px;

}

.text4{

display: flex;

justify-content: center;

}

/* .text4{

  overflow-x: hidden;

} */



}





@media screen and (max-width:770px) {

  .Quick-link{

    display: flex;

  }

  /* .footer-last{

    display: none;

  } */

  .container2{

    flex-direction: column-reverse;

  }

  .Quick-link , .foo2{

    flex-direction: column;

    width: 100%;

    align-items: flex-start;

    text-align: left;

    display: flex;

  }

  .Quick-link ul, .foo2 ul{

    display: flex;

    gap: 20px;

    

  }

  .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea{

       margin-bottom: 20px;

  }

  .form {

    padding-inline: 0;

  }

  .str-foot{

    align-items: flex-start;

  }

  .first-hamb ul li a {

    padding: 2px 0;

}

/* .swiper-button-next1, .swiper-button-prev1 {



  margin: 20px;

} */

#paragraph21{

  font-size: 14px;

}

.text4 {

  width: 100%;

}

.swiper2{

  position: absolute;

  width: 350px;

  top: 0;

  height: 100%;

  left: 50%;

  transform: translateX(-50%);

}

.text4{

  height: 700px;

  padding-right: unset;

  margin-top: 96px;

}

.div3{

  position: relative;



}

.card2{

  background: none;

  border: none;

  box-shadow: none;

}

}





@media (max-width: 600px) {

  .form {

    grid-template-columns: 1fr;

  }

  .form textarea {

    grid-area: unset;

  }

  .shipment-fixed-section{

    width: 420px;

   }

   .shipment-fixed-section input{

     width: 100%;

    

   }

   .input-container{

     width: 100%;

   }

   .shipment-fixed-section{

     padding-left: 20px;

     padding-right: 20px;

   }

   .shipment-fixed-section button{

     width: 64px;

     font-size: 14px;

    

   }

   .input-container input::placeholder{

     font-size: 14px;

   }

}

@media (max-width: 500px) {

  logos {

    width: 200px;

  }

  #openButton{

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #46AdA2;

    width: 102px;

  }

  .track {

    padding: 0 !important;

    height: unset !important;

    text-align: center !important;

    font-size: 14px !important;

  }

  /* .our-key-mobile{

    margin-bottom: 0 !important;

    margin-top: 330px !important;

  } */

}



@media (max-width: 431px) {

  .logo {

    width: 91px;

    margin-left: 28px;

}

#openButton{

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #46AdA2;

}

.hamburger-container{

  width: 315px;

}

.track{

  padding: 0 ;

  height: unset ;

  text-align: center;

  font-size: 14px;

}

.shipment-fixed-section{

  width: 320px;

 }





/* .our-key-mobile .swiper{

  width:350px;

  margin-top:150px

} */

.our-key-mobile .swiper-pagination{

/* right: -85px; */

margin-left: 100px;

}

/* .shipment-fixed-section{

  width: 320px;

 } */

 .shipment-fixed-section input[type=text] {

  font-size: 16px;

}

  footer ul li{

    margin: 0;

  }

  footer ul li a {

    font-size: 14px;

    line-height: 17px;

  }

  .Quick-link ul, .foo2 ul {

    flex-wrap: wrap;

}

.Quick-link, .foo2{

  gap: 20px;

}

/* .container2{

  padding-inline: 28px;

} */

.form button {

  width: 100%;

  margin-inline: 0;

  margin-top: 20px;

}

.first-hamb ul li a{

  font-size: 16px;

}

.first-hamb ul {

  gap: 6px;

}

.md-sec3-1 h2{

  font-size: 24px;

  line-height: 38px;

}

.md-sec3-1 p{

  font-size: 14px;

  line-height: 15.4px;

}

.md-sec3-img{

  height: 250px;

}

.our-key-mobile .div2 {

  width: 260px;

  height: 243px;

  margin-top: 100px;

}

}

.dropdown-up {

  width: 54px;

  height: 54px;

  border-radius: 50%;

  background: #39a89c;

  position: relative;

  cursor: pointer;

  display: none;

  margin-top: -15px;

}

.dropdown-up i {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: white;

}

.pin-spacer{

  margin:0px !important;

}