:root {
	--navy: #061a33;
	--blue: #082d55;
	--orange: #ff671d;
	--paper:#f7f4ec;
 	--paper-dim:#efe9db;
	--text: #071b37;
	--muted: #5d6675;
	--line: #e5e9ef;
	--ink:#0f1a2b;
 	--ink-soft:#1b2a40
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	color: var(--text);
	font: 15px/1.65 Manrope, Arial, sans-serif;
	background: #fff
}


/* ===== Preloader ===== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

.loader-word{
  position:absolute;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:clamp(32px,7vw,72px);
  letter-spacing:-0.03em;
  color:var(--paper);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .22s ease, transform .22s ease;
}
.loader-word.visible{
  opacity:1;
  transform:translateY(0);
}
.loader-word.last{
  color:var(--orange);
}

.loader-bar{
  position:absolute; bottom:64px; left:50%; transform:translateX(-50%);
  width:180px; height:2px; background:rgba(247,244,236,.16);
  overflow:hidden; border-radius:2px;
}
.loader-bar span{
  display:block; height:100%; width:0%;
  background:var(--orange);
  transition:width .2s ease;
}
#preloader.fade-out{ animation:loaderFadeOut .35s ease forwards; }
@keyframes loaderFadeOut{
  0%{opacity:1; visibility:visible;}
  100%{opacity:0; visibility:hidden;}
}
body.loading{overflow:hidden}




.works{
	height: 80px;
	width: 80px;

}


.steps article i {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    overflow: hidden;
}

.steps article i .works {
    display: block;
    width: 55px;
    height: 55px;
    object-fit: contain;
    object-position: center;
    margin: 0;
}

.steps article i {
    overflow: hidden;
}

.steps article i .works {
    transition: transform 0.4s ease;
}

.steps article:hover i .works {
    transform: scale(1.15);
}

a {
	text-decoration: none;
	color: inherit
}

.wrap {
	width: min(1320px, calc(100% - 64px));
	margin: auto
}

h1,
h2,
h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	letter-spacing: -.055em;
	line-height: 1.08;
	margin: 0
}

.eyebrow {
	margin: 0 0 13px;
	color: var(--orange);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase
}

.header{
  height:86px;border-bottom:1px solid var(--line);
  background:rgba(247,244,236,.86);backdrop-filter:blur(16px) saturate(140%);
  position:sticky;top:0;z-index:40;
}


#home,#track,#about,#network,#contact{
  scroll-margin-top:100px;
}
.nav {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.brand img {
	display: block;
	max-height: 58px;
	max-width: 145px;
	object-fit: contain;
	

}

.nav nav {
	display: flex;
	align-items: center;
	gap: 34px;
	color: #071b37;
	font-weight: 700
}

.nav nav>a:not(.nav-button) {
	opacity: .92
}

.nav nav>a:not(.nav-button):hover {
	color: var(--orange)
}

.nav-button,
.button {
	background: #0f1a2b;
	color: var(--paper);
	padding: 11px 18px;
	border-radius: 99px;
	font-weight: 800;
	display: inline-flex;
	align-items: center; 
	gap: 9px;
	transition: background .25s,transform .25s
}

.nav-button:hover,
.button:hover {
	background: var(--orange);
	transform: translateY(-2px)
}

.nav-button span,
.button span {
	font-size: 21px
}

.menu {
	display: none;
	background: none;
	border: 0;
	color: var(--navy);
	font-size: 25px
}

.hero {
    min-height: 720px;
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
    background: url('images/hero-courier.jpg') center/cover no-repeat;
    margin-top: -80px;
   
}

/* Light color overlay on the LEFT, fading toward RIGHT */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(4, 22, 43, 0.80) 0%,
        rgba(4, 22, 43, 0.55) 25%,
        rgba(4, 22, 43, 0.20) 50%,
        rgba(4, 22, 43, 0.03) 75%,
        transparent 100%
    );
    z-index: 1;
}

/* Keep your hero content above the overlay */
.hero > * {
    position: relative;
    z-index: 2;
    
}

.hero-shade {
	position:absolute;right:max(6vw,40px);top:130px;z-index:1;text-align:right;
  font:600 11px 'DM Mono';letter-spacing:.14em;color:#cdd3da;
  animation:riseIn .9s cubic-bezier(.16,1,.3,1) both;animation-delay:.4s;
}

.hero-content {
	position: relative;
	padding-top: 95px
}

.hero h1 {
	font-size: clamp(48px, 6.2vw, 84px);
	max-width: 720px
}

.hero h1 em {
	font-style: normal;
	color: var(--orange)
}

.lead {
	font-size: 18px;
	line-height: 1.65;
	max-width: 520px;
	color: #e4e9ee;
	margin: 23px 0 29px;
height: 48px
}

.hero-points {
	display: flex;
	gap: 0;
	margin-top: 53px
}

.hero-points>div {
	display: flex;
	gap: 13px;
	padding: 0 31px;
	border-left: 1px solid rgba(255, 255, 255, .3)
}

.hero-points>div:first-child {
	border: 0;
	padding-left: 0
}

.hero-points b {
	font-size: 29px;
	font-weight: 400;
	color: var(--orange);
	line-height: 1
}

.hero-points span {
	font-size: 12px;
	color: #d5dbe2;
	line-height: 1.5
}

.hero-points strong {
	display: block;
	color: #fff;
	font-size: 13px
}

.track-section {
    padding: 0 0 88px;
    background: var(--paper);
    position: relative;
    z-index: 5;
}

.track-card {
    position: relative;
    top: -80px; 
    z-index: 10;

    background: #fff;
    border-radius: 8px;
    padding: 38px 44px;
    box-shadow: 0 20px 60px rgba(3, 24, 46, .12);

    display: grid;
    grid-template-columns: .9fr 1.25fr;
    gap: 42px;
}

.track-card h2 {
	font-size: 32px
}

.track-card>div>p:not(.eyebrow) {
	color: var(--muted);
	margin: 9px 0 0
}

.track-form label {
	font-size: 12px;
	font-weight: 800;
	display: block;
	margin-bottom: 10px
}

.track-form>div {
	display: flex;
	border: 1px solid #d7dee7;
	border-radius: 5px;
	overflow: hidden
}

.track-form input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 16px 17px;
	font: 500 15px Manrope;
	outline: 0
}

.track-form button {
	background: var(--orange);
	border: 0;
	color: #fff;
	padding: 0 23px;
	font-weight: 800;
	cursor: pointer
}

.track-form small {
	color: #778191;
	display: block;
	margin-top: 9px;
	font-size: 11px
}

.track-form button:hover {
	background: #dc5110
}

.result-card {
	grid-column: 1/-1;
	border-top: 1px solid var(--line);
	padding-top: 28px
}

.result-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px
}

.result-top h3 {
	font-size: 24px
}

.chip {
	background: #e6f7ec;
	color: #16733c;
	padding: 7px 11px;
	border-radius: 99px;
	font-weight: 800;
	font-size: 10px;
	text-transform: uppercase
}

.notice {
	grid-column: 1/-1;
	margin-top: 12px;
	background: #fff0ed;
	color: #a53015;
	border-left: 3px solid var(--orange);
	padding: 14px 16px;
	font-weight: 700
}

.timeline {
	list-style: none;
	padding: 0 0 0 22px;
	margin: 25px 0 0;
	border-left: 2px solid #dfe5eb
}

.timeline li {
	position: relative;
	padding: 0 0 22px 18px;
	color: var(--muted)
}

.timeline li:before {
	content: '';
	position: absolute;
	left: -28px;
	top: 5px;
	width: 10px;
	height: 10px;
	border: 3px solid var(--orange);
	border-radius: 50%;
	background: #fff
}

.timeline b,
.timeline small {
	display: block
}

.timeline b {
	color: var(--text)
}

.timeline small {
	font-size: 11px
}

.section {
	padding: 105px 0
}

.center-head {
	text-align: center;
	margin-bottom: 44px
}

.center-head h2 {
	font-size: clamp(32px, 4vw, 50px)
}

.center-head>p:not(.eyebrow) {
	color: var(--muted);
	margin: 12px 0
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px
}

.service-grid i,
.steps i {
	display: block;
	font-style: normal;
	color: var(--orange);
	font-size: 42px;
	line-height: 1;
	margin-bottom: 24px
}

.service-grid h3 {
	font-size: 18px
}
.service-grid article{
    position:relative;
    overflow:hidden;
    height:420px;
    padding:0;
    border:none;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
}

.service-grid article:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.service-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.service-grid article:hover .service-image img{
    transform:scale(1.08);
}
.service-image::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:60%;
    background:linear-gradient(
        to top,
        rgba(6,26,51,.96),
        rgba(6,26,51,.65),
        rgba(6,26,51,.20),
        transparent
    );
}
.service-content{
    position:absolute;
    left:30px;
    right:30px;
    bottom:28px;
    z-index:2;
}

.service-content h3{
    color:#fff;
    font-size:26px;
    margin-bottom:10px;
}

.service-content p{
    color:rgba(255,255,255,.9);
    font-size:15px;
    line-height:1.7;
    margin:0;
}
.service-content{
    transition:.35s;
}

.service-grid article:hover .service-content{
    transform:translateY(-8px);
}

.network {
	color: #fff;
	padding: 105px 0;
	background: url('images/impact-van.jpg') center/cover;
	height: 570px;
}

.network-inner {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 80px;
	align-items: end
}

.network h2,
.quote h2,
.about h2 {
	font-size: clamp(38px, 4.5vw, 58px)
}

.network p:not(.eyebrow) {
	max-width: 510px;
	color: #d8e0ea;
	margin: 20px 0 30px
}

.outline-button {
	border: 1px solid rgba(255, 255, 255, .8);
	padding: 13px 19px;
	border-radius: 5px;
	display: inline-flex;
	gap: 18px;
	font-weight: 800
}

.network-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin:35px 0;
    max-width:700px;
}

.stat-item{
    text-align:left;
}
.stat-item svg{
    width:28px;
    height:28px;
    color:var(--paper);
    stroke-width:1.8;
    margin-bottom:12px;
}

.stat-icon{
    font-size:28px;
    color:var(--orange);
    margin-bottom:10px;
}

.network-stats strong{
    display:block;
    color:var(--orange);
    font-size:30px;
    line-height:1;
    margin-bottom:8px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:800;
}

.network-stats span{
    display:block;
    color:#d8e0ea;
    font-size:13px;
}

.how {
	background: #fbfcfe
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	position: relative
}

.steps article {
	text-align: center;
	padding: 10px 24px;
	position: relative
}

.steps article:not(:last-child):after {
	content: '';
	position: absolute;
	height: 1px;
	border-top: 2px dotted #c8d0da;
	width: 34%;
	right: -17%;
	top: 57px
}

.steps b {
	display: block;
	margin: auto auto 16px;
	background: var(--orange);
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 11px;
	line-height: 28px
}

.steps i {
	background: #f0f3f7;
	border-radius: 50%;
	width: 86px;
	height: 86px;
	margin: 0 auto 17px;
	line-height: 86px;
	font-size: 35px
}

.steps h3 {
	font-size: 16px
}

.steps p {
	color: var(--muted);
	font-size: 12px;
	margin: 10px 0
}

.about {
	padding: 105px 0
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center
}

.about-image {
	min-height: 440px;
	background: url('images/warehouse.png') center/cover;
	border-radius: 8px
}

.about p:not(.eyebrow) {
	color: var(--muted);
	max-width: 520px;
	margin: 20px 0
}

.about ul {
	margin: 28px 0 0;
	padding: 0;
	list-style: none
}

.about li {
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-weight: 700
}

.about li:before {
	content: '✓';
	color: var(--orange);
	margin-right: 12px
}

.quote {
	background: linear-gradient(90deg, rgba(2, 17, 34, .94), rgba(2, 17, 34, .77)), url('images/cta-map.jpg') center/cover;
	color: #fff;
	padding: 86px 0
}

.quote-inner {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 80px;
	align-items: center
}

.quote p:not(.eyebrow) {
	color: #d1d9e3;
	max-width: 530px;
	margin: 17px 0
}

.contact-details a {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	color: #dbe2eb
}

.contact-details .button {
	display: inline-flex;
	margin-top: 24px;
	border: 0;
	color: #fff;
	padding: 15px 22px
}

footer {
	background: #04162b;
	color: #bdc9d6;
	padding: 25px 0
}

footer .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between
}

footer img {
	width: 115px;
	filter: brightness(0) invert(1)
}

footer p {
	font-size: 12px;
	margin: 0
}

.whatsapp{
    position:fixed;
    right:25px;
    bottom:25px;
    width:58px;
    height:58px;
    border-radius:50%;
    overflow:hidden;
 z-index: 9999 !important;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#25D366;
    color:#fff;
    text-decoration:none;

    box-shadow:0 12px 28px rgba(0,0,0,.25);

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        box-shadow .55s cubic-bezier(.22,1,.36,1);
}
.whatsapp::before{
    content:"";
    position:absolute;
    inset:0;

    background:#128C7E;

    transform:translateY(100%);
    transition:transform .65s cubic-bezier(.22,1,.36,1);

    z-index:0;
}
.whatsapp i{
    position:relative;
    z-index:2;
    transition:transform .55s cubic-bezier(.22,1,.36,1);
   
}
.whatsapp:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.30);
}

.whatsapp:hover::before{
    transform:translateY(0);
}

.whatsapp:hover i{
    transform:scale(1.12);
}

@keyframes fillUp{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
}

@keyframes leaveTop{
    from{ transform:translateY(0); }
    to{ transform:translateY(-100%); }
}
.whatsapp::before{
    animation:leaveTop .7s forwards;
}

.whatsapp:hover::before{
    animation:fillUp .7s forwards;
}



@media(max-width:800px) {
	.wrap {
		width: min(100% - 36px, 1320px)
	}

	.header {
		height: 72px
	}

	.brand img {
		max-height: 43px
	}

	.menu {
		display: block
	}

	.nav nav {
		display: none;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		background: #061a33;
		padding: 18px;
		flex-direction: column;
		align-items: stretch;
		gap: 5px
	}

	.nav nav.open {
		display: flex
	}

	.nav nav.open a:not(.nav-button) {
		color: var(--paper)
	}

	.nav nav a {
		padding: 10px
	}

	.hero {
		min-height: 700px;
		background-position: 62% center
	}

	.hero-points {
		flex-direction: column;
		gap: 17px;
		margin-top: 35px
	}

	.hero-points>div {
		border: 0;
		padding: 0
	}

	.track-card {
		top: -27px;
		padding: 28px;
		display: block
	}

	.track-form {
		margin-top: 25px
	}

	.track-form>div {
		display: block
	}

	.track-form input {
		width: 100%;
		border-bottom: 1px solid #d7dee7
	}

	.track-form button {
		width: 100%;
		height: 52px
	}

	.service-grid,
	.steps {
		grid-template-columns: 1fr
	}

	.steps article:not(:last-child):after {
		display: none
	}

	.network-inner,
	.about-grid,
	.quote-inner {
		grid-template-columns: 1fr;
		gap: 38px
	}

	.network-stats {
		gap: 10px
	}

	.network-stats strong {
		font-size: 21px
	}

	.section,
	.about {
		padding: 75px 0
	}

	.network {
		padding: 75px 0
	}

	footer .wrap {
		gap: 18px;
		align-items: flex-start;
		flex-direction: column
	}
}
/* =====================================================
   ECS PREMIUM TRACKING
   ===================================================== */

#result{
    margin-top:30px;
    animation:fadeResult .5s ease;
    grid-column:1/-1;
    width:100%;
}

@keyframes fadeResult{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* Main Card */

.tracking-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    overflow:hidden;

    position:relative;

}

/* Header */

.tracking-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.tracking-header h2{

    font-size:28px;

    margin:0;

}

.tracking-header p{

    margin-top:8px;

    color:#666;

}

/* Summary */

.summary-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.info-box{

    background:#f8f9fb;

    padding:18px;

    border-radius:14px;

    transition:.25s;

}

.info-box:hover{

    transform:translateY(-4px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.info-box small{

    display:block;

    color:#777;

    margin-bottom:8px;

}

.info-box strong{

    color:#08233D;

    font-size:16px;

}

.info-date{

    display:block;

    margin-top:6px;

    color:#8a93a3;

    font-size:12.5px;

    font-weight:600;

}

/* Status */

.status-badge{

    padding:10px 18px;

    border-radius:50px;

    font-weight:700;

    font-size:13px;

    color:#fff;

    white-space:nowrap;

}

.success{

    background:#16a34a;

}

.primary{

    background:#2563eb;

}

.warning{

    background:#ea580c;

}

.danger{

    background:#dc2626;

}

.secondary{

    background:#64748b;

}

/* Timeline */

.timeline{

    position:relative;

    margin-top:10px;

    padding-left:32px;

}

.timeline:before{

    content:"";

    position:absolute;

    left:18px;

    top:0;

    bottom:0;

    width:3px;

    background:#dbe4ef;

}

.timeline-item{

    display:flex;

    gap:20px;

    margin-bottom:28px;

    position:relative;

}

.timeline-dot{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:18px;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

.timeline-content{

    flex:1;

    background:#f9fbfd;

    border-radius:16px;

    padding:18px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.timeline-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

    gap:15px;

}

.timeline-content h4{

    margin:0;

    color:#08233D;

}

.timeline-content p{

    margin:6px 0;

    color:#555;

}

.timeline-content small{

    color:#888;

}

/* Recent Searches */

.recent-searches{

    margin-bottom:20px;

}

.recent-title{

    font-size:13px;

    color:#777;

    margin-bottom:10px;

}

.recent-list{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.recent-awb{

    border:none;

    background:#08233D;

    color:#fff;

    border-radius:30px;

    padding:9px 16px;

    cursor:pointer;

    transition:.3s;

}

.recent-awb:hover{

    background:#0d3d67;

    transform:translateY(-2px);

}

/* Skeleton */

.skeleton{

    animation:pulse 1.4s infinite;

}

.s-line,
.s-box,
.s-event{

    background:linear-gradient(
        90deg,
        #ececec,
        #f5f5f5,
        #ececec
    );

    background-size:200%;

    animation:shine 1.4s infinite;

    border-radius:10px;

}

.s-line{

    height:18px;

    margin-bottom:16px;

}

.s-line.lg{

    height:34px;

    width:40%;

}

.s-box{

    height:85px;

}

.s-event{

    height:80px;

    margin-top:18px;

}

@keyframes shine{

    0%{
        background-position:200%;
    }

    100%{
        background-position:-200%;
    }

}

/* Not Found */

.not-found{

    text-align:center;

    padding:60px;

}

.nf-icon{

    font-size:72px;

    margin-bottom:18px;

}

/* Animation */

.fadeUp{

    opacity:0;

    transform:translateY(18px);

    transition:.45s;

}

.fadeUp.show{

    opacity:1;

    transform:none;

}

/* Mobile */

@media(max-width:991px){

.summary-grid{

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

}

}

@media(max-width:600px){

.tracking-header{

flex-direction:column;

align-items:flex-start;

}

.summary-grid{

grid-template-columns:1fr;

}

.timeline{

padding-left:18px;

}

.timeline:before{

left:10px;

}

.timeline-dot{

width:30px;

height:30px;

font-size:14px;

}

.timeline-top{

flex-direction:column;

align-items:flex-start;

}

.tracking-card{

padding:20px;

}

}

.journey{

margin:35px 0;

padding:30px;

background:#fff;

border-radius:20px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.journey-head{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

gap:20px;

}

.journey-head h3{

margin:0;

font-size:26px;

color:#08233D;

}

.journey-head p{

margin-top:6px;

color:#6b7280;

}

.journey-progress{

display:flex;

align-items:flex-start;

justify-content:space-between;

position:relative;

}

.step{

display:flex;

flex-direction:column;

align-items:center;

flex:0 0 auto;

width:84px;

position:relative;

z-index:2;

}

.circle{

width:14px;

height:14px;

border-radius:50%;

background:#ef4444;

box-shadow:0 0 0 5px rgba(239,68,68,.14);

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

}

.step.active .circle{

background:#16a34a;

box-shadow:0 0 0 5px rgba(22,163,74,.16);

transform:scale(1.15);

}

.step.done .circle{

background:#16a34a;

box-shadow:0 0 0 5px rgba(22,163,74,.14);

}

.line{

position:relative;

height:3px;

background:#e0e4eb;

flex:1 1 auto;

min-width:24px;

margin-top:9px;

overflow:hidden;

border-radius:2px;

}

.line::after{

content:'';

position:absolute;

left:0;

top:0;

height:100%;

width:0%;

background:#16a34a;

transition:width .6s ease;

}

.line.active::after{

width:100%;

}

.label{

margin-top:12px;

font-weight:600;

text-align:center;

color:#08233D;

font-size:13.5px;

}

.label small{

display:block;

margin-top:5px;

font-weight:400;

color:#777;

font-size:12px;

}

.tracking-details{

margin-top:40px;

border-radius:18px;

overflow:hidden;

background:#fff;

border:1px solid #e8eef5;

}

.tracking-details summary{

padding:20px 24px;

cursor:pointer;

font-size:17px;

font-weight:700;

background:#08233D;

color:#fff;

list-style:none;

}

.tracking-details summary::-webkit-details-marker{

display:none;

}

.history-list{

padding:20px;

background:#f8fafc;

}

.history-card{

display:flex;

gap:18px;

padding:18px;

background:#fff;

border-radius:16px;

margin-bottom:18px;

box-shadow:0 8px 18px rgba(0,0,0,.06);

transition:.3s;

}

.history-card:hover{

transform:translateY(-3px);

}

.history-icon{

width:56px;

height:56px;

border-radius:50%;

background:#08233D;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

flex-shrink:0;

}

.history-card.booked .history-icon{

background:#2563eb;

}

.history-info{

flex:1;

}

.history-info h4{

margin:0;

font-size:18px;

color:#08233D;

}

.history-info p{

margin:6px 0;

color:#555;

}

.history-info small{

color:#888;

}

.history-card.current-status{

    background:#08233D;

    box-shadow:0 10px 24px rgba(8,35,61,.22);

}

.history-card.current-status .history-icon{

    background:#ff9800;

    color:#fff;

}

.history-card.current-status .history-info h4{

    color:#9fb3c8;

    font-size:12px;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-weight:800;

}

.history-card.current-status .current-status-label{

    margin:6px 0 0;

    color:#fff;

    font-size:19px;

    font-weight:800;

}

.history-card.current-status .history-info small{

    color:#a9bccf;

}

/* ==========================
   TRACKING CHAIN (dotted timeline)
========================== */

.tracking-chain{

position:relative;

padding-left:32px;

}

.tracking-chain::before{

content:'';

position:absolute;

left:8px;

top:2px;

bottom:2px;

width:3px;

background:var(--orange);

opacity:.3;

}

.chain-item{

position:relative;

margin-bottom:28px;

}

.chain-item:last-child{

margin-bottom:0;

}

.chain-dot{

position:absolute;

left:-30px;

top:4px;

width:13px;

height:13px;

border-radius:50%;

background:var(--orange);

box-shadow:0 0 0 4px rgba(255,103,29,.15);

}

.chain-dot.active{

background:#1a9648;

box-shadow:0 0 0 4px rgba(26,150,72,.18);

}

.chain-item h6{

margin:0 0 6px;

font-weight:700;

font-size:14px;

color:var(--ink);

text-transform:uppercase;

letter-spacing:.03em;

}

.chain-item p{

margin:0 0 4px;

color:var(--muted);

font-size:13.5px;

line-height:1.6;

}

.chain-item p:last-child{

margin-bottom:0;

}

.chain-item .current-label{

font-weight:800;

color:#1a9648;

font-size:16px;

text-transform:none;

}

/* Fallback container styling in case the page doesn't already
   have a #recentSearches element with these classes */
.recent-searches{

margin:15px 0 0;

}

@media(max-width:900px){

/* Stay horizontal on mobile — just shrink to fit. Each step becomes a
   flexible column (flex:1 1 0) instead of a fixed 84px width, and the
   connector keeps its horizontal fill animation, just thinner. */

.journey-progress{

gap:2px;

}

.step{

width:auto;

flex:1 1 0;

min-width:0;

padding:0 2px;

}

.circle{

width:12px;

height:12px;

box-shadow:0 0 0 4px rgba(239,68,68,.14);

}

.step.active .circle,
.step.done .circle{

box-shadow:0 0 0 4px rgba(22,163,74,.14);

}

.line{

height:2px;

min-width:8px;

margin-top:7px;

}

.label{

font-size:11px;

line-height:1.3;

}

}

@media(max-width:420px){

.label{

font-size:10px;

}

.circle{

width:10px;

height:10px;

}

}
/* =====================================================
   Tracking Refresh — compact summary + dropdown polish
===================================================== */

.tracking-card > .tracking-details{

    margin:26px -30px -30px;

    border-radius:0 0 24px 24px;

    border-left:none;

    border-right:none;

    border-bottom:none;

    width:auto;

}

.summary-grid.compact{

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

    max-width:460px;

    margin-bottom:0;

}

.tracking-body{

    padding:26px 24px 6px;

}

.tracking-details summary{

    position:relative;

    padding-right:56px;

    transition:background .25s;

    user-select:none;

}

.tracking-details summary:hover{

    background:#0d3d67;

}

.tracking-details summary::after{

    content:'▾';

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    transition:transform .3s;

    font-size:16px;

}

.tracking-details[open] summary::after{

    transform:translateY(-50%) rotate(180deg);

}

.history-list p.no-history{

    text-align:center;

    color:#888;

    margin:0;

    padding:20px 0;

}

@media(max-width:600px){

    .summary-grid.compact{

        grid-template-columns:1fr;

        max-width:none;

    }

    .tracking-body{

        padding:18px 16px 4px;

    }

    .tracking-card > .tracking-details{

        margin:22px -20px -20px;

        border-radius:0 0 20px 20px;

    }

}
/* =====================================================
   About / Warehouse / Partners (merged from additions.css)
===================================================== */

.about-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:85px;align-items:start}.about-copy h2{margin-bottom:30px}.about-copy h2 i{color:var(--lime);font-weight:400}.about-copy p{color:#d1d8d3;font-size:16px;margin:0 0 16px}.about-copy strong{display:block;margin-top:30px;color:var(--lime)}.warehouse{position:relative;margin-top:70px}.warehouse img{width:100%;height:470px;object-fit:cover;filter:grayscale(1);opacity:.84}.warehouse span{position:absolute;right:0;bottom:0;background:var(--lime);color:var(--ink);padding:10px 15px;font:600 10px 'DM Mono';letter-spacing:.12em;text-transform:uppercase}.partners{padding:110px 0}.partners-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px}.partners h2{max-width:580px}.partners-layout>div:last-child>p{font-size:17px;color:var(--muted);margin:35px 0}.partner-list{display:flex;flex-wrap:wrap;gap:9px}.partner-list span{font:600 13px Manrope;padding:10px 14px;border:1px solid var(--line);border-radius:99px;transition:background .2s}.partner-list span:hover{background:var(--lime);border-color:var(--lime)}
@media(max-width:720px){.about-layout,.partners-layout{grid-template-columns:1fr;gap:45px}.warehouse{margin-top:0}.warehouse img{height:300px}.partners{padding:75px 0}}