:root {
    --cool-gray: #D7DDE4;
    --ice-blue: #E3F0FC;
    --soft-blue:#C6E1F8;
    --sky-blue: #0DA8E9;
    --deep-blue: #004564;
    --crimson-red: #B90A2E;
    --blush-pink: #FADBD9;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-Regular.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-Light.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-SemiBold.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-Bold.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-ExtraBold.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-ExtraBlack.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-ExtraBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-Thin.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yekan Bakh';
    src: url('../font/YekanBakhFaNum-Black.woff2') format('woff2'),
    url('../font/YekanBakhFaNum-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


body { font-family: "Yekan Bakh", Arial, sans-serif !important;}
main{max-width: 100%; overflow-x: hidden; box-sizing: border-box;}
h1{font-size: 2.2rem !important; font-weight: 800; margin-bottom: 1rem;}
h2{font-size: 2.1rem !important; font-weight: 700;}
h3{font-size: 1.3rem !important; font-weight: 600;}
p{font-size: 0.895rem !important; font-weight: 400; line-height: 1.9; margin-bottom: 0}
a{text-decoration: none;}

.navbar .padding-right{padding-right: 25px;}
.navbar .auth{background: var(--crimson-red); color: #ffffff; border-radius: 100px; padding: 10px 25px; z-index: 1;}
.navbar .auth:active{outline: none; border: none;}
.navbar .auth:hover{background:#a30929;}
.navbar .navbar-nav{display: flex; gap: 20px;}
.navbar .navbar-collapse { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding-left: 14px;}
.navbar .navbar-nav .nav-link{color: var(--deep-blue);}
.navbar .navbar-nav .nav-link:hover{color: var(--sky-blue);}
.navbar .language-switcher{font-family: sans-serif;}
.navbar .language-switcher, a{color: var(--deep-blue);}
.navbar .language-switcher a:hover{color: var(--crimson-red);}
.navbar .language-switcher .active{color: var(--crimson-red);}
.navbar-expand-lg .navbar-nav .dropdown-menu {text-align: right; background: #fff; box-shadow: 0 15px 80px rgba(56, 93, 165, 0.1), 0 15px 60px rgba(0, 0, 0, 0.05); border: none; border-radius: 5px; padding: 25px 20px; margin-top: 25px; opacity: 0; transform: translateY(10px); visibility: hidden; transition: all 0.3s ease; display: block !important; pointer-events: none; font-size: 14px; line-height: 2;}
.navbar-expand-lg .navbar-nav .dropdown-menu.show { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item { color: var(--deep-blue); transition: background-color 0.3s ease; }
.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:hover { background: var(--ice-blue); }

.mobile-slide-menu.open { right: 0; }
.mobile-menu-overlay { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1040; display: none; }
.mobile-menu-overlay.show { display: block; }
.mobile-menu-header{direction: ltr; border-bottom: 1px solid var(--cool-gray);}
.mobile-menu-header button{display: flex ; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--ice-blue); color: var(--deep-blue); font-size: 1.4rem;}
.mobile-slide-menu { position: fixed; top: 0; right: -280px; width: 260px; height: 100%; background: #fff; z-index: 1050; overflow-y: auto; transition: right 0.3s ease-in-out; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); }
.mobile-slide-menu .nav-link{color: var(--deep-blue); padding: 10px 0;}
.servic-item {padding-right: 5px;}
.btn-close i{position: relative; top: 3px;}

.custom-underline { position: relative; width: 84.81%; height: 5px; background-color: var(--sky-blue); margin-right: auto; }
.custom-underline::before { content: ""; position: absolute; top: -80px; left: 0; width: 5px; height: 85px; background-color: var(--sky-blue); }
.custom-underline .curve-right{position: absolute; top: -43px; left: -1px; width: 50px; height: 50px; background: #ffffff;}
.custom-underline .curve-right .boarder{position: relative; bottom: 2px; left: 1px; width: 50px; height: 50px; background: var(--sky-blue); border-radius: 0 0 0 30px;}
.custom-underline .curve-right .boarder .blank{position: absolute; bottom: 5px; left: 5px; width: 50px; height: 50px; border-radius: 0 0 0 25px; background: #ffffff;}
.custom-underline::after {content: ""; position: absolute; top: 49px; width: 5px; height: 170px; background-color: var(--sky-blue);}
.custom-underline .curve-left{position: relative; top: -1px; right: -1px; width: 50px; height: 50px; background: #ffffff;}
.custom-underline .curve-left .boarder{position: relative; top: 1px; right: 1px; width: 50px; height: 50px; background: var(--sky-blue); border-radius: 0 30px 0 0;}
.custom-underline .curve-left .boarder .blank{position: absolute; top: 5px; right: 5px; width: 50px; height: 50px; border-radius: 0 25px 0 0; background: #ffffff;}

.index-hero{margin-bottom: 6.25rem;}
.index-hero .hero-information{margin-top: 20%;}
.index-hero .hero-information .grid{position: absolute; top: 10%; right: 0; z-index: -1;}
.index-hero .hero-information .grid img{width: 90%; transform: scaleX(-1);}
.index-hero .hero-information .logo{width: 80px; min-height: 85px; position: relative; top: -25px; right: 25px;}
.index-hero .hero-information .title{color: var(--sky-blue);}
.index-hero .hero-information .sub-title{color: var(--deep-blue); font-size: 1.3rem !important;}
.index-hero .hero-information .description{color: var(--deep-blue); margin-bottom: 1.5rem;}
.index-hero .hero-information .description p{padding-left: 25%;}
.index-hero .hero-information .email-box{width: 50%; margin-bottom: 1rem;}
.index-hero .hero-information .email-box input{width: 100%; border: 2px solid var(--crimson-red); border-radius: 100px; padding: 10px 20px;}
.index-hero .hero-information .email-box input:focus-visible{outline: none;}
.index-hero .hero-information .email-box input::placeholder{font-size: 0.875rem; color: var(--deep-blue);}
.index-hero .hero-information .email-box button{position: absolute; top: 7px; left: 7px; border: none; border-radius: 100px; background: var(--blush-pink); padding: 5px 20px;}
.index-hero .hero-information .email-box button i{color: var(--crimson-red); position: relative; top: 3px;}
.index-hero .hero-information .email-box button:hover i{position:relative; right: 2px;}
.index-hero .hero-information .reviews{display: flex;}
.index-hero .hero-information .reviews .avatar{border: 2px solid var(--ice-blue); border-radius: 100%; margin-left: -10px;}
.index-hero .hero-information .reviews .avatar:first-child{z-index: 3; margin-right: 0px;}
.index-hero .hero-information .reviews .avatar:nth-child(2){z-index: 2;}
.index-hero .hero-information .reviews .avatar:nth-child(3){z-index: 1;}
.index-hero .hero-information .reviews span {color: var(--deep-blue); font-weight: 700;}
.index-hero .hero-information .reviews .plus{color: var(--crimson-red);}
.index-hero .hero-information .reviews small {font-weight: 400;}
.index-hero .hero-information .reviews p {margin-right: 10px;}
.index-hero .hero-ship-wrapper{position: absolute; top: 95px; left: 0; overflow: hidden;}
.index-hero .hero-ship-wrapper .img-fluid{width: 100%; position: sticky; z-index: -2; transform: scaleX(-1);}
.index-hero .location-container {position: absolute; top: 3%; right: 34.4%; transform: translate(-50%, -50%);}
.index-hero .location-ping { width: 5px; height: 5px; background-color: #b90a2e; border-radius: 50%; position: relative; z-index: 2; }
.index-hero .ping-wave { position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; background-color: #b90a2e17; border-radius: 50%; transform: translate(-50%, -50%) scale(1); animation: ping 2s infinite; z-index: 1; opacity: 0.6; }

.service{margin-bottom: 5rem;}
.service .grid{position: absolute; top: 0; right: 0; z-index: -1;}
.service .card{padding: 2rem 3.5rem 2.5rem; border: none; cursor: pointer;}
.service .left-shadow{background: linear-gradient(270deg, #ffffff, #E3F0FC); border-radius: 200px 0 0 200px;}
.service .right-shadow{background: linear-gradient(90deg, #ffffff, #E3F0FC); border-radius: 0 200px 200px 0;}
.service .card .title{color: var(--deep-blue);}
.service .card .description{color: var(--deep-blue);}
.service .swiper-service-slider { width: 100%; padding: 30px 0; }
.service .swiper-service-slider .swiper-slide { display: flex; flex-direction: column; }
.service .swiper-service-slider .swiper-button-next, .swiper-service-slider .swiper-button-prev { color: #000; }
.service .swiper-service-slider .swiper-pagination-bullet { background: #000; }

.tracking{position: relative; overflow: hidden; background: linear-gradient(0deg, #93D5D4, #428BAD); padding-top: 6.25rem; margin-bottom: 6.25rem; text-align: center; z-index: 0;}
.tracking .big-circle{position: absolute; top: -80px; left: -273px; width: 62.5rem; height: 62.5rem; border-radius: 100%; border: 1px solid #ffffff36; background: linear-gradient(80deg, #8FD2CF, #2099cd00); z-index: -1;}
.tracking .information{margin-bottom: 2.1rem;}
.tracking .information .title{color: #ffffff;}
.tracking .information .description{color: #ffffff; text-align: justify; text-align-last: center; padding: 0 10rem; margin-bottom: 1.7rem;}
.tracking .information .link{font-size: 0.875rem; background: #fff; color: var(--deep-blue); border-radius: 100px; padding: 10px 30px;}
.tracking .information .link:active{outline: none; border: none;}
.tracking .information .link:hover{background: #e5e5e5;}
.tracking .frame {position: relative; background: #fff; height: 250px; border-radius: 45px 45px 0 0; padding: 30px 30px 0; }
.tracking .frame:before{position: absolute; top: -150px; left: -150px; content: ''; background: linear-gradient(0deg, #93D5D4, #428BAD); border: 1px solid #ffffff; width: 300px; height: 300px; border-radius: 100%; z-index: -1;}
.tracking .frame .panel { background: #FAFBFB; height: 250px; border-radius: 25px 25px 0 0; overflow: hidden; padding: 10% 5% 0; }
.tracking .task-list { display: flex; flex-direction: column; overflow: hidden; }
.tracking .task { display: flex; justify-content: space-between; align-items: center; gap: 10px; direction: ltr; background: #fff; box-shadow: 0 3px 10px #a9a9a917; border-radius: 5px; padding: 10px 20px; margin-bottom: 15px; height: 90px; flex-shrink: 0; transition: all 0.6s ease; opacity: 1; }
.tracking .task .icon i { font-size: 2.5rem; color: #1fe8be; }
.tracking .task .text { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.tracking .task .text .line { text-align: left;}
.tracking .task .text .line-1 {position: relative; top: 8px; color: #98a7b3; font-size: 16px; font-weight: 600;}
.tracking .task .text .line-2 {position: relative; top: -3px; color: #ffca7b; font-size: 12px; font-weight: 400;}
.tracking .task.removing { opacity: 0; transform: translateY(-30px) scale(0.95); margin-bottom: 0; height: 0; padding: 0 20px;}
.sea-tracking{padding-top: 35px; background: unset;}
.sea-tracking:before{content: ''; background: linear-gradient(0deg, rgb(147, 213, 212), rgb(66, 139, 173)); position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: -2;}
.sea-tracking .frame{width: 100%; box-shadow: 0 -3px 10px #a9a9a917;}
.sea-tracking .frame:before{display: none;}
.sea-tracking .title{color: var(--deep-blue); position: relative; top: -40px; text-align: right;}
.sea-tracking ul{position: relative; top: 38px; padding-right: 0;}
.sea-tracking li{border-right: 4px solid #fff; color: #fff; padding-right: 10px;}

.sea-hero{margin-bottom: 6.25rem;}
.sea-hero:before{position: absolute; top: 0; left: 0; bottom: 0; width: 32%; content: ''; background: linear-gradient(0deg, rgb(147, 213, 212), rgb(66, 139, 173)); border-radius: 0 35px 35px 0; z-index: -1;}
.sea-hero .hero-information{padding-left: 20%;}
.sea-hero .hero-information .title{color: var(--sky-blue);}
.sea-hero .hero-information .sub-title{color: var(--deep-blue); font-size: 1.3rem !important;}
.sea-hero .hero-information .description{color: var(--deep-blue); margin-bottom: 1.5rem;}
.sea-hero .hero-information .phone{color: var(--deep-blue);}
.sea-hero .hero-information .phone .icon{background: var(--blush-pink); width: 40px; height: 40px; border-radius: 100%; display: flex ; align-items: center; justify-content: center; margin-left: 10px;}
.sea-hero .hero-information .phone .icon i{color: var(--crimson-red); transform: scaleX(-1); position: relative; top: 3px;}
.sea-hero .sea-hero-wrapper .img-fluid{position: relative; left: -25%; min-height: 400px; margin: 35px 0 0; transform: scaleX(-1);}
.sea-hero .hero-information .grid{position: absolute; top: 40%; right: 0; z-index: -1;}
.sea-hero .hero-information .grid img{width: 90%; transform: scaleX(-1);}

.crossstuff-hero{padding-bottom: 6.25rem; background: linear-gradient(to bottom, #FFFFFF, #EEF1F9); z-index: -3;}
.crossstuff-hero .information{margin-top: 20px;}
.crossstuff-hero .information .sub-title{font-size: 1.3rem !important; font-weight: 700; color: var(--deep-blue); margin-bottom: 10px;}
.crossstuff-hero .information .title{color: var(--sky-blue); margin-top: 10px;}
.crossstuff-hero .information .description{color: var(--deep-blue); padding: 0 5rem; margin-bottom: 1.7rem;}
.crossstuff-hero .world-wrapper{position: relative !important; width: fit-content; min-height: 580px; margin: 0 auto;}
.crossstuff-hero .world-wrapper:before{position: absolute; content: ''; background: linear-gradient(to bottom, #FFFFFF, #E6E1FD); width: 700px; height: 700px; top: 45%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; z-index: -2; box-shadow: 0 30px 33px 0 #E9EAFF;}
.crossstuff-hero .world-wrapper:after{position: absolute; content: ''; background: linear-gradient(to bottom, #FFFFFF, #E6E7F9); width: 600px; height: 600px; top: 45%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; z-index: -1;}
.crossstuff-hero .world-wrapper { position: relative; width: 500px; height: 500px; margin: auto; }
.crossstuff-hero .world-wrapper img { width: 100%; height: auto; border-radius: 50%; }
.crossstuff-hero .earth-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.crossstuff-hero .points-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; }
.crossstuff-hero .point { position: absolute; transform: translate(-50%, -50%); }
.crossstuff-hero .point-dot { width: 8px; height: 8px; background-color: var(--crimson-red); border-radius: 50%; position: relative; z-index: 2; }
.crossstuff-hero .ping-wave { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; background-color: rgba(249, 89, 89, 0.4); border-radius: 50%; transform: translate(-50%, -50%) scale(1); opacity: 0.6; animation: ping 2s infinite; }
@keyframes ping {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    70% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
.crossstuff-hero .path-glow { fill: none; stroke: var(--ice-blue); stroke-width: 3; filter: drop-shadow(0 0 6px var(--deep-blue)); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 2s linear forwards; }
@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}
.crossstuff-hero .grid{position: absolute; top: 0; left: 0; text-align: left;}
.crossstuff-hero .grid-2{position: absolute; top: 0; right: 0; text-align: right;}

.transit-hero{margin-bottom: 3.25rem;}
.transit-hero .information{margin-top: 20px;}
.transit-hero .information .sub-title{font-size: 1.3rem !important; font-weight: 700; color: var(--deep-blue); margin-bottom: 10px;}
.transit-hero .information .title{color: var(--sky-blue); margin-top: 10px;}
.transit-hero .information .description{color: var(--deep-blue); padding: 0 5rem; margin-bottom: 1.7rem;}
.transit-hero .neighbors-wrapper { display: flex; justify-content: center; align-items: center; width: 70vw; max-width: 30rem; aspect-ratio: 1 / 1; margin: 3rem auto; background-image: url(/template/images/grid-transit-hero.png); background-repeat: no-repeat; background-position: center;}
.transit-hero .neighbors-wrapper .circle-1 { width: 100%; height: 100%; border: 1px solid #D7DDE4; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.transit-hero .neighbors-wrapper .circle-2 { width: 89.2%; height: 89.2%; border-radius: 50%; box-shadow: 4px 4px 20px rgba(215, 221, 228, 0.25); display: flex; justify-content: center; align-items: center; }
.transit-hero .neighbors-wrapper .circle-3 { width: 74.3%; height: 74.3%; border-radius: 50%; background: #EFFAFB; display: flex; justify-content: center; align-items: center; }
.transit-hero .neighbors-wrapper .circle-4 { width: 63.3%; height: 63.3%; border: 1px solid #D7DDE4; border-radius: 50%; background: #ffffff; display: flex; justify-content: center; align-items: center; }
.transit-hero .neighbors-wrapper .circle-5 { width: 86%; height: 86%; border-radius: 50%; background: #f4fbff; display: flex; justify-content: center; align-items: center; }
.transit-hero .neighbors-fluid{position: absolute; max-width: 60rem;}
.transit-hero .neighbors-point { position: absolute; transform: translate(-50%, -50%); }
.transit-hero .neighbors-point-dot { width: 8px; height: 8px; background-color: var(--crimson-red); border-radius: 50%; position: relative; z-index: 2; }
.transit-hero .neighbors-ping-wave { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; background-color: rgba(249, 89, 89, 0.4); border-radius: 50%; transform: translate(-50%, -50%) scale(1); opacity: 0.6; animation: neighbors-ping 2s infinite; }
@keyframes neighbors-ping {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    70% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
.transit-hero .neighbors-destination-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -150%); color: var(--crimson-red); font-weight: bold; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.5s ease-in-out; font-size: 14px; z-index: 4; }
.transit-hero .neighbors-path-glow { fill: none; stroke: var(--ice-blue); stroke-width: 3; filter: drop-shadow(0 0 6px var(--deep-blue)); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: neighbors-drawLine 2s linear forwards; }
@keyframes neighbors-drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.tab-progress {margin-bottom: 6.25rem;}
.tab-progress .nav-tabs{gap: 5px; border-bottom: 1px solid var(--soft-blue); padding: 0; margin: 0 0 25px 0;}
.tab-progress .nav-link{padding: 0 25px 20px; border: none;}
.tab-progress .nav-tabs .nav-link img { opacity: 0.2; transition: opacity 0.3s ease; }
.tab-progress .nav-tabs .nav-link span {font-weight: 500; color: #DFE9F0; transition: color 0.3s ease; margin-top: 10px;}
.tab-progress .nav-tabs .nav-link.active{border-bottom: 2px solid var(--sky-blue);}
.tab-progress .nav-tabs .nav-link.active img { opacity: 1; }
.tab-progress .nav-tabs .nav-link.active span { color: var(--deep-blue); }
.tab-progress .tab-content .information{padding-left: 25%;}
.tab-progress .tab-content h2{color: var(--deep-blue);}
.tab-progress .tab-content p{color: var(--deep-blue);}
.tab-progress .tab-content .img-fluid{position: relative;}
.tab-progress .tab-content .img-fluid img{transform: scaleX(-1);position: relative; z-index: -1;}
.tab-progress .tab-content .img-fluid:before{position: absolute; right: 20px; bottom: -27px; border-radius: 11px; content: ''; background: var(--sky-blue); border: 5px solid #ffffff; width: 95px; height: 95px;}
.tab-progress .tab-content .img-fluid:after{position: absolute; content: ''; right: 84px; bottom: 38px; background: #ffffff; width: 15px; height: 15px; border-radius: 100%;}
.tab-progress .card{background: #ffffff; box-shadow: 0 3px 20px #a9a9a926; border: none; padding: 25px 30px; text-align: center;}
.modal-progress{padding-bottom: 65px;}
.modal-progress:before{content: ''; background: linear-gradient(0deg, rgb(147, 213, 212), rgb(66, 139, 173)); position: absolute; bottom: 0; left: 0; right: 0; height: 30%; z-index: -2;}
.modal-progress .nav-tabs{border: none;}
.modal-progress .nav-tabs .nav-link.active{border: none;}

.services{margin-bottom: 6.25rem;}
.services .title{color: var(--sky-blue); margin-bottom: 3.5rem;}
.services .information{max-width: 320px; text-align: right !important;}
.services .information span{color: var(--sky-blue); font-size: 1.3rem; font-weight: 700;}
.services .information h3{color: var(--deep-blue);}
.services .information p{color: var(--deep-blue);}
.services .img-fluid{width: 320px; height: 225px; border-radius: 25px; background: #ffffff;/* box-shadow: 0 3px 10px #a9a9a917;*/}
.services .img-fluid img{transform: scaleX(-1);}
.services .grid{position: absolute; top: -10%; right: 0; z-index: -1;}
.services .grid img{width: 60%; transform: scaleX(-1);}
.services .grid-2{position: absolute; bottom: -15%; left: 0; text-align: left; z-index: -1;}
.services .grid-2 img{width: 60%; transform: scaleX(-1);}
.services .grid-3{position: absolute; top: 15%; left: 0; z-index: -1;}
.services .grid-3 img{width: 70%;}
.services .grid-4{position: absolute; bottom: 5%; right: 0; text-align: right; z-index: -1;}
.services .grid-4 img{width: 70%;}

.rra-hero{margin-bottom: 26rem;}
.rra-hero .information{z-index: 1;}
.rra-hero .title{color: var(--sky-blue);}
.rra-hero .sub-title{font-size: 1.3rem !important; font-weight: 700; color: var(--deep-blue); margin-bottom: 10px;}
.rra-hero .card{background: #F8FBFE; border-radius: 35px; border: none; padding: 5rem 0 15rem; overflow: hidden;}
.rra-hero .box-position{cursor: pointer; padding: 0 5rem; position: absolute; top: 55%;}
.rra-hero .service-box{position: relative; overflow: hidden; text-align:center; text-shadow: 2px 2px 5px #004564; color: #ffffff; border-radius: 10px; min-height: 480px; padding: 60px 35px 0;}
.rra-hero .service-box h2{font-size: 1.6rem !important;}
.rra-hero .img-fluid{position: relative; max-width: 100%; height: auto; z-index: 2; min-width: 295px;}
.rra-hero .img-air{top: 95px; transform: scaleX(-1);}
.rra-hero .img-rail{position: relative; top: 30px;  transform: scaleX(-1);}
.rra-hero .img-road{position: absolute; top: 35%; left: 0; transform: scaleX(-1);}
.rra-hero .air-box{background: url("/template/images/air-box.png") no-repeat center center, var(--soft-blue); background-size: cover;}
.rra-hero .circle{position: absolute; background: #EEB879; width: 240px; height: 240px; border-radius: 100%; top: 62%; left: 50%; transform: translate(-50%, -50%); z-index: 0;}
.rra-hero .circle::after{position: absolute; content: ''; width: 320px; height: 320px; border-radius: 50%; background: conic-gradient(#a37e5233 0deg 270deg, transparent 270deg 360deg); top: -35px; left: -40px; transform: rotate(349deg); z-index: 1;}
.rra-hero .rail-box{background: #90D2D3;}
.rra-hero .road-box{background: url("/template/images/road-box.png") no-repeat center center, var(--soft-blue); background-size: cover;}
.rra-hero .road-box:before{position: absolute; content: ''; bottom: 0; left: -22px; width: 110%; height: 154px; background: #EEB879; transform: rotate(5deg); transform-origin: right bottom;}
.rra-hero .road-box:after{position: absolute; content: ''; bottom: -116px; left: -43px; width: 110%; height: 220px; background: linear-gradient(to bottom, #4790AF, #1E3C49); transform: rotate(10deg); transform-origin: right bottom;}
.rra-hero .service-box .overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: var(--sky-blue); color: #fff; display: flex; align-items: center; justify-content: center; padding: 15px; text-align: center; border-radius: 10px; z-index: 2; opacity: 0; visibility: hidden; transform: translateY(100%); transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s; }
.rra-hero .service-box:hover .overlay { opacity: 1; visibility: visible; transform: translateY(0); }
.rra-hero .service-box .overlay p { margin: 0; font-size: 16px; line-height: 2; text-shadow: none; padding: 15px; text-align: justify;}
.rra-hero .shadow-1{position: absolute; top: -5%; right: 0; background: rgb(198 225 248 / 14%); width: 240px; height: 600px; transform: rotate(45deg);}
.rra-hero .shadow-2{position:absolute; top: 10%; right: 33%; background: rgb(227 240 252 / 28%); width: 170px; height: 600px; transform: rotate(45deg);}
.rra-hero .shadow-3{position: absolute; top: -55%; left: 15%; background: rgb(198 225 248 / 14%); height: 1000px; transform: rotate(45deg);}
.rra-hero .shadow-4{position: absolute; top: -60%; left: 8%; background: rgb(198 225 248 / 5%); width: 140px; height: 1000px; transform: rotate(45deg);}

.advantages{margin-bottom: 6.25rem;}
.advantages .title{color: var(--sky-blue); margin-bottom: 3.5rem;}
.advantages .card{border: 1px solid var(--cool-gray); border-radius: 5px; padding: 35px !important;}
.advantages .card .icon{background: #FBFCE3; border-radius: 100%; width: 100px; height: 100px; margin: 0 auto 15px; display: flex ; align-items: center; justify-content: center;}
.advantages .card .icon i{color: #FFBE18; position: relative; top: 5px;}
.advantages .card h3{color: var(--deep-blue);}
.advantages .card p{color: var(--deep-blue);}
.advantages-rra{padding: 6.25rem 0 0;}
.advantages-rra .title{color: #ffffff;}
.advantages-rra:before{content: ''; background: linear-gradient(0deg, rgb(147, 213, 212), rgb(66, 139, 173)); position: absolute; top: 0; left: 0; right: 0; bottom: 35%; z-index: -2;}
.advantages-cc .information{position: relative; top: -15%; padding-right: 10%;}
.advantages-cc{padding: 6.25rem 0 0;}
.advantages-cc .title{color: #ffffff; margin: 0 0 15px;}
.advantages-cc .description{color: #ffffff;}
.advantages-cc:before{content: ''; background: linear-gradient(0deg, rgb(147, 213, 212), rgb(66, 139, 173)); position: absolute; top: 0; left: 0; right: 0; bottom: 15%; z-index: -2;}
.advantages-cc .card{background: #fff; box-shadow: 0 3px 10px #a9a9a917; border: none;}

.portfolio{margin-bottom: 6.25rem; padding: 6.25rem 0 0;}
.portfolio:before{content: ''; background: linear-gradient(0deg, rgb(147, 213, 212), rgb(66, 139, 173)); position: absolute; top: 0; left: 0; right: 0; bottom: 35%; z-index: -2;}
.portfolio .title{color: #ffffff; margin-bottom: 3.5rem;}
.portfolio .card{background: #fff; box-shadow: 0 3px 10px #a9a9a917; border: none; padding: 10px;}
.portfolio .card h3{color: var(--deep-blue); margin: 25px 0 20px;}

.shipment{margin-top: 11.25rem; margin-bottom: 6.25rem;}
.shipment .card{position:relative; border: 1px solid var(--cool-gray); border-radius: 5px; padding: 35px !important;}
.shipment .card .icon { background: var(--ice-blue); border-radius: 100%; width: 100px; height: 100px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; }
.shipment .card .icon i { color: var(--sky-blue);}
.shipment .card-left i{position: relative; left: 7px;}
.shipment .card-left:before{position: absolute; content: ''; background: #E3F0FC; border-radius: 15px; width: 298px; height: 221px; left: -25px; bottom: -25px; transform: rotate(-5deg); transform-origin: bottom left; z-index: -1;}
.shipment .card-right i{position: relative; right: 4px;}
.shipment .card-right:before{position: absolute; content: ''; background: #E3F0FC; border-radius: 15px; width: 298px; height: 221px; right: -25px; bottom: 0; transform: rotate(5deg); transform-origin: bottom left; z-index: -1;}
.shipment .card h2{color: var(--deep-blue); font-size: 1.6rem !important; font-weight: 600;}
.shipment .card p{color: var(--deep-blue);}

.warehousing .information{position: relative; z-index: 2; text-align: center;}
.warehousing .information .title{color: var(--sky-blue);}
.warehousing .information .description{color: var(--deep-blue); margin-bottom: 1.7rem; padding: 0 2rem;}
.warehousing .elevator{overflow: hidden; padding-bottom: 15px;}
.warehousing .elevator:before{content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20%; background: #ffffff; z-index: 1;}
.warehousing .elevator img { display: block; max-width: 100%; transform: translateY(-30px); will-change: transform; animation: moveElevator 6s ease-in-out infinite alternate; margin: 0 auto; }
.warehousing .elevator .col-md-6:nth-child(1) img { animation-duration: 5s; animation-delay: 0s; }
.warehousing .elevator .col-md-6:nth-child(2) img { animation-duration: 7s; animation-delay: 1s; }
.warehousing .elevator .col-md-6:nth-child(3) img { animation-duration: 6s; animation-delay: 0.5s; }
@keyframes moveElevator {
    0% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(30px);
    }
}
.warehousing .warehousing_left{position: absolute; left: 0; bottom: 0; z-index: -1;}
.warehousing .warehousing_right{position: absolute; right: 0; bottom: 0; z-index: -1;}

.faq{margin-bottom: 6.25rem;}
.faq .title{color: var(--sky-blue); margin-bottom: 3.5rem;}
.faq .sub-title{font-size: 1.3rem !important; font-weight: 700; color: var(--deep-blue); margin-bottom: 10px;}
.faq .accordion-item{border: none;}
.faq .accordion-button{border: 1px solid var(--soft-blue); border-radius: 5px;}
.faq .accordion-button:focus{box-shadow: none;}
.faq .accordion-button::after{display: none;}
.faq .accordion-button:not(.collapsed){background-color: var(--ice-blue); border: var(--ice-blue);}
.faq .icon {background-color: var(--ice-blue); color: var(--sky-blue); font-size: 1.3rem; font-weight: 600; width: 45px; height: 45px; display: inline-flex ; align-items: center; justify-content: center; transform: rotate(45deg); border-radius: 20px; padding: 2px; margin-left: 10px;}
.faq .accordion-button:not(.collapsed) .icon { background-color: var(--sky-blue); color: white; }
.faq .icon span { transform: rotate(-45deg); display: inline-block; }
.faq .list-title{color: var(--deep-blue); font-size: 1rem !important; font-weight: 500; text-align: right; line-height: 2;}
.faq .accordion-body{text-align: right; color: var(--deep-blue); line-height: 1.9;}

.cta{margin-bottom: 6.25rem;}
.cta .card{background: var(--deep-blue); border: none; border-radius: 25px; padding: 35px 50px !important; overflow: hidden;}
.cta .card:before{position: absolute; top: 0; bottom: 0; left: 0; content: ''; background: #003E5A; width: 50%; border-radius: 0 200px 200px 0;}
.cta .card .title{color: #ffffff; font-size: 1.3rem; font-weight: 700; margin-bottom: 10px;}
.cta .card .description{color: #ffffff; font-size: 1rem;}
.cta .card .link{position: relative; background: var(--blush-pink); color: var(--crimson-red); padding: 15px 45px; border-radius: 100px;}
.cta .card .link:hover{background: #f5cbc8;}

.customclearance-hero{margin-bottom: 6.25rem;}
.customclearance-hero .card{background: linear-gradient(-90deg, #93D5D4, #428BAD); padding: 60px 70px 0; overflow: hidden; border: none; border-radius: 35px;}
.customclearance-hero .hero-information{position: relative; top: 30px;}
.customclearance-hero .hero-information .title{color: #ffffff;}
.customclearance-hero .hero-information .description{color: #ffffff;  padding-left: 25%;}
.customclearance-hero .paper-stack { position: relative; top: 10px; width: 300px; height: 350px; perspective: 1000px; }
.customclearance-hero .paper { position: absolute; width: 100%; height: 100%; background: #fff; border-radius: 10px; transform-origin: bottom right; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); backface-visibility: hidden; }
.customclearance-hero .paper:nth-child(1) { transform: rotate(0deg) translateY(0); z-index: 3; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); }
.customclearance-hero .paper:nth-child(2) { transform: rotate(-5deg) translateY(10px); z-index: 2; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15); }
.customclearance-hero .paper:nth-child(3) { transform: rotate(-10deg) translateY(20px); z-index: 1; box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.25); }
.hero-container{position: absolute; top: 0; right: 34.5%; z-index: 3; transform: scaleX(-1);}

.map{margin-bottom: 6.25rem; text-align: center;}
.map .information .sub-title{font-size: 1.3rem !important; font-weight: 700; color: var(--deep-blue); margin-bottom: 10px;}
.map .information .title{color: var(--sky-blue);}
.map .information .description{color: var(--deep-blue); padding: 0 10rem; margin-bottom: 1.7rem;}
.map .world-wrapper{position: relative;}
.map .location {z-index: 1;}
.map .location-container { position: absolute; transform: translate(-50%, -50%);}
.map .location-ping { width: 5px; height: 5px; background-color:var(--crimson-red); border-radius: 50%; position: relative; z-index: 2; }
.map .ping-wave { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; background-color: rgba(249, 89, 89, 0.1); border-radius: 50%; transform: translate(-50%, -50%) scale(1); animation: ping 2s infinite; z-index: 1; opacity: 0.6; }
@keyframes ping {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    70% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}
.map .ping-1{top: 50%; left: 23%;}
.map .ping-1 .ping-wave{animation-delay: 0s;}
.map .ping-2{top: 60%; left: 27%;}
.map .ping-2 .ping-wave{animation-delay: 0.3s;}
.map .ping-3{top: 75%; left: 33%;}
.map .ping-3 .ping-wave{animation-delay: 1.2s;}
.map .ping-4{top: 88%; left: 35%;}
.map .ping-4 .ping-wave{animation-delay: 0s;}
.map .ping-5{top: 71%; left: 41%;}
.map .ping-5 .ping-wave{animation-delay: 0.6s; }
.map .ping-6{top: 40%; left: 45%;}
.map .ping-6 .ping-wave{animation-delay: 0.6s;}
.map .ping-7{top: 36%; left: 47%;}
.map .ping-7 .ping-wave{animation-delay: 1.2s;}
.map .ping-8{top: 41%; left: 48%;}
.map .ping-8 .ping-wave{animation-delay: 0s;}
.map .ping-9{top: 38%; left: 50%;}
.map .ping-9 .ping-wave{animation-delay: 0.3s;}
.map .ping-10{top: 53%; left: 46%;}
.map .ping-10 .ping-wave{animation-delay: 1.2s;}
.map .ping-11{top: 49%; left: 50%;}
.map .ping-11 .ping-wave{animation-delay: 0.6s;}
.map .ping-12{top: 48%; left: 54%;}
.map .ping-12 .ping-wave{animation-delay: 1.2s;}
.map .ping-13{top: 46%; left: 58%;}
.map .ping-13 .ping-wave{animation-delay: 0.3s;}
.map .ping-14{top: 65%; left: 45%;}
.map .ping-14 .ping-wave{animation-delay: 0.3s;}
.map .ping-15{top: 80%; left: 55%;}
.map .ping-15 .ping-wave{animation-delay: 1.2s;}
.map .ping-16{top: 72%; left: 56%;}
.map .ping-16 .ping-wave{animation-delay: 0s;}
.map .ping-17{top: 69%; left: 56%;}
.map .ping-17 .ping-wave{animation-delay: 0.6s; }
.map .ping-18{top: 59%; left: 59%;} /*dot*/
.map .ping-18 .ping-wave{animation-delay: 0.6s; background-color: #00968859;}
.map .ping-18 .location-ping{background-color:#009688;}
.map .ping-19{top: 57%; left: 60%;} /*dot*/
.map .ping-19 .ping-wave{animation-delay: 1.2s; background-color: #00968859;}
.map .ping-19 .location-ping{background-color:#009688;}
.map .ping-20{top: 59%; left: 62%;}
.map .ping-20 .ping-wave{animation-delay: 0s;}
.map .ping-21{top: 61%; left: 62%;}
.map .ping-21 .ping-wave{animation-delay: 0.3s;}
.map .ping-22{top: 63%; left: 64%;}
.map .ping-22 .ping-wave{animation-delay: 0.6s;}
.map .ping-23{top: 58%; left: 66%;}
.map .ping-23 .ping-wave{animation-delay: 1.2s;}
.map .ping-24{top: 68%; left: 68%;}
.map .ping-24 .ping-wave{animation-delay: 0.6s;}
.map .ping-25{top: 65%; left: 71%;}
.map .ping-25 .ping-wave{animation-delay: 1.2s;}
.map .ping-26{top: 59%; left: 70%;}
.map .ping-26 .ping-wave{animation-delay: 0.3s;}
.map .ping-27{top: 58%; left: 71%;}
.map .ping-27 .ping-wave{animation-delay: 1.2s;}
.map .ping-28{top: 58%; left: 69%;}
.map .ping-28 .ping-wave{animation-delay: 0s;}
.map .ping-29{top: 58%; left: 72%;}
.map .ping-29 .ping-wave{animation-delay: 0.6s; }
.map .ping-30{top: 53%; left: 72%;}
.map .ping-30 .ping-wave{animation-delay: 0.6s;}
.map .ping-31{top: 51%; left: 72%;}
.map .ping-31 .ping-wave{animation-delay: 1.2s;}
.map .ping-32{top: 49%; left: 73%;}
.map .ping-32 .ping-wave{animation-delay: 0s;}
.map .ping-33{top: 52%; left: 76%;}
.map .ping-33 .ping-wave{animation-delay: 0.3s;}
.map .ping-34{top: 45%; left: 76%;}
.map .ping-34 .ping-wave{animation-delay: 1.2s;}
.map .ping-35{top: 86%; left: 77%;}
.map .ping-35 .ping-wave{animation-delay: 0.6s;}
.map .ping-36{top: 81%; left: 78%;}
.map .ping-36 .ping-wave{animation-delay: 1.2s;}

.ship{min-height: 400px; background: linear-gradient(0deg, rgba(215, 221, 228, 0.14), #ffffff); margin-bottom: 10rem;}
.ship .ship-mobile-only{display: none;}
.ship .container-wrapper{position: absolute; top: -60px; right: 0; width: 50%; z-index: 1;}
.ship .container-wrapper .img-fluid{height: auto; object-fit: cover; position: relative; transform: scaleX(-1);}
.ship .information{position: relative; top: 140px; z-index: 1;}
.ship .information .title{color: var(--deep-blue);}
.ship .information .description{color: var(--deep-blue); margin-bottom: 50px; padding-left:40%;}
.ship .information .feature{color: var(--deep-blue); list-style: none; border-right: 5px solid var(--blush-pink); line-height: 2; font-weight: 600; }
.ship .information .link{position: relative; top: 45px; font-size: 0.875rem;}
.ship .information .link i{color: var(--crimson-red); font-size: 2rem; position: relative; top: 8px;}
.ship .information .link:hover i{position: relative; left: 2px;}

.stats{margin-bottom: 6.25rem;}
.stats .card{border: 1px solid var(--cool-gray); border-radius: 5px; padding: 50px;}
.stats .card .icon{width: 100px; height: 100px; border-radius: 100%; background: var(--ice-blue); margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;}
.stats .card .icon i{color: var(--sky-blue); position: relative; top: 5px;}
.stats .card .stat{color: var(--deep-blue);}
.stats .card .stat .stat-value{font-size: 2rem; font-weight: 700;}

.customers{margin-bottom: 6.25rem;}
.customers:after{position: absolute; content: ''; bottom: -80px; width: 100%; height: 350px; background: linear-gradient(0deg, #ffffff 0%, #ffffff 50%, #ffffff00 90%);}
.customers .grid{position: absolute; top: -55px; left: 0; z-index: -1;}
.customers .grid-2{position: absolute; top: 74px; right: 0; z-index: 0;}
.customers .title{color: var(--sky-blue);}
.customers .sub-title{font-size: 1.3rem !important; font-weight: 700; color: var(--deep-blue); margin-bottom: 10px;}
.customers .reviews{margin-top: 6.25rem;}
.customers .reviews .card{border: 1px solid var(--cool-gray); border-radius: 5px; padding: 35px 25px;}
.customers .reviews .card .reviewer-name{font-size: 1.3rem; font-weight: 700; color: var(--sky-blue);}
.customers .reviews .card .reviewer-role{font-size: 1rem; font-weight: 600; margin-bottom: 10px;}
.customers .reviews .card .comment-text{font-size: 0.875rem; color: var(--deep-blue);}
.customers .reviews > div:nth-child(3n + 2) .card { transform: translateY(80px); }
.customers .link{position: relative; top: 45px; width: inherit; background: var(--crimson-red); color: #ffffff; border-radius: 100px; padding: 10px 45px; margin: 0 auto; z-index: 1;}
.customers .link:active{outline: none; border: none;}
.customers .link:hover{background:#a30929;}

.road{display: flex; align-items: center; min-height: 630px; margin-bottom: 6.25rem;}
.road .truck-wrapper{position: absolute; top: 0; left: 0;}
.road .truck-wrapper .img-fluid{width: 100%; transform: scaleX(-1);}
.road .information{position: relative; z-index: 1;}
.road .information .title{color: var(--deep-blue);}
.road .information .description{color: var(--deep-blue);}
.road .information .feature{color: var(--deep-blue); list-style: none; line-height: 4; padding: 0 0 0 25%; margin: 20px 0 0;}
.road .information .feature li{border-bottom: 1px solid var(--soft-blue); padding: 5px 0;}
.road .information .feature li:last-child { border-bottom: none; }
.road .information .feature span{display: inline-flex ; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 100%; background: var(--ice-blue); margin-left: 15px;}
.road .information .feature span i{color: var(--sky-blue); position: relative; top: 3px;}
.road .information .link{color: var(--deep-blue); font-size: 0.875rem;}
.road .information  .link i{color: var(--crimson-red); font-size: 2rem; position: relative; top: 8px;}
.road .information .link:hover i{position: relative; left: 2px;}

.about-hero { position: relative; min-height: 685px; background-color: #01526d; color: #fff; margin-bottom: 6.25rem; overflow: hidden; }
.about-hero::before { content: ""; position: absolute; inset: 0; background: url(/template/images/shipping.png) no-repeat center center; background-size: cover; transform: scaleX(-1); z-index: 0; }
.about-hero > * { position: relative; z-index: 1; }
.about-hero .information{margin: 15% 0; padding-right: 25%;}
.about-hero .information p{margin-bottom: 10px;}
.about-hero .contact-link{color: #fff; font-weight: 700; padding-bottom: 5px; border-bottom: 2px solid;}
.about-hero .circles { position: absolute; top: 40%; right: 25%; transform: translate(-50%, -50%); display: none;}
.about-hero .circle { position: absolute; border-radius: 50%; transform: translate(-50%, -50%);}
.about-hero .circle-1 { width: 449px; height: 449px; background: linear-gradient(to bottom, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%)); box-shadow: 0 0 50px 0px rgb(12 84 112 / 40%); z-index: 1; }
.about-hero .circle-2 { width: 337px; height: 337px; background: linear-gradient(to bottom, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%)); box-shadow: 0 0 15px 0 rgb(12 84 112 / 55%); z-index: 2; }
.about-hero .circle-3 { width: 184px; height: 184px; background: linear-gradient(to bottom, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%)); box-shadow: 0 0 25px 0 rgb(12 84 112 / 40%); z-index: 3; }
.about-hero .logo-slider {position: relative; margin-top: 30px; overflow: hidden; width: 100%; border-top: 2px solid #ffffff40; padding-top: 20px;}
.about-hero .logo-slider .swiper { width: 100%; height: 90px; padding: 12px 0; }
.about-hero .logo-slider .swiper-slide { display: flex; align-items: center; justify-content: center; }

.about-vision{margin-bottom: 6.25rem !important;}
.about-vision .information{position:relative; top: 45px; padding-right: 25%; color: var(--deep-blue);}
.about-vision .information h2{font-size: 3.125rem !important; color: var(--sky-blue);}
.about-vision .img-fluid img{width: 463px; height: 450px; background: var(--ice-blue); border-radius: 110px 0 110px 0;}
.about-vision .stat{padding-right: 10px;}
.about-vision .stat-number{font-size: 2rem; font-weight: 600;}
.about-vision .stat-label{font-size: 1.2rem; color: #91a8bb;}
.about-mission{margin-bottom: 6.25rem !important;}
.about-mission .information{padding-right: 25%; color: var(--deep-blue);}
.about-mission .information h2{font-size: 3.125rem !important; color: var(--sky-blue);}
.about-mission .process{position: relative;}
.about-mission .process:before{position: absolute; content: ''; top: 15px; right: 19px; width: 3px; height: 73%; background: var(--ice-blue); z-index: -1;}
.about-mission .process-icon{background: var(--ice-blue); color: var(--sky-blue); margin-left: 1rem!important; margin-right: unset !important;}
.about-mission .process-text{color: var(--deep-blue); margin-right: 3rem!important; margin-left: unset !important;}
.about-mission .img-fluid img{width: 463px; height: 568px; background: var(--ice-blue); border-radius: 0 110px 0 110px;}
.about-services{margin-bottom: 10rem !important;}
.about-services .information{padding-right: 25%; color: var(--deep-blue);}
.about-services .information h2{font-size: 3.125rem !important; color: var(--sky-blue);}
.about-services .title{font-size: 3.125rem !important; color: var(--sky-blue);}
.about-services .sub-title{font-size: 1.75rem !important; font-weight: 700; color: var(--deep-blue);}
.about-services .item{margin-top: 3.25rem;}
.about-services .item .paddingbox{padding: 0 25px 40px;}
.about-services .item .card{text-align: center; background: var(--ice-blue); border: none; border-radius: 110px 0 110px 0; padding: 85px 25px;}
.about-services .item > div:nth-child(3n + 2) .card { transform: translateY(80px); }
.about-services .item .card .icon{display: flex ; align-items: center; justify-content: center; background: #fff; text-align: center; width: 150px; height: 150px; margin: 0 auto; border-radius: 100px;}
.about-services .item .card .title{font-size: 2rem !important;}
.about-services .item .card .description{color: var(--deep-blue);}

.contactus{margin: 1.6rem 0 6.25rem;}
.contactus h1{font-size: 2rem !important;}
.contactus .card{background: #ffffff; color: var(--deep-blue); border: none; border-radius: 5px; box-shadow: 0 3px 10px #a9a9a917; padding: 15px;}
.contactus .card .separator{background: #f6fafd; border-radius: 5px; padding: 20px; margin-bottom: 15px;}
.contactus .card .form-check-input:checked { background-color: var(--crimson-red); border-color: var(--crimson-red);}
.contactus .card .form-check-input:hover { cursor: pointer; border-color: var(--crimson-red);}
.contactus .card .form-control{border-color: #eaeff5 !important; padding: 10px 15px;}
.contactus .card .form-control:focus{box-shadow: none;}
.contactus .card .input-group-text{background: #eaeff5; color: var(--deep-blue);}
.contactus .card .form-label{font-weight: 500;}
.contactus .card button{background: var(--sky-blue); color: #fff;}
.contactus .card .card-body{ text-align: right!important;}
.contactus .touch{color: var(--deep-blue); margin-bottom: 3.8rem; text-align: right !important;}
.contactus .touch .icon { position: relative; display: inline-flex ; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 10px; }
.contactus .touch .icon::before { content: ""; position: absolute; inset: 0; background-color: var(--ice-blue); border-radius: 20px; transform: rotate(45deg); z-index: -1; }
.contactus .touch .icon i { color: var(--sky-blue); font-size: 1rem;}
.contactus .googlemap{box-shadow: 0 3px 10px #a9a9a917; border-radius: 5px; min-height: 469px;}
.contactus .googlemap iframe{border-radius: 5px; width: 100%; min-height: 463px;}

.blog{margin-top: 25px; margin-bottom: 6.25rem;}
.blog .hero{text-align: center; background: linear-gradient(to top, #E3F0FC, #ffffff00); border-radius: 0 0 15px 15px; margin-bottom: 3rem; padding-bottom: 35px;}
.blog .hero h1{color: var(--sky-blue);}
.blog .hero p{margin-bottom: 1.5rem; color: var(--deep-blue);}
.blog .hero form input{border-color: var(--cool-gray); border-radius: 50px;}
.blog .hero form input:focus{box-shadow: none; border-color: var(--cool-gray);}
.blog .hero form i{position: absolute; left: 15px; top: 9px; transform: scaleX(-1);}
.blog .hero .categories a{font-size: 14px; background: #fff; box-shadow: 0 3px 10px #0045642b; padding: 5px 10px; border-radius: 5px; margin: 0 5px;}
.blog .card{background: #fff; box-shadow: 0 5px 20px #a9a9a929; border: none; border-radius: 5px;}
.blog .card .category{width: fit-content; background: #ffb931; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 5px; margin-bottom: 15px;}
.blog .card .title{font-size: 1.5rem !important; color: var(--deep-blue);}
.blog .card .card-text{color: var(--deep-blue);}
.blog .card .date{color: var(--deep-blue);}
.blog .card .date i{color: var(--sky-blue);}
.blog .card .link{color: var(--deep-blue); font-size: .875em;}
.blog .card .link i{color: var(--sky-blue); position: relative; top: 2px;}


.article-header{position: relative; margin-top: 25px;}
.article-header .img-fluid{border-radius: 10px;}
.article-header:before{position: absolute; content: ''; bottom: 12%; left: 0; right: 0; height: 65%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #f7fafa); transform: skewY(7deg); border-radius: 0 0 65px 65px; z-index: -1;}
.article-header .card{position: relative; z-index: 2; margin-left: -200px; background: #fff; box-shadow: 0 10px 50px rgb(0 69 100 / 15%); border: none; border-radius: 5px; padding: 32px 35px;}
.article-header .card .breadcrumb .separator{font-size: 10px; margin: 0 5px; position: relative; top: 5px;}
.article-header .card .article-title{font-size: 2rem !important; line-height: 1.8; color: var(--deep-blue);}
.article-header .card .category{font-size: 12px; border: none; border-radius: 100px; background: #ffb931; color: #fff; padding: 10px 15px;}
.article-body{color: var(--deep-blue);}
.article-content .table-of-contents{margin: 30px 0 15px;}
.article-content .table-of-contents button{color: var(--deep-blue); padding: 15px 20px; border: 1px solid var(--cool-gray); border-radius: 8px; box-shadow: none;}
.article-content .table-of-contents button:active{border-color: var(--soft-blue);}
.article-content .table-of-contents .toc-icon-list i{color: var(--deep-blue); position: relative; top: 3px; margin-left: 5px;}
.article-content .table-of-contents .toc-icon-toggle{background: var(--soft-blue); width: 35px; height: 35px; border-radius: 100%; display: flex ; align-items: center; justify-content: center;}
.article-content .table-of-contents .toc-icon-toggle i{position: relative; top: 3px;}
.article-content .table-of-contents .accordion-body{background: #f7f8fa; border: none !important; border-radius: 8px !important; margin-top: 5px;}
.article-content .table-of-contents .heading_2{font-weight: 600; line-height: 2;}
.article-content .table-of-contents .heading_3{font-weight: 500; line-height: 2; padding-right: 20px;}
.article-content .table-of-contents #tocCollapse.collapse { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.article-content .table-of-contents #tocCollapse.collapse.show { max-height: 1000px; }
.article-body .sidebar {position: sticky; top: 100px;}
.article-body .sidebar .card{border: none; background: #ffffff; box-shadow: 0 5px 35px rgba(52, 128, 128, 0.1); padding: 15px 10px;}
.article-body .sidebar .card .form-control{border-color: #eaeff5 !important; padding: 10px 15px;}
.article-body .sidebar .card .form-control:focus{box-shadow: none; border-color: #eaeff5;}
.article-body .sidebar .search{background: linear-gradient(233.69deg, #ffdaa2 -5.92%, #fff3e0 17.7%); box-shadow: 0px 5px 25px 0px rgba(255, 107, 1, 0.08); border: 2px solid #fff;}
.article-body .sidebar .search button i{display: inline-block; transform: scaleX(-1) !important; font-size: 21px; position: relative; top: 3px; left: 5px; color: var(--sky-blue);}
.article-body .sidebar .card h3{font-size: 1.1rem !important; margin-bottom: 20px;}
.article-body .sidebar .green-btn{background: #86d967; border: none; color: #ffffff;}
.article-body .sidebar .red-btn{background: #f44336; border: none; color: #ffffff;}
.article-content p{font-size: 1rem !important; text-align: justify; margin: 0 0 1.5em; padding: 0;}
.article-content .body img{display: block; width: 100%; margin: 25px auto !important; border-radius: 5px;}
.article-content .body h2{color: var(--deep-blue); font-size: 1.5rem !important; line-height: 2em;}
.article-content .body h3{color: var(--sky-blue); font-size: 1.3rem !important; line-height: 2em;}
.article-content .body ul{line-height: 2;}
.article-content .body ul li::marker{color: var(--crimson-red);}
.article-content .body table{border: none; border-collapse: separate; width: 100%; padding: 5px 22px; margin: 20px 0; line-height: 1.7; box-shadow: 0 3px 30px rgba(59, 101, 169, .12);}
.article-content .body .table>:not(caption)>*>* { box-shadow: none !important; border: none !important; }
.article-content .body .table tbody tr:nth-child(odd) {background-color: #f8f9fa;}
.article-content .article-faq h2{color: var(--deep-blue); font-size: 1.5rem !important; line-height: 2em;}
.article-content .article-faq .accordion-item{box-shadow: 0 2px 15px rgba(25, 63, 125, .09); border-radius: 5px; margin-bottom: 10px; background: #fff; border: none; padding: 10px 0;}
.article-content .article-faq .accordion-item .accordion-button::after{display: none;}
.article-content .article-faq button{color: var(--deep-blue);}
.article-content .article-faq button:focus{background: #ffffff; box-shadow: none; color: var(--deep-blue); font-weight: 700;}
.article-content .article-faq button:not(.collapsed){background: #ffffff;}
.article-content .article-faq .accordion-body{color: var(--deep-blue);}
.article-content .comment-cta{position:relative; margin: 50px 0 35px; background: #f7f8fa;}
.article-content .comment-cta:before{content: "\F252"; font-family: "bootstrap-icons"; position: absolute; right: 24px; top: 50%; font-size: 36px; color: #f0f1f3; transform: translateY(-50%) rotate(-15deg) scale(1.5); Z-INDEX: 0;}
.article-content .comment-cta p{font-weight: 600; z-index: 1;}
.article-content .comment-cta button{background: var(--crimson-red); color: #ffffff; border-radius: 100px; padding: 10px 25px; z-index: 1;}
.article-content .comment-cta button:hover, .comment-cta button:focus-visible, .comment-cta button:active{outline: none; border: none; background: #a30929; color: #ffffff;}
.article-content .suggestion{margin-bottom: 35px;}
.article-content .suggestion h2{color: var(--deep-blue); font-size: 1.5rem !important; line-height: 2em; font-weight: 700;}
.article-content .suggestion .card{border: none; background: #f7f8fa;}
.article-content .suggestion .card .card-title{font-size: 1.2rem !important; line-height: 2;}
.article-content .comments{margin-bottom: 35px;}
.article-content .comments h2{color: var(--deep-blue); font-size: 1.5rem !important; line-height: 2em; font-weight: 700;}
.article-content .comments .card{background: #fff4e5; border: none; margin-bottom: 10px;}
.article-content .send-comments{margin-bottom: 35px;}
.article-content .send-comments h2{color: var(--deep-blue); font-size: 1.5rem !important; line-height: 2em; font-weight: 700;}
.article-content .send-comments .form-control{border-color: #eaeff5; padding: 10px 15px;}
.article-content .send-comments .form-control:focus{box-shadow: none; border-color: #eaeff5;}
.article-content .send-comments button{background: var(--sky-blue); border: none;}

.footer{margin-bottom: 5rem;}
.footer .grid{position: absolute; top: -140px; right: 0; z-index: -1; transform: scaleX(-1);}
.footer .dmax-width{max-width: 500px;}
.footer .footer-title{color: var(--deep-blue); font-size: 1.1rem !important; font-weight: 700; margin-top: 5px;}
.footer .footer-description{color: var(--deep-blue);}
.footer h4{color: var(--cool-gray); font-size: 1.3rem !important;}
.footer ul{color: var(--deep-blue); line-height: 2.1; padding-right: 0;}
.footer .list-unstyled a:hover{color: var(--sky-blue);}
.footer .footer-bottom{background: var(--ice-blue); border-radius: 25px; padding: 40px; margin-top: 3rem;}
.footer .footer-bottom p{color: var(--deep-blue);}
.footer .footer-bottom .social a{display: inline-flex ; align-items: center; justify-content: center; width: 60px; height: 60px; background: #ffffff; border: 1px solid var(--soft-blue); border-radius: 100%;}
.footer .footer-bottom .social a:hover{border-color: #9dbed9;}
.footer .footer-bottom .social i{color: var(--sky-blue); font-size: 1.4rem; position: relative; top: 4px;}


@media (max-width: 575.98px) {

    h1{line-height: 1.6;}
    h2{line-height: 1.6;}
    h3{line-height: 1.6;}

    .sea-tracking .title{font-size: 1.6rem !important; text-align: center;}
    .services .title{font-size: 1.6rem !important;}
    .advantages .title{font-size: 1.6rem !important;}
    .portfolio .title{font-size: 1.6rem !important;}
    .faq .title{font-size: 1.6rem !important;}
    .warehousing .information .title{font-size: 1.6rem !important;}
    .faq .sub-title {font-size: 1.3rem !important;}

    .header-primary{box-shadow: 0 0 40px rgb(0 0 0 / 6%);  margin-bottom: 3.25rem;}

    .navbar .navbar-brand img{width: 56px; height: auto;}
    .navbar .mobile-header-btn{display: flex ; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--ice-blue); color: var(--deep-blue); font-size: 1.4rem;}
    .navbar .mobile-header-btn i{position: relative; top: 3px;}

    .custom-underline{display: none;}

    .index-hero { margin-bottom: 3.25rem; }
    .index-hero .hero-information .grid {top: 0; left: -37px; }
    .index-hero .hero-information{margin: 0; padding: 0 20px; text-align: center;}
    .index-hero .hero-information .logo{display: none;}
    .index-hero .hero-information .email-box{width: 100%;}
    .index-hero .hero-information .reviews{display: inline-block;}
    .index-hero .hero-information .description p{padding: 0;}

    .service { margin-bottom: 1rem; }
    .service .grid{display: none;}
    .service .swiper-wrapper {display: block !important;}
    .service .swiper-slide { width: 100% !important; display: block;}
    .service .card{padding: 35px; background: linear-gradient(90deg, #E3F0FC 0%, #ffffff 45%, #ffffff 55%, #E3F0FC 100%) !important; border-radius: 15px !important;}

    .services{margin-bottom: 3.25rem;}
    .services .information{text-align: center !important;}
    .services .grid{top: -5%;}
    .services .grid-2{bottom: 3%;}
    .services .grid-3{display: none;}
    .services .grid-4{display: none;}


    .rra-hero{margin-bottom: 3.25rem;}
    .advantages-rra:before{bottom: 10%;}
    .rra-hero .shadow-1{display: none;}
    .rra-hero .shadow-2{display: none;}
    .rra-hero .shadow-3{display: none;}
    .rra-hero .shadow-4{display: none;}
    .rra-hero .card{background: unset; padding: 0; margin-bottom: 25px;}
    .rra-hero .box-position{position: unset; padding: 0;}
    .rra-hero .img-rail{top: unset;}

    .customclearance-hero{margin-bottom: 3.25rem;}
    .customclearance-hero .card{padding: 40px 60px 0;}
    .customclearance-hero .hero-information{position: unset; text-align: center; margin-bottom: 25px;}
    .customclearance-hero .hero-information .description{padding: 0;}
    .hero-container{display: none;}

    .shipment { margin-top: 6rem; margin-bottom: 3.25rem; }
    .shipment .card{margin-bottom: 25px;}
    .shipment .card-right:before{right: 15px;}
    .shipment .card-left:before{top: -25px; left: 0; transform: rotate(5deg);}

    .warehousing{margin-bottom: 3.25rem;}
    .warehousing .elevator{display: none;}
    .warehousing .warehousing_left{display: none;}
    .warehousing .warehousing_right{display: none;}
    .warehousing .information .description{padding: 0;}

    .advantages{margin-bottom: 3.25rem;}
    .advantages-cc .information{position: unset; padding-right: 0; text-align: center; margin-bottom: 15%;}
    .advantages .card{padding: 25px 15px !important;}

    .portfolio{margin-bottom: 3.25rem; padding: 3.25rem 0 0;}
    .portfolio:before{bottom: 15%;}

    .crossstuff-hero{padding-bottom: 3.25rem;}
    .crossstuff-hero .world-wrapper{width: 100%; min-height: auto;}
    .crossstuff-hero .information .description{padding: 0 20px;}
    .crossstuff-hero .world-wrapper:before{width: 100%; height: 250px; top: 70%;}
    .crossstuff-hero .world-wrapper:after{width: 95%; height: 200px; top: 70%;}
    .crossstuff-hero .grid{display: none;}
    .crossstuff-hero .grid-2{display: none;}

    .tracking { padding-top: 3.25rem; margin-bottom: 3.25rem; }
    .tracking .big-circle{right: 150px; left: unset;}
    .tracking .information .title{font-size: 2rem !important;}
    .tracking .information .description {padding: 0 20px; margin: 0 0 30px 0;}

    .map{margin-bottom: 0.5rem;}
    .map .information .sub-title{font-size: 1.3rem !important;}
    .map .information .title{font-size: 2rem !important;}
    .map .information .description{padding: 0 20px;}
    .map .ping-wave{width: 15px; height: 15px;}

    .ship{text-align: center; margin-bottom: 3rem; padding: 0 !important;}
    .ship .ship-mobile-only{display: block;}
    .ship .container-wrapper{display: none;}
    .ship .information{position: unset;}
    .ship .information .description{padding: 0;}
    .ship .information .feature{border: none; padding: 0;}
    .ship .information .feature li{background: #fadbd97d; border-radius: 5px; padding: 5px 0 10px; margin-bottom: 8px;}
    .ship .information .link{position: unset;}

    .stats{margin-bottom: 3.25rem;}

    .customers{padding: 0 !important;}
    .customers .grid-2{top: 0;}
    .customers:after{position: unset;}
    .customers .sub-title{font-size: 1.3rem !important;}
    .customers .title{font-size: 2rem !important;}
    .customers .reviews{margin-top:2rem;}
    .customers .reviews .card{min-height: 500px; display: flex ;  justify-content: center;}
    .customers .reviews .card .reviewer-role{font-size: 0.875rem;}
    .customers .reviews .card .comment-text{font-size: 0.875rem !important;}
    .customers .swiper-container { width: 100%; max-width: 100%; overflow: hidden; }
    .customers .swiper-wrapper { display: flex; }
    .customers .swiper-slide { width: 100% !important; box-sizing: border-box; padding: 1rem; }

    .road{text-align: center; align-items: unset; min-height: 900px;}
    .road .information .title{font-size: 2rem !important;}
    .road .truck-wrapper{top: unset;}
    .road .information .feature{padding: 0;}
    .road .information .feature span{display: flex ; margin: 0 auto;}
    .road .information .feature li { box-shadow: 0 8px 10px 0px #c6e1f833; border-bottom: none; border-radius: 5px; padding: 10px; margin-bottom: 25px; }

    .sea-hero { margin-bottom: 3.25rem; }
    .sea-hero:before{display: none;}
    .sea-hero .hero-information .grid{top: 18%;}
    .sea-hero .hero-information{margin: 0; padding: 0 20px; text-align: center;}
    .sea-hero .phone.d-flex { justify-content: center !important; }

    .sea-tracking ul{display: none;}

    .tab-progress{margin-bottom: 3.25rem;}
    .tab-progress .nav-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 0 10px; gap: 12px; scrollbar-width: none; scroll-snap-type: x mandatory; white-space: nowrap; justify-content: left !important; }
    .tab-progress .nav-tabs::-webkit-scrollbar { display: none; }
    .tab-progress .nav-item { flex: 0 0 auto; min-width: 100px; scroll-snap-align: start; text-align: center; }
    .tab-progress .nav-link { width: 100%; height: 100%; padding: 12px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .tab-progress .nav-tabs .nav-link img { width: 36px; height: 36px; object-fit: contain; }
    .tab-progress .nav-tabs .nav-link span { font-size: 12px; margin-top: 6px; display: block; }
    .tab-progress .tab-content .img-fluid img{width: 100%;}
    .tab-progress .tab-content .information{padding: 35px 0 0; text-align: center;}
    .tab-progress .tab-content .img-fluid:before{left: 37%;}
    .tab-progress .tab-content .img-fluid:after{left: 47%;}

    .faq{margin-bottom: 3.25rem;}

    .cta{margin-bottom: 3.25rem; text-align: center;}
    .cta .card > .d-flex { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .cta .card .title, .cta .card .description, .cta .card .link { text-align: center; position: relative; z-index: 1; }
    .cta .card .link{display: block; margin-top: 15px;}

    .transit-hero .information .description{padding: unset;}
    .transit-hero .neighbors-wrapper{margin: 1rem auto;}
    .transit-hero .neighbors-fluid{width: 400px;}

    .blog .hero{padding: 0 25px;}
    .blog .categories {flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 15px 0;}
    .blog .categories a {flex: 0 0 auto;}

    article{padding: 0 15px;}
    .article-header .card{margin: 0; padding: 0; text-align: center; background: none; box-shadow: none;}
    .article-header .card .article-title{font-size: 1.3rem !important;}
    .article-header .card .breadcrumb{display: inline-flex;}
    .article-body .sidebar{display: none;}
    .article-content .comment-cta {flex-direction: column !important; align-items: center !important; text-align: center;}
    .article-content .comment-cta p{margin: 0 auto;}
    .article-content .comment-cta button { margin-top: 30px; width: fit-content; }
    .article-content .suggestion h2{text-align: center; margin-bottom: 30px;}
    .article-content .suggestion .card{text-align: center;}
    .article-content .comments h2{text-align: center; margin-bottom: 30px;}
    .article-content .send-comments h2{text-align: center; margin-bottom: 30px;}
    .article-content .send-comments button{padding: 15px;}


    .footer {text-align: center; margin-bottom: 2rem; }
    .footer .grid{top: 9px;}
    .footer .accordion-item{border-color: var(--ice-blue);}
    .footer .accordion-header button:focus{box-shadow: none;}
    .footer .accordion-button:not(.collapsed){background: var(--sky-blue); color: #ffffff;}
    .footer .accordion-body{text-align: right;}
    .footer .footer-bottom{border-radius: 5px; padding: 15px;}
    .footer .footer-bottom .social a{width: 45px; height: 45px;}
    .footer .footer-bottom .social i{font-size: 1rem;}
    .footer .copyright{text-align: center; font-size: 0.875rem !important; color: var(--deep-blue); margin-top: 25px;}
    .footer .accordion-button::after{margin-right: auto; margin-left: unset;}
}

@media (min-width: 576px) and (max-width: 767.98px) {}

@media (min-width: 768px) and (max-width: 991.98px) {}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .tracking .information .title{font-size: 2rem !important;}
    .map .information .sub-title{font-size: 1.5rem !important;}
    .map .information .title{font-size: 2rem !important;}
    .customers .sub-title{font-size: 1.5rem !important;}
    .customers .title{font-size: 2rem !important;}
    .road .information .title{font-size: 2rem !important;}
    .custom-underline{width: 78.9%;}
    .custom-underline::after{height: 99px;}
    .index-hero{margin-bottom: 4rem;}
    .index-hero .hero-information{margin-top: 10%;}
    .index-hero .hero-ship-wrapper{width: inherit; top: 170px;}
    .index-hero .hero-information .email-box{width: 70%;}
    .service{margin-bottom: 3rem;}
    .tracking{margin-bottom: 4rem;}
    .map{margin-bottom: 4rem;}
    .ship{margin-bottom: 3rem;}
    .ship .information{top: 0;}
    .stats{margin-bottom: 4rem;}
    .customers{margin-bottom: 3rem;}
    .customers .reviews{margin-top: 4rem; margin-bottom: 4rem;}
    .road{margin-bottom: 4rem;}
    .road .truck-wrapper{right: unset; top:25%;}
    .road .information .feature{padding-right: 10%;}
    .mobile-slide-menu,
    .mobile-menu-overlay {display: none !important;}
    .tab-progress .nav-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 0 10px; gap: 12px; scrollbar-width: none; scroll-snap-type: x mandatory; white-space: nowrap;}
    .tab-progress .nav-tabs::-webkit-scrollbar { display: none; }
    .tab-progress .nav-item { flex: 0 0 auto; min-width: 100px; scroll-snap-align: start; text-align: center; }
    .tab-progress .nav-link { width: 100%; height: 100%; padding: 12px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .tab-progress .nav-tabs .nav-link img { width: 36px; height: 36px; object-fit: contain; }
    .tab-progress .nav-tabs .nav-link span { font-size: 12px; margin-top: 6px; display: block; }
    .tab-progress .tab-content .img-fluid img{width: 100%;}
    .rra-hero .img-fluid{min-width: 235px;}
    .rra-hero .img-air{left: -17%;}
    .rra-hero .img-rail{left: -11%;}
    .rra-hero .img-road{top: 42%;}
    .hero-container{right: 28%;}
    .customclearance-hero .hero-information{top: 0;}
    .customclearance-hero .hero-information .description{padding-right: 0;}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .custom-underline{width: 82.35%;}
    .custom-underline::after{height: 162px;}
    .index-hero{margin-bottom: 4rem;}
    .index-hero .hero-information .email-box{width: 60%; z-index: 1;}
    .index-hero .hero-ship-wrapper{width: 65%; top: 115px;}
    .service{margin-bottom: 3rem;}
    .service .grid { position: absolute; top: -75px; right: 0; z-index: -1; }
    .service .card{padding: 2rem 4.5rem;}
    .service .card .icon img{width: 75px;}
    .tracking{margin-bottom: 4rem;}
    .map{margin-bottom: 4rem;}
    .ship{margin-bottom: 3rem;}
    .ship .container-wrapper{width: 47%; top: 10px;}
    .ship .container-wrapper .img-fluid{width: 100%;}
    .ship .information{top: 70px;}
    .ship .information .link{top: 10px;}
    .stats{margin-bottom: 4rem;}
    .customers{margin-bottom: 3rem;}
    .customers .reviews{margin-top: 4rem; margin-bottom: 4rem;}
    .road{margin-bottom: 4rem;}
    .road .truck-wrapper{top: 20%; width: 50%;}
    .tab-progress .nav-tabs{gap: 1px;}
    .big-tab-progress .nav-link{padding: 0 19px 20px !important;}
    .footer .footer-bottom{padding: 30px;}
    .rra-hero .img-air{left: -17%;}
    .rra-hero .img-rail{left: -11%;}
    .rra-hero .img-road{top: 38%;}
    .rra-hero .circle::after{width: 290px; height: 290px; top: -26px; left: -26px;}
    .rra-hero .card{padding: 2rem 0 10rem;}
    .rra-hero .service-box{min-height:400px;}
    .rra-hero .img-fluid{min-width: auto; left: unset;}
    .transit-hero .neighbors-wrapper{margin: 0rem auto;}
    .transit-hero .neighbors-wrapper .circle-1{width: 75%; height: 75%;}
    .transit-hero .neighbors-fluid{max-width: 40rem;}
    .hero-container{right: 28.5%; width: 35rem;}
    .crossstuff-hero .world-wrapper{width: 350px; height: 350px; min-height: 370px;}
    .crossstuff-hero .world-wrapper:before{width: 590px; height: 590px;}
    .crossstuff-hero .world-wrapper:after{width: 530px; height: 530px;}
    .about-services .item .card .title{font-size: 1rem !important;}
}

@media (min-width: 1400px) and (max-width: 1499.98px) {
    .service{margin-bottom: 3rem;}
    .service .grid { position: absolute; top: -85px; right: 0; z-index: -1; }
    .ship .container-wrapper{top: 30px;}
    .road .truck-wrapper{width: 50%; top: 85px;}
    .footer .footer-bottom{padding: 30px;}
    .rra-hero .img-air{left: -17%;}
    .rra-hero .img-rail{left: -11%;}
    .rra-hero .img-road{top: 38%;}
    .rra-hero .circle::after{width: 290px; height: 290px; top: -26px; left: -26px;}
    .rra-hero .card{padding: 2rem 0 10rem;}
    .rra-hero .service-box{min-height:400px;}
    .rra-hero .img-fluid{min-width: auto; left: unset;}
    .transit-hero .neighbors-wrapper{margin: 0rem auto;}
    .transit-hero .neighbors-wrapper .circle-1{width: 75%; height: 75%;}
    .transit-hero .neighbors-fluid{max-width: 40rem;}
    .hero-container{right: 28.5%; width: 35rem;}
    .crossstuff-hero .world-wrapper{width: 350px; height: 350px; min-height: 370px;}
    .crossstuff-hero .world-wrapper:before{width: 590px; height: 590px;}
    .crossstuff-hero .world-wrapper:after{width: 530px; height: 530px;}
    .about-services .item .card .title{font-size: 1rem !important;}
}