@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.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    overflow-x: hidden;

}



a {

    text-decoration: none;

}



.no-scroll {

    overflow: hidden;

}



@font-face {

    font-family: "graphic";

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

}



/* .no-scroll {

    overflow: hidden;

} */

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



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

}







/* --------------------------------- main-css------------------- */



.main-bannner-section {

    position: relative;

}



.banner-img {

    width: 100%;

    display: block;

}



.md-next-img,

.md-banner-1 {

    display: none;

}



.banner-img-float {

    position: relative;

    z-index: -1;

    top: -90px;

    width: 100%;

    display: none;

}



.image-overlay {



    height: 260px;

    width: 100%;

    background-color: #090b08;

}



.swiper-pagination .swiper-pagination-bullet {

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

}



.swiper-pagination {

    width: auto !important;

    left: 50% !important;

    transform: translate(-50%, -35%) !important;

    top: 50% !important;

}



.manrope-font {

    font-size: 14px;

    line-height: 24px;

    font-weight: 500;

    font-family: "Manrope";

    color:

        #FFFFFF;

}



.monserrat-font {

    font-size: 16px;

    line-height: 19.5px;

    font-weight: 400;

    font-family: "Montserrat";

    color:

        rgba(255, 255, 255, 0.8);

}



.swiper-slide img {

    width: 100%;

    height: 95vh;

}



.content-items h2 {

    font-size: 55px;

    line-height: 67px;

    font-weight: 500;

    font-family: "Oswald";

    color:

        #FFFFFF;

}



.service-container {

    max-width: 1210px;

    margin: auto;

}



.main-content {

    position: absolute;

    bottom: 6%;

    width: 100%;

    z-index: 1;

}



.paginate {

    position: relative;

    width: 20%;

}



.paginate img {

    width: 51px;

    height: 51px;

}



.content-items {

    display: flex;

    justify-content: space-between;

}



.freight-item {

    border-radius: 10px;

    display: flex;

    gap: 30px;

    background:

        rgba(255, 255, 255, 0.04);

    color:

        #FFFFFF;



}



.freight-item h2 {

    font-size: 24px;

    font-weight: 600;

    line-height: 28.8px;



    font-family: "Montserrat";

}



.freight-item img {

    width: 203px;

    height: 157px;

    margin: 5px;

    object-fit: cover;

    object-position: center;

    border-radius: 10px;

}



.service-button {



    font-weight: 500;

    font-family: "Montserrat";

    color:

        #FFFFFF;

    background: linear-gradient(#4AAEA4, #39A89C);

    border-radius: 73px;



    text-align: center;

    border: none;

    cursor: pointer;





}



.freight-item button {

    width: 122px;

    padding-block: 5px;

    font-size: 14px;

    line-height: 17.07px;

}



.freight-item div {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;



    padding-right: 30px;

}



.scroll-slide {

    margin-top: 30px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    cursor: pointer;

    /* padding-inline: 8%; */

    /* overflow-x: auto;

    overflow-y: hidden;

    flex-wrap: nowrap; */



    /* -ms-overflow-style: none;

    scrollbar-width: none; */

}



.air-fgt-service-section {

    position: relative;

    overflow: hidden;

}



.air-freight-content {



    position: absolute;

    left: -28.49px;

    top: 30%;

    transition: transform 0.5s ease-in-out;

}



.railway-freight-content {

    position: absolute;

    right: -28.49px;

    top: 30%;

    transition: transform 0.5s ease-in-out;

}



.air-fright-form {

    max-width: 600px;

    bottom: 0;



    right: -60%;

    transform: translateX(110%);

    transition: transform 0.5s ease-in-out;



}



.railway-fright-form {



    max-width: 600px;

    bottom: 0;

    top: 50%;

    left: -60%;

    transform: translateX(-310%);

    transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;

}



.freight-form {



    position: absolute;



}



.service-form {

    width: 100%;



    background-color:

        rgba(0, 0, 0, 0.6);

    padding-inline: 30px;

    padding-block: 30px;

    border-radius: 25px;

    border: none;

    position: relative;

}



.freight-form h2 {

    font-family: "oswald";

    font-size: 30px;

    line-height: 47px;

    font-weight: 400;

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

}



.freight-form .form-item {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    padding-top: 50px;

}



.freight-form .form-item input {

    height: 51px;





}



.freight-form .form-item input,

.freight-form .form-item textarea {

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

    border-radius: 8px;

    outline: none;

    border: none;

    font-family: "Montserrat";

    font-weight: 500;

    font-size: 16px;

    line-height: 24px;

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

    padding-inline: 20px;

    width: 100%;

}



.freight-form .form-item textarea {

    grid-column: 1 / 3;

    height: 100px;

    padding-top: 20px;

}



.freight-form .form-item input::placeholder,

.freight-form .form-item textarea::placeholder {

    color: rgb(167, 165, 165);

}



.submit-btn {

    font-weight: 500;

    font-family: "Montserrat";

    color: #FFFFFF;

    background: linear-gradient(#4AAEA4, #39A89C);

    border-radius: 73px;

    text-align: center;

    border: none;

    cursor: pointer;

    font-size: 18px;

    line-height: 21.94px;

    width: 203px;

    padding-block: 15px;

    grid-column: 1 / 3;

    margin: auto;

}



.air-freight-content.slide-out {

    transform: translateX(-110%);

}



.warehouse-container.slide-out {

    transform: translateX(-300%);



}



.warehouse-container.slide-in {

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

    top: 50%;

    left: 50%;

    rotate: unset;

    bottom: unset;

}



.air-fright-form.slide-in {

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

    top: 50%;

    left: 50%;

    rotate: unset;

    bottom: unset; */

    animation: AniLTR 0.8s ease-in-out forwards;

}



@keyframes AniLTR {

    0% {

        right: 0;

    }



    90% {

        right: 70%;

        top: 50%;

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

        bottom: unset;

    }



    100% {

        right: 50%;

        top: 50%;

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

        bottom: unset;

    }

}



.air-fright-form.slide-out {

    animation: AniLTR2 0.9s ease-in-out forwards;

}



@keyframes AniLTR2 {

    0% {

        right: 50%;

        top: 50%;

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

        bottom: unset;



    }



    100% {

        right: -60%;

        top: 80%;

        transform: translateX(110%);

        bottom: 0;

        rotate: 6.4deg;

    }



}



.railway-freight-content.slide-out-next {

    transform: translateX(100%);

}



/* .railway-fright-form.slide-in-next {

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

    top: 50%;

    left: 50%;

    rotate: unset;

    bottom: unset;

} */

.railway-fright-form.slide-in-next {

    animation: leftTright 0.8s ease-in-out forwards;

}



@keyframes leftTright {

    0% {

        left: 0;

    }



    90% {

        left: 70%;

        top: 50%;

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

        bottom: unset;

    }



    100% {

        left: 50%;





        top: 50%;

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

        bottom: unset;

    }

}



.railway-fright-form.slide-out-next {

    animation: rightToLeft 0.9s ease-in-out forwards;

}



@keyframes rightToLeft {

    0% {

        left: 50%;

        top: 50%;

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

        bottom: unset;



    }



    100% {

        left: -60%;

        top: 80%;

        transform: translateX(-310%);

        bottom: 0;

        rotate: -2.4deg;

    }



}



.form-round {

    width: 100%;

    height: 100%;

    rotate: -3.46deg;

    border: 1px solid rgba(71, 173, 162, 1);

    position: absolute;

    border-radius: 50px;

    z-index: -1;

    top: -10px;

}





.popup-cross-icon {

    position: absolute;

    top: 30px;

    right: 30px;

}



.popup-cross-icon i {

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

    font-size: 25px;

    cursor: pointer;

}



.air-freight-left {

    /* position: absolute;

    left: -28.49px;

    top: 30%; */

    border-radius: 50px;

    rotate: 2.26deg;

    display: flex;

    flex-direction: column;

    gap: 20px;

    background:

        rgba(0, 0, 0, 0.5);

    box-shadow: 0 12px 40.099998474121094px rgba(0, 0, 0, 0.05);



    width: 796px;

    height: 466px;

    position: relative;

    z-index: 2;

}



.air-freight-right {

    position: relative;

    /* right: -28.49px;

    top: 30%; */

    border-radius: 50px;

    rotate: 2.26deg;

    display: flex;

    flex-direction: column;

    gap: 20px;

    background:

        rgba(0, 0, 0, 0.6);

    box-shadow: 0 12px 40.099998474121094px rgba(0, 0, 0, 0.05);



    width: 796px;

    height: 466px;



    z-index: 2;

}



.air-freight-left h2 {

    font-size: 32px;

    font-weight: 500;

    line-height: 67px;

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

    letter-spacing: 0.8px;

    font-family: "Oswald";

}



.air-freight-right h2,

.warehouse-section h2 {

    font-size: 32px;

    font-weight: 500;

    line-height: 67px;

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

    letter-spacing: 0.8px;

    font-family: "Oswald";

}



.btns-wrapper {

    display: flex;

    gap: 20px;

    margin-top: 34px;

}



.request-btn {

    font-size: 18px;

    line-height: 21.94px;

    width: 203px;

    padding-block: 11px;

}



.Download-brochure {

    /* background-color: #FFFFFF; */

    font-size: 14px;

    line-height: 17.07px;

    display: flex;

    gap: 8px;

    border-radius: 73px;

    font-family: "Montserrat";

    align-items: center;

    justify-content: center;

    width: 231px;

    cursor: pointer;

    height: 50px;

}



.freight-brochure {

    border: 1px solid #47ADA2;

    color:

        #357871;

}



.big-image {

    display: block;

    width: 100%;

}



.ring-image-left {

    position: absolute;

    top: 3%;

    left: 0;

    z-index: 1;

    width: 918.23px;

    height: 445.94px;

    border-radius: 76px;

    left: -117px;

    rotate: -3.46deg;

    border: 1px solid rgba(71, 173, 162, 1);

}



.ring-image-right {

    position: absolute;

    top: 3%;

    right: 0;

    z-index: 1;

    width: 918.23px;

    height: 445.94px;

    border-radius: 76px;

    right: -117px;

    rotate: -3.46deg;

    border: 1px solid rgba(71, 173, 162, 1);

}





.freight-wrapper {

    max-width: 542px;

    margin: auto;

    rotate: -2.26deg;

}



.railway-fgt-service-section,

.sea-fgt-service-section,

.road-fgt-service-section {

    /* margin-top: 12%; */

    position: relative;

    overflow: hidden;

}





.big-image2 {

    display: block;

    width: 100%;

}





.warehouse-section {



    position: relative;

    height: 1021px;

    overflow: hidden;

}



.warehouse-img {

    width: 100%;

    height: 100%;

}



.warehouse-container {

    position: absolute;

    max-width: 713px;

    left: 50%;

    top: 50%;

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

    transition: transform 0.5s ease-in-out;



}



.warehouse-service {

    border-radius: 30px;

    border: none;



    max-width: 713px;



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

    padding-inline: 12%;

    padding-block: 8%;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 20px;

    position: relative;

}



.warehouse-round {

    width: 100%;

    height: 100%;

    border: 1px solid rgba(255, 255, 255, 1);

    rotate:

        6.34deg;

    border-radius: 30px;

    position: absolute;

}



.warehouse-brouchre {

    border: 1px solid rgba(255, 255, 255, 1);

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

}



.warehouse-button {

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

    font-weight: 500;

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

    font-family: "Montserrat";

    border-radius: 73px;

    text-align: center;

    border: none;

    cursor: pointer;

}



.warehouse-ring {

    position: absolute;

    left: 50%;

    top: 50%;

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

    z-index: 1;

}



.text-center {

    text-align: center;

}



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





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;

}



.sticky {

    bottom:80px;

  }

  .lr_not_found{
  text-align: center;
}

.lr_not_found small{
  color: #000;
}