/* =====================================================================
   YATRI PARIVAHAN VISION SUMMIT 2026
   Design system — modern, government-grade, mobility theme
   ===================================================================== */

:root {
  --navy:        #0d2444;   /* deep authority blue (logo road / dark base) */
  --navy-2:      #1c4a78;
  --teal:        #1893cc;   /* remapped to logo blue (cool secondary) */
  --teal-2:      #43b4e8;
  --indigo:      #1a72bf;   /* blue bridge tone */
  --accent:      #1499d6;   /* logo blue — primary accent (matches "2026") */
  --accent-2:    #0e7cb4;   /* deeper blue */
  --gold:        #d99b5f;   /* logo stupa gold */
  --gold-2:      #f0c890;   /* light gold */
  --green:       #2bbf78;   /* success states only */
  --ink:         #1f2d3d;
  --muted:       #647489;
  --line:        #eef2f7;
  --tint:        #f6f9fc;
  --white:       #ffffff;
  --radius:      20px;
  --shadow-sm:   0 8px 24px rgba(13, 36, 68, .05);
  --shadow:      0 24px 60px rgba(13, 36, 68, .10);
  --grad-hero:   linear-gradient(135deg, #081a34 0%, #0d2a52 38%, #0f5687 72%, #1499d6 100%);
  --grad-accent: linear-gradient(120deg, #2aa9e0 0%, #1488c9 55%, #0e6faf 100%);
  --grad-text:   linear-gradient(100deg, #0d2444 0%, #1c4a78 45%, #1499d6 100%);
  --font-body:   'Inter', system-ui, -apple-system, sans-serif;
  --font-head:   'Sora', system-ui, sans-serif;
}

* { scroll-behavior: smooth; }

html { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  font-size: 1.02rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p { margin-bottom: 1rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.18;
}

a { text-decoration: none; }
.text-accent { color: var(--accent); }
.text-white-75 { color: rgba(255,255,255,.78); }

/* ---------- Section scaffolding ---------- */
.section { padding: 96px 0; }
.section-tint { background: var(--tint); }
.section-dark { background: var(--grad-hero); }
.section-head { max-width: 760px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); margin-bottom: .5rem; }

/* attractive gradient headings — light sections only */
.section:not(.section-dark) .section-head h2:not(.text-white) {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--navy);
}
.section-sub { color: var(--muted); font-size: 1.05rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
}
.eyebrow::before, .section-head .eyebrow::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section-head .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow.light { color: var(--accent); }
.eyebrow.light::before, .eyebrow.light::after { background: linear-gradient(90deg, var(--accent), transparent) !important; }
.section-head .eyebrow.light::before { background: linear-gradient(90deg, transparent, var(--accent)) !important; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-head); font-weight: 600; border-radius: 50px; padding: .7rem 1.5rem; transition: .25s; }
.btn-accent { background: var(--grad-accent); color: #fff; border: none; box-shadow: 0 10px 24px rgba(20,153,214,.35); }
.btn-accent:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20,153,214,.45); }
.btn-outline-light:hover { transform: translateY(-2px); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.site-header { transition: box-shadow .35s ease; box-shadow: 0 6px 22px rgba(16,42,76,.14); }
.site-header.scrolled { box-shadow: 0 10px 34px rgba(16,42,76,.22); }

/* ---------- Top utility bar ---------- */
.top-bar {
  background: linear-gradient(90deg, #0b2342, #103a5c);
  color: rgba(255,255,255,.82); font-size: .82rem;
  max-height: 46px; overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease, padding .35s ease;
}
.site-header.scrolled .top-bar { max-height: 0; opacity: 0; }
.top-bar .tb-inner { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; flex-wrap: wrap; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.top-bar i { color: var(--accent); }
.top-bar em { font-style: normal; opacity: .6; }
.tb-sep { opacity: .3; }
.tb-mail { color: rgba(255,255,255,.82); transition: .2s; }
.tb-mail:hover { color: var(--accent); }
.tb-social { display: flex; gap: 8px; }
.tb-social a {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
  background: rgba(255,255,255,.08); color: #fff; font-size: .85rem; transition: .25s;
}
.tb-social a:hover { background: var(--accent); color: #06310f; transform: translateY(-2px); }

/* ---------- Main navbar ---------- */
.navbar-glass {
  background: rgba(11, 31, 58, .96); backdrop-filter: blur(10px);
  padding: 14px 0; transition: background .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled .navbar-glass {
  background: rgba(11, 31, 58, .96); backdrop-filter: blur(14px); padding: 9px 0;
}
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--grad-accent); color: #06310f; border-radius: 13px; font-size: 1.3rem;
  box-shadow: 0 6px 16px rgba(52,191,74,.4);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; color: #fff; }
.brand-text strong { font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.brand-text small { font-size: .72rem; opacity: .78; letter-spacing: .05em; }

/* logo lockup (navbar + footer) */
.brand-logo {
  height:80px; width: auto; display: block; transition: height .35s ease;
  background:transparent;  border-radius: 10px; position:absolute;
}
.site-header.scrolled .brand-logo { height: 40px; }
.footer-logo {
  height:170px; width: auto; max-width: 100%; display: block;
  background:transparent; padding: 12px 18px; border-radius: 14px;
}
@media (max-width: 575px) { .brand-logo { height: 38px; } }

.navbar-glass .nav-link {
  position: relative; color: rgba(255,255,255,.82); font-weight: 500; font-size: .95rem;
  padding: .5rem .9rem; transition: color .2s;
}
.navbar-glass .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2px;
  background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.navbar-glass .nav-link:hover, .navbar-glass .nav-link.active { color: #fff; }
.navbar-glass .nav-link.active::after, .navbar-glass .nav-link:hover::after { transform: scaleX(1); }
/* Past Editions dropdown */
.navbar-glass .nav-item.dropdown .dropdown-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.navbar-glass .nav-item.dropdown .dropdown-toggle::after {
  content: "\F282"; font-family: "bootstrap-icons"; border: 0; vertical-align: 0;
  position: static; width: auto; height: auto; left: auto; right: auto; bottom: auto;
  background: none; transform: none; transition: transform .25s ease; font-size: .8em; margin: 0;
}
.navbar-glass .nav-item.dropdown.show .dropdown-toggle::after { transform: rotate(180deg); }
.navbar-glass .nav-item.dropdown.show .dropdown-toggle { color: #fff; }
.navbar-glass .dropdown-menu {
  background: #fff; border: 1px solid var(--line, #e6edf4); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(11,31,58,.18); padding: 8px; margin-top: 12px; min-width: 320px;
}
.navbar-glass .dropdown-menu .dropdown-item {
  white-space: normal; border-radius: 9px; padding: 10px 14px;
  font-size: .9rem; font-weight: 500; color: var(--ink); line-height: 1.4;
}
.navbar-glass .dropdown-menu .dropdown-item:hover,
.navbar-glass .dropdown-menu .dropdown-item:focus {
  background: rgba(20,153,214,.1); color: var(--accent-2, #0e7cb4);
}
.navbar-glass .dropdown-menu .dropdown-divider { margin: 4px 6px; }
@media (max-width: 991px) {
  .navbar-glass .dropdown-menu {
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
    box-shadow: none; min-width: 0; margin-top: 4px;
  }
  .navbar-glass .dropdown-menu .dropdown-item { color: rgba(255,255,255,.85); }
  .navbar-glass .dropdown-menu .dropdown-item:hover,
  .navbar-glass .dropdown-menu .dropdown-item:focus { background: rgba(255,255,255,.1); color: #fff; }
}
.navbar-toggler { border: none; padding: 4px 6px; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon { filter: invert(1); }

@media (max-width: 991px) {
  .navbar-glass { background: rgba(11,31,58,.97); backdrop-filter: blur(14px); }
  .navbar-collapse { margin-top: 12px; padding-bottom: 8px; }
  .navbar-glass .nav-link::after { display: none; }
  .tb-mail { display: none; }
  .top-bar .tb-inner { justify-content: center; font-size: .76rem; }
}
@media (max-width: 575px) {
  .tb-left .tb-sep, .tb-left span:last-child { display: none; }   /* keep only the date on tiny screens */
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background:
    radial-gradient(900px 620px at 82% 12%, rgba(18,128,138,.22), transparent 60%),
    radial-gradient(820px 600px at 12% 92%, rgba(59,91,219,.20), transparent 60%),
    linear-gradient(150deg, #0e2e57 0%, #15487c 46%, #1d5c98 100%);
  color: #fff; overflow: hidden; padding: 140px 0 90px;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 85% 12%, rgba(52,191,74,.26), transparent 60%),
    radial-gradient(700px 500px at 8% 88%, rgba(46,204,113,.16), transparent 55%),
    linear-gradient(to bottom, transparent 65%, rgba(8,28,55,.35) 100%);
}
.hero-grid {
  position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 80%);
}
.hero-content { position: relative; z-index: 2; }
.hero-hosts { font-size: .85rem; color: rgba(255,255,255,.8); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hero-hosts .divider { opacity: .5; }
.badge-pill {
  display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: .4rem 1rem; border-radius: 50px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hero-title { font-size: clamp(1.6rem, 6vw, 3.8rem); font-weight: 800; line-height: 1.08; margin: .4rem 0 .6rem; overflow-wrap: break-word; }

/* centered hero variant — center the flex groups too */
.hero .text-center .hero-hosts,
.hero .text-center .hero-meta,
.hero .text-center .hero-cta { justify-content: center; }
.hero-tagline { font-family: var(--font-head); font-size: clamp(1.05rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--accent); margin-bottom: .2rem; }
.hero-tagline-hi { font-size: 1.05rem; color: rgba(255,255,255,.82); margin-bottom: 1.6rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 2rem; }
.meta-item { font-family: var(--font-head); font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.meta-item i { color: var(--accent); }
.meta-item small { opacity: .65; font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); border-radius: var(--radius); padding: 28px;
}
.hero-card h6 { color: var(--accent); font-size: .78rem; letter-spacing: .12em; margin-bottom: .6rem; }
.hero-card p { font-size: 1.02rem; font-weight: 500; margin-bottom: 1.1rem; }
.hero-card-list { list-style: none; padding: 0; margin: 0; }
.hero-card-list li { padding: 7px 0; font-size: .95rem; border-top: 1px solid rgba(255,255,255,.12); }
.hero-card-list li:first-child { border-top: none; }
.hero-card-list i { color: var(--green); margin-right: 8px; }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,.7); font-size: 1.5rem; animation: bob 1.8s infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } }

/* =====================================================================
   STATS / HIGHLIGHTS
   ===================================================================== */
/* full-width event banner band */
.event-banner {
  line-height: 0; background: #fff; position: relative; z-index: 4;
  padding-top: 118px;                 /* clear the fixed header (top-bar + navbar) */
}
.event-banner .banner-media { position: relative; line-height: 0; overflow: hidden; }
.event-banner img { width: 100%; height: auto; display: block; }
.event-banner + .section-stats { margin-top: 0; }   /* don't overlap the banner */

/* continuously running bus across the banner road lines */
.banner-bus {
  position: absolute; bottom: 3%; left: -22%; width: 13%; z-index: 2;
  pointer-events: none; will-change: left, transform;
  animation: bannerBusDrive 15s linear infinite, roadBusBob 1.2s ease-in-out infinite;
}
.banner-bus img { width: 100%; height: auto; display: block; }
@keyframes bannerBusDrive { from { left: -22%; } to { left: 110%; } }
@media (max-width: 575px) { .banner-bus { width: 22%; bottom: 2%; } }
@media (prefers-reduced-motion: reduce) { .banner-bus { animation: none; display: none; } }
@media (max-width: 991px) { .event-banner { padding-top: 116px; } }
@media (max-width: 575px) { .event-banner { padding-top: 100px; } }

.section-stats { padding: 0; margin-top: -60px; position: relative; z-index: 3; }
.section-stats .container {
  background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: 32px 18px;
  border: 1px solid var(--line);
}
.stat-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 22px 12px; position: relative; border-radius: 16px;
  transition: transform .3s ease, background .3s ease; height: 100%;
}
/* vertical dividers between columns on desktop */
.stat-row > [class*="col-"]:not(:last-child) .stat-card::after {
  content: ""; position: absolute; right: 0; top: 22%; height: 56%; width: 1px; background: var(--line);
}
.stat-card:hover { transform: translateY(-6px); background: var(--tint); }
.stat-card:hover::after { opacity: 0; }
.stat-ico {
  width: 50px; height: 50px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--teal)); color: #fff; font-size: 1.3rem;
  box-shadow: 0 8px 18px rgba(16,42,76,.18); transition: transform .3s ease;
}
.stat-card:hover .stat-ico { transform: scale(1.1) rotate(-4deg); }
.stat-num {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1;
  height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-num .plus { color: var(--accent); -webkit-text-fill-color: var(--accent); margin-left: 2px; }
.stat-num-icon { -webkit-text-fill-color: initial; }
.stat-num-icon i {
  color: var(--accent); font-size: 2.5rem; line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(52,191,74, .45));
  animation: badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.stat-card p {
  margin: 12px 0 0; font-size: .85rem; color: var(--muted); font-weight: 600; line-height: 1.35;
  min-height: 2.4em;                       /* reserve 2 lines so all labels align */
  display: flex; align-items: flex-start; justify-content: center;
}

@media (max-width: 767px) {
  .stat-row > [class*="col-"]:nth-child(2n) .stat-card::after { display: none; }
  .stat-row > [class*="col-"] .stat-card { border-bottom: 1px solid var(--line); }
  .stat-row > [class*="col-"]:nth-last-child(-n+1) .stat-card { border-bottom: none; }
}

/* ---- Key Highlights on a Madhya Pradesh digital-map stage ---- */
.stats-map .container {
  position: relative; overflow: hidden; padding: 42px 30px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(740px 440px at 50% 44%, rgba(20,153,214,.22), transparent 70%),
    linear-gradient(160deg, #0c2546 0%, #0a1f3b 100%);
  box-shadow: 0 30px 70px rgba(8,20,40,.45);
}
/* colourful theme edge along the top of the panel */
.stats-map .container::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--gold), var(--accent) 42%, var(--teal) 70%, var(--green));
}
/* Madhya Pradesh map watermark (drop assets/img/mp-map.png — a light/outline PNG) */
.stats-map .container::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../img/mp-map.png') center 48% / auto 84% no-repeat;
  opacity: .26; filter: drop-shadow(0 0 26px rgba(20,153,214,.55));
}
.stats-map .stat-row { position: relative; z-index: 1; }
/* map label */
.stats-map .stats-head { position: relative; z-index: 1; text-align: center; margin-bottom: 22px; }
.stats-map .stats-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  font-size: .74rem; color: var(--teal-2);
  padding: 7px 16px; border-radius: 50px;
  background: rgba(20,153,214,.12); border: 1px solid rgba(20,153,214,.32);
}
/* pulsing waypoint pins on the map */
.map-pin {
  position: absolute; z-index: 0; left: var(--x); top: var(--y);
  width: 9px; height: 9px; border-radius: 50%; background: var(--teal-2);
  box-shadow: 0 0 0 0 rgba(67,180,232,.55); animation: mapPinPulse 2.6s ease-out infinite;
}
.map-pin:nth-child(2) { animation-delay: .9s; }
.map-pin:nth-child(3) { animation-delay: 1.7s; }
@keyframes mapPinPulse {
  0%   { box-shadow: 0 0 0 0 rgba(67,180,232,.5); }
  70%  { box-shadow: 0 0 0 15px rgba(67,180,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(67,180,232,0); }
}
/* dashed "route" linking the stat nodes (desktop) — gently flowing */
.stats-map .stat-row::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 50%; height: 2px; z-index: -1;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(67,180,232,.5) 0 8px, transparent 8px 18px);
  animation: routeFlow 1s linear infinite;
}
@keyframes routeFlow { from { background-position: 0 0; } to { background-position: 18px 0; } }
@media (max-width: 991px) { .stats-map .stat-row::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .map-pin, .stats-map .stat-row::before { animation: none; } }
/* glass "data-point" chips instead of divided columns */
.stats-map .stat-card {
  position: relative; overflow: hidden;
  padding: 18px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.stats-map .stat-card::before {                       /* accent line that lights up on hover */
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal-2), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.stats-map .stat-card:hover::before { opacity: 1; }
.stats-map .stat-ico {
  width: 46px; height: 46px; margin-bottom: 10px; font-size: 1.18rem;
  background: linear-gradient(135deg, var(--accent), var(--teal));
  box-shadow: 0 10px 22px rgba(20,153,214,.5), 0 0 0 5px rgba(20,153,214,.14);
}
.stats-map .stat-card:hover .stat-ico { transform: scale(1.12) rotate(-5deg); }
.stats-map .stat-num { font-size: clamp(1.6rem, 3.2vw, 2.2rem); height: 42px; }
.stats-map .stat-card p { margin-top: 8px; font-size: .8rem; }
.stats-map .stat-card::after { display: none; }      /* remove the vertical dividers */
.stats-map .stat-card:hover {
  transform: translateY(-6px); background: rgba(255,255,255,.10);
  border-color: rgba(20,153,214,.6); box-shadow: 0 18px 36px rgba(8,20,40,.5);
}
.stats-map .stat-ico { box-shadow: 0 10px 22px rgba(20,153,214,.4), 0 0 0 4px rgba(20,153,214,.12); }
.stats-map .stat-num {
  background: linear-gradient(100deg, #cfe6f7 0%, #ffffff 45%, #7cc1ec 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stats-map .stat-num .plus { color: var(--teal-2); -webkit-text-fill-color: var(--teal-2); }
.stats-map .stat-card p { color: rgba(255,255,255,.74); }
@media (max-width: 767px) {
  .stats-map .stat-card { border-bottom: none; }
  .stats-map .container { padding: 26px 18px; }
}

/* =====================================================================
   DIGNITARIES
   ===================================================================== */
.dignitary-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow-sm);
  text-align: center; position: relative; height: 100%;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dignitary-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
/* non-featured dignitary boxes a touch smaller, centered in their column */
.dignitary-card:not(.featured) { max-width: 300px; margin-inline: auto; }
/* photo sits below the role heading now, so it spans flush (no top rounding) */
.dignitary-card .dig-photo { border-radius: 0; }
/* role label — lined "eyebrow" heading at the top of the box (matches section eyebrows) */
.role-tag {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 16px 12px; font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.role-tag::before, .role-tag::after {
  content: ""; height: 2px; width: 34px; border-radius: 2px; flex: 0 0 auto;
}
.role-tag::before { background: linear-gradient(90deg, transparent, currentColor); }
.role-tag::after  { background: linear-gradient(90deg, currentColor, transparent); }
.role-tag.chief  { color: var(--accent); }
.role-tag.honour { color: var(--gold); }
.role-tag.chair  { color: var(--navy); }
/* portrait area — soft branded backdrop so cut-out portraits pop */
.dig-photo {
  position: relative; aspect-ratio: 4 / 3.4; overflow: hidden;
  background: radial-gradient(125% 95% at 50% 0%, #eef3fb 0%, #e0e9f5 55%, #d2e0f1 100%);
  display: grid; place-items: end center;
}
/* gentle fade where the photo meets the body */
.dig-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, rgba(255,255,255,.55), transparent); pointer-events: none;
}
.dig-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .35s ease; }
/* per-portrait balance (by role, independent of grid order) */
.dignitary-card:has(.role-tag.chief)  .dig-photo img { transform: scale(.92); transform-origin: bottom center; }
.dignitary-card:has(.role-tag.honour) .dig-photo img { transform: scale(1.1);  transform-origin: bottom center; }
/* featured Chief Guest box: wider column + shorter photo so the bigger card stays balanced */
.dignitary-card.featured .dig-photo { aspect-ratio: 4 / 2.9; }
.dig-initials {
  font-family: var(--font-head); font-weight: 700; font-size: 3.4rem; letter-spacing: .03em;
  color: rgba(255,255,255,.92); place-self: center; text-shadow: 0 6px 18px rgba(8,20,40,.35);
}
.dig-body { padding: 18px 18px 22px; }
.dig-body h4 { font-size: 1.18rem; margin-bottom: .3rem; color: var(--navy); font-weight: 700; }
.dig-role { color: var(--accent); font-size: .92rem; font-weight: 600; margin: 0 0 .6rem; line-height: 1.4; }
.dig-org  {
  display: inline-block; color: var(--muted); font-size: .76rem; font-weight: 600;
  background: var(--line); padding: .32rem .85rem; border-radius: 50px; letter-spacing: .01em;
}
/* featured Chief Guest box: grander frame + slightly larger text */
.dignitary-card.featured { border-color: transparent; box-shadow: var(--shadow); }
.dignitary-card.featured .dig-body { padding: 22px 22px 26px; }
.dignitary-card.featured .dig-body h4 { font-size: 1.5rem; }
.dignitary-card.featured .dig-role { font-size: 1.05rem; }

/* =====================================================================
   ABOUT
   ===================================================================== */
.lead-quote {
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--teal);
  background: linear-gradient(135deg, rgba(18,128,138,.08), rgba(52,191,74,.07));
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: 16px 20px; margin-top: 1.6rem;
}
.lead-quote i { color: var(--accent); }

/* About heading accent underline */
#about h2 { position: relative; }
#about h2::after {
  content: ""; display: block; width: 66px; height: 4px; border-radius: 4px;
  margin-top: 16px; background: linear-gradient(90deg, var(--teal), var(--accent));
}

/* About — focus highlight strip */
.about-focus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top:10px; }
.af-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px;
  box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease;
}
.af-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.af-ico {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  color: #fff; font-size: 1.3rem; margin-bottom: 15px; box-shadow: 0 8px 16px rgba(16,42,76,.16);
}
.af-card h6 { color: var(--navy); font-size: 1rem; font-weight: 700; margin: 0 0 5px; line-height: 1.3; }
.af-card p { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: 0; }
.about-focus > div:nth-child(1) .af-ico { background: linear-gradient(135deg, var(--teal), var(--teal-2)); }
.about-focus > div:nth-child(2) .af-ico { background: linear-gradient(135deg, var(--indigo), #5b76e6); }
.about-focus > div:nth-child(3) .af-ico { background: linear-gradient(135deg, #1f9fd8, #1380c9); }
.about-focus > div:nth-child(4) .af-ico { background: linear-gradient(135deg, var(--green), #4cd397); }
/* alternate dark cards (2nd & 4th) */
.about-focus > .af-card:nth-child(even) {
  background: linear-gradient(125deg, #0c2546 0%, #102a4c 55%, #0f2c57 100%);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 16px 38px -18px rgba(8,20,40,.6);
}
.about-focus > .af-card:nth-child(even) h6 { color: #fff; }
.about-focus > .af-card:nth-child(even) p { color: rgba(255,255,255,.72); }
@media (max-width: 767px) { .about-focus { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; } }
@media (max-width: 459px) { .about-focus { grid-template-columns: 1fr; } }

.why-mp-card {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 20px; padding: 38px 36px;
  box-shadow: 0 24px 50px rgba(16, 42, 76, .12);
}
.why-mp-card::before {                         /* gradient top accent */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--teal), var(--indigo), var(--accent));
}
.why-mp-card h3,
.why-h2 {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1rem; color: var(--navy);
}
.why-ico {
  flex-shrink: 0; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px; color: #fff; font-size: 1.2rem;
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  box-shadow: 0 8px 16px rgba(18, 128, 138, .28);
}

/* Why MP — dark section treatment */
.section-why {
  background:
    radial-gradient(800px 600px at 12% 10%, rgba(18,128,138,.22), transparent 55%),
    radial-gradient(820px 620px at 90% 92%, rgba(59,91,219,.20), transparent 55%),
    linear-gradient(150deg, #081b33 0%, #0c2546 55%, #0f2c57 100%);
  color: #fff;
}
.section-why .why-h2 { color: #fff; }
.section-why p { color: rgba(255,255,255,.8); }
.section-why .why-note {
  background: rgba(245,180,40,.16); border-left-color: #f5b428;
  color: rgba(255,255,255,.9);
}
.section-why .why-note strong { color: #fff; }
.section-why .ticks li { color: rgba(255,255,255,.88); }
.section-why .ticks li::before {
  background: rgba(43,191,120,.22); color: #34d399;
}
/* Why Indore — points as glass cards */
.section-why .why-ticks { margin: 1.4rem 0 1.6rem; }
.section-why .why-ticks li {
  position: relative;
  padding: 14px 16px 14px 54px; margin-bottom: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.1); border-radius: 13px;
  color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.55;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.section-why .why-ticks li::before {
  left: 15px; top: 14px; width: 27px; height: 27px;
  background: linear-gradient(135deg, var(--accent), var(--teal)); color: #fff;
  box-shadow: 0 6px 14px rgba(20,153,214,.4);
}
.section-why .why-ticks li:hover {
  transform: translateX(5px); background: rgba(255,255,255,.11);
  border-color: rgba(20,153,214,.5); box-shadow: 0 14px 30px -14px rgba(8,20,40,.8);
}
.section-why .why-ticks li strong { color: #8fd6ff; font-weight: 700; }

/* Madhya Pradesh photo slider (left column) */
.why-slider {
  position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 54px rgba(0,0,0,.5);
}
.ws-track { position: absolute; inset: 0; }
.ws-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity .9s ease, transform 6s ease;
}
.ws-slide.active { opacity: 1; transform: scale(1); }
.ws-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4,14,28,.6) 0%, transparent 42%);
}
.why-collage-badge {
  position: absolute; left: 16px; top: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: #fff; color: var(--navy);
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  padding: .5rem 1.1rem; border-radius: 50px; box-shadow: 0 10px 22px rgba(8,20,40,.28);
}
.why-collage-badge i { color: var(--accent); }
.ws-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem; color: #0a2240;
  background: rgba(255,255,255,.9); box-shadow: 0 6px 16px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .3s ease, background .2s ease;
}
.why-slider:hover .ws-arrow { opacity: 1; }
.ws-arrow:hover { background: #fff; }
.ws-prev { left: 12px; }
.ws-next { right: 12px; }
.ws-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.ws-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.45); transition: width .3s ease, background .3s ease;
}
.ws-dot.active { width: 26px; border-radius: 50px; background: var(--accent); }

/* Why MP — drivers panel (right column of its own section) */
.why-panel {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 20px; padding: 30px 34px;
  box-shadow: 0 24px 50px rgba(16, 42, 76, .10);
}
.why-panel-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--teal), var(--indigo), var(--accent));
}
.why-panel .ticks { margin: 0; }
.why-panel .ticks li:first-child { padding-top: 0; }
.why-panel .ticks li:last-child { padding-bottom: 0; }
.why-note {
  position: relative; overflow: hidden;
  display: flex; gap: 16px; align-items: center; justify-content: center; text-align: center;
  margin-top: 20px; padding: 18px 22px 18px 20px;
  background:
    linear-gradient(90deg, rgba(8,20,40,.50) 0%, rgba(8,20,40,.28) 50%, rgba(8,20,40,.42) 100%),
    linear-gradient(90deg, #0d2f66 0%, #1184b0 42%, #2faf66 74%, #6cc24a 100%);
  background-size: 100% 100%, 220% 100%;
  border: 1px solid rgba(52,191,74,.35);
  border-left: 5px solid var(--accent);
  border-radius: 16px;
  color: rgba(255,255,255,.86); line-height: 1.6;
  box-shadow: 0 16px 38px -18px rgba(8,20,40,.65);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: whyNoteFlow 9s ease-in-out infinite;
}
.why-note:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(8,20,40,.75); }
/* eye-catching sheen that sweeps across the box */
.why-note::before {
  content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: whyNoteSheen 6s ease-in-out infinite;
}
.why-note > * { position: relative; z-index: 2; }   /* keep text/icon above the sheen */

/* PPP invitation — polished callout variant */
.ppp-invite { flex-direction: column; align-items: center; gap: 11px; padding: 30px 32px; }
.ppp-invite .ppp-eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: .82rem; letter-spacing: .02em;
  color: #ffd98a; background: rgba(8,20,40,.30); border: 1px solid rgba(255,217,138,.45);
  padding: 5px 16px; border-radius: 50px;
}
.ppp-invite .ppp-title {
  margin: 0; max-width: 720px; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.08rem, 2vw, 1.42rem); line-height: 1.5;
  background: linear-gradient(100deg, #ffd98a 0%, #ffffff 38%, #8fd6ff 70%, #b8f1a0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ppp-invite .ppp-title strong { font-weight: 800; }
/* scheme name — a little bigger, logo-colour gradient (gold -> sky-blue -> green) */
.ppp-invite .ppp-scheme {
  display: inline-block; font-size: 1.22em; font-weight: 800; line-height: 1.5;
  background: linear-gradient(90deg, #f0c270 0%, #36b0e6 52%, #4cc878 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ppp-invite .ppp-cta {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: 11px 26px; border-radius: 50px; text-decoration: none;
  box-shadow: 0 12px 26px rgba(0,0,0,.28); transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.ppp-invite .ppp-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.34); color: var(--accent); }
/* reset the base .why-note i circle styling for the arrow inside the CTA */
.ppp-invite .ppp-cta i {
  width: auto; height: auto; margin: 0; padding: 0; display: inline; border-radius: 0;
  background: none; box-shadow: none; animation: none; color: inherit; font-size: 1em;
}
@keyframes whyNoteFlow {
  0%, 100% { background-position: 0% 50%, 0% 50%; }
  50%      { background-position: 0% 50%, 100% 50%; }
}
@keyframes whyNoteSheen {
  0%        { left: -65%; }
  45%, 100% { left: 130%; }
}
.why-note i {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--teal));
  color: #fff; font-size: 1.15rem; border-radius: 50%; margin-top: 0;
  box-shadow: 0 0 0 0 rgba(52,191,74,.55);
  animation: whyNotePulse 2.4s ease-out infinite;
}
.why-note strong { color: #fff; font-weight: 700; }
@keyframes whyNotePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,191,74,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(52,191,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,191,74,0); }
}
@media (prefers-reduced-motion: reduce) {
  .why-note, .why-note i, .why-note::before { animation: none; }
}

.ticks { list-style: none; padding: 0; margin: 1rem 0; }
.ticks li { position: relative; padding: 8px 0 8px 32px; color: var(--ink); }
.ticks li::before {
  content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 7px;
  color: var(--green); font-size: 1.1rem;
}
/* circular check chips — About/Why sections only (keeps dark sections untouched) */
#about .ticks li, #why .ticks li { padding: 10px 0 10px 40px; font-weight: 500; }
#about .ticks li::before, #why .ticks li::before {
  display: grid; place-items: center; width: 26px; height: 26px; top: 6px;
  border-radius: 50%; background: rgba(43, 191, 120, .15); font-size: .82rem;
}

/* =====================================================================
   VISION PILLARS
   ===================================================================== */
.pillar-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; height: 100%; box-shadow: var(--shadow-sm); transition: .3s; position: relative; overflow: hidden;
}
.pillar-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px;
  background: var(--grad-accent); opacity: .08; border-radius: 50%; transition: .3s;
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.pillar-card:hover::after { transform: scale(1.8); opacity: .12; }
.pillar-icon {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--teal)); color: #fff; font-size: 1.5rem; margin-bottom: 18px;
}
.pillar-card h5 { color: var(--navy); margin-bottom: .5rem; }
.pillar-card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ===== Vision ROADMAP — vertical on mobile, horizontal L→R on desktop ===== */
.roadmap { position: relative; max-width: 960px; margin: 10px auto 0; }
/* vertical road (mobile-first) */
.roadmap::before {
  content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 8px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--navy), var(--accent)); border-radius: 8px;
}
.roadmap::after {
  content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.85) 0 12px, transparent 12px 28px); z-index: 1;
}
.roadmap-step { position: relative; width: 100%; padding: 0 0 0 62px; margin-bottom: 22px; box-sizing: border-box; text-align: left; }
.rm-node {
  position: absolute; top: 18px; left: -3px; width: 52px; height: 52px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; color: #fff; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 4px solid #fff; box-shadow: 0 8px 20px rgba(13,36,68,.28);
}
.rm-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.rm-card:hover { box-shadow: var(--shadow); }   /* position stays fixed — no lift */
.rm-num { font-family: var(--font-head); font-weight: 800; font-size: 2rem; line-height: 1; color: rgba(20,153,214,.20); display: block; margin-bottom: 2px; transition: color .35s ease; }
.rm-card h5 { color: var(--navy); margin-bottom: .4rem; transition: color .35s ease; }
.rm-card p { color: var(--muted); margin: 0; font-size: .88rem; line-height: 1.5; transition: color .35s ease; }
/* lit up as the bus arrives at this station */
.rm-card.is-active {
  background: linear-gradient(135deg, var(--accent), var(--teal));
  border-color: transparent; box-shadow: 0 20px 42px rgba(20,153,214,.42);
  /* position stays fixed — only colour changes as the bus arrives */
}
.rm-card.is-active .rm-num { color: rgba(255,255,255,.5); }
.rm-card.is-active h5 { color: #fff; }
.rm-card.is-active p { color: rgba(255,255,255,.92); }

/* horizontal left→right on desktop */
@media (min-width: 768px) {
  .roadmap { max-width: 1180px; display: flex; align-items: center; }
  .roadmap::before {
    left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 8px; transform: translateY(-50%);
    background: linear-gradient(90deg, var(--navy), var(--accent));
  }
  .roadmap::after {
    left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 14px, transparent 14px 30px);
  }
  .roadmap-step { flex: 1 1 0; width: auto; height: 470px; padding: 0 9px; margin: 0; text-align: center; }
  .rm-node { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .rm-card {
    position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 14px);
    min-height: 164px;                 /* fixed uniform height so the boxes stay aligned */
    display: flex; flex-direction: column;
  }
  .roadmap-step:nth-child(odd)  .rm-card { bottom: calc(50% + 42px); }
  .roadmap-step:nth-child(even) .rm-card { top: calc(50% + 42px); }
  /* connector stub between card and road node */
  .rm-card::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background: var(--accent); }
  .roadmap-step:nth-child(odd)  .rm-card::after { bottom: -20px; }
  .roadmap-step:nth-child(even) .rm-card::after { top: -20px; }
  .rm-num { font-size: 1.7rem; }
  .rm-card p { font-size: .82rem; }
}

/* continuously running real bus on the road (desktop horizontal road) */
.road-bus {
  display: none; position: absolute; z-index: 4; top: 50%; left: -16%;
  width: 110px; margin-top: -82px;                   /* wheels seated on the road line */
  filter: drop-shadow(0 6px 5px rgba(8,20,40,.32));
  animation: roadBusDrive 18s linear infinite, roadBusBob 1.2s ease-in-out infinite;
}
.road-bus img { width: 150px; height: auto; display: block; position:absolute; top:50px; }
@keyframes roadBusDrive { from { left: -16%; } to { left: 105%; } }   /* slow left -> right, front-first */
@keyframes roadBusBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* show + run the bus on the desktop horizontal road (after the base rule so it wins) */
@media (min-width: 992px) { .road-bus { display: block; } }
@media (prefers-reduced-motion: reduce) { .road-bus { animation: none; } }

/* =====================================================================
   OBJECTIVES (dark)
   ===================================================================== */
.section-dark .section-head h2 { color: #fff; }
.objective-item {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 18px 20px; color: #fff; font-weight: 500; font-size: .98rem; height: 100%;
  display: flex; align-items: center; gap: 14px;
  transition: transform .28s ease, background .28s ease, border-color .28s ease;
}
.obj-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; font-size: 1.2rem; box-shadow: 0 6px 14px rgba(0,0,0,.28);
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  transition: transform .28s ease;
}
.obj-text { line-height: 1.4; }
.objective-item:hover {
  background: rgba(255,255,255,.12); transform: translateY(-4px);
  border-color: rgba(52,191,74,.45);
}
.objective-item:hover .obj-ico { transform: scale(1.08) rotate(-4deg); }
/* rotating brand tile colors across the 8 objectives */
.objective-grid > div:nth-child(4n+1) .obj-ico { background: linear-gradient(135deg, var(--teal), var(--teal-2)); }
.objective-grid > div:nth-child(4n+2) .obj-ico { background: linear-gradient(135deg, var(--indigo), #5b76e6); }
.objective-grid > div:nth-child(4n+3) .obj-ico { background: linear-gradient(135deg, #2aa8e0, #1380c9); color: #fff; }
.objective-grid > div:nth-child(4n)   .obj-ico { background: linear-gradient(135deg, var(--green), #4cd397); }

/* =====================================================================
   THEMES — split dark layout + asymmetric card grid
   ===================================================================== */
.section-themes {
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(18,128,138,.22), transparent 55%),
    radial-gradient(800px 600px at 95% 95%, rgba(59,91,219,.20), transparent 55%),
    linear-gradient(150deg, rgba(8,27,51,.93) 0%, rgba(12,37,70,.89) 55%, rgba(15,44,87,.85) 100%),
    url('../img/travel-b.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
}
.themes-layout { display: grid; grid-template-columns: 0.85fr 2.15fr; gap: 40px; align-items: start; }

/* Left info panel */
.themes-aside {
  position: sticky; top: 110px; border: 1px solid rgba(255,255,255,.1); border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,0)); padding: 42px 36px;
}
.aside-badge {
  display: inline-block; background: var(--grad-accent); color: #06310f; font-family: var(--font-head);
  font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem 1.1rem; border-radius: 50px;
}
.aside-title {
  font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.05; color: #fff;
  margin: 28px 0 20px; letter-spacing: -.03em;
}
.aside-desc { color: rgba(255,255,255,.66); font-size: 1rem; line-height: 1.75; margin-bottom: 44px; }
.aside-count { display: flex; align-items: center; gap: 18px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.ac-num { font-family: var(--font-head); font-weight: 800; font-size: 3.6rem; line-height: 1; color: var(--accent); letter-spacing: -.03em; }
.aside-count p { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.8); line-height: 1.4; }

/* Card grid */
.themes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.tcard {
  position: relative; background: #fff; border-radius: 20px; padding: 26px 24px 30px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(4,15,30,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tcard::before {                                    /* gradient top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--teal-2) 55%, var(--indigo));
}
.tcard::after {                                     /* soft corner blob */
  content: ""; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,128,138,.12), transparent 70%);
}
.tcard:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(4,15,30,.5); }
.tcard-no {
  align-self: flex-start; background: var(--grad-accent); color: #06310f; font-family: var(--font-head);
  font-weight: 800; font-size: .9rem; padding: .35rem .85rem; border-radius: 50px; margin-bottom: 18px;
}
.tcard-ico { position: absolute; top: 26px; right: 24px; font-size: 1.6rem; color: var(--teal); z-index: 1; }
.tcard-text { position: relative; z-index: 1; }
.tcard-text h5 { color: var(--navy); font-size: 1.12rem; font-weight: 700; line-height: 1.32; margin-bottom: .7rem; letter-spacing: -.01em; }
.tcard-text p { color: var(--muted); font-size: .92rem; line-height: 1.62; margin: 0; }

/* Featured card spans 2x2 with dark treatment */
.tcard-featured {
  grid-column: span 2; grid-row: span 2; justify-content: flex-end;
  background:
    radial-gradient(600px 400px at 80% 10%, rgba(18,128,138,.5), transparent 60%),
    linear-gradient(150deg, #0c2546, #133a66 60%, #10557a);
}
.tcard-featured::after { background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); width: 200px; height: 200px; }
.tcard-featured .tcard-ico { font-size: 2.1rem; color: var(--accent); }
.tcard-featured .tcard-text h5 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin-bottom: 1rem; }
.tcard-featured .tcard-text p { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.7; }
.tcard-img {
  display: block; width: 100%; height: 210px; object-fit: cover;
  border-radius: 14px; margin-bottom: 1.1rem;
  box-shadow: 0 14px 30px rgba(4,15,30,.4);
}
/* About heading — layered hierarchy + colourful scheme name */
.about-head { line-height: 1.3; }
.about-head .ah-intro {
  display: block; font-size: .56em; font-weight: 700; color: var(--muted);
  letter-spacing: .01em; margin-bottom: .4rem;
}
.about-head .ah-scheme {
  display: block; font-weight: 800; font-size: 1.04em; line-height: 1.3; margin: .12rem 0 .18rem;
  background: linear-gradient(90deg, #d99b5f 0%, #1499d6 50%, #2bbf78 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.about-head .ah-rest { display: block; color: var(--navy); }
.about-head .ah-rest strong {
  background: linear-gradient(90deg, var(--accent), var(--teal));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* About section — framed visual */
.about-visual { position: relative; z-index: 0; padding: 12px 16px 26px 8px; }
.about-visual-img {
  position: relative; z-index: 1; display: block;
  width: auto; max-width: 100%; margin-inline: auto; object-fit: cover;
  border-radius: 24px;
  filter: drop-shadow(0 30px 56px rgba(16,42,76,.26));
  animation: aboutFloat 6s ease-in-out infinite;
  transition: transform .4s ease;
}
.about-visual:hover .about-visual-img { transform: translateY(-4px) scale(1.01); }
/* glowing brand aura behind the bus */
.about-visual::before {
  content: ""; position: absolute; z-index: 0; inset: 10% 6% 14% 6%;
  background: radial-gradient(circle at 58% 46%, rgba(20,153,214,.30), rgba(108,194,74,.16) 50%, transparent 72%);
  filter: blur(38px); animation: aboutGlow 6s ease-in-out infinite;
}
/* soft accent panel behind bottom-right corner */
.about-visual::after {
  content: ""; position: absolute; right: 0; bottom: 6%;
  width: 66%; height: 62%; border-radius: 28px; z-index: 0;
  background: linear-gradient(160deg, rgba(20,153,214,.16), rgba(108,194,74,.12));
  border: 1px solid rgba(20,153,214,.20);
}
@keyframes aboutFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes aboutGlow  { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .about-visual-img, .about-visual::before { animation: none; }
}
/* floating vision badge */
.about-badge {
  position: absolute; left: -28px; bottom: 18px; z-index: 3;
  display: inline-flex; flex-direction: column;
  background: linear-gradient(135deg, var(--accent), var(--teal)); color: #fff;
  padding: 14px 22px; border-radius: 16px;
  box-shadow: 0 18px 40px rgba(18,128,138,.4), inset 0 1px 0 rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.18);
}
.about-badge .ab-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.about-badge .ab-lbl { font-size: .82rem; font-weight: 600; opacity: .92; letter-spacing: .02em; }
@media (max-width: 991px){
  .about-visual { padding: 0 0 14px 0; }
  .about-visual-img { width: 100%; height: 300px; }
}

/* Responsive */
@media (max-width: 991px) {
  .themes-layout { grid-template-columns: 1fr; gap: 30px; }
  .themes-aside { position: static; }
  .themes-grid { grid-template-columns: repeat(2, 1fr); }
  .tcard-featured { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 575px) {
  .themes-grid { grid-template-columns: 1fr; }
  .tcard-featured { grid-column: span 1; }
  .themes-aside { padding: 32px 26px; }
}

/* =====================================================================
   WHO SHOULD ATTEND
   ===================================================================== */
.attend-chip {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 18px; height: 100%; font-size: .94rem; font-weight: 600; color: var(--navy);
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 6px 16px rgba(16, 42, 76, .06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.attend-chip::before {                         /* accent bar that grows on hover */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ac, var(--teal)); transform: scaleY(0); transform-origin: top;
  transition: transform .3s ease;
}
.attend-chip:hover {
  transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 16px 30px rgba(16, 42, 76, .14);
}
.attend-chip:hover::before { transform: scaleY(1); }
.ac-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; font-size: 1.25rem;
  background: var(--ac, var(--teal));
  box-shadow: 0 6px 14px rgba(16, 42, 76, .18);
  transition: transform .28s ease;
}
.attend-chip:hover .ac-ico { transform: scale(1.08) rotate(-4deg); }
.ac-text { line-height: 1.35; }

/* rotating brand colors across the 12 cards */
.attend-grid > div:nth-child(6n+1) .attend-chip { --ac: #12808a; }
.attend-grid > div:nth-child(6n+2) .attend-chip { --ac: #3b5bdb; }
.attend-grid > div:nth-child(6n+3) .attend-chip { --ac: #1f9fd8; }
.attend-grid > div:nth-child(6n+4) .attend-chip { --ac: #2bbf78; }
.attend-grid > div:nth-child(6n+5) .attend-chip { --ac: #16b8a6; }
.attend-grid > div:nth-child(6n)   .attend-chip { --ac: #102a4c; }

/* =====================================================================
   PARTICIPATE — dark section, vertical tab rail + content panel
   ===================================================================== */
.section-participate {
  background:
    radial-gradient(800px 600px at 8% 10%, rgba(59,91,219,.20), transparent 55%),
    radial-gradient(800px 600px at 95% 90%, rgba(18,128,138,.22), transparent 55%),
    linear-gradient(150deg, rgba(8,27,51,.93) 0%, rgba(12,37,70,.88) 55%, rgba(15,44,87,.84) 100%),
    url('../img/travel-e.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff;
}
.participate-shell {
  display: grid; grid-template-columns: 0.9fr 1.6fr; gap: 26px; align-items: stretch;
  max-width: 1000px; margin: 0 auto;
}

/* Vertical tab rail */
.participate-rail { display: flex; flex-direction: column; gap: 14px; }
.rail-tab {
  display: flex; align-items: center; gap: 16px; text-align: left; width: 100%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 18px 20px; color: #fff; cursor: pointer; transition: .3s; position: relative; overflow: hidden;
}
.rail-tab .rail-ico {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px;
  background: rgba(255,255,255,.08); color: var(--accent); font-size: 1.25rem; transition: .3s;
}
.rail-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.rail-text strong { font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.rail-text small { color: rgba(255,255,255,.55); font-size: .8rem; }
.rail-arrow { color: rgba(255,255,255,.4); font-size: .9rem; transition: .3s; }
.rail-tab:hover { background: rgba(255,255,255,.1); transform: translateX(3px); }
.rail-tab.active {
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent;
  box-shadow: 0 14px 30px rgba(52,191,74,.3);
}
.rail-tab.active .rail-ico { background: rgba(0,0,0,.12); color: #06310f; }
.rail-tab.active .rail-text strong { color: #06310f; }
.rail-tab.active .rail-text small { color: rgba(6,49,15,.65); }
.rail-tab.active .rail-arrow { color: #06310f; transform: translateX(3px); }

/* auto-play progress bar on the active tab */
.rail-tab .rail-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: rgba(6,49,15,.85); transform: scaleX(0); transform-origin: left;
}
.rail-tab.active.autoplay .rail-progress { animation: railProg 4.5s linear forwards; }
@keyframes railProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Content panel */
.participate-panel {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 40px 42px; backdrop-filter: blur(6px);
}
.participate-panel h3 {
  color: #fff; font-size: 1.35rem; margin-bottom: 1.5rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 12px;
}
.participate-panel h3 i { color: var(--accent); }
.participate-panel .ticks li { font-size: 1.06rem; color: rgba(255,255,255,.85); padding: 11px 0 11px 34px; }
.participate-panel .ticks li::before { color: var(--teal-2); }

@media (max-width: 767px) {
  .participate-shell { grid-template-columns: 1fr; gap: 18px; }
  .rail-text small { display: none; }
  .participate-panel { padding: 30px 26px; }
}

/* =====================================================================
   OUTCOMES — airplane / segmented-arc infographic
   ===================================================================== */
.arc-info { position: relative; max-width: 1160px; height: 730px; margin: 10px auto 0; }
.arc-info::after {                               /* soft glow behind the dial */
  content: ""; position: absolute; left: 50%; bottom: 80px; width: 640px; height: 360px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(18,128,138,.12), transparent 65%); z-index: 0; pointer-events: none;
}

/* small step-number chips sitting on each coloured segment */
.arc-step {
  position: absolute; left: 50%; bottom: 132px; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--navy); font-family: var(--font-head); font-weight: 800; font-size: .76rem;
  box-shadow: 0 3px 9px rgba(16,42,76,.28);
  transform: translate(-50%, 50%) rotate(var(--a)) translateY(-176px) rotate(calc(-1 * var(--a)));
}

/* radiating items, placed on a fan with the rotate/counter-rotate trick */
.arc-item {
  position: absolute; left: 50%; bottom: 132px; width: 204px; text-align: center; z-index: 3;
  transform: translate(-50%, 50%) rotate(var(--a)) translateY(-460px) rotate(calc(-1 * var(--a)));
}
.arc-ico {
  position: relative; width: 66px; height: 66px; margin: 0 auto 11px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; font-size: 1.55rem; border: 4px solid #fff;
  box-shadow: 0 12px 26px rgba(16,42,76,.22); transition: transform .3s ease;
}
.arc-item:hover .arc-ico { transform: scale(1.12) translateY(-3px); }
.arc-no {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; display: grid; place-items: center;
  background: #fff; color: var(--navy); border-radius: 50%; font-family: var(--font-head); font-weight: 800;
  font-size: .68rem; box-shadow: var(--shadow-sm);
}
.arc-item p { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--ink); font-weight: 500; }
.arc-item p strong { color: var(--navy); }

.arc-ico[data-c="c1"] { background: linear-gradient(135deg, #102a4c, #1c4a78); }
.arc-ico[data-c="c2"] { background: linear-gradient(135deg, #12808a, #16b8a6); }
.arc-ico[data-c="c3"] { background: linear-gradient(135deg, #3b5bdb, #5b73e8); }
.arc-ico[data-c="c4"] { background: linear-gradient(135deg, #1f9fd8, #1380c9); color: #fff; }
.arc-ico[data-c="c5"] { background: linear-gradient(135deg, #21a366, #2bbf78); }
.arc-ico[data-c="c6"] { background: linear-gradient(135deg, #0e9aa7, #16b8a6); }
.arc-ico[data-c="c7"] { background: linear-gradient(135deg, #1c4a78, #2a6aa8); }

/* central segmented arc gauge */
.arc-gauge { position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); width: 440px; height: 220px; overflow: hidden; z-index: 1; }
.arc-gauge::before {                             /* light outer track rim */
  content: ""; position: absolute; left: 50%; bottom: -232px; transform: translateX(-50%);
  width: 464px; height: 464px; border-radius: 50%; background: #e9eef5; z-index: 0;
}
.arc-seg {
  position: absolute; left: 50%; bottom: -220px; transform: translateX(-50%); width: 440px; height: 440px; border-radius: 50%;
  /* coloured wedges separated by thin white gaps for a clean, finished look */
  background: conic-gradient(from 270deg,
    #102a4c 0 24deg,            #fff 24deg 25.714deg,
    #12808a 25.714deg 49.714deg, #fff 49.714deg 51.428deg,
    #3b5bdb 51.428deg 75.428deg, #fff 75.428deg 77.142deg,
    #1f9fd8 77.142deg 101.142deg, #fff 101.142deg 102.857deg,
    #2bbf78 102.857deg 126.857deg, #fff 126.857deg 128.571deg,
    #16b8a6 128.571deg 152.571deg, #fff 152.571deg 154.285deg,
    #1c4a78 154.285deg 178.285deg, #fff 178.285deg 180deg,
    transparent 180deg 360deg);
  box-shadow: 0 18px 40px rgba(16,42,76,.2);
}
.arc-hole {
  position: absolute; left: 50%; bottom: -125px; transform: translateX(-50%); width: 250px; height: 250px; border-radius: 50%;
  background: #fff; z-index: 1; box-shadow: inset 0 8px 20px rgba(16,42,76,.08);
}
.arc-vehicle {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2;
  width: 106px; height: 106px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06310f; font-size: 2.9rem;
  box-shadow: 0 18px 38px rgba(52,191,74,.55); border: 6px solid #fff; animation: bob 2.4s ease-in-out infinite;
}
.arc-caption {
  position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--navy);
}

/* ---- Responsive: collapse the fan into a clean stacked list ---- */
@media (max-width: 991px) {
  .arc-info { height: auto; max-width: 620px; padding-top: 6px; }
  .arc-info::after, .arc-step { display: none; }
  .arc-gauge { position: static; transform: none; width: 240px; height: 120px; margin: 0 auto 40px; }
  .arc-gauge::before { bottom: -126px; width: 252px; height: 252px; }
  .arc-seg { width: 240px; height: 240px; bottom: -120px; }
  .arc-hole { width: 140px; height: 140px; bottom: -70px; }
  .arc-vehicle { width: 58px; height: 58px; font-size: 1.55rem; bottom: 6px; }
  .arc-item {
    position: static; transform: none; width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  .arc-ico { margin: 0; flex-shrink: 0; width: 52px; height: 52px; font-size: 1.25rem; }
  .arc-item p { font-size: .95rem; }
}

/* =====================================================================
   PAST PARTNERS — responsive logo grid
   ===================================================================== */
.section-past-partners {
  background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%);
}
.pp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.pp-card {
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: 14px;
  padding: 26px 22px;
  min-height: 130px;
  box-shadow: 0 6px 22px rgba(16, 42, 76, .05);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(20, 153, 214, .16);
  border-color: var(--accent);
}
.pp-card img {
  max-width: 100%;
  max-height: 72px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .78;
  transition: filter .35s ease, opacity .35s ease;
}
.pp-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 991.98px) {
  .pp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pp-card { min-height: 112px; padding: 20px 16px; }
  .pp-card img { max-height: 60px; }
}
@media (max-width: 575.98px) {
  .pp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pp-card { min-height: 96px; padding: 16px 12px; }
  .pp-card img { max-height: 52px; }
}

/* =====================================================================
   EXPLORE — horizontal road-trip (one fixed-coord SVG path, never breaks)
   ===================================================================== */
.section-explore {
  position: relative; overflow: hidden; background: #06182e;
  color: #fff;
}
.section-explore > .container { position: relative; z-index: 1; }

/* travel / road-trip themed backdrop */
.explore-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  transform-origin: center;
  animation: exploreZoom 26s ease-in-out infinite alternate;
}
.explore-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.12) contrast(1.06) brightness(.98);
}
@keyframes exploreZoom { from { transform: scale(1.03); } to { transform: scale(1.12); } }

/* brand gradient overlay — matched to the site theme, lighter mid so photos show */
.explore-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(820px 620px at 10% 6%, rgba(18,128,138,.42), transparent 58%),
    radial-gradient(840px 640px at 92% 96%, rgba(59,91,219,.40), transparent 58%),
    linear-gradient(to bottom, rgba(4,16,32,.92) 0%, rgba(6,22,42,.74) 22%, rgba(6,22,42,.72) 76%, rgba(4,16,32,.94) 100%),
    linear-gradient(150deg, rgba(6,20,40,.86) 0%, rgba(10,32,62,.8) 52%, rgba(12,38,74,.86) 100%);
}
.road-trip {
  position: relative; width: 1000px; height: 1320px; margin: 0 auto; counter-reset: stop;
}

/* ---- Top Places — destination card slider ---- */
.places-slider { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 4px; }
.ps-viewport { overflow: hidden; padding: 8px 4px 4px; }
.ps-track { display: flex; gap: 20px; transition: transform .55s cubic-bezier(.45,.05,.25,1); align-items: stretch; }
.ps-card {
  flex: 0 0 calc((100% - 60px) / 4); box-sizing: border-box;
  background: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 38px rgba(3,14,30,.42);
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ps-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(3,14,30,.55); }
.ps-card:hover .ps-img img { transform: scale(1.07); }
.ps-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.ps-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ps-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,14,28,.45), transparent 45%);
}
.ps-body { padding: 26px 18px 20px; flex: 1; text-align: left; }
.ps-pin {
  position: absolute; left: 16px; top: 14px; z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: #fff; font-size: 1.2rem;
  border: 4px solid #fff; box-shadow: 0 8px 18px rgba(16,42,76,.4);
}
.ps-pin i { transform: rotate(45deg); }
.ps-pin[data-c="c1"] { background: linear-gradient(135deg, #102a4c, #1c4a78); }
.ps-pin[data-c="c2"] { background: linear-gradient(135deg, #12808a, #16b8a6); }
.ps-pin[data-c="c3"] { background: linear-gradient(135deg, #3b5bdb, #5b73e8); }
.ps-pin[data-c="c4"] { background: linear-gradient(135deg, #1f9fd8, #1380c9); color: #fff; }
.ps-pin[data-c="c5"] { background: linear-gradient(135deg, #21a366, #2bbf78); }
.ps-pin[data-c="c6"] { background: linear-gradient(135deg, #0e9aa7, #16b8a6); }
.ps-card h6 { margin: 0 0 8px; color: var(--navy); font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.ps-meta {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: .72rem; color: var(--teal);
  background: rgba(18,128,138,.1); padding: 3px 10px; border-radius: 50px;
}
.ps-meta i { font-size: .7rem; }
.ps-card p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.55; }

.ps-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 1.2rem; color: #0a2240;
  background: rgba(255,255,255,.92); box-shadow: 0 8px 20px rgba(0,0,0,.35); transition: background .2s ease, transform .2s ease;
}
.ps-arrow:hover { background: #fff; }
.ps-prev { left: -10px; }
.ps-next { right: -10px; }
.ps-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.ps-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.4); transition: width .3s ease, background .3s ease;
}
.ps-dot.active { width: 26px; border-radius: 50px; background: var(--accent); }

@media (max-width: 1199px) { .ps-card { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 991px)  { .ps-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 575px)  {
  .ps-card { flex-basis: 100%; }
  .ps-prev { left: 2px; } .ps-next { right: 2px; }
}

/* the single continuous road — fixed 1000×1320 viewBox, same coords as the pins */
.rt-svg { position: absolute; inset: 0; width: 1000px; height: 1320px; z-index: 0;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); }
.rt-road-base { fill: none; stroke: #2c517d; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.rt-road-dash { fill: none; stroke: #1f9fd8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 13 20;
  animation: roadflow 1.4s linear infinite; }
@keyframes roadflow { to { stroke-dashoffset: -33; } }

/* start / end markers */
.rt-marker {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; width: max-content;
  padding: .6rem 1.5rem; border-radius: 50px; font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: #fff; box-shadow: var(--shadow);
}
.rt-start { top:-31px; background: linear-gradient(135deg, var(--navy), var(--teal)); }
.rt-end { top: 1330px; background: var(--grad-accent); color: #06310f; }
.rt-marker i { margin-right: 6px; }

/* each stop is a zero-size anchor at its pin coordinate */
.rt-stop { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 2; }

/* pin sits exactly on the road coordinate */
.rt-pin {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50% 50% 50% 0;
  color: #fff; font-size: 1.15rem; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(16,42,76,.3);
  transform: translate(-50%, -50%) rotate(-45deg); transition: transform .3s ease;
}
.rt-pin i { transform: rotate(45deg); }
.rt-stop:hover .rt-pin { transform: translate(-50%, -50%) rotate(-45deg) scale(1.14); }
.rt-pin[data-c="c1"] { background: linear-gradient(135deg, #102a4c, #1c4a78); }
.rt-pin[data-c="c2"] { background: linear-gradient(135deg, #12808a, #16b8a6); }
.rt-pin[data-c="c3"] { background: linear-gradient(135deg, #3b5bdb, #5b73e8); }
.rt-pin[data-c="c4"] { background: linear-gradient(135deg, #1f9fd8, #1380c9); color: #fff; }
.rt-pin[data-c="c5"] { background: linear-gradient(135deg, #21a366, #2bbf78); }
.rt-pin[data-c="c6"] { background: linear-gradient(135deg, #0e9aa7, #16b8a6); }

/* card floats above (.up) or below (.down) the pin */
.rt-card {
  position: absolute; left: 0; transform: translateX(-50%); width: 230px; z-index: 4; text-align: center;
  background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .65); border-radius: 18px; padding: 22px 16px 18px;
  box-shadow: 0 18px 38px rgba(3, 14, 30, .42); transition: transform .3s ease, box-shadow .3s ease;
}
.rt-stop.up .rt-card { bottom: 46px; }
.rt-stop.down .rt-card { top: 46px; }
.rt-stop:hover .rt-card {
  transform: translateX(-50%) translateY(-6px);
  box-shadow: 0 26px 52px rgba(3, 14, 30, .55);
}
.rt-card::before {                               /* journey step number */
  counter-increment: stop; content: counter(stop, decimal-leading-zero);
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); min-width: 32px; height: 27px; padding: 0 9px;
  display: grid; place-items: center; border-radius: 50px; background: var(--grad-accent); color: #06310f;
  font-family: var(--font-head); font-weight: 800; font-size: .74rem; box-shadow: 0 5px 12px rgba(52,191,74,.45);
}
.rt-card h6 { margin: 0 0 7px; color: var(--navy); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.rt-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-weight: 600; font-size: .72rem; color: var(--teal);
  background: rgba(18, 128, 138, .1); padding: 3px 10px; border-radius: 50px; margin-bottom: 8px;
}
.rt-meta i { font-size: .7rem; }
.rt-card p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* ---- Below 1040px: flatten to a clean stacked list ---- */
@media (max-width: 1039px) {
  .road-trip { width: auto; height: auto; max-width: 620px; display: flex; flex-direction: column; gap: 14px; }
  .rt-svg { display: none; }
  .rt-marker { position: static; transform: none; align-self: center; }
  .rt-start { margin-bottom: 6px; }
  .rt-end { margin-top: 6px; }
  .rt-stop { position: static; width: auto; height: auto; display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left; }
  .rt-pin { position: static; transform: rotate(-45deg); flex-shrink: 0; }
  .rt-card { position: static; transform: none; width: auto; flex: 1; text-align: left; }
  .rt-stop.up .rt-card, .rt-stop.down .rt-card { inset: auto; }
  .rt-stop:hover .rt-card { transform: translateY(-4px); }
}

/* =====================================================================
   EXPLORE MP TABLE
   ===================================================================== */
.table-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.explore-table thead th {
  background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: .85rem; letter-spacing: .03em; padding: 16px 18px; border: none; white-space: nowrap;
}
.explore-table tbody td { padding: 14px 18px; font-size: .92rem; color: var(--ink); border-color: var(--line); vertical-align: middle; }
.explore-table tbody tr:hover { background: var(--tint); }
.explore-table tbody td strong { color: var(--navy); }

/* =====================================================================
   PARTNERS — horizontal media rows
   ===================================================================== */
.partner-cards { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.partner-card {
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 240px; max-width: 290px;
  background: #fff; border-radius: 14px; padding: 30px 26px 28px;
  box-shadow: 0 16px 40px rgba(16, 42, 76, .10);
  transition: transform .32s ease, box-shadow .32s ease;
}
.partner-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(16, 42, 76, .18); }

/* folded colored corner ribbon (top-left) */
.pc-corner {
  position: absolute; top: 0; left: 0; width: 58px; height: 58px;
  background: var(--pc); border-top-left-radius: 14px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.pc-corner::after {                          /* subtle fold shadow */
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0;
  border-top: 20px solid rgba(0, 0, 0, .18); border-right: 20px solid transparent;
}
/* matching bottom-right accent notch */
.partner-card::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 40px; height: 40px;
  background: var(--pc); opacity: .18;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 14px;
}

.pc-ico {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%; margin: 8px 0 18px;
  border: 2px solid var(--pc); color: var(--pc); font-size: 1.6rem; background: #fff;
  box-shadow: 0 6px 16px rgba(16, 42, 76, .10); transition: transform .32s ease;
}
.partner-card:hover .pc-ico { transform: scale(1.08); }
.pc-label {
  display: block; font-family: var(--font-head); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pc);
  font-size: .92rem; margin-bottom: 10px;
}
.partner-card h4 { color: var(--navy); font-size: 1.05rem; line-height: 1.32; margin-bottom: .65rem; }
.partner-card p { color: var(--muted); font-size: .88rem; line-height: 1.62; margin: 0; }

@media (max-width: 991px) { .partner-card { min-width: 260px; max-width: 340px; flex-basis: 45%; } }
@media (max-width: 575px) { .partner-card { flex-basis: 100%; max-width: 420px; } }

/* =====================================================================
   CTA / CONTACT
   ===================================================================== */
.section-cta {
  background:
    radial-gradient(760px 440px at 90% 6%, rgba(52,191,74,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
  position: relative; overflow: hidden;
}
.section-cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(640px 380px at 6% 96%, rgba(18,128,138,.09), transparent 60%);
}
.section-cta .container { position: relative; z-index: 2; }
/* light-theme text overrides for this section */
.section-cta .text-white { color: var(--navy) !important; }
.section-cta .text-white-75 { color: var(--muted); }
.contact-blocks { display: flex; flex-wrap: wrap; gap: 18px; }
.contact-block {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; flex: 1 1 220px;
  box-shadow: 0 12px 28px -18px rgba(16,42,76,.30);
  transition: transform .28s ease, box-shadow .28s ease;
}
.contact-block:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(16,42,76,.4); }
.contact-block h6 { color: var(--teal); font-size: .85rem; margin-bottom: .5rem; font-weight: 700; }
.contact-block h6 i { margin-right: 6px; }
.contact-block p { color: var(--navy); margin: 0 0 .25rem; font-weight: 600; }
.contact-block a { color: var(--muted); font-size: .9rem; }
.contact-block a:hover { color: var(--accent); }

.register-card {
  position: relative; overflow: hidden; background: #fff; border-radius: var(--radius);
  padding: 36px; box-shadow: 0 30px 60px -28px rgba(16,42,76,.35); border: 1px solid var(--line);
}
.register-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--indigo), var(--accent));
}
.register-card h4 { color: var(--navy); margin-bottom: .3rem; font-weight: 700; }
.register-card .form-label {
  font-weight: 600; font-size: .72rem; color: var(--navy); margin-bottom: .4rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.register-card .form-control, .register-card .form-select {
  border-radius: 12px; border: 1.5px solid var(--line); padding: .78rem 1rem;
  background: #f7fafd; font-size: .92rem; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.register-card .form-control::placeholder { color: #9aa7b6; }
.register-card .form-control:hover, .register-card .form-select:hover { border-color: #c4d0dd; }
.register-card .form-control:focus, .register-card .form-select:focus {
  border-color: var(--teal); background: #fff;
  box-shadow: 0 0 0 .22rem rgba(18,128,138,.16);
}
.register-card .btn-accent {
  color: #fff; font-size: 1rem; padding: .85rem 1.5rem; letter-spacing: .015em; margin-top: .25rem;
}
.register-card .btn-accent i { transition: transform .25s ease; }
.register-card .btn-accent:hover { color: #fff; }
.register-card .btn-accent:hover i { transform: translateX(4px); }
.form-success { background: #e9f9ef; color: #1d7a43; border: 1px solid #b9ebcb; border-radius: 12px; padding: 14px 16px; font-weight: 500; font-size: .92rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { position: relative; background: #07182c; color: #fff; }
.footer-accent { display: block; height: 4px; background: var(--grad-accent); }

/* Newsletter band */
.footer-cta {
  background: linear-gradient(120deg, #0c2546 0%, #123a63 100%);
  padding: 38px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-cta h4 { color: #fff; font-size: 1.45rem; }
.footer-subscribe { display: flex; gap: 10px; }
.footer-subscribe .form-control {
  border-radius: 50px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  color: #fff; padding: .7rem 1.2rem;
}
.footer-subscribe .form-control::placeholder { color: rgba(255,255,255,.5); }
.footer-subscribe .form-control:focus { background: rgba(255,255,255,.12); box-shadow: none; border-color: var(--accent); color: #fff; }
.footer-subscribe .btn { white-space: nowrap; }

/* =====================================================================
   OUR PUBLICATIONS  (hanging magazine gallery)
   ===================================================================== */
.footer-pubs {
  position: relative; padding: 56px 0 50px;
  background:
    radial-gradient(900px 360px at 50% -10%, rgba(20,153,214,.16), transparent 70%),
    linear-gradient(120deg, #0c2546 0%, #0a1f3b 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pubs-head h3 {
  font-family: var(--font-head); font-weight: 800; color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 0 0 .4rem; letter-spacing: -.01em;
}
.pubs-head h3 span { color: var(--gold); }
.pubs-head p { color: rgba(255,255,255,.6); margin: 0 0 6px; font-size: 1rem; }

.pubs-stage { position: relative; margin-top: 30px; }
/* the clothesline the magazines hang from */
.pubs-string {
  position: absolute; top: 22px; left: 0; right: 0; height: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(217,155,95,.7) 12%, rgba(217,155,95,.7) 88%, transparent);
  box-shadow: 0 1px 8px rgba(217,155,95,.35);
}
.pubs-row {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px); padding-top: 30px;
}
.pub {
  position: relative; width: clamp(160px, 19vw, 212px); text-decoration: none;
  transform-origin: top center; animation: pubSway 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.25s); will-change: transform;
}
/* peg/clip */
.pub-clip {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 15px; height: 28px; border-radius: 4px;
  background: linear-gradient(180deg, #f0c489 0%, #d99b5f 55%, #b9803f 100%);
  box-shadow: 0 4px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
.pub-clip::after {                                   /* clip pin highlight */
  content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,.25);
}
/* cover */
.pub-cover {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 8px; border: 3px solid #fff;
  background: linear-gradient(160deg, #21385f, #0f2038);
  box-shadow: 0 24px 44px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.15);
}
.pub-cover img {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.pub:hover .pub-cover img { transform: scale(1.06); }
/* branded placeholder (shows until a real cover image is dropped in) */
.pub-ph {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; line-height: 1.25;
  color: rgba(255,255,255,.92); letter-spacing: .02em; padding: 10px;
  background: linear-gradient(160deg, rgba(20,153,214,.22), rgba(217,155,95,.16));
}
.pub-name {
  display: block; text-align: center; margin-top: 14px; color: rgba(255,255,255,.78);
  font-size: .85rem; font-weight: 600; transition: color .25s ease;
}
/* hover: stop the swing, straighten, lift */
.pub:hover { animation-play-state: paused; z-index: 5; }
.pub:hover .pub-cover {
  transform: translateY(-8px) scale(1.05) rotate(0deg);
  box-shadow: 0 30px 50px -12px rgba(0,0,0,.7); border-color: rgba(217,155,95,.55);
}
.pub-cover { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.pub:hover .pub-name { color: var(--gold); }
@keyframes pubSway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}
@media (prefers-reduced-motion: reduce) { .pub { animation: none; } }
@media (max-width: 575px) {
  .pubs-row { gap: 30px 22px; }
  .pub { width: clamp(120px, 38vw, 150px); }
}

/* =====================================================================
   LANGUAGE SWITCH  (Google Translate EN <-> HI) — left sticky
   ===================================================================== */
.lang-switch {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 1200;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 8px 6px; border-radius: 0 16px 16px 0;
  background: linear-gradient(160deg, rgba(12,37,70,.94), rgba(8,27,51,.94));
  border: 1px solid rgba(255,255,255,.14); border-left: none;
  box-shadow: 0 14px 36px rgba(8,20,40,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: langGlow 2.8s ease-in-out infinite;
}
.lang-switch .lang-globe {
  display: grid; place-items: center; color: var(--gold);
  font-size: 1rem; padding: 2px 0 4px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 2px;
}
.lang-btn {
  border: none; background: transparent; color: rgba(255,255,255,.85);
  font-family: var(--font-head); font-weight: 700; font-size: .82rem; line-height: 1;
  padding: 9px 12px; min-width: 46px; border-radius: 10px; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.lang-btn:hover { background: rgba(255,255,255,.12); transform: translateX(2px); }
.lang-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--teal)); color: #fff;
  box-shadow: 0 6px 16px rgba(20,153,214,.45);
}
@keyframes langGlow {
  0%, 100% { box-shadow: 0 14px 36px rgba(8,20,40,.5), 0 0 0 0 rgba(20,153,214,0); }
  50%      { box-shadow: 0 14px 36px rgba(8,20,40,.5), 0 0 0 5px rgba(20,153,214,.18); }
}
@media (prefers-reduced-motion: reduce) { .lang-switch { animation: none; } }
@media (max-width: 767px) {
  /* dock as a compact horizontal pill at bottom-left so it doesn't cover content */
  .lang-switch {
    top: auto; bottom: 16px; left: 12px; transform: none;
    flex-direction: row; align-items: center; gap: 4px;
    border-radius: 50px; padding: 5px 8px; border-left: 1px solid rgba(255,255,255,.14);
  }
  .lang-switch .lang-globe {
    border-bottom: none; border-right: 1px solid rgba(255,255,255,.14);
    padding: 0 7px 0 3px; margin: 0;
  }
  .lang-btn { min-width: 38px; padding: 7px 9px; font-size: .78rem; }
}
/* keep Google Translate's injected widget hidden + stop it pushing the page down */
#google_translate_element { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
body { top: 0 !important; }
.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Main footer */
.footer-main { padding: 60px 0 28px; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.footer-brand strong { font-family: var(--font-head); font-size: 1.05rem; }
.footer-brand small { color: rgba(255,255,255,.6); font-size: .78rem; }
.site-footer h6 { color: #fff; font-size: .95rem; margin-bottom: 1rem; font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .55rem; }
.site-footer ul li a { color: rgba(255,255,255,.6); font-size: .9rem; transition: .2s; }
.site-footer ul li a:hover { color: var(--accent); padding-left: 4px; }
.site-footer hr { border-color: rgba(255,255,255,.1); margin: 32px 0 20px; }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(255,255,255,.08); color: #fff; font-size: 1.05rem; transition: .25s;
}
.footer-social a:hover { background: var(--grad-accent); color: #06310f; transform: translateY(-3px); }

.footer-contact { }
.footer-contact li { display: flex; gap: 10px; color: rgba(255,255,255,.65); font-size: .9rem; margin-bottom: .7rem; }
.footer-contact i { color: var(--accent); margin-top: 2px; }
.footer-contact a { color: rgba(255,255,255,.65); }
.footer-contact a:hover { color: var(--accent); }

/* Partner badges row */
.footer-partners {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px;
}
.fp-item {
  --fp: var(--accent);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(420px 180px at 50% -60%, color-mix(in srgb, var(--fp) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 26px 22px 24px; text-align: center;
  box-shadow: 0 16px 36px -20px rgba(8,20,40,.75);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* uniform, smaller logo chips for Hosted by / Elets / eGov */
.fp-item p { margin: 0; }
.fp-item img {
  display: block; height: 52px; width: auto; max-width: 82%;
  margin: 0 auto 14px; object-fit: contain;
  background: #fff; border-radius: 10px; padding: 7px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
/* Organised by (Elets) logo — no white chip */
.footer-partners .fp-item:nth-child(3) img {
  background: transparent; padding: 0; box-shadow: none;
}
.fp-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--fp), transparent);
}
.fp-item:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--fp) 50%, transparent);
  box-shadow: 0 24px 46px -20px rgba(8,20,40,.9);
}
.fp-item small {
  display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--fp); font-weight: 700; margin-bottom: 10px;
}
.fp-item span { display: block; }
.fp-item span:nth-of-type(1) {
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: #fff;
  line-height: 1.35; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.fp-item span:nth-of-type(2) {
  font-size: .82rem; line-height: 1.62; color: rgba(255,255,255,.66); text-align: left;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.fp-item.is-open span:nth-of-type(2) { -webkit-line-clamp: unset; overflow: visible; }
.fp-readmore {
  align-self: flex-start; margin-top: 12px; padding: 0; background: none; border: 0;
  cursor: pointer; color: var(--fp); font-family: var(--font-head); font-weight: 700;
  font-size: .76rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px;
  transition: opacity .2s ease;
}
.fp-readmore:hover { opacity: .8; }
.fp-readmore i { font-size: .8rem; transition: transform .25s ease; }
.footer-partners .fp-item:nth-child(1) { --fp: #3d7fff; }
.footer-partners .fp-item:nth-child(2) { --fp: var(--teal); }
.footer-partners .fp-item:nth-child(3) { --fp: #1f9fd8; }
.footer-partners .fp-item:nth-child(4) { --fp: var(--green); }

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

@media (max-width: 767px) {
  .footer-partners { grid-template-columns: repeat(2, 1fr); }
  .footer-subscribe { flex-direction: column; }
  .footer-subscribe .btn { width: 100%; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
  .footer-partners { grid-template-columns: 1fr; }
}

/* =====================================================================
   BACK TO TOP
   ===================================================================== */
.back-to-top {
  position: fixed; bottom: 26px; right: 26px; width: 48px; height: 48px; border: none; border-radius: 50%;
  background: var(--grad-accent); color: #06310f; font-size: 1.2rem; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: .3s; z-index: 60; cursor: pointer;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* =====================================================================
   REVEAL ANIMATION
   ===================================================================== */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scroll-cue { animation: none; }
}

/* =====================================================================
   PRELOADER
   ===================================================================== */
#preloader {
  position: fixed; inset: 0; z-index: 9999; background: var(--grad-hero);
  display: grid; place-items: center; transition: opacity .6s ease, visibility .6s ease;
}
#preloader.hide { opacity: 0; visibility: hidden; }
.preloader-inner { text-align: center; color: #fff; }
.preloader-bus { font-size: 3rem; color: var(--accent); display: inline-block; animation: drive 1.1s infinite ease-in-out; }
.preloader-road {
  display: block; width: 180px; height: 4px; margin: 16px auto 14px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 34px);
  background-size: 34px 4px; animation: road .6s linear infinite;
}
.preloader-inner p { font-family: var(--font-head); font-weight: 600; font-size: .9rem; letter-spacing: .04em; opacity: .85; }
@keyframes drive { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
@keyframes road { to { background-position: -34px 0; } }

/* ---------- Scroll progress bar ---------- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0%; z-index: 2000;
  background: var(--grad-accent); transition: width .1s linear;
}

/* =====================================================================
   HERO FLOATING SHAPES
   ===================================================================== */
.hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-shapes .shape {
  position: absolute; color: rgba(255,255,255,.10); font-size: 3rem;
  animation: float 7s ease-in-out infinite;
}
.hero-shapes .s1 { top: 22%; left: 8%;  font-size: 4rem; animation-delay: 0s; }
.hero-shapes .s2 { top: 64%; left: 14%; font-size: 2.6rem; animation-delay: 1.2s; color: rgba(46,204,113,.16); }
.hero-shapes .s3 { top: 30%; right: 12%; font-size: 3.2rem; animation-delay: .6s; }
.hero-shapes .s4 { top: 72%; right: 22%; font-size: 2.4rem; animation-delay: 1.8s; color: rgba(52,191,74,.20); }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(6deg); } }
.route-line {
  position: absolute; left: 0; bottom: 16%; width: 100%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(52,191,74,.5) 0 22px, transparent 22px 44px);
  animation: road 1.2s linear infinite; opacity: .5;
}

/* =====================================================================
   COUNTDOWN
   ===================================================================== */
.countdown { display: flex; gap: 8px; margin-bottom: 18px; }
.cd-box {
  flex: 1; text-align: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 12px 4px;
}
.cd-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: #fff; line-height: 1; }
.cd-box small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }

/* =====================================================================
   EXPLORE — DESTINATION CARDS
   ===================================================================== */
.place-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  height: 100%; box-shadow: var(--shadow-sm); transition: .3s; display: flex; flex-direction: column;
}
.place-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.place-img {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, var(--g1, var(--navy)), var(--g2, var(--teal)));
  display: grid; place-items: center;
}
/* icon-only design — no external images needed */
.place-img img { display: none !important; }
.place-img::before {                                   /* decorative ring */
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.25); animation: spin 18s linear infinite;
}
.place-img::after {                                    /* soft glow */
  content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.14);
}
@keyframes spin { to { transform: rotate(360deg); } }
.place-fallback {
  position: relative; z-index: 1; font-size: 3.2rem; color: #fff;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); transition: transform .35s ease;
}
.place-card:hover .place-fallback { transform: scale(1.12) translateY(-2px); }
.place-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(10,35,66,.82);
  color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .03em;
  padding: .32rem .7rem; border-radius: 50px; backdrop-filter: blur(4px);
}
.place-cat i { color: var(--accent); margin-right: 4px; }
.place-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.place-body h5 { color: var(--navy); font-size: 1.12rem; margin-bottom: .6rem; }
.place-meta { display: flex; gap: 8px; margin-bottom: .7rem; flex-wrap: wrap; }
.place-meta span {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 600;
  font-size: .76rem; color: var(--teal); background: var(--tint); border: 1px solid var(--line);
  padding: .28rem .6rem; border-radius: 50px;
}
.place-meta span i { font-size: .8rem; }
.place-body p { color: var(--muted); font-size: .9rem; margin: 0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
  .section { padding: 72px 0; }
  .section-stats { margin-top: -40px; }
}
@media (max-width: 575px) {
  .hero { padding: 120px 0 70px; }
  .hero-cta .btn { width: 100%; }
  .participate-content { padding: 26px 22px; }
  .register-card { padding: 26px 22px; }
}

/* =====================================================================
   EXPECTED OUTCOMES — colored infographic banners
   ===================================================================== */
#outcomes .section-head { margin-bottom: 14px; }   /* tighten gap to the subtitle */
.oc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  padding-top: 38px;                       /* room for the floating icon badges */
}
.oc-col {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 64px) / 5);       /* 5 equal banners per row (4 gaps × 16px) */
  /* shadow follows the head+body silhouette; the icon stays unclipped */
  filter: drop-shadow(0 14px 24px rgba(16, 42, 76, .18));
  transition: transform .35s ease;
}
.oc-col:hover { transform: translateY(-8px); }

.oc-ico {
  position: absolute;
  top: -32px; left: 50%; transform: translateX(-50%);
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.6rem; color: var(--c);
  background: #fff;
  border: 4px solid var(--c);
  box-shadow: 0 8px 16px rgba(16, 42, 76, .20);
  z-index: 2;
}
.oc-head {
  background: var(--c);
  color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 46px 14px 16px;                 /* top space clears the overlapping icon */
  text-align: center;
  min-height: 132px;                       /* uniform header height across all banners */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.oc-no {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .14em;
  opacity: .9;
  margin-bottom: 5px;
}
.oc-head h5 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.22;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.oc-body {
  flex: 1;
  background: var(--c-soft);
  /* pointed banner-tail bottom — clipped on the body only */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px));
  padding: 18px 16px 42px;                 /* extra bottom padding clears the tail */
  text-align: center;
}
.oc-body p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: #2a3a4d;
}
.oc-body strong { color: var(--c); filter: brightness(.85); }

@media (max-width: 1199px) { .oc-col { flex-basis: calc((100% - 48px) / 4); } }
@media (max-width: 767px)  { .oc-col { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 459px)  { .oc-col { flex-basis: 100%; } }