@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

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

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

@font-face {

    font-family: "graphic";

    src: url(../font/Graphik-Font-Family/GraphikRegular.otf);

}





/*--------------------- header ------------*/





.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 {

  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: 50px;
    padding-right: 50px;
   

}



.shipment-fixed-section h2 {

    font-size: 40px;

    font-weight: 400;

    font-family: "Oswald";

}



.shipment-fixed-section input {

    width: 499px;

    border: 1px;

    border-radius: 45px;

    height: 56px;

    padding-left: 20px;

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

}



.shipment-fixed-section input::placeholder {

    font-family: "Montserrat";

    font-size: 18px;

    font-weight: 400;

    padding-left: 10px;

}



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

    font-size: 18px;

}





.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: 2;

}



.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);

}



.social-icon a i {

    color: #000;

    position: absolute;

    top: 50%;

    right: 50%;

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

    z-index: 2;

    transition: 0.3s ease;

}



.social-icon {

    display: inline-block;

    border: 2px solid rgba(204, 204, 204, 1);

    padding: 21.31px;

    border-radius: 50%;

    position: relative;

    cursor: pointer;



}



.social-icon:hover {

    background: #000;

    border: 2px solid black;

}



.social-icon:hover a i {



    color: white;



}



.hide-nav {

    display: none;

}







/* ------------------------------footer------------------------ */





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;



}

.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;

  }

  .sticky {

    gap: 20px;

    position: fixed;

    right: 0;

    bottom: 50px;

    right: 50px;

    z-index: 4;

  }



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

    .footer-container{

        max-width: 1030px;

      }

      .foo2, .foo1, .foo3{

        margin-top: 30px;

      }

      .footer_nav{

        width: 100%;

      }



  }

  

@media screen and (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;

  }

  }

  

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

    

  

    .Quick-link{

      display: flex;

    }

    .footer_nav{

      display: none;

    }

    .footer2{

      background-color: #002A32;

      padding-inline: 0;

      padding-block: 10px 30px;

    }

    .footer{

      padding-block: 49px 24px;

    }

    .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;

    }

    .hide-nav{

      display: block;

    }

    .first-hamb ul{

      gap: 15px;

    }

    

  }

  

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

   

    .footer_nav {

      flex-direction: column;

      gap: 5px;

    }

  

    .str-foot {

      flex-direction: column;

      align-items: flex-start;

      gap: 30px;

    }

   

   

    .Quick-link{

      display: flex;

    }

    .footer_nav{

      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;

    }

  

    #sidebar {

     justify-content: unset;

      gap: 40px;

    }

    .first-hamb ul li a{

      padding: 2px 0;

    }

   

  

  }

  

  @media screen and (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;

      }

   

  .first-hamb ul li a{

    font-size: 16px;

  }

  

  }

  

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

  

    .sticky {

      right: 13px;

    }

  

    /* .logos a img{

      width: 40px;

    } */

    .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;

    }

    .swiper-pagination5{

      top: 10px !important;

    }

   

  }

  

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

    .logo {

      width: 91px;

      margin-left: 28px;

  }

  

    .card-details {

      height: 366px;

    }

  

    .foo1,

    .foo2 {

      width: 100%;

      text-align: left;

    }

    .foloow-grid-items h2 {

      font-size: 14px;

      line-height: 17.07px;

      width: 68px;

    }

    .foloow-grid-items p{

      font-size: 14px;

    }

  

    .follow-slide-image img{

      width: 50px;

    }

    .swiper6 .swiper-slide-active .follow-slide-image img {

      width: 70px;

    }

    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;

  }

  

  .footer-container{

    padding-inline: 28px;

  }

  .container2{

    padding-inline: unset;

  }

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

    margin-bottom: unset;

    padding: 17px 10px;

  }

  

 

  .first-hamb ul{

    gap: 6px;

  }

  .hamburger-container{

    width: 315px;

  }

  .shipment-fixed-section{

    width: 315px;

   }

   .shipment-fixed-section input{

    height: 40px;

  }

  .shipment-fixed-section input::placeholder{

    font-size: 10px;

  }

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

    font-size: 16px; 

  }

 

  }

  

  

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

  

    .first-hamb ul{

      gap: 10px;

    }

    #sidebar{

      gap: 30px;

    }

    .hamburger-container{

      padding: 25px 24px;

    }

    .first-hamb ul {

      gap: 5px;

  }

  .icons-hamb, .first-hamb ul {

    margin-top: 20px;

  }

  #sidebar {

    gap: 25px;

  }

   

  }

  

 

  

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

   

    .icons-hamb, .first-hamb ul {

      margin-top: 16px;

    }

  }