/* =========================================================
TRANSPORT WEBSITE
CLEAN + RESPONSIVE + MOBILE HORIZONTAL SCROLL FIX
========================================================= */

/* =========================================================

1. GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
width: 100%;
max-width: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}

body {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;

 
font-family: Arial, Helvetica, sans-serif;

background: #f4f8fb;
color: #071a2b;

overflow-x: hidden;
 

}

img {
max-width: 100%;
height: auto;
}

button,
input,
select,
textarea {
font-family: inherit;
}

::selection {
background: #19b5fe;
color: #fff;
}

section {
width: 100%;
max-width: 100%;
overflow: hidden;
}

/* =========================================================
2. VARIABLES
========================================================= */

:root {
--blue: #19b5fe;
--dark: #071a2b;
--orange: #ff8a00;
--white: #ffffff;
--light-bg: #f4f8fb;

 
--transition: 0.45s cubic-bezier(.2,.8,.2,1);
 

}

/* =========================================================
3. NAVBAR
========================================================= */

.navbar {
position: fixed;

 
top: 0;
left: 0;

width: 100%;
max-width: 100%;

z-index: 9999;

padding: 18px 0;

background: rgba(7, 26, 43, 0.88);

backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);

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

transition:
    background .4s ease,
    box-shadow .4s ease,
    transform .4s ease;
 

}

.navbar.scrolled {
background: rgba(7,26,43,.94);

 
box-shadow:
    0 10px 40px rgba(0,0,0,.12);
 

}

.nav-container {
width: 90%;
max-width: 1400px;

 
margin: auto;

display: flex;
align-items: center;
justify-content: space-between;

min-width: 0;
 

}

/* =========================================================
LOGO
========================================================= */

.logo {
display: flex;
align-items: center;

 
gap: 10px;

text-decoration: none;
color: #fff;

min-width: 0;
 

}

.logo-icon {
width: 43px;
height: 43px;

 
flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;

background: var(--orange);
color: #fff;

font-size: 20px;

transform: rotate(-8deg);

transition: .4s ease;
 

}

.logo:hover .logo-icon {
transform: rotate(0deg) scale(1.08);
}

.logo-text {
font-size: 20px;
font-weight: 800;

 
letter-spacing: 1px;

white-space: nowrap;
 

}

.logo-text span {
color: var(--blue);
}

/* =========================================================
NAV MENU
========================================================= */

.nav-menu {
display: flex;
align-items: center;

 
gap: 30px;

min-width: 0;
 

}

.nav-menu > a,
.dropdown-link {
position: relative;

 
color: #fff;
text-decoration: none;

font-size: 14px;
font-weight: 600;

padding: 10px 0;

transition: .3s ease;
 

}

.nav-menu > a::after,
.dropdown-link::after {
content: "";

 
position: absolute;

left: 50%;
bottom: 2px;

width: 0;
height: 2px;

background: var(--orange);

transform: translateX(-50%);

transition: .3s ease;
 

}

.nav-menu > a:hover,
.dropdown-link:hover {
color: var(--blue);
}

.nav-menu > a:hover::after,
.dropdown-link:hover::after,
.nav-menu > a.active::after {
width: 70%;
}

/* =========================================================
DROPDOWN
========================================================= */

.dropdown {
position: relative;
}

.dropdown-link {
display: flex;
align-items: center;

 
gap: 7px;
 

}

.dropdown-link i {
font-size: 10px;

 
transition: .3s ease;
 

}

.dropdown:hover .dropdown-link i {
transform: rotate(180deg);
}

.dropdown-menu {
position: absolute;

 
top: 45px;
left: -20px;

width: 220px;

padding: 12px;

background: #fff;

border-radius: 12px;

box-shadow:
    0 20px 50px rgba(0,0,0,.15);

opacity: 0;
visibility: hidden;

transform: translateY(15px);

transition: .3s ease;
 

}

.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;

 
transform: translateY(0);
 

}

.dropdown-menu a {
display: flex;
align-items: center;

 
gap: 12px;

padding: 13px;

text-decoration: none;

color: var(--dark);

border-radius: 8px;

font-size: 14px;

transition: .3s ease;
 

}

.dropdown-menu a i {
width: 25px;

 
color: var(--orange);
 

}

.dropdown-menu a:hover {
background: #eef8fd;
color: #0b3c5d;

 
transform: translateX(5px);
 

}

/* =========================================================
NAV BUTTON
========================================================= */

.nav-button {
display: flex;
align-items: center;

 
gap: 10px;

padding: 13px 20px;

border-radius: 50px;

background: var(--orange);
color: #fff;

text-decoration: none;

font-size: 14px;
font-weight: 700;

transition: .4s ease;

box-shadow:
    0 8px 25px rgba(255,138,0,.25);

flex-shrink: 0;
 

}

.nav-button:hover {
background: var(--blue);

 
transform: translateY(-3px);

box-shadow:
    0 12px 30px rgba(25,181,254,.3);
 

}

.nav-button i {
transition: .3s ease;
}

.nav-button:hover i {
transform: translateX(5px);
}

/* =========================================================
MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
display: none;

 
width: 42px;
height: 42px;

flex-shrink: 0;

border: none;

background: transparent;

cursor: pointer;
 

}

.menu-toggle span {
display: block;

 
width: 26px;
height: 2px;

background: #fff;

margin: 6px auto;

transition: .3s ease;
 

}

/* =========================================================
4. HERO
========================================================= */

.demo-section {
position: relative;

 
width: 100%;
max-width: 100%;

min-height: 100vh;

display: flex;
align-items: center;
justify-content: center;

text-align: center;

background:
    linear-gradient(
        rgba(7,26,43,.8),
        rgba(7,26,43,.8)
    ),
    url("image/banner.png");

background-size: cover;
background-position: center;

color: #fff;

overflow: hidden;
 

}

.demo-section::after {
content: "";

 
position: absolute;

width: 500px;
height: 500px;

right: -180px;
top: -180px;

border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(25,181,254,.18),
        transparent 70%
    );

animation: heroOrb 8s ease-in-out infinite;

pointer-events: none;
 

}

.demo-section h1 {
position: relative;
z-index: 2;

 
font-size: clamp(40px, 6vw, 80px);

margin-bottom: 15px;

animation:
    heroTitle 1.2s cubic-bezier(.2,.8,.2,1) both;
 

}

.demo-section p {
position: relative;
z-index: 2;

 
font-size: 22px;

color: var(--blue);
 

}

@keyframes heroOrb {
0%,100% {
transform: translate(0,0) scale(1);
}

 
50% {
    transform: translate(-50px,50px) scale(1.2);
}
 

}

@keyframes heroTitle {
from {
opacity: 0;

 
    transform: translateY(70px);

    filter: blur(10px);
}

to {
    opacity: 1;

    transform: translateY(0);

    filter: blur(0);
}
 

}

/* =========================================================
5. COMMON SECTION STYLES
========================================================= */

.section-mini-title {
display: inline-flex;
align-items: center;

 
gap: 8px;

color: var(--orange);

font-size: 12px;
font-weight: 800;

letter-spacing: 2px;

margin-bottom: 15px;
 

}

.section-heading {
max-width: 750px;

 
margin: 0 auto 60px;

text-align: center;
 

}

.section-heading h2,
.why-content h2,
.tabs-heading h2,
.network-content h2,
.contact-info h2 {
font-size: clamp(38px,5vw,62px);

 
line-height: 1.08;

color: var(--dark);

letter-spacing: -2px;

margin-bottom: 20px;
 

}

.section-heading h2 span,
.why-content h2 span,
.tabs-heading h2 span,
.network-content h2 span,
.contact-info h2 span {
color: var(--blue);
}

.section-heading p {
color: #647486;

 
font-size: 16px;

line-height: 1.7;
 

}

/* =========================================================
6. TRACKING
========================================================= */

.tracking-section {
background: var(--dark);

 
padding: 70px 0;
 

}

.tracking-container {
width: 90%;
max-width: 1250px;

 
margin: auto;

display: grid;

grid-template-columns: .8fr 1.5fr;

align-items: center;

gap: 60px;

min-width: 0;
 

}

.tracking-intro h2 {
color: #fff;

 
font-size: 38px;

line-height: 1.1;

margin-bottom: 15px;
 

}

.tracking-intro h2 span {
color: var(--blue);
}

.tracking-intro p {
color: rgba(255,255,255,.65);

 
line-height: 1.6;

max-width: 450px;
 

}

.tracking-box {
width: 100%;

 
padding: 10px;

display: flex;

gap: 10px;

background: #fff;

border-radius: 12px;

box-shadow:
    0 20px 50px rgba(0,0,0,.2);

min-width: 0;
 

}

.tracking-input {
flex: 1;

 
min-width: 0;

display: flex;
align-items: center;

gap: 12px;

padding: 0 15px;
 

}

.tracking-input i {
color: var(--blue);
}

.tracking-input input {
width: 100%;

 
min-width: 0;

border: 0;
outline: 0;

font-size: 15px;
 

}

.track-button,
.quote-button {
border: 0;

 
padding: 15px 20px;

border-radius: 8px;

text-decoration: none;

font-weight: 700;

cursor: pointer;

transition: .3s;

flex-shrink: 0;
 

}

.track-button {
background: var(--blue);
color: #fff;
}

.quote-button {
background: var(--orange);
color: #fff;

 
display: flex;
align-items: center;

gap: 8px;
 

}

.track-button:hover,
.quote-button:hover {
transform: translateY(-3px);
}

#trackingMessage {
grid-column: 2;

 
color: var(--blue);

margin-top: -40px;

padding-left: 15px;
 

}

/* =========================================================
7. SERVICES
========================================================= */

.services-section {
padding: 110px 0;

 
background: var(--light-bg);
 

}

.services-container {
width: 90%;
max-width: 1400px;

 
margin: auto;

min-width: 0;
 

}

.services-grid {
display: grid;

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

gap: 22px;
 

}

.service-card {
position: relative;

 
width: 100%;
min-width: 0;

padding: 38px;

background: #fff;

border: 1px solid #e4edf3;

border-radius: 18px;

overflow: hidden;

transform-style: preserve-3d;

transition:
    transform .15s ease,
    box-shadow .4s ease,
    border-color .4s ease;
 

}

.service-card::before {
content: "";

 
position: absolute;

inset: 0;

border-radius: inherit;

background:
    radial-gradient(
        circle at var(--mouse-x,50%) var(--mouse-y,50%),
        rgba(25,181,254,.15),
        transparent 35%
    );

opacity: 0;

pointer-events: none;

transition: opacity .3s ease;
 

}

.service-card:hover::before {
opacity: 1;
}

.service-card:hover {
box-shadow:
0 30px 70px rgba(7,26,43,.14);
}

.service-card::after {
content: "";

 
position: absolute;

top: 0;
left: 0;

width: 100%;
height: 4px;

background: var(--blue);

transform: scaleX(0);

transform-origin: left;

transition: .4s;
 

}

.service-card:hover::after {
transform: scaleX(1);
}

.featured-service {
background: var(--dark);

 
color: #fff;
 

}

.featured-service::after {
content: "POPULAR";

 
position: absolute;

top: 18px;
right: 18px;

width: auto;
height: auto;

padding: 5px 10px;

border-radius: 30px;

background: var(--orange);

color: #fff;

font-size: 9px;
font-weight: 700;

letter-spacing: 1px;

transform: none;

animation: popularPulse 2s infinite;
 

}

.service-number {
position: absolute;

 
top: 20px;
right: 25px;

font-size: 12px;

color: #a9b7c4;
 

}

.service-icon {
width: 60px;
height: 60px;

 
display: flex;
align-items: center;
justify-content: center;

border-radius: 15px;

background: rgba(25,181,254,.12);

color: var(--blue);

font-size: 24px;

margin-bottom: 25px;

transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease;
 

}

.service-card:hover .service-icon {
transform:
translateZ(35px)
rotate(-8deg)
scale(1.12);

 
box-shadow:
    0 15px 35px rgba(25,181,254,.25);
 

}

.service-card h3 {
font-size: 22px;

 
margin-bottom: 15px;
 

}

.service-card p {
color: #718090;

 
line-height: 1.7;

margin-bottom: 25px;
 

}

.featured-service p {
color: rgba(255,255,255,.65);
}

.service-card a {
color: var(--blue);

 
text-decoration: none;

font-weight: 700;

font-size: 14px;
 

}

.service-card a i {
margin-left: 7px;

 
transition: .3s;
 

}

.service-card a:hover i {
margin-left: 12px;
}

@keyframes popularPulse {
0%,100% {
box-shadow:
0 0 0 0 rgba(255,138,0,.3);
}

 
50% {
    box-shadow:
        0 0 0 8px rgba(255,138,0,0);
}
 

}

/* =========================================================
8. WHY US
========================================================= */

.why-section {
padding: 120px 0;

 
background: #fff;
 

}

.why-container {
width: 90%;
max-width: 1300px;

 
margin: auto;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 90px;

align-items: center;

min-width: 0;
 

}

.why-image {
position: relative;

 
min-width: 0;
 

}

.why-image img {
display: block;

 
width: 100%;
max-width: 100%;

height: 600px;

object-fit: cover;

border-radius: 25px;

transition:
    transform .8s cubic-bezier(.2,.8,.2,1);
 

}

.why-image:hover img {
transform: scale(1.06);
}

.experience-card {
position: absolute;

 
right: -25px;
bottom: 30px;

display: flex;
align-items: center;

gap: 12px;

padding: 22px;

background: var(--orange);

color: #fff;

border-radius: 15px;

box-shadow:
    0 20px 40px rgba(255,138,0,.25);

animation:
    experienceFloat 4s ease-in-out infinite;
 

}

.experience-card strong {
font-size: 40px;
}

.experience-card span {
font-size: 12px;

 
line-height: 1.4;
 

}

.why-content > p {
color: #68798a;

 
line-height: 1.8;

margin-bottom: 35px;
 

}

.why-features {
display: grid;

 
grid-template-columns: 1fr 1fr;

gap: 25px;
 

}

.why-feature {
display: flex;

 
gap: 15px;

min-width: 0;
 

}

.why-icon {
min-width: 45px;
height: 45px;

 
display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background: #eef8fd;

color: var(--blue);
 

}

.why-feature h3 {
font-size: 16px;

 
margin-bottom: 6px;
 

}

.why-feature p {
font-size: 13px;

 
color: #7b8793;

line-height: 1.5;
 

}

@keyframes experienceFloat {
0%,100% {
transform: translateY(0);
}

 
50% {
    transform: translateY(-12px);
}
 

}

/* =========================================================
9. TRANSPORT TABS
========================================================= */

.transport-tabs-section {
padding: 110px 0;

 
background: var(--light-bg);
 

}

.transport-tabs-container {
width: 90%;
max-width: 1300px;

 
margin: auto;

min-width: 0;
 

}

.tabs-heading {
text-align: center;

 
margin-bottom: 45px;
 

}

.transport-tabs {
display: flex;

 
justify-content: center;

gap: 10px;

margin-bottom: 40px;

min-width: 0;
 

}

.transport-tab {
position: relative;

 
display: flex;
align-items: center;

gap: 10px;

padding: 14px 25px;

border: 1px solid #dbe7ee;

background: #fff;

color: #536273;

border-radius: 50px;

cursor: pointer;

font-weight: 700;

transition:
    transform .4s ease,
    box-shadow .4s ease,
    background .4s ease;

min-width: 0;
 

}

.transport-tab i {
color: var(--blue);
}

.transport-tab:hover {
transform: translateY(-6px);
}

.transport-tab.active {
background: var(--dark);

 
color: #fff;

border-color: var(--dark);

box-shadow:
    0 12px 35px rgba(25,181,254,.20);
 

}

.transport-tab-content {
width: 100%;
max-width: 100%;

 
display: grid;

grid-template-columns: 1fr 1fr;

background: #fff;

border-radius: 25px;

overflow: hidden;

box-shadow:
    0 25px 70px rgba(7,26,43,.1);

min-width: 0;
 

}

.transport-tab-image {
min-height: 520px;

 
overflow: hidden;

min-width: 0;
 

}

.transport-tab-image img {
display: block;

 
width: 100%;
max-width: 100%;

height: 100%;

object-fit: cover;

transition:
    transform 1s cubic-bezier(.2,.8,.2,1),
    filter .8s ease;
 

}

.transport-tab-content:hover
.transport-tab-image img {
transform: scale(1.08);

 
filter: brightness(1.08);
 

}

.transport-tab-info {
padding: 70px;

 
min-width: 0;
 

}

.transport-tab-info.animate {
animation:
transportContent .6s cubic-bezier(.2,.8,.2,1);
}

.transport-tab-info > span {
color: var(--orange);

 
font-size: 12px;
font-weight: 800;

letter-spacing: 2px;
 

}

.transport-tab-info h3 {
font-size: 42px;

 
margin: 15px 0;
 

}

.transport-tab-info > p {
color: #697889;

 
line-height: 1.8;

margin-bottom: 25px;
 

}

.transport-points {
display: grid;

 
grid-template-columns: 1fr 1fr;

gap: 15px;

margin-bottom: 35px;
 

}

.transport-points div {
font-size: 13px;

 
color: #435263;

transition:
    transform .35s ease,
    color .35s ease;
 

}

.transport-points div:hover {
transform: translateX(10px);
}

.transport-points i {
color: var(--blue);

 
margin-right: 7px;

transition: .35s;
 

}

.transport-points div:hover i {
transform:
scale(1.3)
rotate(10deg);
}

.dark-cta {
display: inline-flex;

 
align-items: center;

gap: 12px;

padding: 14px 22px;

background: var(--dark);

color: #fff;

text-decoration: none;

border-radius: 50px;

font-weight: 700;

font-size: 13px;

transition: .3s;
 

}

.dark-cta:hover {
background: var(--orange);

 
transform: translateY(-3px);

box-shadow:
    0 15px 40px rgba(25,181,254,.25);
 

}

@keyframes transportContent {
from {
opacity: 0;

 
    transform: translateX(40px);

    filter: blur(5px);
}

to {
    opacity: 1;

    transform: translateX(0);

    filter: blur(0);
}
 

}

/* =========================================================
10. STATS
========================================================= */

.stats-section {
padding: 70px 0;

 
background: var(--blue);

width: 100%;
max-width: 100%;

overflow: hidden;
 

}

.stats-container {
width: 90%;
max-width: 1250px;

 
margin: auto;

display: grid;

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

gap: 30px;

min-width: 0;
 

}

.stat-item {
display: flex;
align-items: center;

 
gap: 18px;

color: #fff;

min-width: 0;

transition:
    transform .45s cubic-bezier(.2,.8,.2,1);
 

}

.stat-item:hover {
transform: translateY(-10px);
}

.stat-icon {
width: 55px;
height: 55px;

 
flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: rgba(255,255,255,.15);

font-size: 21px;

transition:
    transform .5s ease,
    box-shadow .4s ease;
 

}

.stat-item:hover .stat-icon {
transform:
rotate(360deg)
scale(1.12);

 
box-shadow:
    0 15px 35px rgba(25,181,254,.25);
 

}

.stat-item h3 {
font-size: 38px;

 
line-height: 1;
 

}

.stat-item p {
margin-top: 7px;

 
font-size: 13px;

opacity: .85;
 

}

.counter {
display: inline-block;

 
transition: transform .4s ease;
 

}

.counter.counting {
animation:
counterPop .5s ease;
}

@keyframes counterPop {
0% {
transform: scale(.8);
}

 
60% {
    transform: scale(1.15);
}

100% {
    transform: scale(1);
}
 

}

/* =========================================================
11. GLOBAL NETWORK
========================================================= */

.network-section {
padding: 120px 0;

 
background: var(--dark);

color: #fff;
 

}

.network-container {
width: 90%;
max-width: 1300px;

 
margin: auto;

display: grid;

grid-template-columns: .8fr 1.2fr;

gap: 80px;

align-items: center;

min-width: 0;
 

}

.network-content {
min-width: 0;
}

.network-content h2 {
color: #fff;
}

.network-content > p {
color: rgba(255,255,255,.65);

 
line-height: 1.8;

margin-bottom: 30px;
 

}

.network-list {
display: flex;

 
gap: 25px;

margin-bottom: 35px;

flex-wrap: wrap;
 

}

.network-list div {
display: flex;
align-items: center;

 
gap: 10px;
 

}

.network-list i {
color: var(--blue);
}

.network-list strong {
display: block;

 
font-size: 20px;
 

}

.network-list span {
font-size: 11px;

 
color: #8796a4;
 

}

.network-map {
position: relative;

 
width: 100%;
max-width: 100%;

min-height: 500px;

background:
    radial-gradient(
        circle,
        rgba(25,181,254,.12),
        transparent 65%
    );

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

border-radius: 25px;

overflow: hidden;

animation:
    mapFloating 6s ease-in-out infinite;
 

}

.map-grid {
position: absolute;

 
inset: 0;

background-image:
    linear-gradient(
        rgba(255,255,255,.05) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.05) 1px,
        transparent 1px
    );

background-size: 50px 50px;
 

}

.map-point {
position: absolute;

 
z-index: 3;
 

}

.map-point span {
display: block;

 
width: 12px;
height: 12px;

border-radius: 50%;

background: var(--orange);

box-shadow:
    0 0 0 7px rgba(255,138,0,.15),
    0 0 25px var(--orange);

animation:
    mapPulse 2s infinite;
 

}

.map-point label {
position: absolute;

 
top: 20px;
left: -20px;

color: #fff;

font-size: 11px;

white-space: nowrap;
 

}

.point-1 {
top: 57%;
left: 51%;
}

.point-2 {
top: 43%;
left: 58%;
}

.point-3 {
top: 28%;
left: 45%;
}

.point-4 {
top: 65%;
left: 72%;
}

.point-5 {
top: 35%;
left: 20%;
}

.map-line {
position: absolute;

 
height: 1px;

max-width: 80%;

background:
    linear-gradient(
        90deg,
        transparent,
        var(--blue),
        transparent
    );

transform-origin: left;

opacity: .5;
 

}

.line-one {
width: 300px;

 
top: 45%;
left: 45%;

transform: rotate(-20deg);
 

}

.line-two {
width: 280px;

 
top: 60%;
left: 50%;

transform: rotate(25deg);
 

}

.line-three {
width: 350px;

 
top: 45%;
left: 25%;

transform: rotate(5deg);
 

}

@keyframes mapFloating {
0%,100% {
transform: translateY(0);
}

 
50% {
    transform: translateY(-10px);
}
 

}

@keyframes mapPulse {
0% {
box-shadow:
0 0 0 0 rgba(25,181,254,.6);
}

 
70% {
    box-shadow:
        0 0 0 15px rgba(25,181,254,0);
}

100% {
    box-shadow:
        0 0 0 0 rgba(25,181,254,0);
}
 

}

/* =========================================================
12. PROCESS
========================================================= */

.process-section {
padding: 110px 0;

 
background: #fff;
 

}

.process-container {
width: 90%;
max-width: 1250px;

 
margin: auto;

min-width: 0;
 

}

.process-grid {
display: grid;

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

gap: 25px;
 

}

.process-item {
position: relative;

 
text-align: center;

padding: 30px 20px;

min-width: 0;

transition:
    transform .45s cubic-bezier(.2,.8,.2,1);
 

}

.process-item:hover {
transform: translateY(-12px);
}

.process-number {
position: absolute;

 
top: 0;
right: 10px;

color: #e8eef2;

font-size: 45px;

font-weight: 900;
 

}

.process-icon {
width: 75px;
height: 75px;

 
margin: 0 auto 25px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #eef8fd;

color: var(--blue);

font-size: 25px;

position: relative;

z-index: 2;

transition:
    transform .5s ease,
    box-shadow .5s ease;
 

}

.process-item:hover .process-icon {
transform:
rotate(-10deg)
scale(1.12);

 
box-shadow:
    0 15px 35px rgba(25,181,254,.22);
 

}

.process-item h3 {
margin-bottom: 12px;

 
font-size: 19px;
 

}

.process-item p {
color: #788694;

 
line-height: 1.6;

font-size: 13px;
 

}

/* =========================================================
13. TESTIMONIAL
========================================================= */

.testimonial-section {
padding: 110px 0;

 
background: var(--light-bg);
 

}

.testimonial-container {
width: 90%;
max-width: 900px;

 
margin: auto;

min-width: 0;
 

}

.testimonial-slider {
position: relative;

 
min-height: 300px;

width: 100%;
 

}

.testimonial-card {
position: absolute;

 
inset: 0;

width: 100%;
max-width: 100%;

padding: 45px;

background: #fff;

border-radius: 20px;

box-shadow:
    0 20px 60px rgba(7,26,43,.08);

opacity: 0;
visibility: hidden;

transform: translateX(30px);

transition:
    opacity .5s ease,
    visibility .5s ease,
    transform .5s ease;
 

}

.testimonial-card.active-testimonial {
opacity: 1;
visibility: visible;

 
transform: translateX(0);
 

}

.testimonial-card:hover {
box-shadow:
0 25px 60px rgba(7,26,43,.15);
}

.quote-icon {
color: var(--blue);

 
font-size: 30px;

margin-bottom: 20px;
 

}

.testimonial-card > p {
color: #526273;

 
font-size: 19px;

line-height: 1.8;

margin-bottom: 30px;
 

}

.client {
display: flex;
align-items: center;

 
gap: 12px;
 

}

.client-avatar {
width: 48px;
height: 48px;

 
flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: var(--dark);

color: #fff;

font-weight: 700;

transition: transform .4s ease;
 

}

.testimonial-card:hover .client-avatar {
transform:
rotate(8deg)
scale(1.1);
}

.client strong {
display: block;
}

.client span {
color: #8a98a5;

 
font-size: 12px;
 

}

.testimonial-controls {
margin-top: 30px;

 
display: flex;

align-items: center;
justify-content: center;

gap: 20px;
 

}

.testimonial-controls button {
width: 42px;
height: 42px;

 
border: 1px solid #dbe4e9;

background: #fff;

border-radius: 50%;

cursor: pointer;

transition: .3s;
 

}

.testimonial-controls button:hover {
background: var(--blue);

 
color: #fff;
 

}

.testimonial-dots {
display: flex;

 
gap: 7px;
 

}

.testimonial-dots span {
width: 25px;
height: 4px;

 
border-radius: 5px;

background: #d2dde4;

cursor: pointer;
 

}

.testimonial-dots span.active {
width: 45px;

 
background: var(--orange);
 

}

/* =========================================================
14. CTA
========================================================= */

.cta-section {
position: relative;

 
padding: 100px 0;

background: var(--blue);

overflow: hidden;
 

}

.cta-section::before {
content: "";

 
position: absolute;

width: 450px;
height: 450px;

border-radius: 50%;

top: -220px;
right: -100px;

background:
    radial-gradient(
        circle,
        rgba(25,181,254,.15),
        transparent 70%
    );

animation:
    ctaOrb 8s ease-in-out infinite;

pointer-events: none;
 

}

.cta-container {
width: 90%;
max-width: 1200px;

 
margin: auto;

position: relative;

min-width: 0;
 

}

.cta-content {
position: relative;

 
z-index: 2;

max-width: 700px;
 

}

.cta-content > span {
color: #fff;

 
font-size: 12px;

letter-spacing: 2px;

font-weight: 800;
 

}

.cta-content h2 {
color: #fff;

 
font-size: clamp(40px,6vw,68px);

line-height: 1.05;

margin: 15px 0;
 

}

.cta-content h2 strong {
display: block;

 
color: var(--dark);
 

}

.cta-content p {
color: rgba(255,255,255,.85);

 
max-width: 550px;

line-height: 1.7;

margin-bottom: 30px;
 

}

.cta-buttons {
display: flex;

 
gap: 12px;

flex-wrap: wrap;
 

}

.cta-main-btn,
.cta-outline-btn {
display: inline-flex;

 
align-items: center;

gap: 10px;

padding: 15px 23px;

border-radius: 50px;

text-decoration: none;

font-weight: 700;

font-size: 13px;

transition: .3s;
 

}

.cta-main-btn {
background: var(--dark);

 
color: #fff;
 

}

.cta-outline-btn {
border: 1px solid rgba(255,255,255,.6);

 
color: #fff;
 

}

.cta-main-btn:hover,
.cta-outline-btn:hover {
transform: translateY(-4px);
}

.cta-outline-btn:hover {
background: #fff;

 
color: var(--dark);
 

}

.cta-decoration {
position: absolute;

 
right: 0;
top: 50%;

transform: translateY(-50%);

font-size: 220px;

color: rgba(255,255,255,.12);

pointer-events: none;
 

}

@keyframes ctaOrb {
0%,100% {
transform: translate(0,0);
}

 
50% {
    transform:
        translate(-50px,40px)
        scale(1.15);
}
 

}

/* =========================================================
15. CONTACT
========================================================= */

.contact-section {
padding: 120px 0;

 
background: #fff;
 

}

.contact-container {
width: 90%;
max-width: 1250px;

 
margin: auto;

display: grid;

grid-template-columns: .8fr 1.2fr;

gap: 80px;

align-items: start;

min-width: 0;
 

}

.contact-info {
min-width: 0;
}

.contact-info > p {
color: #718090;

 
line-height: 1.8;

margin-bottom: 35px;
 

}

.contact-details {
display: grid;

 
gap: 22px;
 

}

.contact-detail {
display: flex;
align-items: center;

 
gap: 15px;

min-width: 0;
 

}

.contact-detail > div {
width: 48px;
height: 48px;

 
flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 10px;

background: #eef8fd;

color: var(--blue);
 

}

.contact-detail small {
display: block;

 
color: #9aa7b2;

font-size: 9px;

letter-spacing: 1px;

margin-bottom: 4px;
 

}

.quote-form {
width: 100%;
max-width: 100%;

 
padding: 40px;

background: var(--light-bg);

border-radius: 20px;

min-width: 0;
 

}

.quote-form h3 {
font-size: 28px;

 
color: var(--dark);

margin-bottom: 7px;
 

}

.quote-form > p {
color: #7a8995;

 
font-size: 13px;

margin-bottom: 25px;
 

}

.form-row {
display: grid;

 
grid-template-columns: 1fr 1fr;

gap: 15px;
 

}

.form-group {
margin-bottom: 18px;

 
min-width: 0;
 

}

.form-group label {
display: block;

 
margin-bottom: 7px;

font-size: 12px;

font-weight: 700;

color: #334454;
 

}

.form-group input,
.form-group select,
.form-group textarea {
display: block;

 
width: 100%;
max-width: 100%;
min-width: 0;

padding: 13px 14px;

border: 1px solid #d9e4ea;

border-radius: 8px;

outline: none;

background: #fff;

font-family: inherit;

transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
 

}

.form-group textarea {
resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
transform: translateY(-3px);

 
border-color: var(--blue);

box-shadow:
    0 10px 30px rgba(25,181,254,.12);
 

}

.submit-button {
width: 100%;

 
padding: 15px;

border: 0;

border-radius: 8px;

background: var(--dark);

color: #fff;

font-weight: 700;

cursor: pointer;

transition: .3s;
 

}

.submit-button:hover {
background: var(--orange);

 
transform: translateY(-3px);

box-shadow:
    0 15px 40px rgba(25,181,254,.25);
 

}

.form-message {
text-align: center;

 
margin-top: 15px;

color: var(--blue);

font-size: 13px;
 

}

/* =========================================================
16. FOOTER
========================================================= */

.footer {
background: #04121e;

 
color: #fff;

padding: 75px 0 0;

width: 100%;
max-width: 100%;

overflow: hidden;
 

}

.footer-container {
width: 90%;
max-width: 1300px;

 
margin: auto;

min-width: 0;
 

}

.footer-main {
display: grid;

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

gap: 50px;

padding-bottom: 60px;
 

}

.footer-logo {
display: flex;
align-items: center;

 
gap: 10px;

color: #fff;

text-decoration: none;

font-size: 20px;

font-weight: 800;
 

}

.footer-logo > span {
width: 40px;
height: 40px;

 
display: flex;
align-items: center;
justify-content: center;

background: #010a27;

border-radius: 10px;

color: #fff;

flex-shrink: 0;
 

}

.footer-logo span {
color: var(--blue);
}

.footer-about p {
color: #7c8c9b;

 
line-height: 1.7;

font-size: 13px;

margin: 20px 0;
 

}

.social-icons {
display: flex;

 
gap: 8px;
 

}

.social-icons a {
width: 36px;
height: 36px;

 
display: flex;
align-items: center;
justify-content: center;

border-radius: 8px;

background: rgba(255,255,255,.06);

color: #fff;

text-decoration: none;

transition: .3s;
 

}

.social-icons a:hover {
background: var(--blue);

 
transform: translateY(-3px);
 

}

.footer-column {
display: flex;

 
flex-direction: column;

gap: 12px;

min-width: 0;
 

}

.footer-column h3 {
font-size: 16px;

 
margin-bottom: 10px;
 

}

.footer-column a {
color: #7c8c9b;

 
text-decoration: none;

font-size: 13px;

transition: .3s;
 

}

.footer-column a:hover {
color: var(--blue);

 
padding-left: 4px;
 

}

.footer-contact p {
display: flex;

 
gap: 10px;

color: #7c8c9b;

font-size: 13px;

line-height: 1.5;

min-width: 0;
 

}

.footer-contact i {
color: var(--blue);

 
min-width: 15px;
 

}

.footer-bottom {
padding: 22px 0;

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

display: flex;

justify-content: space-between;

gap: 20px;

color: #687887;

font-size: 11px;
 

}

.footer-bottom div {
display: flex;

 
gap: 20px;
 

}

.footer-bottom a {
color: #687887;

 
text-decoration: none;
 

}

/* =========================================================
17. SCROLL PROGRESS
========================================================= */

.scroll-progress {
position: fixed;

 
top: 0;
left: 0;

width: 0%;
height: 4px;

background:
    linear-gradient(
        90deg,
        var(--blue),
        var(--orange)
    );

z-index: 99999;

box-shadow:
    0 0 15px rgba(25,181,254,.7);
 

}

/* =========================================================
18. CURSOR GLOW
========================================================= */

.cursor-glow {
position: fixed;

 
width: 220px;
height: 220px;

border-radius: 50%;

pointer-events: none;

background:
    radial-gradient(
        circle,
        rgba(25,181,254,.10) 0%,
        rgba(25,181,254,.04) 35%,
        transparent 70%
    );

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

z-index: 9990;

transition:
    width .3s ease,
    height .3s ease;
 

}

.cursor-glow.active {
width: 330px;
height: 330px;
}

/* =========================================================
19. SCROLL REVEAL
========================================================= */

.reveal {
opacity: 0;

 
transform: translateY(60px);

transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.8,.2,1);
 

}

.reveal-left {
opacity: 0;

 
transform: translateX(-70px);

transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.8,.2,1);
 

}

.reveal-right {
opacity: 0;

 
transform: translateX(70px);

transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.8,.2,1);
 

}

.reveal.show,
.reveal-left.show,
.reveal-right.show {
opacity: 1;

 
transform: translate(0);
 

}

/* =========================================================
20. BACK TO TOP
========================================================= */

.back-to-top {
position: fixed;

 
right: 25px;
bottom: 25px;

width: 50px;
height: 50px;

border: 0;

border-radius: 50%;

background: var(--dark);

color: #fff;

display: flex;
align-items: center;
justify-content: center;

cursor: pointer;

opacity: 0;
visibility: hidden;

transform: translateY(20px);

transition:
    opacity .4s ease,
    visibility .4s ease,
    transform .4s ease;

z-index: 999;
 

}

.back-to-top.show {
opacity: 1;

 
visibility: visible;

transform: translateY(0);
 

}

.back-to-top:hover {
background: var(--blue);

 
transform:
    translateY(-5px)
    scale(1.08);
 

}

/* =========================================================
21. TABLET
========================================================= */

@media (max-width: 1050px) {

 
.nav-menu {
    position: absolute;

    top: 80px;
    left: 5%;

    width: 90%;
    max-width: 90%;

    padding: 20px;

    background: var(--dark);

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-15px);

    transition: .3s ease;
}

.nav-menu.active {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.dropdown {
    width: 100%;
}

.dropdown-link {
    width: 100%;
}

.dropdown-menu {
    position: static;

    width: 100%;
    max-width: 100%;

    margin-top: 10px;

    display: none;

    opacity: 1;
    visibility: visible;

    transform: none;

    box-shadow: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-button {
    display: none;
}

.menu-toggle {
    display: block;
}
 

}

/* =========================================================
22. TABLET 900px
========================================================= */

@media (max-width: 900px) {

 
.tracking-container,
.why-container,
.network-container,
.contact-container {
    grid-template-columns: 1fr;

    gap: 50px;
}

.tracking-box {
    flex-wrap: wrap;
}

.tracking-input {
    width: 100%;

    min-height: 48px;
}

#trackingMessage {
    grid-column: 1;

    margin-top: -30px;
}

.services-grid {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.stats-container {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.process-grid {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.footer-main {
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.network-map {
    min-height: 400px;
}

.transport-tab-content {
    grid-template-columns: 1fr;
}

.transport-tab-image {
    min-height: 350px;
}
 

}

/* =========================================================
23. MOBILE 768px
========================================================= */

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

 
html,
body {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-x: hidden !important;
}


/* HEADER */

.navbar {
    width: 100% !important;

    max-width: 100% !important;

    padding: 13px 0;
}

.nav-container {
    width: calc(100% - 30px) !important;

    max-width: none !important;

    margin: 0 auto !important;
}

.logo-text {
    font-size: 17px;

    max-width: calc(100vw - 110px);

    overflow: hidden;

    text-overflow: ellipsis;
}

.logo-icon {
    width: 38px;
    height: 38px;
}


/* HERO */

.demo-section {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding-left: 20px !important;

    padding-right: 20px !important;

    overflow: hidden !important;
}

.demo-section::after {
    width: 300px;
    height: 300px;

    right: -150px;
    top: -100px;
}

.demo-section > div {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;
}

.demo-section h1 {
    width: 100% !important;

    max-width: 100% !important;

    font-size: 36px !important;

    line-height: 1.12 !important;

    overflow-wrap: anywhere !important;

    word-break: normal !important;
}

.demo-section p {
    width: 100% !important;

    max-width: 100% !important;

    font-size: 15px !important;
}


/* ALL SECTION CONTAINERS */

.tracking-container,
.services-container,
.why-container,
.transport-tabs-container,
.network-container,
.process-container,
.testimonial-container,
.cta-container,
.contact-container,
.footer-container {

    width: calc(100% - 32px) !important;

    max-width: none !important;

    min-width: 0 !important;

    margin-left: auto !important;

    margin-right: auto !important;
}


/* SECTION PADDING */

.tracking-section,
.services-section,
.why-section,
.transport-tabs-section,
.network-section,
.process-section,
.testimonial-section,
.contact-section {

    padding: 75px 0;
}


/* TRACKING */

.tracking-container {
    grid-template-columns: 1fr !important;
}

.tracking-box {
    width: 100%;

    flex-direction: column;

    padding: 10px;
}

.tracking-input {
    width: 100%;

    min-height: 50px;

    padding: 0 10px;
}

.track-button,
.quote-button {
    width: 100%;

    justify-content: center;
}

#trackingMessage {
    grid-column: 1;

    margin-top: -20px;

    padding-left: 0;
}


/* SERVICES */

.services-grid {
    width: 100% !important;

    max-width: 100% !important;

    grid-template-columns: 1fr !important;

    gap: 15px !important;
}

.service-card {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    transform: none !important;

    transform-style: flat !important;
}

.service-card:hover {
    transform: translateY(-6px) !important;
}


/* WHY */

.why-container {
    grid-template-columns: 1fr !important;
}

.why-image {
    width: 100% !important;

    max-width: 100% !important;
}

.why-image img {
    width: 100% !important;

    max-width: 100% !important;

    height: 420px;

    transform: none !important;
}

.experience-card {
    right: 15px;

    bottom: 20px;

    max-width: calc(100% - 30px);

    padding: 16px;
}

.experience-card strong {
    font-size: 30px;
}

.why-features {
    grid-template-columns: 1fr;
}


/* TRANSPORT TABS */

.transport-tabs {
    width: 100% !important;

    max-width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap: 6px !important;

    padding: 0 !important;

    overflow: hidden !important;
}

.transport-tab {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    padding: 12px 5px !important;

    justify-content: center;

    text-align: center;

    font-size: 12px;
}

.transport-tab i {
    font-size: 13px;
}

.transport-tab-content {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    grid-template-columns: 1fr !important;
}

.transport-tab-image {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    min-height: 300px;
}

.transport-tab-image img {
    width: 100% !important;

    max-width: 100% !important;

    display: block !important;
}

.transport-tab-info {
    padding: 35px 25px;
}

.transport-tab-info h3 {
    font-size: 32px;
}

.transport-points {
    grid-template-columns: 1fr;
}


/* STATS */

.stats-container {
    width: calc(100% - 32px) !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap: 15px !important;
}

.stat-item {
    min-width: 0 !important;
}

.stat-icon {
    width: 45px;
    height: 45px;
}

.stat-item h3 {
    font-size: 28px;
}


/* NETWORK */

.network-container {
    grid-template-columns: 1fr !important;
}

.network-list {
    flex-direction: column;

    gap: 15px;
}

.network-map {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    min-height: 320px;

    overflow: hidden !important;

    transform: none !important;

    animation: none !important;
}

.map-line {
    max-width: 55%;

    opacity: .35;
}


/* PROCESS */

.process-grid {
    width: 100% !important;

    max-width: 100% !important;

    grid-template-columns: 1fr !important;
}

.process-item {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;
}


/* TESTIMONIAL */

.testimonial-card {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    padding: 30px;

    min-height: 340px;
}

.testimonial-card > p {
    font-size: 16px;
}


/* CTA */

.cta-section {
    width: 100% !important;

    max-width: 100% !important;

    overflow: hidden !important;
}

.cta-section::before {
    width: 280px;
    height: 280px;

    right: -150px;
}

.cta-buttons {
    flex-direction: column;

    align-items: flex-start;
}

.cta-decoration {
    font-size: 130px;

    right: -70px;
}


/* CONTACT */

.contact-container {
    grid-template-columns: 1fr !important;
}

.quote-form {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    padding: 25px;
}

.form-row {
    grid-template-columns: 1fr;
}

.form-group,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;
}


/* FOOTER */

.footer-main {
    width: 100% !important;

    grid-template-columns: 1fr !important;

    gap: 35px;
}

.footer-bottom {
    flex-direction: column;
}

.footer-bottom div {
    flex-direction: column;

    gap: 8px;
}


/* CURSOR */

.cursor-glow {
    display: none !important;
}
 

}

/* =========================================================
24. SMALL MOBILE 480px
========================================================= */

@media (max-width: 480px) {

 
.navbar {
    padding: 12px 0;
}

.nav-menu {
    top: 68px;
}

.logo-text {
    font-size: 16px;
}

.logo-icon {
    width: 36px;
    height: 36px;
}

.section-heading h2,
.why-content h2,
.tabs-heading h2,
.network-content h2,
.contact-info h2 {
    font-size: 34px;

    letter-spacing: -1px;
}

.tracking-intro h2 {
    font-size: 32px;
}

.transport-tab {
    font-size: 11px;

    padding: 11px 3px !important;
}

.transport-tab-info {
    padding: 30px 20px;
}

.transport-tab-info h3 {
    font-size: 28px;
}

.stat-item {
    gap: 10px;
}

.stat-item h3 {
    font-size: 25px;
}

.stat-item p {
    font-size: 11px;
}

.network-map {
    min-height: 280px;
}

.testimonial-card {
    padding: 25px;

    min-height: 350px;
}

.back-to-top {
    right: 15px;

    bottom: 15px;

    width: 45px;

    height: 45px;
}
 

}

/* =========================================================
25. HARD MOBILE OVERFLOW PROTECTION
===================================

These rules specifically prevent animated/positioned
elements from creating horizontal scrolling.
========================================================= */

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

 
.demo-section,
.tracking-section,
.services-section,
.why-section,
.transport-tabs-section,
.stats-section,
.network-section,
.process-section,
.testimonial-section,
.cta-section,
.contact-section,
.footer {
    overflow-x: clip !important;
}

.demo-section::after,
.cta-section::before,
.cta-decoration {
    pointer-events: none !important;
}

.map-line {
    max-width: 50% !important;
}

.service-card,
.transport-tab-content,
.testimonial-card,
.quote-form,
.network-map,
.why-image,
.tracking-box {
    overflow: hidden;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

}

/* =========================================================
26. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

    scroll-behavior: auto !important;
}

}