@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=Poppins:wght@100;300;400;600;700;900&display=swap');







* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



:root {

    --acolor: rgba(255, 255, 255, 1);

    /* Define the global CSS variable */

    --pcolor: rgba(255, 255, 255, 0.7);



}



body {

    overflow-x: hidden;

}



.no-scroll {

    overflow: hidden;

}



/* .no-scroll {

    overflow: hidden !important;

} */

@font-face {

    font-family: "graphic";

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

}



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

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

    backdrop-filter: blur(10px);

}



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

}



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

}





/* _______________________________________________________________________________________________________________________ */



























.fade {

    animation-name: fade;

    animation-duration: 1.5s;

}



@keyframes fade {

    from {

        opacity: 0.4;



    }



    to {

        opacity: 1;



    }

}



.image-container {

    position: relative;

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

    overflow: hidden;

}



.image-list {

    display: none;

    /* height: 856px; */

    height: 110vh;

    position: relative;





}



.ship2 {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 2;

    width: 100%;

    height: 110vh;





}



.banner-ship,

.baneer-truck {

    width: 100%;

    height: 110vh;

}



.tab-hero {

    display: none;

}



/* .image-list img {

    width: 100%;

   height: 856px;

} */



.image-text {

    display: flex;

    flex-direction: column;

    gap: 30px;

    position: absolute;

    bottom: 12%;

    z-index: 4;

    color: var(--acolor);

    left: 10%;



}



/* .baneer-truck{

    position: absolute;

    top: 164px;

   left: 323px;

   z-index: 2;

} */

.truck2 {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 3;

    width: 100%;

    height: 110vh;

}



.scroll-text {

    position: absolute;

    top: 18%;

    right: 5%;

    font-size: 150px;

    font-weight: 500;

    line-height: 222.3px;

    font-family: "oswald";

    color:

        rgba(255, 255, 255, 1);

    z-index: 1;

    /* opacity: 0;

    transform: translateY(320px); */



}



.scroll-text2 {

    position: absolute;

    bottom: 18%;

    right: 5%;

    font-size: 150px;

    font-weight: 500;

    line-height: 222.3px;

    font-family: "oswald";

    color:

        rgba(255, 255, 255, 1);

    /* opacity: 0;

    transform: translateY(320px); */

    z-index: 2;

    /* transition: opacity 0.5s ease;  */



}



.scroll-truck-text {

    position: absolute;

    /* width: 253px; */

    top: 7%;

    right: 5%;

    font-size: 150px;

    font-weight: 500;

    font-family: "oswald";

    line-height: 177.84px;

    color:

        rgba(255, 255, 255, 1);

    z-index: 2;





    /* opacity: 0;

    transform: translateY(320px); */

}



.scroll-truck-text2 {

    position: absolute;

    bottom: 12%;

    right: 5%;

    font-size: 120px;

    font-weight: 500;

    line-height: 177.84px;

    font-family: "oswald";

    color:

        rgba(255, 255, 255, 1);



    /* opacity: 0;

    transform: translateY(320px); */

    z-index: 4;

}



/* .scroll-text.show,

.scroll-text2.show {

    opacity: 1;

    transform: translateY(0);

} */

.data-animate2 {

    display: none;

}



.flex {

    display: flex;

    align-items: center;

}



.flex2 {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    /* width: 120px; */

    text-align: center;

}



.auto-generate-text {

    gap: 70px;

    color: var(--acolor);

}



.counter {

    transition: opacity 5s, transform 5s;

    width: 129px;

    display: inline-block;

}



.caratsCounter {

    width: 129px;

    display: inline-block;

}







.auto-generate-text span {

    font-size: 3.438rem;

    line-height: 81.51px;

    font-family: "oswald";

    font-weight: 600;

    /* width: 120px; */

}



.text-h2-p h2 {

    color: var(--acolor);

}



.text-h2-p p {

    color: var(--pcolor);

    font-size: 1rem;

    padding-top: 10px;

}



.animated-section {

    position: relative;

    overflow: hidden;

    /* Set a fixed height for the section to contain the parallax effect */

    height: 1195px;

    /* Adjust as needed */



    margin: 0;

}



.parallax-background {

    /* Background image properties */

    background-image: url('../img/animated-property.webp');

    background-size: cover;

    background-position: bottom;

    /* background-attachment: fixed; */

    /* Positioning and size */

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1272px;

    /* Initial position */

    /* transform: translateY(0);

    transition: transform 0.3s ease-out; */

    /* Add smooth transition */



}



/* @keyframes parallaxScroll {

    0% {

     

        background-position: top;

    }

    50% {

       

        background-position: bottom; 

    }100% {

       

        background-position:top; 

    }

   

} */

.parallax-background.scroll-down {

    animation: bottomToTop 5s ease-in-out;



}



.parallax-background.scroll-up {

    animation: bottomToTop 5s ease-in-out;

}



@keyframes bottomToTop {

    0% {

        background-position: top;

    }



    100% {

        background-position: bottom;

    }



}



/* @keyframes topToBottom {

    0% {

        background-position: bottom;

    }

    100% {

        background-position: top;

    }

    

} */



.whoWEAre {

    display: grid;

    grid-template-columns: 1fr 1fr;

    position: absolute;

    top: 10%;

    width: 1215px;

    left: 50%;

    transform: translateX(-50%);

    gap: 80px;

}



.video-play {

    position: absolute;

    top: 50%;

    left: 50%;

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

    z-index: 4;

    cursor: pointer;

}



.first-who-img {

    width: 100%;

    height: 100%;

    border-radius: 2px;

    object-fit: cover;

    object-position: center;

}



.who-details {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.who-details img {

    width: 202px;

}



.watch-video-btn {

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

    max-width: 203px;

    display: flex;

    align-items: center;

    gap: 20px;

    border-radius: 73px;

    font-size: 18px;

    color: white;

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

    padding: 4px;

    cursor: pointer;

    margin-top: 26px;

}



.watch-video-btn img {

    width: 40px;

}



.who-details p:nth-child(2) {

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

    font-weight: 400;

    font-size: 20px;

    line-height: 24.38px;

    text-align: justify;

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

    padding-top: 26px;

    /* Example color */

}



.who-details p:nth-child(3) {

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

    font-weight: 400;

    font-size: 18px;

    /* Example font size */

    line-height: 21.94px;

    /* Example line height */

    text-align: justify;

    color:

        var(--acolor);

    /* Example color */

}



.route-container {

    position: relative;

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

    overflow: hidden;

}



.route-container img {

    width: 100%;



}



.map1 {

    object-fit: cover;

}



.map2 {

    display: none;

}



svg:hover {

    fill: #141414;

}



/* .child-grid img:hover{

    filter: hue-rotate(90deg);

} */



.routes-content {

    position: absolute;

    display: grid;

    /* grid-template-columns: 1fr 1fr; */

    top: 42%;

    width: 930px;

    transform: translateX(-50%);

    left: 50%;

    gap: 20px;

}



.md-route-content {

    display: none;

    top: 8%;

    position: absolute;

    transform: translateX(-50%);

    left: 50%;

}



.card-last {



    border-radius: 10px;

    display: flex;

    flex-direction: column;

}



.text-route {

    position: absolute;

    top: 13%;

    left: 50%;

    transform: translateX(-50%);



}



.text-route h2 {

    font-size: 4rem;

    line-height:

        79.24px;

    font-weight: 600;

    color:

        rgba(53, 120, 113, 1);

}



.text-route h2:first-child {

    transform: translateX(-400%);

    transition: transform 0.9s ease;

}



.text-route h2:last-child {

    transform: translateX(400%);

    transition: transform 0.9s ease;

}



.route-details,

.route-details1,

.card-details {

    display: flex;

    flex-direction: column;

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

    /* align-items: center; */

    gap: 20px;



    background: linear-gradient(to right, rgba(188, 151, 86, 1), rgba(211, 162, 85, 1), rgba(183, 140, 82, 1), rgba(201, 153, 89, 1), rgba(217, 168, 103, 1));

    color: var(--acolor);

    padding: 40px;

    width: 100%;

    height: 320px;

    border-radius: 4px;

}



.swiper1 {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    max-width: 600px;



}



.route-details p,

.route-details1 p,

.card-details p {

    font-size: 14px;

    text-align: justify;

    line-height: 16.94px;

    font-family: "inter";

}



.route-details1 {

    opacity: 0;

}



.route-details h2,

.route-details1 h2,

.card-details h2 {

    font-size: 24px;

    line-height: 35.57px;

    font-weight: 400;

    font-family: "Oswald";

}



.route-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1;

    display: flex;

    gap: 20px;

    height: 320px;



}



.route-texts {

    display: flex;

    align-items: center;

    width: 100%;

    position: relative;

    z-index: 2;

    gap: 20px;

}



.route-img1,

.route-img2 {

    width: 100%;

}



.route-img1 {

    /* Your existing styles */

    transition: transform 1s ease, opacity 1s ease;

    /* Add transition property */

}



.route-img2 {

    transition: 1s ease-in;

}



.route-details1 {

    transition: transform 1s ease, opacity 1s ease;

    /* Add transition property */

}





/*------------------------------ slider container css--------------------------------- */



.slider-container {

    background-color: rgba(53, 120, 113, 1);





}



.what-h2 {

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

    font-size: 55px;

    line-height: 28px;

    font-weight: 500;

    color: var(--acolor);

    grid-column: 1 / 4;

}



.what-h2 span {

    color:

        var(--acolor);

    opacity: 0.2;

}



.arrows-section {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

}



.arrows {



    position: relative;

}



.arrows img:first-child {

    left: 54%;

}





.arrows img {

    width: 64px;

}



.md-arrows {

    display: none;

}



.know-more-btn {

    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;

}



.sec-container {

    max-width: 1200px;

    margin: auto;

    padding-top: 10%;

    padding-bottom: 4%;

}



.md-wrapper img {

    width: 100%;

}



.swiper {

    width: 100%;

}



.mySwiper {

    width: 100%;

    height: 300px;

    margin-left: auto;

    margin-right: auto;

}



.card {

    position: relative;

    overflow-y: hidden;

    overflow-x: hidden;

    border-radius: 5px;



    a {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        z-index: 1;



        &:hover,

        &:focus {

            ~.item__overlay {

                transform: translate3d(0, 0, 0);

                justify-content: space-evenly;

            }

        }

    }

}



.railway {

    margin: 0;

    display: block;

    font-size: 20px;

    font-weight: 600;

    line-height: 24.4px;

    color:

        var(--acolor);

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



    padding-block: 30px;

    text-align: center;

    width: 100%;

    /* position: absolute;

    bottom: 0; */

}



.item__overlay {

    display: flex;

    flex-direction: column;



    height: 100%;

    position: absolute;

    width: 100%;

    top: 0;

    transition: transform 300ms;

    backdrop-filter: blur(5.800000190734863px);

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

    align-items: center;

    transform: translate3d(0, calc(100% - 5.5rem), 0);

}









.item__body {

    /* flex-grow: 1; */

    padding: 1rem;



    p {

        margin: 0;

    }

}



.item__body p {

    font-size: 16px;

    font-weight: 400;

    line-height: 19.5px;

    color: var(--acolor);

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

    text-align: justify;

}



.swiper-button-disabled {

    opacity: 0.4;

}





/* -------------------who container---------------- */



.who-container {

    position: relative;

}



.who-h2 {

    position: absolute;

    top: 17%;

    max-width: 1235px;

    width: 100%;

    /* margin: auto; */

    left: 50%;

    transform: translateX(-50%);

}



.banner-image {

    width: 100%;

    height: 892px;

    object-fit: cover;

    object-position: center;

}



.banner-image2 {

    display: none;

    width: 100%;

}



.grid-items {

    display: grid;

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

    position: absolute;

    top: 27%;

    left: 50%;

    transform: translate(-50%);

    width: 100%;

    max-width: 1216px;



}



.mySwiper .swiper-wrapper .swiper-slide {

    margin: unset !important;

    border-right: 1px solid rgb(255 255 255 / 16%);

}



.child-grid {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 20px;



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

    /* border-right: 1px solid rgb(255 255 255 / 16%); */

    cursor: pointer;

    padding: 23px;

}



.child-grid:hover h2 {

    color: rgba(71, 173, 162, 1);

}



.child-grid:hover svg path {

    fill: rgba(71, 173, 162, 1);

}



.child-grid svg {

    transition: transform 0.3s ease;

}



.child-grid:hover svg {

    transform: scaleX(-1);

    color: #357871;

}



.child-grid h2 {

    font-size: 20px;

    font-weight: 600;

    line-height: 24.4px;

    color: var(--acolor);

    text-align: center;



}



.swiper-pagination5 {

    opacity: 0;

}



.container {

    position: absolute;

    display: flex;

    margin-top: 77px;

    width: 100%;

    max-width: 1116px;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    bottom: -11%;

    left: 50%;

    transform: translateX(-50%);

}



.content {

    border-radius: 10px;

    background-color: #fff;

    align-self: stretch;

    padding-right: 55px;

}



.left-column {

    display: flex;

    flex-direction: column;

    line-height: normal;

    width: 50%;

    margin-left: 0px;

}



.section-1 {

    gap: 20px;

    display: flex;

}



.right-column {

    display: flex;

    flex-direction: column;

    line-height: normal;

    width: 50%;

    margin-left: 20px;

}



.section-2 {

    display: flex;

    flex-direction: column;

    align-self: stretch;

    font-weight: 500;

    margin: auto 0;

    gap: 27px;

}



.heading {



    letter-spacing: 0.8px;

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

    font-size: 32px;

    line-height: 50px;

    font-weight: 500;

    letter-spacing: 0.8px;

}



.description {

    font-size: 16.61px;

    line-height: 18.27px;

    text-align: justify;

    font-family: 'Graphik Trial', sans-serif;

    padding-top: 29px;

}



.more {

    display: none;

}



.learn-more {



    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;

    cursor: pointer;

}



/* .learn-more{

    border-radius: 73px;

    font-size: 14px;

    font-weight: 500;

    line-height: 17.07px;

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

  );

  color: 

  var(--acolor);

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

  } */



/* --------------------our service container--------- */





.our-service-container {

    margin-top: 14%;

}



.div-106 {

    align-self: center;

    display: flex;

    margin-top: 356px;

    width: 100%;

    max-width: 1235px;

    flex-direction: column;

    padding: 0 20px;

    margin: auto;

    overflow: hidden;

    padding-top: 82px;

}





.div-107 {

    color: #141414;

    letter-spacing: 0.8px;

    font: 500 55px/92% Oswald, sans-serif;

}



.reason-h2 {



    max-width: 1235px;

    margin: auto;

}



.div-108 {

    margin-top: 104px;

}



.div-109 {

    gap: 20px;

    display: flex;

}



.column-9 {

    display: flex;

    flex-direction: column;

    line-height: normal;

    width: 33%;

    margin-left: 0px;

}



.div-110 {

    display: flex;

    flex-grow: 1;

    flex-direction: column;

}



.reason-container-grid {

    display: grid;

    grid-template-columns: auto auto auto;

    justify-content: center;

    align-content: start;

    row-gap: 25px;

    margin-top: 120px;

}



.div-111 {

    box-shadow: 0px 11px 43.4px 0px rgba(0, 0, 0, 0.25);

    background-color: #fff;

    display: flex;

    flex-direction: column;

    padding: 50px 40px;

}



.div-112 {

    color: #2d2d2d;

    text-transform: capitalize;

    margin-top: 37px;

    font: 800 24px/120% Manrope, sans-serif;

}



.div-113 {

    color: rgba(99, 99, 99, 0.6);

    margin: 26px 0 19px;

    font: 500 16px/29px Manrope, sans-serif;

}



.div-114 {

    background-color: #347770;

    display: flex;

    /* margin-top: 30px; */

    flex-direction: column;

    padding: 50px 40px;

}



.div-115 {

    color: #fff;

    text-transform: capitalize;

    margin-top: 36px;

    font: 800 24px/120% Manrope, sans-serif;

}



.div-116 {

    color: #bbb;

    margin: 27px 0 18px;

    font: 500 16px/29px Manrope, sans-serif;

}



.column-10 {

    /* display: flex;

    flex-direction: column;

    line-height: normal;

    width: 33%;

    margin-left: 20px; */

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



    transition: transform 0.9s ease;

    position: relative;

    right: 37px;





}



.column-10 img {

    height: 100%;

}



/* .img-28{

    

} */



.column-11 {

    display: flex;

    flex-direction: column;

    line-height: normal;

    width: 33%;

    margin-left: 20px;

}



.div-117 {

    display: flex;

    flex-grow: 1;

    flex-direction: column;

}



.div-118 {

    background-color: #357871;

    display: flex;

    flex-direction: column;

    padding: 50px 40px;

}



.div-119 {

    color: #fff;

    text-transform: capitalize;

    margin-top: 37px;

    font: 800 24px/120% Manrope, sans-serif;

}



.div-120 {

    color: #bbb;

    margin: 27px 0 19px;

    font: 500 16px/29px Manrope, sans-serif;

}



.div-121 {

    background-color: #ececec;

    display: flex;

    margin-top: 30px;

    flex-direction: column;

    padding: 50px 40px;

}



.div-122 {

    color: #2d2d2d;

    text-transform: capitalize;

    margin-top: 36px;

    font: 800 24px/120% Manrope, sans-serif;

}



.div-123 {

    color: rgba(99, 99, 99, 0.6);

    margin: 28px 0 18px;

    font: 500 16px/29px Manrope, sans-serif;

}



.img-26,

.img-27,

.img-29,

.img-30 {

    aspect-ratio: 1;

    object-fit: auto;

    object-position: center;

    width: 70px;

    margin-top: 10px;

}



.md-services-reason {

    display: none;



}



/* -------------------------------follow container------------------------------ */





.md-follow-process2 {

    display: none !important;

}



.overflow-hide-sec {

    overflow: hidden;

}



.follow-great-container {

    max-width: 1235px;

    margin: auto;

    margin-top: 10%;

}



.follow-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 8%;

    gap: 141px;

    position: relative;

    /* bottom: -191px; */

    /* opacity: 0;

    transform: translateY(50%);

    transition: opacity 0.5s ease, transform 0.5s ease; */

}





/* When the fade-in class is applied, change opacity to 1 and transform to -20% */

/* .fade-in.active {

    opacity: 1;

    transform: translateY(20%);

}

.fade-in {

    opacity: 1;

    transition: opacity 0.5s ease-in-out;

} */



/* .foloow-grid-items {

    transform: translateY(50%);

  

    opacity: 0;

 

    transition: opacity 0.5s ease, transform 0.5s ease;

} */

/* Make elements visible when opacity changes */

.foloow-grid-items.active {

    opacity: 1;

    transform: translateY(0);

}



.foloow-grid-items {

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-items: flex-start;

}



/* .follow-slide-image{

    position: relative;

}

.follow-slide-image img:nth-child(2){

    position: absolute;

    left: 0;

    top: 5px;

    z-index: -1;

} */



.foloow-grid-items h1 {



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

    font-weight: 400;

    font-size: 20px;

    line-height: 36px;

    /* Set line-height same as height */

    letter-spacing: 0.8px;

    text-align: center;

    color: var(--acolor);

    background: rgba(52, 119, 112, 1);

    border-radius: 50%;

    width: 36px;

    height: 36px;

    margin: 0;

    /* Remove default margin */

    padding: 0;

    /* Remove default padding */





}



.foloow-grid-items h2 {

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

    font-size: 24px;

    font-weight: 600;

    line-height: 29.13px;

    width: 103px;

    max-width: 100%;

}



.foloow-grid-items p {

    font-family: 'Graphik Trial', sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 17.6px;

}



/* --------------------line-container -------------------*/

.auto-line {

    display: flex;

    margin-top: 23px;

    width: 100%;

    justify-content: space-between;

    gap: 0px;

    padding-bottom: 53px;

    flex-direction: column;



}



.div-155 {

    color: #141414;

    /* opacity: 0.4; */

    text-align: center;

    letter-spacing: 0.8px;

    align-self: center;

    /* margin-top: 56px; */

    line-height: 62px;

    width: 260px;

    font: 500 40px/62px Oswald, sans-serif;

}



.div-156 {

    border-radius: 73px;

    background: linear-gradient(180deg, #4aaea4 0%, #39a89c 100%);

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

    align-self: center;

    margin-top: 25px;

    justify-content: center;

    color: #fff;

    white-space: nowrap;

    padding: 19px 54px;

    font: 500 18px Montserrat, sans-serif;

    box-shadow: 0 16px 9px rgba(0, 0, 0, 0.1);

}



#bgImg {

    background-image: url("../img/line-long-way.png");

    background-repeat: repeat-x;

    width: 100%;

    height: 80px;

    display: inline;

    position: relative;

    top: -48px;

    z-index: -1;

    /* animation: bgScrollLeft 0.5s linear infinite; */

}



/* @keyframes bgScrollLeft {

    from {

        background-position: 0 0;

    }



    to {

        background-position: -120px 0;

    }

} */



/*------------------- sticky-container----------------- */

.sticky {

    gap: 20px;

    position: fixed;

    right: 0;

    bottom: 30px;

    right: 42px;

    z-index: 4;

}



.qoute {

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



    border-radius: 90px;

    background: white;

    color: rgba(53, 120, 113, 1);

    font-size: 20px;

    font-weight: 700;

    line-height: 25.6px;

    text-align: center;

    padding: 12px;

}



.dropdown-up {



    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: #39a89c;

    position: relative;

    cursor: pointer;

    display: none;



}



.dropdown-up i {

    position: absolute;

    top: 50%;

    left: 50%;

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

    color: white;

}









.big-slide {

    transform: scale(1.3) translateY(30px);

}



.small-slide {

    transform: scale(0.8);

}



.small-slide p {

    display: none;

}



.big-slide p {

    display: block;

}









/* _______________________________________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,

.form select {

    /* 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;



}



.shipment-fixed-section {

    width: 506px;

    background-color: rgb(0 0 0 / 67%);

    border-radius: 25px;

    /* position: relative; */

    padding-inline: 40px;

    padding-block: 3%;

}



.form-fields {

    display: flex;

    flex-direction: column;

    gap: 20px;

    /* width: 45%; */

    margin: 2%;

}



.form-fields label {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 20px;

    color: #D3D3D3;

}



.form-fields select,

.form-fields input[type=text],

.form-fields input[type=number],

.form-fields textarea {

    background: rgba(255, 255, 255, 0.05);

    border-radius: 8px;

    height: 55px;

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    color: #D3D3D3;

    opacity: 0.5;

}



.form-fields .form-button {

    color: #fff;

    height: 44px;

    position: relative;

    width: 100%;

    margin-top: 10px;

}



hr {

    border: none;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    margin-top: 20px;

    color: white;

    margin-bottom: 40px;

}





/* Second Popup Styles */

.details-popup-section {

    display: none;

    position: fixed;

    z-index: 3;

    left: 50%;

    top: 60%;

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

    /* width: 750px; */

    color: #fff;

    padding: 10px;

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

    backdrop-filter: blur(5px);

    border-radius: 25px;

}



#detailsOverlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

    z-index: 2;

}



.timeline-container {

    width: 85%;

    margin: 10px auto;

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.timeline {

    width: 75%;

    height: 4px;

    /* background-color: #ddd; */

    position: absolute;

    top: 15%;

    left: 12%;

    z-index: 1;

    background: rgba(93, 93, 93, 1);

}



.timeline-step {

    position: relative;

    text-align: center;

    width: 25%;

}



.circle {

    width: 30px;

    height: 30px;

    /* background-color: #ddd; */

    border-radius: 50%;

    position: relative;

    margin: 0 auto;

    line-height: 30px;

    font-size: 16px;

    color: white;

    font-weight: bold;

    z-index: 2;

    margin-bottom: 10px;

    background: rgba(93, 93, 93, 1);



}



.circle.active {

    background-color: #46ada2;

}



.circle:before {

    content: attr(data-step);

    display: block;

    text-align: center;

}



.step-label {

    font-family: 'Poppins';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 21px;

    letter-spacing: 0.02em;

    color: #BABABA;

}



.step-label1 {

    font-family: 'Manrope';

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    letter-spacing: -0.01em;

    color: #FFFFFF;

}



.step-label.active {

    font-weight: bold;

    color: #46ada2;

}



.timeline-progress {

    height: 4px;

    background-color: #46ada2;

    position: absolute;

    top: 15%;

    left: 12%;

    width: 50%;

    z-index: 1;

    transition: width 0.4s ease;

}



.details-content span {

    font-family: 'Manrope';

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 24px;

    letter-spacing: -0.01em;

    color: #FFFFFF;

    opacity: 0.6;

}



.details-content p {

    text-align: left;

    padding: 4px;

    font-family: 'Manrope';

    font-style: normal;

    font-weight: 600;

    font-size: 15px;

    line-height: 24px;

    letter-spacing: -0.01em;

    color: #FFFFFF;

}



.details-content a {

    color: #46ada2;

}



table {

    width: 100%;

    border-collapse: collapse;

}



th {

    padding: 10px;

    text-align: left;

    font-family: 'Manrope';

    font-style: normal;

    font-weight: 600;

    font-size: 16px;

    line-height: 24px;

    letter-spacing: -0.01em;

    color: #FFFFFF;

    opacity: 0.6;

}



td {

    padding: 10px;

    text-align: left;

    background-color: rgba(255, 255, 255, 0.05);

    font-family: 'Poppins';

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 24px;

    letter-spacing: -0.01em;

    color: #FFFFFF;

}



tr {

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



/* Media Query for Mobile Devices */

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

    .details-popup-section {

        width: 300px;

    }

}



/* Heading 2 →  Reasons why to choose */



.details-popup-section h2 {

    font-family: 'Oswald';

    font-style: normal;

    font-weight: 500;

    font-size: 34px;

    line-height: 67px;

    align-items: center;

    text-align: center;

    letter-spacing: 0.8px;

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

}







.select-container {

    position: relative;

}



.select-container select {

    width: 100%;

    padding: 10px;

    padding-right: 40px;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    font-size: 16px;

}



.select-container::after {

    content: '';

    position: absolute;

    top: 50%;

    right: 10px;

    transform: translateY(-50%);

    width: 30px;

    height: 19px;

    background-image: url('../img/down1.png');

    background-size: contain;

    background-repeat: no-repeat;

    pointer-events: none;

}







@media (min-width: 1024px) {

    .follow-grid {

        gap: 50px;

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

    }



    .foloow-grid-items h2 {

        height: 70px;

        display: flex;

        align-items: center;

    }



    .foloow-grid-items p {

        height: 260px;

    }



    .div-113,

    .div-116,

    .div-120,

    .div-123 {

        max-width: 300px;

    }

}





/* Basic Styling */

.order-container {

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    flex-wrap: wrap; /* Ensures wrapping on smaller screens */

    margin: 20px auto;

}



.order-section {

    text-align: center;

    margin: 20px;

}





.link {

    color: #fff;

}





/* Responsive Layout for smaller screens */

@media (max-width: 768px) {

    .order-container {

        flex-direction: column; /* Stack the sections vertically */

    }



    .order-section {

        margin: 10px 0;

    }

}



.sticky {

    bottom:80px;

}

.lr_not_found{
  text-align: center;
}

.lr_not_found small{
  color: #fff;
}