/* ==========================================================================
   VIKAS MORCHA — Design System
   Palette: saffron (primary action), deep green (secondary/success),
   deep navy (text/headers), gold (premium accents, sparingly), warm white/grey (surfaces)
   Type: Poppins (display), Inter (body/UI), Manrope (data/utility, tabular figures)
   Grid: 8px spacing scale
   ========================================================================== */

:root{
  /* Color tokens */
  --saffron: #F4711C;
  --saffron-600: #DE5E0F;
  --saffron-100: #FFF1E6;
  --green: #146B3A;
  --green-600: #0F5A2F;
  --green-100: #E7F5EC;
  --navy: #0B1F3B;
  --navy-700: #16294A;
  --charcoal: #21262E;
  --gold: #C7962F;
  --gold-soft: #E9C878;
  --grey-50: #F7F8FA;
  --grey-100: #EEF1F4;
  --grey-300: #D6DBE1;
  --grey-500: #8A93A1;
  --white: #FFFFFF;

  /* Glass */
  --glass-bg: rgba(255,255,255,0.6);
  --glass-bg-strong: rgba(255,255,255,0.78);
  --glass-border: rgba(255,255,255,0.45);
  --glass-shadow: 0 8px 32px rgba(11,31,59,0.10), 0 1px 2px rgba(11,31,59,0.06);
  --glass-shadow-hover: 0 16px 48px rgba(11,31,59,0.16), 0 2px 4px rgba(11,31,59,0.08);
  --glass-blur: blur(18px);

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* Spacing (8px system) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-7: 64px; --s-8: 96px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --dur-slow: 400ms;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  color:var(--charcoal);
  background:var(--grey-50);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{
  font-family:'Poppins', 'Inter', sans-serif;
  color:var(--navy);
  letter-spacing:-0.02em;
}
.font-data{ font-family:'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
a{ text-decoration:none; color:inherit; }
:focus-visible{ outline:3px solid var(--saffron); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Layout helpers ---------- */
.container-xl{ max-width:1280px; margin:0 auto; padding:0 var(--s-3); }
.section{ padding:var(--s-8) 0; }
@media (max-width:768px){ .section{ padding:var(--s-6) 0; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--saffron-600);
  background:var(--saffron-100); padding:6px 14px; border-radius:999px;
}
.eyebrow.green{ color:var(--green-600); background:var(--green-100); }

/* ---------- Buttons ---------- */
.btn-vm{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:999px; border:none; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
  min-height:44px;
}
.btn-vm:active{ transform:scale(0.97); }
.btn-primary-vm{
  background:linear-gradient(135deg, var(--saffron) 0%, var(--saffron-600) 100%);
  color:#fff; box-shadow:0 6px 20px rgba(244,113,28,0.35);
}
.btn-primary-vm:hover{ box-shadow:0 10px 28px rgba(244,113,28,0.45); transform:translateY(-2px); color:#fff; }
.btn-outline-vm{
  background:transparent; color:var(--navy); border:1.5px solid var(--grey-300);
}
.btn-outline-vm:hover{ border-color:var(--navy); background:var(--grey-100); color:var(--navy); }
.btn-ghost-vm{ background:rgba(255,255,255,0.5); color:var(--navy); backdrop-filter:blur(8px); border:1px solid var(--glass-border); }
.btn-ghost-vm:hover{ background:rgba(255,255,255,0.75); color:var(--navy); }
.btn-sm-vm{ padding:9px 18px; font-size:13.5px; min-height:36px; }

/* ---------- Glass surfaces ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow);
}
.glass-strong{ background:var(--glass-bg-strong); }
.glass-card{
  padding:var(--s-3);
  transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.glass-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--glass-shadow-hover);
  border-color:rgba(244,113,28,0.35);
}
.glass-dark{
  background:rgba(11,31,59,0.55);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(18px);
  color:#fff;
}

/* ---------- Navbar ---------- */
.vm-navbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(11,31,59,0.06);
  transition:box-shadow var(--dur-med) var(--ease);
}
.vm-navbar.scrolled{ box-shadow:0 4px 20px rgba(11,31,59,0.08); }
.vm-brand{ display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; color:var(--navy); }
.vm-brand .mark{
  width:36px; height:36px; border-radius:10px;
  background:conic-gradient(from 220deg, var(--saffron), var(--gold-soft), var(--green));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px;
}
.vm-nav-link{
  font-weight:500; font-size:14.5px; color:var(--charcoal); padding:8px 14px; border-radius:8px;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.vm-nav-link:hover{ background:var(--grey-100); color:var(--saffron-600); }
.vm-nav-link.active{ color:var(--saffron-600); font-weight:600; }

/* Transparent navbar variant — used on pages with a full-height hero (home) */
.vm-navbar.transparent{
  position:fixed; top:0; left:0; right:0; background:transparent;
  border-bottom:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.vm-navbar.transparent .vm-brand,
.vm-navbar.transparent .vm-nav-link{ color:#fff; }
.vm-navbar.transparent .vm-brand .mark{ box-shadow:0 0 0 1px rgba(255,255,255,0.35); }
.vm-navbar.transparent .vm-nav-link:hover{ background:rgba(255,255,255,0.12); color:#fff; }
.vm-navbar.transparent .vm-nav-link.active{ color:var(--gold-soft); }
.vm-navbar.transparent .btn-outline-vm{ border-color:rgba(255,255,255,0.4); color:#fff; }
.vm-navbar.transparent.scrolled{
  background:rgba(255,255,255,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(11,31,59,0.06);
}
.vm-navbar.transparent.scrolled .vm-brand{ color:var(--navy); }
.vm-navbar.transparent.scrolled .vm-nav-link{ color:var(--charcoal); }
.vm-navbar.transparent.scrolled .vm-nav-link:hover{ background:var(--grey-100); color:var(--saffron-600); }
.vm-navbar.transparent.scrolled .vm-nav-link.active{ color:var(--saffron-600); }
.vm-navbar.transparent.scrolled .btn-outline-vm{ border-color:var(--grey-300); color:var(--navy); }
section[id]{ scroll-margin-top:88px; }

/* Mobile nav toggle + slide panel (public multi-page navbar) */
.mobile-nav-toggle{
  display:none; background:none; border:none; font-size:24px; color:inherit; line-height:1;
}
.mobile-nav-panel{
  display:none; position:fixed; top:0; right:-300px; width:280px; height:100vh; z-index:1100;
  background:var(--navy); padding:24px 20px; flex-direction:column; gap:4px;
  transition:right .25s ease; box-shadow:-12px 0 32px rgba(11,31,59,0.25);
}
.mobile-nav-panel.open{ right:0; }
.mobile-nav-panel a{ color:rgba(255,255,255,0.82); padding:12px 10px; border-radius:8px; font-weight:500; }
.mobile-nav-panel a:hover, .mobile-nav-panel a.active{ background:rgba(255,255,255,0.08); color:#fff; }
@media (max-width:991px){
  .mobile-nav-toggle{ display:block; }
  .mobile-nav-panel{ display:flex; }
}

/* ---------- Hero video/image carousel ---------- */
.hero-carousel, .hero-carousel .carousel-item{ position:absolute; inset:0; z-index:0; }
.hero-carousel .carousel-item img, .hero-carousel .carousel-item video{
  width:100%; height:100%; object-fit:cover; filter:brightness(0.55) saturate(1.05);
}
.hero-carousel .carousel-indicators{ z-index:3; bottom:78px; }
.hero-carousel .carousel-indicators [data-bs-target]{ background:rgba(255,255,255,0.55); width:8px; height:8px; border-radius:50%; }
.hero-carousel .carousel-indicators .active{ background:var(--gold-soft); }

/* ---------- Sub-page hero (non-transparent pages) ---------- */
.page-hero{
  position:relative; padding:120px 0 60px; color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, #0B1F3B 0%, #0E2547 55%, #0B1F3B 100%);
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(60% 60% at 85% 20%, rgba(244,113,28,0.30), transparent 60%),
             radial-gradient(50% 50% at 10% 90%, rgba(20,107,58,0.35), transparent 60%);
}
.page-hero > *{ position:relative; z-index:1; }

/* ---------- Gallery ---------- */
.gallery-item{ border-radius:var(--r-md); overflow:hidden; cursor:pointer; position:relative; aspect-ratio:4/3; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .gallery-caption{
  position:absolute; inset:auto 0 0 0; padding:14px; color:#fff; font-size:13.5px; font-weight:600;
  background:linear-gradient(0deg, rgba(11,31,59,0.85), transparent);
}

/* ---------- News / posts cards ---------- */
.news-card{ display:flex; flex-direction:column; height:100%; }
.news-card .news-thumb{ border-radius:var(--r-md) var(--r-md) 0 0; aspect-ratio:16/10; object-fit:cover; width:100%; }
.news-card .news-body{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.news-card .news-date{ font-size:12.5px; color:var(--grey-500); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }

/* ---------- Social slider ---------- */
.social-slide{ max-width:340px; margin:0 auto; }
.social-follow-card{ min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

/* ---------- Hero ---------- */
.hero-vm{
  position:relative; min-height:92vh; display:flex; align-items:center;
  overflow:hidden; background:var(--navy);
  isolation:isolate;
}
.hero-vm::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(244,113,28,0.35), transparent 60%),
    radial-gradient(55% 45% at 85% 75%, rgba(20,107,58,0.40), transparent 60%),
    linear-gradient(160deg, #0B1F3B 0%, #0E2547 55%, #0B1F3B 100%);
}
.hero-arc{
  position:absolute; z-index:0; inset:auto -10% -30% -10%;
  height:90%;
  background:linear-gradient(90deg, var(--saffron) 0%, var(--gold-soft) 50%, var(--green) 100%);
  filter:blur(90px); opacity:0.35;
  border-radius:50%;
  animation:arcDrift 14s var(--ease) infinite alternate;
}
@keyframes arcDrift{ from{ transform:translateY(0) scale(1);} to{ transform:translateY(-24px) scale(1.05);} }
.hero-content{ position:relative; z-index:2; color:#fff; }
.hero-kicker{
  font-family:'Manrope',sans-serif; letter-spacing:0.14em; text-transform:uppercase;
  font-size:13px; font-weight:700; color:var(--gold-soft);
}
.hero-title{
  font-size:clamp(38px, 5.4vw, 68px); line-height:1.06; color:#fff; font-weight:700; margin:14px 0 18px;
}
.hero-title .accent{
  background:linear-gradient(90deg, var(--saffron) 0%, var(--gold-soft) 55%, #7FE0A8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:18px; color:rgba(255,255,255,0.78); max-width:560px; line-height:1.6; }
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,0.6); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-soft); animation:scrollBounce 1.8s ease-in-out infinite; }
@keyframes scrollBounce{ 0%,100%{ transform:translateY(0); opacity:1;} 50%{ transform:translateY(10px); opacity:0.4;} }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:80ms; }
.reveal-delay-2{ transition-delay:160ms; }
.reveal-delay-3{ transition-delay:240ms; }
.reveal-delay-4{ transition-delay:320ms; }

/* ---------- Stat counters ---------- */
.stat-num{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(30px,4vw,44px); color:var(--navy); }
.stat-label{ font-size:13.5px; color:var(--grey-500); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;}

/* ---------- Icon tiles ---------- */
.icon-tile{
  width:52px; height:52px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff;
  background:linear-gradient(135deg, var(--saffron), var(--saffron-600));
  box-shadow:0 8px 20px rgba(244,113,28,0.30);
}
.icon-tile.green{ background:linear-gradient(135deg, var(--green), var(--green-600)); box-shadow:0 8px 20px rgba(20,107,58,0.30); }
.icon-tile.navy{ background:linear-gradient(135deg, var(--navy-700), var(--navy)); box-shadow:0 8px 20px rgba(11,31,59,0.30); }
.icon-tile.gold{ background:linear-gradient(135deg, var(--gold-soft), var(--gold)); box-shadow:0 8px 20px rgba(199,150,47,0.30); }

/* ---------- Timeline ---------- */
.vm-timeline{ position:relative; padding-left:28px; }
.vm-timeline::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--saffron), var(--green)); border-radius:2px; }
.vm-timeline-item{ position:relative; padding-bottom:var(--s-4); }
.vm-timeline-item:last-child{ padding-bottom:0; }
.vm-timeline-item::before{
  content:''; position:absolute; left:-28px; top:4px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--saffron); box-shadow:0 0 0 4px var(--saffron-100);
}
.vm-timeline-item.done::before{ border-color:var(--green); box-shadow:0 0 0 4px var(--green-100); }

/* ---------- Badges ---------- */
.badge-vm{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; }
.badge-open{ background:var(--saffron-100); color:var(--saffron-600); }
.badge-progress{ background:#FFF6DC; color:#9A7300; }
.badge-resolved{ background:var(--green-100); color:var(--green-600); }
.badge-navy{ background:rgba(11,31,59,0.08); color:var(--navy); }

/* ---------- Form controls ---------- */
.field-vm{ position:relative; margin-bottom:22px; }
.field-vm input, .field-vm select, .field-vm textarea{
  width:100%; padding:18px 16px 8px; border-radius:var(--r-sm); border:1.5px solid var(--grey-300);
  background:#fff; font-family:'Inter',sans-serif; font-size:15px; color:var(--charcoal);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field-vm textarea{ min-height:110px; padding-top:20px; resize:vertical; }
.field-vm input:focus, .field-vm select:focus, .field-vm textarea:focus{
  outline:none; border-color:var(--saffron); box-shadow:0 0 0 4px var(--saffron-100);
}
.field-vm label{
  position:absolute; left:16px; top:16px; font-size:15px; color:var(--grey-500);
  pointer-events:none; transition:all var(--dur-fast) var(--ease); background:transparent;
}
.field-vm input:focus + label, .field-vm input:not(:placeholder-shown) + label,
.field-vm select:focus + label, .field-vm select.has-value + label,
.field-vm textarea:focus + label, .field-vm textarea:not(:placeholder-shown) + label{
  top:7px; font-size:11.5px; font-weight:600; color:var(--saffron-600);
}

/* ---------- Skeleton loader ---------- */
.skel{ background:linear-gradient(90deg, var(--grey-100) 25%, var(--grey-300) 37%, var(--grey-100) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:8px; }
@keyframes skel{ 0%{ background-position:100% 50%;} 100%{ background-position:0 50%;} }

/* ---------- Progress ---------- */
.progress-vm{ height:8px; border-radius:99px; background:var(--grey-100); overflow:hidden; }
.progress-vm .bar{ height:100%; border-radius:99px; background:linear-gradient(90deg, var(--saffron), var(--gold-soft)); transition:width 0.6s var(--ease); }

/* ---------- Table ---------- */
.table-vm{ width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; }
.table-vm thead th{
  position:sticky; top:0; z-index:2; background:var(--grey-50); color:var(--grey-500);
  font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:0.05em;
  padding:12px 16px; border-bottom:1.5px solid var(--grey-300); text-align:left;
}
.table-vm tbody td{ padding:14px 16px; border-bottom:1px solid var(--grey-100); color:var(--charcoal); vertical-align:middle; }
.table-vm tbody tr{ transition:background var(--dur-fast) var(--ease); }
.table-vm tbody tr:hover{ background:var(--grey-50); }

/* ---------- Toast ---------- */
.toast-vm{
  position:fixed; bottom:24px; right:24px; z-index:2000;
  background:var(--navy); color:#fff; padding:14px 20px; border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(11,31,59,0.35); display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:500;
  transform:translateY(20px); opacity:0; transition:all var(--dur-med) var(--ease);
  pointer-events:none;
}
.toast-vm.show{ transform:translateY(0); opacity:1; }
.toast-vm .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); }

/* ---------- Sidebar (dashboard) ---------- */
.vm-sidebar{
  width:264px; min-height:100vh; background:var(--navy); color:#fff; position:sticky; top:0;
  display:flex; flex-direction:column; padding:var(--s-3) var(--s-2);
}
.vm-side-link{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-sm);
  color:rgba(255,255,255,0.7); font-size:14.5px; font-weight:500; margin-bottom:2px;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.vm-side-link i{ font-size:17px; width:20px; text-align:center; }
.vm-side-link:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.vm-side-link.active{ background:linear-gradient(135deg, var(--saffron), var(--saffron-600)); color:#fff; box-shadow:0 6px 16px rgba(244,113,28,0.35); }

/* Mobile sidebar backdrop: click outside the open drawer to close it */
.vm-sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(11,31,59,0.45);
  z-index:1040; opacity:0; transition:opacity .2s ease;
}
.vm-sidebar-backdrop.show{ display:block; opacity:1; }
@media (min-width:992px){ .vm-sidebar-backdrop{ display:none !important; } }

/* ---------- Misc ---------- */
.section-title{ font-size:clamp(26px,3.2vw,38px); font-weight:700; }
.text-muted-vm{ color:var(--grey-500); }
.divider-vm{ height:1px; background:var(--grey-100); }
.avatar-vm{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--saffron),var(--green)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--saffron); display:inline-block; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--grey-50); }
::-webkit-scrollbar-thumb{ background:var(--grey-300); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--grey-500); }