/*
  Modern Next‑Gen Courier Website Stylesheet
  Designed for 2026 aesthetics: glassmorphism, gradients, smooth animations and
  responsive layouts. Includes dark/light theme variables and micro‑interactions.

  Author: OpenAI Assistant
*/

/* Import modern Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Variables for colours, fonts and animation timings. We define a base
   palette for both dark and light themes using the data‑theme attribute on
   the html element. */
:root {
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.3s;
  --radius: 1rem;
  --shadow-elevate: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Dark theme variables */
html[data-theme='dark'] {
  --bg-color: #0b081b;
  --surface: rgba(255, 255, 255, 0.04);
  --panel-bg: rgba(255, 255, 255, 0.06);
  --overlay: rgba(11, 8, 27, 0.65);
  --border-color: rgba(255, 255, 255, 0.15);
  --text-primary: #eaf0ff;
  --text-muted: #aab1d4;
  --accent1: #7ea1ff;
  --accent2: #ff7a66;
}

/* Light theme variables */
html[data-theme='light'] {
  --bg-color: #f7f9ff;
  --surface: rgba(255, 255, 255, 0.65);
  --panel-bg: rgba(255, 255, 255, 0.85);
  --overlay: rgba(247, 249, 255, 0.6);
  --border-color: rgba(0, 0, 0, 0.1);
  --text-primary: #1d2330;
  --text-muted: #596889;
  --accent1: #4b68ff;
  --accent2: #ff6f5e;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.6;
  scroll-behavior: smooth;
  min-height: 100vh;
}

a {
  color: var(--accent1);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--accent2);
}

/* Navigation bar */
/* ================== Navigation bar (white, premium) ================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* balanced padding that scales a bit on larger screens */
  padding: clamp(.65rem, 1.5vw, 1rem) clamp(1rem, 4vw, 2.25rem);

  /* Use theme-aware colors for the navbar instead of hard‑coded white so
     it adapts to both light and dark modes. The panel background and
     border colours derive from CSS variables defined for each theme. */
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-elevate); /* soft elevation so it doesn't feel "stuck on" */
  backdrop-filter: blur(8px);             /* subtle glass on supported browsers */
}

/* Logo sizing: sharp, consistent, no stretching */
.navbar .logo img {
  height: clamp(46px, 6.5vw, 64px);
  width: auto;
  display: block;
  object-fit: contain;
}

/* Right-side nav */
.navbar nav {
  display: flex;
  gap: clamp(.5rem, 1.2vw, 1.25rem);
  align-items: center;
}

/* Links: dark text on white, with soft pill hover/active */
.navbar nav a {
  position: relative;
  padding: .55rem .8rem;
  border-radius: .7rem;
  font-weight: 600;
  color: var(--text-primary);            /* theme-aware colour */
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  border: 1px solid transparent;
}

.navbar nav a:hover,
.navbar nav a.active {
  /* On hover/active, slightly adjust text colour and use overlay tint
     derived from the current theme. */
  color: var(--text-primary);
  background: var(--overlay);
  border-color: var(--border-color);
}

/* Theme toggle in header (keep minimal) */
#themeToggle {
  border: none;
  background: transparent;
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  transition: background .25s ease, transform .2s ease, color .25s ease;
}
#themeToggle:hover {
  background: rgba(43, 58, 103, .08);
  transform: translateY(-1px);
  color: var(--text-primary);
}

/* Hamburger (kept for future use) */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-left: auto;
}
.menu-toggle span {
  width: 24px;
  height: 2px;
  background: #1d2330;
  transition: transform .25s ease;
}

/* Mobile dropdown */
@media (max-width: 840px) {
  .menu-toggle { display: flex; }

    .navbar nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 1rem 1rem;
    background: var(--panel-bg);          /* theme-aware dropdown */
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-elevate);
  }
  .navbar nav.active { display: flex; }

  .navbar nav a {
    width: 100%;
    border-radius: .6rem;
    padding: .7rem .85rem;
  }
  #themeToggle { margin-left: .25rem; }
}

/* Hero sections */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--text-primary);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Slightly less dark overlay so the dynamic video is visible yet text remains readable */
  background: linear-gradient(180deg, rgba(11, 8, 27, 0.4) 0%, rgba(11, 8, 27, 0.65) 100%);
  z-index: 1;
}
.hero .container {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 1rem;
}
.hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.hero p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}
.hero .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.hero .btn.secondary {
  background: transparent;
  color: var(--accent1);
  border-color: var(--accent1);
}
.hero .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Assign different background images via modifier classes */
/* Hero background images.  Use explicit relative paths to ensure assets load
   correctly whether the site is hosted at the domain root or inside a
   subdirectory. */
/*
  The home hero now uses a dynamic, logistics‑themed illustration generated
  specifically for this project.  To give the impression of motion without
  relying on heavy video files, the background is slightly oversized and
  animated along the x‑axis using pure CSS.  See @keyframes hero‑move
  below for the panning effect.  The image is stored in
  `assets/img/hero-dynamic.png`.
*/
.hero.home {
  background-image: url('./assets/img/hero-dynamic.png');
  background-size: 120% 120%;
  background-position: 0% 50%;
  animation: hero-move 40s linear infinite alternate;
}

@keyframes hero-move {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.hero.alt {
  background-image: url('./assets/img/hero-alt.png');
  background-size: cover;
  background-position: center;
}

/* Override the home hero background when a video is present */
.hero.home {
  /* Remove static background image and animation to allow the video to be seen */
  background-image: none;
  background-size: cover;
  background-position: center;
  animation: none;
}

/* Video element styling for hero. Ensures the video fills the section */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Section styling */
section.section {
  padding: 4rem 1rem;
  border-top: 1px solid var(--border-color);
}
section.section .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}
section.section h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  margin-bottom: 0.5rem;
}
section.section p.lead {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 760px;
  margin: 0 auto 2rem;
}

/* Cards grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 2rem auto 0;
}
.card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-elevate);
  transition: transform var(--transition), box-shadow var(--transition);
  text-align: center;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.card ion-icon {
  font-size: 2.5rem;
  color: var(--accent1);
  margin-bottom: 0.5rem;
}
.card h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
}
.card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}


/* Timeline styles for tracking updates
   ==============================
   Visual spec: UPS‑like vertical progress timeline
   - Left vertical rail
   - Solid circles for completed steps, outlined for current, hollow grey for upcoming
   - Step title (status) bold; location lighter; timestamp aligned underneath
   - Spacing + rhythm consistent across desktop & mobile
   Only timeline/track‑box styles below were changed — rest of the site untouched.
*/

/* Container for the events list */
.timeline {
  position: relative;
  margin: 1.5rem auto 2.5rem;
  padding-left: 2.25rem; /* space for the rail + bullets */
  max-width: 820px;
  list-style: none;
}

/* Vertical rail */
.timeline::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.75rem;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.24),
    rgba(255,255,255,0.10)
  );
}

/* Each event row */
.timeline li {
  position: relative;
  padding: 0.5rem 0 1.1rem 0;
  margin: 0;
}

/* Bullet base */
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.05rem; /* aligns with rail (based on padding-left) */
  top: 0.2rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  background: var(--panel-bg);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}

/* Connector from bullet to next item (overlays the rail for crispness) */
.timeline li::after {
  content: "";
  position: absolute;
  left: -0.2rem; /* centered under bullet */
  top: 1.35rem;
  width: 2px;
  height: calc(100% - 1.35rem);
  background: rgba(255,255,255,0.15);
}

/* Typography blocks */
.timeline .status {
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 0.15rem;
}

.timeline .location {
  opacity: 0.85;
  font-weight: 500;
  font-size: 0.96rem;
}

.timeline .time {
  font-size: 0.92rem;
  opacity: 0.75;
  margin-top: 0.15rem;
}

/* Completed steps */
.timeline li.completed .status,
.timeline li.completed .location {
  opacity: 0.95;
}

.timeline li.completed::before {
  background: var(--brand, #ffd166);
  border-color: var(--brand, #ffd166);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.18);
}

/* Current (active) step */
.timeline li.current::before {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.18);
}

.timeline li.current .status {
  color: #fff;
  text-shadow: 0 0 1px rgba(255,255,255,0.15);
}

/* Upcoming steps */
.timeline li.upcoming::before {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
}

.timeline li.upcoming .status,
.timeline li.upcoming .location,
.timeline li.upcoming .time {
  opacity: 0.6;
}

/* Remove final connector */
.timeline li:last-child::after {
  display: none;
}

/* Tighten rhythm on small screens */
@media (max-width: 560px) {
  .timeline {
    padding-left: 2rem;
  }
  .timeline::before { left: 0.65rem; }
  .timeline li::before { left: -1.15rem; }
}

/* Track input (AWB box) — preserve layout, refine visuals */
.track-box {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  max-width: 820px;
  margin: 1.25rem auto 1.75rem;
  padding: 0.6rem;
  background: var(--panel-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevate);
  backdrop-filter: blur(6px);
}

.track-box input {
  flex: 1 1 520px;
  min-width: 180px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 0.9rem 1.2rem;
  color: var(--text-primary);
  outline: none;
  transition: border var(--transition), box-shadow var(--transition);
}

.track-box input::placeholder {
  color: rgba(255,255,255,0.55);
}

.track-box input:focus {
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}

.track-box button {
  white-space: nowrap;
  border: 0;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #8a6cff, #ff7ea0);
  color: #0b0b10;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
  transform: translateZ(0);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.track-box button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.28);
}


/* Forms (pickup & contact) */
form {
  max-width: 700px;
  margin: 0 auto;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-elevate);
}
form label {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--text-primary);
}
input, select, textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 0 2px rgba(127, 161, 255, 0.4);
}
textarea {
  min-height: 120px;
  resize: vertical;
}
button[type="submit"], .btn-submit {
  margin-top: 1.5rem;
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
button[type="submit"]:hover, .btn-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
/* Response message styling */
#responseMessage {
  margin-top: 1rem;
  text-align: center;
  font-weight: 500;
}

/* Footer */
footer {
  padding: 2rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  backdrop-filter: blur(8px);
}
footer p {
  margin-bottom: 0.4rem;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Utility class to hide elements via JS. Important for conditional form fields */
.hidden {
  display: none !important;
}

/* Utility classes */
.text-center {
  text-align: center;
}
.muted {
  color: var(--text-muted);
}

/* UPS-like milestones */
.milestone-header { margin: 1rem 0 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.milestone-header .shipto { font-size:.95rem; opacity:.9; }
.milestone-header .pill { display:inline-block; padding:.25rem .5rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); margin-left:.5rem; font-size:.8rem; }

.milestones { position:relative; margin: 0; padding-left:1.25rem; list-style:none; }
.milestones::before { content:''; position:absolute; left:.45rem; top:.25rem; bottom:.25rem; width:2px; background:linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.05)); }
.milestones li { position:relative; margin:1rem 0 1.25rem; display:flex; gap:.75rem; align-items:flex-start; opacity:.9; }
.milestones .dot { position:relative; flex:0 0 .9rem; height:.9rem; border-radius:50%; background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.35); margin-left:-.05rem; }
.milestones li.done .dot { background:#2ecc71; border-color:#2ecc71; }
.milestones li.current .dot { background:#f39c12; border-color:#f39c12; box-shadow:0 0 0 4px rgba(243,156,18,.2); }
.milestones li.todo .dot { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.milestones .content .title { font-weight:600; margin-bottom:.15rem; }
.milestones .content .sub { font-size:.88rem; opacity:.8; }



/* === UPS-style milestones (used by track.html via script.js) ===
   This overrides/augments the older .timeline styles without changing markup.
   HTML shape:
   <ul class="milestones">
     <li class="done|current|todo">
       <div class="dot"></div>
       <div class="content">
         <div class="title">Label Created</div>
         <div class="sub">01/08/2025 2:58 PM • Hyderabad, India</div>
       </div>
     </li>
   </ul>
*/

.milestones {
  position: relative;
  margin: 0.75rem auto 2.25rem;
  padding-left: 2.25rem;
  max-width: 820px;
  list-style: none;
}

/* Vertical rail */
.milestones::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0.9rem;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.28), rgba(255,255,255,0.10));
}

.milestones li {
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.5rem 0.9rem;
  padding: 0.45rem 0 1.1rem 0;
}

.milestones li .dot {
  position: absolute;
  left: -0.1rem;
  top: 0.25rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  background: var(--panel-bg);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
  z-index: 1;
}

/* Connector overlay for crispness */
.milestones li::after {
  content: "";
  position: absolute;
  left: 0.55rem; /* center under the dot */
  top: 1.35rem;
  width: 2px;
  height: calc(100% - 1.35rem);
  background: rgba(255,255,255,0.15);
}

.milestones li:last-child::after { display: none; }

.milestones li .content .title {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.milestones li .content .sub {
  margin-top: 0.15rem;
  font-size: 0.94rem;
  opacity: 0.8;
}

/* States */
.milestones li.done .dot {
  background: var(--brand, #ffd166);
  border-color: var(--brand, #ffd166);
  box-shadow: 0 0 0 4px rgba(255,209,102,0.18);
}

.milestones li.current .dot {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.18);
}

.milestones li.todo .dot {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
}

.milestones li.todo .content { opacity: 0.7; }

@media (max-width: 560px) {
  .milestones { padding-left: 2rem; }
  .milestones::before { left: 0.75rem; }
}

/* Ship to / service header block */
.milestone-header {
  max-width: 820px;
  margin: 0.25rem auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.milestone-header .shipto { font-size: 1rem; }
.milestone-header .meta { display: flex; gap: 0.5rem; align-items: center; }
.milestone-header .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  font-weight: 600;
  font-size: 0.85rem;
}


/* ===== Tracking Hotfix: cleaner UPS-style layout (flex, no squished text) ===== */
.milestones{ padding-left: 0; max-width: 860px; }
.milestones::before{ display: none; }

.milestones li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0 18px 0;
  position: relative;
}

.milestones li .dot{
  position: relative;
  flex: 0 0 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  margin-top: 2px;
}

/* Connector runs from each dot down to the next item */
.milestones li .dot::after{
  content: "";
  position: absolute;
  left: 6px; /* center of the 14px dot */
  top: 14px;
  width: 2px;
  height: calc(100% + 18px);
  background: rgba(255,255,255,0.15);
}
.milestones li:last-child .dot::after{ display: none; }

.milestones li .content{
  flex: 1;
  min-width: 0;
  word-break: normal;         /* undo any global break-all */
  overflow-wrap: break-word;  /* wrap nicely when needed */
}

.milestones li .content .title{
  margin: 0 0 2px 0;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .2px;
}

.milestones li .content .sub{
  font-size: .95rem;
  opacity: .82;
}


/* Show service and carrier metadata pills in the milestone header.  They
   appear next to the destination and help users understand which service
   level and carrier is handling their shipment. */
.milestone-header .meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Estimated delivery line for tracking results.  This appears above the
   milestone header on the tracking page and conveys the expected delivery
   window. */
#trackResult .eta {
  margin-bottom: 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
}
#trackResult .eta strong {
  font-weight: 600;
  color: var(--accent1);
}

/* Animated courier illustration in the home hero.  A simple hand‑off animation
   using Ionicons conveys a delivery person handing over a package to the
   recipient.  Icons scale responsively via clamp(). */
.hero-animation {
  /* We hide the inline Ionicons animation because the hero background
     illustration already conveys motion. */
  display: none !important;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  pointer-events: none;
  z-index: 2;
}
.hero-animation ion-icon {
  color: var(--accent2);
}
.hero-animation .courier,
.hero-animation .destination {
  font-size: clamp(2.5rem, 6vw, 4rem);
}
.hero-animation .package {
  font-size: clamp(2rem, 5vw, 3rem);
  animation: handoff 4s infinite ease-in-out;
}
@keyframes handoff {
  0%   { transform: translateX(-1rem); opacity: 0; }
  10%  { transform: translateX(0rem);   opacity: 1; }
  50%  { transform: translateX(2.5rem); opacity: 1; }
  90%  { transform: translateX(2.5rem); opacity: 1; }
  100% { transform: translateX(4rem);   opacity: 0; }
}

/* Dark theme form controls: make selects readable */
select, input, textarea {
  background: var(--panel-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--accent1);
  border-color: var(--accent1);
}
/* Many browsers respect these for the dropdown list itself */
select option {
  background: var(--bg-color);
  color: var(--text-primary);
}

/* Remove/disable any homepage animation block */
.courier-anim { display: none !important; }

/* Two-column bullet lists used on services page */
ul.cols-2 {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.2rem;
}

/*
  Shipping cost calculator styles
  This form appears on the Services page and provides a simple way for
  users to estimate the chargeable weight and cost of an international
  shipment.  It reuses existing input and button styles but ensures
  everything stacks neatly on smaller screens.
*/
#calculator .calc-form {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevate);
}
#calculator .calc-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
}
#calculator .calc-form input,
#calculator .calc-form select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg);
  color: var(--text-primary);
}
#calculator .calc-form button {
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
#calculator .calc-form button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
#calculator #calcResult {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
}
@media (max-width: 720px){ ul.cols-2 { columns: 1; } }
.note { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--surface); }

/* Home hero inline tracking spacing */
.hero.home .buttons { margin-bottom: 14px; }   /* space under the two buttons */
#inlineTrackWrap { margin-top: 10px; }         /* extra breathing room above the form */
#inlineTrackWrap #trackResult { margin-top: 10px; } /* space above results after submit */

/* Extra breathing room under hero buttons and above inline tracker */
.hero.home .buttons { 
  margin-bottom: 32px !important;         /* desktop spacing */
}
#inlineTrackWrap { 
  margin-top: 20px !important; 
  padding-top: 4px;                        /* subtle visual gap */
}
#inlineTrackWrap .track-box { 
  margin-top: 8px !important; 
}
#inlineTrackWrap #trackResult { 
  margin-top: 14px !important; 
}

/* Tweak for mobile */
@media (max-width: 640px){
  .hero.home .buttons { margin-bottom: 24px !important; }
  #inlineTrackWrap { margin-top: 16px !important; }
}


.milestone-header .meta { display: none !important; }


/* Keep tracker/timeline centered & narrow */
#inlineTrackWrap,
#inlineTrackWrap .track-box,
#trackResult .milestone-header,
#trackResult .milestones {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.milestones .content { flex: 1; min-width: 0; }
.milestones .dot     { flex: 0 0 .9rem; }

/* When JavaScript fails to load, fallback styles make sections visible by default.
   These are intentionally left blank so that IntersectionObserver animations
   work as expected.  If needed, you can uncomment the rules below to
   force all .reveal elements to be visible by default.

   .reveal,
   .reveal.show {
     opacity: 1 !important;
     transform: none !important;
   }


/* Stats / network section styles */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stat-card ion-icon {
  font-size: 2.4rem;
  color: var(--accent1);
  margin-bottom: 0.75rem;
}
.stat-card h3 {
  font-size: 2rem;
  margin: 0;
  font-weight: 700;
  color: var(--accent2);
}
.stat-card p {
  margin: 0.3rem 0 0;
  font-weight: 600;
  color: var(--text-primary);
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

/* Newsletter / contact section styles */
.newsletter {
  background: rgba(255,255,255,0.02);
  padding: 4rem 0;
}
.newsletter-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
.newsletter-content {
  flex: 1;
  min-width: 260px;
}
.newsletter-content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.newsletter-content p {
  margin-bottom: 1.2rem;
  color: var(--text-muted);
}
.newsletter-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.newsletter-form input {
  flex: 1;
  min-width: 220px;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-primary);
}
.newsletter-form button {
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--accent1);
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.newsletter-form button:hover {
  transform: translateY(-3px);
}
.contact-card {
  flex: 1;
  min-width: 260px;
  padding: 2rem 1.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  border-radius: 1.2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.contact-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: var(--accent1);
}
.contact-card p {
  margin: 0.4rem 0;
  color: var(--text-primary);
}
.contact-card a {
  color: var(--accent2);
  text-decoration: none;
}
.contact-card a:hover {
  text-decoration: underline;
}
   /*Keeping these commented ensures the reveal animation will work when
   JavaScript is enabled, but avoids leaving content hidden if it fails.
*/


/* Wrapper fills the viewport and positions content above the video */
.hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Video covers the whole container and maintains aspect ratio */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Ensures the video fills and crops if needed */
}

/* Content above the video */
.hero-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    /* Additional styling for your headings/buttons */
}

/* Optional: adjust height for very small screens */
@media (max-width: 600px) {
    .hero-wrapper {
        height: 70vh;  /* reduce height on small devices if needed */
    }
}





.logo img {
  height: 60px;           /* keep consistent height */
  object-fit: contain;    /* preserve proportions */
  background: transparent; /* ensures no background shows */
  border-radius: 8px;     /* slight rounding to soften edges */
}


.logo img:hover {
  transform: scale(1.05);       /* slight hover zoom */
}


.btn-red{
  color: red;
  background-color: red;

}








/* Navbar: keep white background for both light and dark themes */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(.65rem, 1.5vw, 1rem) clamp(1rem, 4vw, 2.25rem);

  background: #ffffff !important;        /* always white */
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
}

.navbar nav a {
  color: #1d2330;                        /* dark text for contrast */
}

.navbar nav a:hover,
.navbar nav a.active {
  color: #2b3a67;
  background: rgba(43, 58, 103, .06);
  border-color: rgba(43, 58, 103, .12);
}

#themeToggle {
  color: #1d2330;                        /* keep icon visible */
}