/*
 * ================================================================
 *  Taib Elyas Popal — Transit & Forwarding Company
 *  styles.css  |  Pure CSS · No build tools · No preprocessor
 * ================================================================
 *
 *  TABLE OF CONTENTS
 *  ─────────────────────────────────────────────────────────────
 *  1.  CSS CUSTOM PROPERTIES (design tokens)
 *  2.  BASE RESET & TYPOGRAPHY
 *  3.  LANGUAGE / DIRECTION CONTROL (EN ↔ FA/RTL, pure CSS)
 *  4.  UTILITY HELPERS
 *  5.  BUTTONS
 *  6.  FLOATING WHATSAPP BUTTON
 *  7.  NAVBAR
 *  8.  HERO SECTION
 *  9.  MARQUEE STRIP
 *  10. ABOUT SECTION
 *  11. SERVICES SECTION
 *  12. WHY CHOOSE US SECTION
 *  13. STATISTICS BANNER
 *  14. COVERAGE SECTION
 *  15. CTA BANNER
 *  16. CONTACT SECTION
 *  17. FOOTER
 *  18. ENTRANCE ANIMATIONS
 *  19. RESPONSIVE BREAKPOINTS
 * ================================================================
 */


/* ================================================================
   1. CSS CUSTOM PROPERTIES (design tokens)
   Change colours here and they cascade everywhere automatically.
   ================================================================ */
:root {
  /* Brand colours */
  --gold:       #c9a227;   /* primary accent — gold */
  --gold-d:     #a8841c;   /* darker gold (hover states) */
  --gold-l:     #e0b93a;   /* lighter gold (gradients) */
  --navy:       #0d2545;   /* primary dark — deep navy */
  --navy-m:     #1a3a6e;   /* mid navy (gradients, cards) */
  --navy-l:     #2a5298;   /* light navy (accents) */

  /* Surface colours */
  --off:        #f8f9fc;   /* off-white section backgrounds */
  --border:     #e5e7eb;   /* default border / divider colour */

  /* Typography */
  --font-en:    'Inter',     sans-serif;   /* English / LTR font */
  --font-fa:    'Vazirmatn', sans-serif;   /* Farsi / Dari / RTL font */
}


/* ================================================================
   2. BASE RESET & TYPOGRAPHY
   ================================================================ */

/* Smooth scrolling with offset so fixed navbar doesn't overlap sections */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* matches navbar height */
  font-family: var(--font-en);
}

body {
  color: #0d1b2a;
  background: #fff;
  overflow-x: hidden; /* prevent horizontal scroll on mobile */
}

/* Hidden CSS state-control checkboxes
   These must NOT be visible or accessible — they are purely
   internal state holders used by CSS :has() selectors below. */
.css-ctrl {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}


/* ================================================================
   3. LANGUAGE / DIRECTION CONTROL
   ──────────────────────────────────────────────────────────────
   Default state  →  English (LTR, Inter font)
   #langSwitch:checked  →  Farsi (RTL, Vazirmatn font)

   Technique:
   • .l-en spans are visible by default; .l-fa spans are hidden.
   • When #langSwitch is checked, :has() flips their visibility
     and also switches font-family and text direction on :root.
   • No JavaScript needed — works in all modern browsers that
     support CSS :has() (Chrome 105+, Firefox 121+, Safari 15.4+).
   ================================================================ */

/* Default: show English, hide Farsi */
.l-en { display: inline; }
.l-fa { display: none; }

/* When language is switched to Farsi */
:root:has(#langSwitch:checked) {
  /* Scrollbar moves to left side (correct for RTL) */
  direction: rtl;
}
body:has(#langSwitch:checked) {
  font-family: var(--font-fa);
  direction: rtl;
}
body:has(#langSwitch:checked) .l-en { display: none   !important; }
body:has(#langSwitch:checked) .l-fa { display: inline !important; }

/* ── RTL layout adjustments ──
   Bootstrap margin utilities use LTR values (ms = margin-start = margin-left).
   In RTL mode we need to flip them so visual offset stays on the correct side. */
body:has(#langSwitch:checked) .ms-lg-4       { margin-left: 0 !important; margin-right: 1.5rem !important; }
body:has(#langSwitch:checked) .me-2          { margin-right: 0 !important; margin-left: .5rem  !important; }
body:has(#langSwitch:checked) .me-3          { margin-right: 0 !important; margin-left: 1rem   !important; }
body:has(#langSwitch:checked) .about-card-offset {
  /* Vision card: offset left in LTR, offset right in RTL */
  margin-left: 0 !important;
  margin-right: 1.5rem !important;
}

/* Flip directional arrow icon in Why Us section */
body:has(#langSwitch:checked) .bi-arrow-right::before { content: "\f128"; }

/* Marquee runs right-to-left in RTL mode */
body:has(#langSwitch:checked) .marquee-track { animation-direction: reverse; }

/* Phone numbers always read left-to-right even in RTL layout.
   Use dir="ltr" attribute on the element as a first line of defence;
   this rule reinforces it via CSS. */
body:has(#langSwitch:checked) [dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}


/* ================================================================
   4. UTILITY HELPERS
   ================================================================ */

/* Section eyebrow label (small pill above headings) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: .35rem 1rem;
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .25);
  border-radius: 99px;
}

/* Large section heading */
.section-heading {
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
}

/* Standard vertical section padding */
.section-pad { padding: 6rem 0; }

/* Alternate background for sections */
.bg-off-white { background: var(--off); }

/* Gold text colour utility */
.text-gold { color: var(--gold) !important; }


/* ================================================================
   5. BUTTONS
   ================================================================ */

/* ── Primary gold button ── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: .65rem 1.4rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-gold:hover,
.btn-gold:focus {
  background: var(--gold-d);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 162, 39, .35);
}

/* ── White "call" button (used on dark/gold backgrounds) ──
   Used for "Call Us" CTAs on the hero and CTA banner sections. */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  border: 2px solid #fff;
  border-radius: 8px;
  padding: .65rem 1.4rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.btn-call:hover,
.btn-call:focus {
  background: rgba(255, 255, 255, .88);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, .3);
  text-decoration: none;
}

/* ── Language toggle button (navbar) ── */
.btn-lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-weight: 600;
  font-size: .78rem;
  border-radius: 6px;
  padding: .38rem .8rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  user-select: none;
}
.btn-lang:hover { background: var(--navy); color: #fff; }

/* ── Login button (navbar) ── */
.btn-login-nav {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: .78rem;
  border: none;
  border-radius: 6px;
  padding: .38rem .9rem;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
}
.btn-login-nav:hover {
  background: var(--navy-m);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 37, 69, .25);
}

/* ── Hero CTA size modifier (applied alongside btn-gold or btn-call) ── */
.btn-hero-cta {
  padding: .9rem 1.85rem;
  font-size: .97rem;
}

/* ── Call button inside contact info panel ── */
.btn-contact-call {
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s, box-shadow .2s, transform .15s;
  cursor: pointer;
}
.btn-contact-call:hover {
  background: var(--gold-d);
  color: #fff;
  box-shadow: 0 6px 18px rgba(201, 162, 39, .35);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── Email button inside contact info panel ── */
.btn-contact-email {
  background: transparent;
  color: #fff;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, .38);
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.btn-contact-email:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
  text-decoration: none;
}


/* ================================================================
   6. FLOATING WHATSAPP BUTTON
   Fixed bottom-right corner (flips to bottom-left in RTL mode).
   The label text slides in on hover — pure CSS transition.
   ================================================================ */
.fab-whatsapp {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  border-radius: 99px;
  box-shadow: 0 6px 24px rgba(37, 211, 102, .4);
  overflow: hidden;
  height: 58px;
  padding: 0 1.1rem;
  transition: box-shadow .25s;
}
.fab-icon {
  font-size: 1.65rem;
  flex-shrink: 0;
  transition: transform .25s;
}
.fab-label {
  max-width: 0;        /* collapsed by default */
  overflow: hidden;
  white-space: nowrap;
  font-size: .88rem;
  font-weight: 700;
  padding-left: 0;
  transition: max-width .35s cubic-bezier(.4, 0, .2, 1), padding .3s;
}
.fab-whatsapp:hover                  { box-shadow: 0 10px 32px rgba(37, 211, 102, .5); color: #fff; }
.fab-whatsapp:hover .fab-label       { max-width: 120px; padding-left: .6rem; }
.fab-whatsapp:hover .fab-icon        { transform: scale(1.08); }

/* In RTL mode: move FAB to the left side */
body:has(#langSwitch:checked) .fab-whatsapp { right: auto; left: 2rem; }
/* In RTL mode: label expands leftward */
body:has(#langSwitch:checked) .fab-label    { padding-left: 0; padding-right: 0; }
body:has(#langSwitch:checked) .fab-whatsapp:hover .fab-label { padding-right: .6rem; }


/* ================================================================
   7. NAVBAR
   Fixed top navigation bar with glass-effect background.
   Collapses to a hamburger + slide-down menu on mobile.
   ================================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .7rem 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Brand / logo */
.nav-brand      { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; }
.nav-logo-img   { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; background: #0d1b2a; }
.brand-name     { display: block; font-size: .9rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.brand-sub      { display: block; font-size: .67rem; font-weight: 500; color: var(--gold); }

/* Hamburger icon (three horizontal lines) — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background .15s;
}
.nav-hamburger:hover { background: rgba(13, 37, 69, .06); }
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .3s, opacity .2s;
}

/* Hamburger → X animation when mobile menu is open */
body:has(#navToggle:checked) .nav-hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body:has(#navToggle:checked) .nav-hamburger span:nth-child(2) { opacity: 0; }
body:has(#navToggle:checked) .nav-hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Desktop nav layout */
.nav-menu    { display: flex; align-items: center; gap: .5rem; flex: 1; justify-content: space-between; }
.nav-links   { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nav-link-item {
  font-size: .84rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  padding: .4rem .65rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-link-item:hover { background: rgba(13, 37, 69, .06); color: var(--gold); }

/* Mobile nav (≤ 991px): hamburger shown, menu slides down */
@media (max-width: 991.98px) {
  .nav-hamburger { display: flex; }

  .nav-menu {
    display: none; /* hidden by default on mobile */
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(13, 37, 69, .1);
    padding: 1rem 1.25rem 1.25rem;
    gap: .75rem;
  }

  /* Show nav menu when hamburger is toggled */
  body:has(#navToggle:checked) .nav-menu { display: flex; }

  .nav-links   { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-link-item { display: block; width: 100%; }
  .nav-actions { width: 100%; padding-top: .5rem; border-top: 1px solid var(--border); }
}


/* ================================================================
   8. HERO SECTION
   Full-viewport dark-navy section with glowing blobs,
   grid lines, stat cards, and animated text.
   ================================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(140deg, var(--navy) 0%, #152e5e 45%, #1a3868 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px; /* offset for fixed navbar */
}

/* Decorative glowing blobs (blurred radial gradients) */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: .55;
}
.hero-glow-left {
  width: 500px; height: 500px;
  left: -120px; top: 50%;
  transform: translateY(-55%);
  background: radial-gradient(circle, rgba(201, 162, 39, .25) 0%, transparent 70%);
}
.hero-glow-right {
  width: 600px; height: 600px;
  right: -80px; top: -60px;
  background: radial-gradient(circle, rgba(42, 82, 152, .35) 0%, transparent 70%);
}

/* Subtle dot-grid overlay */
.hero-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Hero content wrapper sits above the decorative layers */
.hero-container { position: relative; z-index: 2; padding: 3rem 0; }

/* Trust badge pill above the headline */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 99px;
  padding: .45rem 1.2rem;
  color: rgba(255, 255, 255, .88);
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
  animation: fadeUp .6s .05s both;
}
.hero-badge i { color: var(--gold); }

/* Main hero headline */
.hero-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.3rem;
  animation: fadeUp .7s .15s both;
}
/* Gold gradient highlight on the <em> words inside the headline */
.hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--gold), var(--gold-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sub-headline text */
.hero-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 2rem;
  animation: fadeUp .7s .25s both;
}

/* CTA button row */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 2.25rem;
  animation: fadeUp .7s .35s both;
}

/* Trust strip (4 quick facts below the CTA buttons) */
.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 0;
  padding: 1rem 1.4rem;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  animation: fadeUp .6s .45s both;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  padding: 0 1rem;
}
.trust-item i    { color: var(--gold); font-size: .95rem; }
.trust-divider   { width: 1px; height: 18px; background: rgba(255, 255, 255, .2); }

/* Right column entrance animation */
.hero-right { animation: fadeUp .75s .2s both; }

/* 2×2 stat card grid */
.hero-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.hero-stat-card {
  border-radius: 16px;
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: transform .2s, box-shadow .2s;
}
.hero-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

/* Card colour variants */
.hsc-dark   { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .10); }
.hsc-accent { background: rgba(201, 162, 39, .15);  border: 1px solid rgba(201, 162, 39, .30); }

.hsc-icon  { font-size: 1.4rem; color: var(--gold); }
.hsc-num   { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.hsc-label { font-size: .72rem; color: rgba(255, 255, 255, .6); font-weight: 500; }

/* Company logo identity card (below stat grid) */
.hero-logo-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, .95);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  backdrop-filter: blur(10px);
}
.hero-logo-img {
  width: 60px; height: 60px;
  object-fit: contain;
  border-radius: 50%;
  background: #0d1b2a;
  flex-shrink: 0;
}

/* Bouncing scroll-down arrow at bottom of hero */
.hero-scroll-btn {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .4);
  font-size: 1.6rem;
  text-decoration: none;
  animation: bounce 2s ease-in-out infinite;
  z-index: 5;
}
.hero-scroll-btn:hover { color: var(--gold); }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   }
  50%       { transform: translateX(-50%) translateY(9px); }
}

/* Hero responsive overrides */
@media (max-width: 991.98px) {
  .hero-title     { font-size: 2.1rem; }
  .hero-subtitle  { font-size: 1rem; max-width: 100%; }
  .hsc-num        { font-size: 1.5rem; }
  .hero-logo-card { margin-top: .5rem; }
}
@media (max-width: 767.98px) {
  .hero-section   { min-height: auto; padding-bottom: 4rem; }
  .hero-title     { font-size: 1.85rem; }
  .trust-item     { padding: 0 .6rem; font-size: .75rem; }
  .trust-divider  { display: none; } /* too cramped on small screens */
  .hero-cards-grid { gap: .7rem; }
  .hsc-num        { font-size: 1.4rem; }
}
@media (max-width: 575.98px) {
  .hero-title     { font-size: 1.6rem; }
  .hero-ctas      { gap: .6rem; }
  .btn-hero-cta   { padding: .75rem 1.3rem; font-size: .88rem; }
}


/* ================================================================
   9. MARQUEE STRIP
   Infinite scrolling ticker bar between hero and about.
   Two identical sets of items ensure seamless looping:
   the animation shifts by 50% which lands exactly at the
   start of the duplicate set.
   ================================================================ */
.marquee-strip {
  background: var(--navy);
  padding: .9rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  animation: marquee 32s linear infinite;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}
.mdot { color: var(--gold); font-size: .44rem; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ================================================================
   10. ABOUT SECTION
   ================================================================ */
.about-stat-box {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}
.about-stat-num   { font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1; }
.about-stat-label { font-size: .78rem; font-weight: 600; color: #6b7280; margin-top: .3rem; }

/* Mission card (light) */
.about-card-light {
  background: var(--off);
  border: 1px solid var(--border);
}

/* Vision card (dark navy) */
.about-card-dark { background: var(--navy); }

/* Vision card is offset right in LTR, offset left in RTL (handled via RTL override above) */
.about-card-offset { margin-left: 1.5rem; }


/* ================================================================
   11. SERVICES SECTION
   ================================================================ */
.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 38px rgba(13, 37, 69, .1);
  border-color: rgba(201, 162, 39, .3);
}

/* Featured (dark navy) service card */
.service-card-featured {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 100%);
  border-color: transparent;
}
.service-card-featured:hover {
  box-shadow: 0 12px 38px rgba(13, 37, 69, .28);
  border-color: transparent;
}

/* Service icon box */
.svc-icon {
  width: 52px; height: 52px;
  background: rgba(201, 162, 39, .1);
  border: 1.5px solid rgba(201, 162, 39, .24);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--gold);
  transition: background .2s, transform .2s;
}
.service-card:hover .svc-icon {
  background: rgba(201, 162, 39, .17);
  transform: scale(1.05);
}
/* White variant for dark-background cards */
.svc-icon-white {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
}


/* ================================================================
   12. WHY CHOOSE US SECTION
   ================================================================ */
.why-card {
  background: var(--off);
  border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(13, 37, 69, .08);
  border-color: rgba(201, 162, 39, .3);
}
/* Large icon at top of each why-card */
.why-i { font-size: 1.75rem; color: var(--gold); display: block; }


/* ================================================================
   13. STATISTICS BANNER
   Dark navy full-width strip with 5 large numbers.
   ================================================================ */
.stats-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle radial glow in the centre */
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(201, 162, 39, .07) 0%, transparent 70%);
}
.stat-item  { position: relative; }
.stat-number {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-label {
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .58);
  margin-top: .5rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}


/* ================================================================
   14. COVERAGE SECTION
   ================================================================ */

/* Country cards grid — wraps flexibly on all screen sizes */
.countries-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.country-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  min-width: 80px;
  padding: .75rem .6rem;
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  cursor: default;
}
.country-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(201, 162, 39, .15);
}
/* "+25 More" special card */
.country-card-more {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 100%);
  border-color: transparent;
}
.country-card-more .country-name { color: var(--gold); }

.country-flag { font-size: 1.9rem; line-height: 1; }
.country-name { font-size: .7rem; font-weight: 600; color: var(--navy); margin-top: .35rem; }

/* Cargo types checklist */
.cargo-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
  font-size: .86rem;
  font-weight: 500;
  color: var(--navy);
}
.cargo-item i { color: var(--gold); font-size: .9rem; flex-shrink: 0; }

/* Core values icon cards */
.value-card {
  background: var(--off);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: transform .2s, border-color .2s;
}
.value-card:hover { transform: translateY(-2px); border-color: rgba(201, 162, 39, .4); }
.val-icon { font-size: 1.5rem; color: var(--gold); }


/* ================================================================
   15. CTA BANNER
   Gold gradient section with diagonal stripe overlay.
   ================================================================ */
.cta-banner {
  background: linear-gradient(135deg, var(--gold-d) 0%, var(--gold) 50%, var(--gold-l) 100%);
  position: relative;
  overflow: hidden;
}
/* Diagonal stripe texture */
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 30px,
    rgba(255, 255, 255, .04) 30px,
    rgba(255, 255, 255, .04) 31px
  );
}
/* Ensure content sits above the texture overlay */
.cta-banner .container { position: relative; }


/* ================================================================
   16. CONTACT SECTION
   ================================================================ */

/* Left dark panel */
.contact-info-panel {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-m) 100%);
}

/* Icon box beside each contact detail */
.ci-icon {
  width: 42px; height: 42px;
  background: rgba(201, 162, 39, .15);
  border: 1px solid rgba(201, 162, 39, .28);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gold);
  flex-shrink: 0;
}
.ci-label {
  font-size: .72rem;
  color: rgba(255, 255, 255, .48);
  font-weight: 500;
  margin-bottom: .2rem;
}

/* Right form panel — custom focus style using brand gold */
.contact-form-panel .form-control,
.contact-form-panel .form-select {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .65rem .9rem;
  font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form-panel .form-control:focus,
.contact-form-panel .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .14);
  outline: none;
}


/* ================================================================
   17. FOOTER
   ================================================================ */
.site-footer    { background: var(--navy); }

.footer-logo-img {
  width: 50px; height: 50px;
  object-fit: contain;
  border-radius: 50%;
  background: #0d1b2a;
  flex-shrink: 0;
}
.footer-heading {
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}
.footer-link {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  font-size: .85rem;
  transition: color .15s;
}
.footer-link:hover { color: var(--gold); }
.footer-text { color: rgba(255, 255, 255, .46); font-size: .85rem; }

/* Social icon buttons in footer */
.footer-social {
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  font-size: 1rem;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.footer-social:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}


/* ================================================================
   18. ENTRANCE ANIMATIONS
   CSS-only fade-up animation triggered on page load.
   Elements with .fade-in-up animate once when they appear.
   animation-delay is set inline on individual elements for
   staggered entrance within a group.
   ================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeUp .65s ease both; }

/* Respect user's motion preference (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-ctas,
  .hero-trust-strip,
  .hero-right,
  .hero-scroll-btn,
  .marquee-track,
  .fab-whatsapp {
    animation: none !important;
    transition: none !important;
  }
  .fab-label { max-width: 120px !important; padding-left: .6rem !important; }
}


/* ================================================================
   19. RESPONSIVE BREAKPOINTS
   (Hero breakpoints are defined in section 8 near the hero rules.
   These rules handle all other components at small sizes.)
   ================================================================ */
@media (max-width: 768px) {
  .section-pad  { padding: 4rem 0; }
  .stat-number  { font-size: 2rem; }
}
@media (max-width: 576px) {
  .section-pad        { padding: 3rem 0; }
  .hero-trust-strip   { padding: .8rem 1rem; }
  .about-card-offset  { margin-left: 0; } /* no offset on small screens */
  .fab-whatsapp       { bottom: 1.25rem; right: 1.25rem; }
  body:has(#langSwitch:checked) .fab-whatsapp { right: auto; left: 1.25rem; }
}