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


h1{font-size: 2.6rem !important; font-weight: 700;}
h2{font-size: 1.75rem !important; font-weight: 700;}
h3{font-size: 1.1rem !important; font-weight: 700;}
p{font-size: 1rem !important; font-weight: 400; 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 45px; 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-right: 17px;}
.navbar .navbar-nav .nav-link{color: var(--deep-blue);}
.navbar .navbar-nav .nav-link:hover{color: var(--sky-blue);}
.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 { 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: 10px 20px; margin-top: 25px; opacity: 0; transform: translateY(10px); visibility: hidden; transition: all 0.3s ease; display: block !important; pointer-events: none; }
.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 { left: 0; }
.mobile-menu-overlay { position: fixed; top: 0; left: 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: rtl; 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; left: -280px; width: 260px; height: 100%; background: #fff; z-index: 1050; overflow-y: auto; transition: left 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;}

.custom-underline { position: relative; width: 90.65%; height: 8px; background-color: var(--sky-blue); margin-left: auto; }
.custom-underline::before { content: ""; position: absolute; top: -80px; right: 0; width: 8px; height: 85px; background-color: var(--sky-blue); }
.custom-underline .curve-right{position: absolute; top: -40px; right: -1px; width: 50px; height: 50px; background: #ffffff;}
.custom-underline .curve-right .boarder{position: relative; bottom: 2px; right: 1px; width: 50px; height: 50px; background: var(--sky-blue); border-radius: 0 0 30px 0;}
.custom-underline .curve-right .boarder .blank{position: absolute; bottom: 8px; right: 8px; width: 50px; height: 50px; border-radius: 0 0 25px 0; background: #ffffff;}
.custom-underline::after {content: ""; position: absolute; top: 49px; width: 8px; height: 183px; background-color: var(--sky-blue);}
.custom-underline .curve-left{position: relative; top: -1px; left: -1px; width: 50px; height: 50px; background: #ffffff;}
.custom-underline .curve-left .boarder{position: relative; top: 1px; left: 1px; width: 50px; height: 50px; background: var(--sky-blue); border-radius: 30px 0 0 0;}
.custom-underline .curve-left .boarder .blank{position: absolute; top: 8px; left: 8px; width: 50px; height: 50px; border-radius: 25px 0 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%; left: 0; z-index: -1;}
.index-hero .hero-information .grid img{width: 90%;}
.index-hero .hero-information .logo{width: 80px; min-height: 85px; position: relative; top: -25px;}
.index-hero .hero-information .title{color: var(--sky-blue); margin: 0;}
.index-hero .hero-information .sub-title{color: var(--deep-blue); font-size: 1.67rem !important; position: relative; top: -10px;}
.index-hero .hero-information .description{color: var(--deep-blue); margin-bottom: 1.5rem;}
.index-hero .hero-information .description p{margin-bottom: 0;}
.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; right: 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);}*/
.index-hero .hero-information .email-box button svg{color: var(--crimson-red);}
.index-hero .hero-information .email-box button:hover i{position:relative; left: 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-left: 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-ship-wrapper{position: absolute; top: 95px; right: 0; overflow: hidden;}
.index-hero .hero-ship-wrapper .img-fluid{width: 100%; position: sticky; z-index: -2;}
.index-hero .location-container {position: absolute; top: 3%; left: 34.8%; 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(90deg, #ffffff, #E3F0FC); border-radius: 0 200px 200px 0;}
.service .right-shadow{background: linear-gradient(270deg, #ffffff, #E3F0FC); border-radius: 200px 0 0 200px;}
.service .card .title{color: var(--deep-blue);}
.service .card .description{color: var(--deep-blue);}
.service .swiper-service-slider { width: 100%; padding: 30px 0; overflow: hidden;}
.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{font-size: 3.125rem !important; 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 .icon svg { 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); font-size: 3.125rem !important; position: relative; top: -40px;}
.sea-tracking ul{position: relative; top: 38px;}
.sea-tracking li{border-left: 4px solid #fff; color: #fff; padding-left: 10px;}

.sea-hero{margin-bottom: 6.25rem;}
.sea-hero:before{position: absolute; top: 0; right: 0; bottom: 0; width: 32%; content: ''; background: linear-gradient(0deg, rgb(147, 213, 212), rgb(66, 139, 173)); border-radius: 35px 0 0 35px; z-index: -1;}
.sea-hero .hero-information{padding-right: 20%;}
.sea-hero .hero-information .title{color: var(--sky-blue);}
.sea-hero .hero-information .sub-title{color: var(--deep-blue);}
.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-right: 10px;}
.sea-hero .hero-information .phone .icon i{color: var(--crimson-red);}
.sea-hero .sea-hero-wrapper .img-fluid{position: relative; right: -25%; min-height:400px; margin: 35px 0 0; }
.sea-hero .hero-information .grid{position: absolute; top: 40%; left: 0; z-index: -1;}
.sea-hero .hero-information .grid img{width: 90%;}

.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.75rem !important; font-weight: 700; color: var(--deep-blue);}
.crossstuff-hero .information .title{font-size: 3.125rem !important; color: var(--sky-blue);}
.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.75rem !important; font-weight: 700; color: var(--deep-blue);}
.transit-hero .information .title{color: var(--sky-blue);}
.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: 50px; border-bottom: 1px solid var(--soft-blue); padding: 0; margin: 0 0 25px 0;}
.big-tab-progress .nav-tabs{gap: 5px;}
.tab-progress .nav-link{padding: 0 60px 20px; border: none;}
.big-tab-progress .nav-link{padding: 0 25px 20px !important;}
.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-right: 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:before{position: absolute; left: 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: ''; left: 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{font-size: 3.125rem !important; color: var(--sky-blue); margin-bottom: 3.5rem;}
.services .information{max-width: 320px;}
.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 .grid{position: absolute; top: -10%; left: 0; z-index: -1;}
.services .grid img{width: 60%;}
.services .grid-2{position: absolute; bottom: -15%; right: 0; text-align: right; z-index: -1;}
.services .grid-2 img{width: 60%;}
.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{font-size: 3.125rem !important; color: var(--sky-blue);}
.rra-hero .sub-title{font-size: 1.75rem !important; font-weight: 700; color: var(--deep-blue);}
.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 .img-fluid{position: relative; max-width: 100%; height: auto; z-index: 2; min-width: 295px;}
.rra-hero .img-air{top: 95px;}
.rra-hero .img-rail{position: relative; top: 30px;}
.rra-hero .img-road{position: absolute; top: 35%; right: 0;}
.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(102deg); 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; right: -22px; width: 110%; height: 180px; background: #EEB879; transform: rotate(-5deg); transform-origin: right bottom;}
.rra-hero .road-box:after{position: absolute; content: ''; bottom: -45px; right: -40px; 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: 1.5; }
.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{font-size: 3.125rem !important; 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;}
.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{font-size: 3.125rem !important; 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);}
.shipment .card p{color: var(--deep-blue);}

.warehousing .information{position: relative; z-index: 2; text-align: center;}
.warehousing .information .title{font-size: 3.125rem !important; 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{font-size: 3.125rem !important; color: var(--sky-blue); margin-bottom: 3.5rem;}
.faq .sub-title{font-size: 1.75rem !important; font-weight: 700; color: var(--deep-blue);}
.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-right: 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: 1.1rem !important; font-weight: 500;}
.faq .accordion-body{text-align: left; color: var(--deep-blue);}

.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; right: 0; content: ''; background: #003E5A; width: 50%; border-radius: 200px 0 0 200px;}
.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-right: 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 left; 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;}

.map{margin-bottom: 6.25rem; text-align: center;}
.map .information .sub-title{font-size: 1.75rem !important; font-weight: 700; color: var(--deep-blue);}
.map .information .title{font-size: 3.125rem !important; 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; left: 0; width: 50%; z-index: 1;}
.ship .container-wrapper .img-fluid{height: auto; object-fit: cover; position: relative;}
.ship .information{position: relative; top: 140px; z-index: 1;}
.ship .information .title{font-size: 3.125rem !important; color: var(--deep-blue);}
.ship .information .description{color: var(--deep-blue); margin-bottom: 50px; padding-right:40%;}
.ship .information .feature{color: var(--deep-blue); list-style: none; border-left: 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); font-size: 2.5rem;}
.stats .card .icon svg{color: var(--sky-blue); font-size: 2.5rem;}
.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{font-size: 3.125rem !important; color: var(--sky-blue);}
.customers .sub-title{font-size: 1.75rem !important; font-weight: 700; color: var(--deep-blue);}
.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; right: 0;}
.road .truck-wrapper .img-fluid{width: 100%;}
.road .information .title{font-size: 3.125rem !important; 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 30% 0 0; 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-right: 15px;}
/*.road .information .feature span i{color: var(--sky-blue);}*/
.road .information .feature span svg{color: var(--sky-blue);}
.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 {min-height: 685px; background: url('/template/images/shipping.png') no-repeat center center; background-color: #01526d; color: #fff; margin-bottom: 6.25rem;}
.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%); }
.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; left: 19px; width: 3px; height: 73%; background: var(--ice-blue); z-index: -1;}
.about-mission .process-icon{background: var(--ice-blue); color: var(--sky-blue);}
.about-mission .process-text{color: var(--deep-blue);}
.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 .touch{color: var(--deep-blue); margin-bottom: 3.8rem;}
.contactus .touch .icon { position: relative; display: inline-flex ; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 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;}

.auth .card{border-radius: 5px !important; border: none; box-shadow: 0 10px 16px 0px rgb(56 93 165 / 6%), 0 15px 60px rgba(0, 0, 0, 0.05); padding: 35px 25px; margin: 10% 0 20%;}
.auth .card .title{color: var(--deep-blue);}
.auth .card .form-control{border-color: #eaeff5 !important; padding: 10px 15px;}
.auth .card .form-control:focus{box-shadow: none;}
.auth .card .input-group-text{background: #eaeff5; color: var(--deep-blue);}
.auth .card button{background: var(--sky-blue); color: #fff;}

.footer{margin-bottom: 5rem;}
.footer .grid{position: absolute; top: -140px; left: 0; z-index: -1;}
.footer .footer-title{color: var(--deep-blue); font-size: 1.1rem !important;}
.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;}
.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;}


@media (max-width: 575.98px) {

    .sea-tracking .title{font-size: 2rem !important;}
    .services .title{font-size: 2rem !important;}
    .advantages .title{font-size: 2rem !important;}
    .portfolio .title{font-size: 2rem !important;}
    .faq .title{font-size: 2rem !important;}
    .warehousing .information .title{font-size: 2rem !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;}

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

    .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-right: 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;}

    .about-hero{background: unset; min-height: unset; margin-bottom: 5.25rem;}
    .about-hero .circles{display: none;}
    .about-hero .information{margin: 0; padding: 0 20px; text-align: center;}
    .about-hero .information h1{color: var(--sky-blue);}
    .about-hero .information p{color: var(--deep-blue); margin-bottom: 25px;}
    .about-hero .contact-link{font-weight: 400; background: var(--blush-pink); color: var(--crimson-red); border: none; border-radius: 50px; padding: 10px 15px 15px;}
    .about-hero .logo-slider{display: none;}
    .about-vision{margin-bottom: 0 !important;}
    .about-vision .information{text-align: center; padding: 0 5px; position: unset; margin-top: 35px;}
    .about-vision .stats { margin-bottom: 3.25rem; display: block !important; }
    .about-vision .stat {display: inline-block; padding: 0 20px; }
    .about-mission .information { text-align: center; padding: 0 5px; position: unset; margin-top: 35px; }
    .about-mission .process-text{text-align: left;}
    .about-services{margin-bottom: 3rem !important;}
    .about-services .item > div:nth-child(3n + 2) .card {transform: none !important;}
    .about-services .item .paddingbox{padding: 0 5px 15px;}
    .about-services .item .card {background: none; border: 1px solid var(--ice-blue); border-radius: 25px; padding: 50px 25px; }
    .about-services .item .card .icon { display: flex ; align-items: center; justify-content: center; background: #fff; text-align: center; width: unset; height: unset; margin: 0 auto; border-radius: unset; }
    .about-vision .img-fluid img{width: 100%;}
    .about-mission .img-fluid img{width: 100%;}

    .contactus{margin:0 0 3.25rem;}
    .contactus .card{padding: 0;}
    .contactus .touch{margin: 25px 5px;}

    .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: left;}
    .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;}
}

@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: 88.65%;}
    .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) {
    h3{font-size: 1rem !important;}
    .custom-underline{width: 90.5%;}
    .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;}
    .tab-progress .nav-tabs .nav-link span{font-size: 0.85rem;}
    .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: 1599.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;}
}