/* ==========================================================================
   Skill Bridge India Technologies - Custom Design System & CSS Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  color-scheme: light;

  /* ==========================================================================
     60 / 30 / 10 Colour System
     ---------------------------------------------------------------------------
     60%  Canvas   — white and two near-white surfaces. The page is mostly this.
     30%  Brand    — deep corporate navy. Structure only: header, footer, page
                     hero, and at most one mid-page band per page.
     10%  Accent   — saffron. Every call to action, link, focus ring, active
                     state and highlight. Nothing else competes for attention.
     <1%  Contextual — success / danger / warning / info. Status only, never
                     decoration. Cyan lives here now; it is no longer a brand
                     colour and must not be used for interactive chrome.

     Rules for anything added later:
       - Reach for a role token (--surface, --brand, --accent), never a raw hex.
       - A new colour needs a role. If it has no role it does not belong.
       - Ink on a light surface is --text-body; on a dark one --text-on-brand.
     ========================================================================== */

  /* --- 60% Canvas ---------------------------------------------------------- */
  --surface: #FFFFFF;
  --surface-sunken: #F8FAFC;
  --surface-alt: #F1F5F9;
  --surface-raised: #FFFFFF;

  /* --- 30% Brand structure ------------------------------------------------- */
  --brand: #0D2568;
  --brand-deep: #071638;
  --brand-mid: #153280;
  --brand-tint: #EFF6FF;
  --brand-glow: rgba(13, 37, 104, 0.12);
  --brand-border: rgba(13, 37, 104, 0.18);
  --brand-gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);

  /* --- 10% Accent (saffron) ------------------------------------------------
     --accent is the brand saffron and is used for fills, borders and large
     type. --accent-ink is the same hue darkened until it clears 4.5:1 on white
     — use it for any accent-coloured text or icon under ~24px, because raw
     #FF6B00 on white is only 2.9:1 and fails AA. */
  --accent: #FF6B00;
  --accent-strong: #E05300;
  --accent-ink: #B84600;
  --accent-glow: rgba(255, 107, 0, 0.25);

  /* The only saffron allowed to sit behind white text. #FF6B00 with white is
     2.86:1 and fails AA outright; this is the same hue taken down until it
     clears 4.5:1 (it measures 5.5:1). Filled buttons use it; nothing else does. */
  --accent-cta: #B84600;
  --accent-cta-hover: #9C3B00;

  /* Pills and eyebrows are tinted brand navy, never saffron. Both sit far under
     the 30% ceiling on the parent navy: 8% fill, 20% border. */
  --brand-tint-soft: rgba(13, 37, 104, 0.08);
  --brand-tint-border: rgba(13, 37, 104, 0.20);

  /* Retired: saffron is no longer permitted as a surface. Aliased to the navy
     tint so any rule or inline style still naming it lands on the new system. */
  --accent-tint: var(--brand-tint-soft);

  /* --- <1% Contextual ------------------------------------------------------ */
  --success: #10B981;
  --success-tint: rgba(16, 185, 129, 0.08);
  --danger: #DC2626;
  --danger-tint: rgba(220, 38, 38, 0.08);
  --warning: #F59E0B;
  --warning-tint: rgba(245, 158, 11, 0.10);
  --info: #0EA5E9;
  --info-ink: #0284C7;
  --info-tint: #E0F2FE;

  /* --- Ink ----------------------------------------------------------------- */
  --text-heading: #0D2568;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-on-brand: rgba(255, 255, 255, 0.85);
  --text-on-brand-strong: #FFFFFF;
  --border-color: #E2E8F0;
  --surface-translucent: rgba(255, 255, 255, 0.96);

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 25px -5px rgba(13, 37, 104, 0.08);
  --shadow-lg: 0 20px 40px -10px rgba(13, 37, 104, 0.14);
  --shadow-glow: 0 0 30px var(--accent-glow);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     Compatibility aliases
     Older names still referenced by inline styles in the Blade templates and by
     rules further down this file. They resolve to the role tokens above so the
     palette has exactly one source of truth. Do not use these in new code.
     ========================================================================== */
  /* Panels and cards, not the page. Identical to --surface in the light theme;
     in the dark theme it lifts to --surface-raised so cards stay visible
     against the canvas instead of merging into it. */
  --bg-pure-white: var(--surface-raised);
  --bg-surface: var(--surface-sunken);
  --bg-surface-alt: var(--surface-alt);
  --navy: var(--brand);
  --navy-primary: var(--brand);
  --navy-dark: var(--brand-deep);
  --navy-mid: var(--brand-mid);
  --navy-light: var(--brand-tint);
  --navy-glow: var(--brand-glow);
  --navy-border: var(--brand-border);
  --navy-bg-alt: var(--brand-deep);
  --primary-gradient: var(--brand-gradient);
  --accent-coral: var(--accent);
  --accent-coral-dark: var(--accent-strong);
  --accent-coral-light: var(--accent-tint);
  --accent-coral-glow: var(--accent-glow);
  --accent-orange: var(--accent);
  --orange-primary: var(--accent);
  --orange-bg: var(--accent-tint);
  --accent-green: var(--success);
  --emerald-primary: var(--success);
  --emerald-bg: var(--success-tint);
  --slate-dark: var(--text-heading);
  --slate-body: var(--text-body);
  --slate-muted: var(--text-muted);
  --slate-light: var(--surface-alt);
  --text-body-invert: var(--text-on-brand);
  /* Cyan was demoted from brand accent to the contextual 'info' role, but a
     handful of inline styles in the Blade templates still name it. They map to
     the saffron accent so those elements follow the new system rather than
     silently losing their colour. --accent-cyan-rgb keeps real cyan because it
     is consumed as rgba(var(--accent-cyan-rgb), a) for an info tint. */
  --accent-cyan: var(--accent);
  --accent-cyan-dark: var(--accent-ink);
  --accent-cyan-light: var(--accent-tint);
  --accent-cyan-glow: var(--accent-glow);
  --accent-cyan-rgb: 255, 107, 0;
}

/* ==========================================================================
   Dark theme
   Same 60/30/10 split, inverted. The 60% canvas becomes a near-black navy so
   the brand hue still reads as the ground; the 30% brand band lifts to a
   lighter navy so it stays distinguishable from the canvas rather than
   vanishing into it; saffron lightens just enough to clear 4.5:1 on the dark
   canvas. Roles do not move — only their values.

   Defined once here and applied by two selectors below: the OS preference, and
   an explicit data-theme on <html> which always wins.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface: #0B1220;
    --surface-sunken: #070D18;
    --surface-alt: #131C2E;
    --surface-raised: #162034;

    --brand: #1B3A8A;
    --brand-deep: #0A1631;
    --brand-mid: #2A4FA8;
    --brand-tint: #162034;
    --brand-glow: rgba(76, 125, 240, 0.20);
    --brand-border: rgba(148, 178, 255, 0.22);

    --accent: #FF8A33;
    --accent-strong: #FF6B00;
    --accent-ink: #FFA05C;
    --accent-glow: rgba(255, 138, 51, 0.30);
    --accent-cta: #C2531A;
    --accent-cta-hover: #A84512;
    --brand-tint-soft: rgba(148, 178, 255, 0.10);
    --brand-tint-border: rgba(148, 178, 255, 0.24);
    --accent-tint: var(--brand-tint-soft);

    --success: #34D399;
    --success-tint: rgba(52, 211, 153, 0.12);
    --danger: #F87171;
    --danger-tint: rgba(248, 113, 113, 0.12);
    --warning: #FBBF24;
    --warning-tint: rgba(251, 191, 36, 0.12);
    --info: #38BDF8;
    --info-ink: #7DD3FC;
    --info-tint: rgba(56, 189, 248, 0.12);

    --text-heading: #F1F5F9;
    --text-body: #CBD5E1;
    --text-muted: #94A3B8;
    --text-on-brand: rgba(255, 255, 255, 0.87);
    --text-on-brand-strong: #FFFFFF;
    --border-color: #24304A;
    --surface-translucent: rgba(11, 18, 32, 0.96);

    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.60);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #0B1220;
  --surface-sunken: #070D18;
  --surface-alt: #131C2E;
  --surface-raised: #162034;

  --brand: #1B3A8A;
  --brand-deep: #0A1631;
  --brand-mid: #2A4FA8;
  --brand-tint: #162034;
  --brand-glow: rgba(76, 125, 240, 0.20);
  --brand-border: rgba(148, 178, 255, 0.22);

  --accent: #FF8A33;
  --accent-strong: #FF6B00;
  --accent-ink: #FFA05C;
  --accent-glow: rgba(255, 138, 51, 0.30);
  --accent-cta: #C2531A;
  --accent-cta-hover: #A84512;
  --brand-tint-soft: rgba(148, 178, 255, 0.10);
  --brand-tint-border: rgba(148, 178, 255, 0.24);
  --accent-tint: var(--brand-tint-soft);

  --success: #34D399;
  --success-tint: rgba(52, 211, 153, 0.12);
  --danger: #F87171;
  --danger-tint: rgba(248, 113, 113, 0.12);
  --warning: #FBBF24;
  --warning-tint: rgba(251, 191, 36, 0.12);
  --info: #38BDF8;
  --info-ink: #7DD3FC;
  --info-tint: rgba(56, 189, 248, 0.12);

  --text-heading: #F1F5F9;
  --text-body: #CBD5E1;
  --text-muted: #94A3B8;
  --text-on-brand: rgba(255, 255, 255, 0.87);
  --text-on-brand-strong: #FFFFFF;
  --border-color: #24304A;
  --surface-translucent: rgba(11, 18, 32, 0.96);

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.60);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--slate-light);
}
::-webkit-scrollbar-thumb {
  background: var(--navy-primary);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--orange-primary);
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Canvas, not navy. This used to be --brand-deep to colour the gap under a
     short page, but body is already min-vh-100 with the footer pushed down by
     margin-top:auto, so no gap exists — the navy was simply showing through
     everywhere body did not paint, and it was the single largest navy area on
     the site. */
  background-color: var(--surface);
}

/* ==========================================================================
   Horizontal scroll lock
   The page must never scroll sideways at any width. `clip` is used rather
   than `hidden` because it does NOT create a scroll container, so the sticky
   navbar keeps working; `hidden` on html/body is what usually breaks it.
   This also contains the decorative offset shapes in the About section and
   the mobile drawer parked off-screen to the right.
   ========================================================================== */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Safari < 16 / Firefox < 81 have no overflow:clip. Fall back to hidden on the
   root element only — as the viewport scroller it keeps sticky intact. */
@supports not (overflow-x: clip) {
  html {
    overflow-x: hidden;
  }
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-body);
  background-color: var(--surface);
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

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

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility Containers */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-padding {
  padding: 5rem 0;
}

.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 3.5rem auto;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  background: var(--brand-tint-soft);
  color: var(--text-heading);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.badge-tag i {
  color: var(--accent-ink);
}

.badge-tag.coral-tag {
  background: var(--brand-tint-soft);
  color: var(--text-heading);
  border-color: var(--brand-tint-border);
}

.badge-tag.coral-tag i {
  color: var(--accent-ink);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.section-title span.highlight {
  color: var(--accent-strong);
  position: relative;
}

.section-title span.text-cyan {
  color: var(--accent-ink);
}

.section-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-body);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  border: none;
  outline: none;
}

.btn-primary {
  background: var(--accent-cta);
  color: #FFFFFF;
  box-shadow: 0 8px 20px var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(255, 107, 0, 0.4);
}

.btn-secondary {
  background: var(--navy-primary);
  color: var(--text-on-brand-strong);
  box-shadow: 0 8px 20px var(--navy-glow);
}

.btn-secondary:hover {
  background: var(--navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(13, 37, 104, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--text-heading);
  border: 2px solid var(--navy-primary);
}

.btn-outline:hover {
  background: var(--navy-primary);
  color: var(--text-on-brand-strong);
}

.btn-cyan {
  background: var(--accent-cta);
  color: #FFFFFF;
  box-shadow: 0 8px 20px var(--accent-glow);
}

.btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(14, 165, 233, 0.4);
}
.top-bar {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-info {
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

.top-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-info-item i {
  color: var(--accent-ink);
}

.top-links {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.top-links a {
  transition: var(--transition-fast);
}

.top-links a:hover {
  color: var(--accent-coral);
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  padding: 0; /* override Bootstrap's .navbar vertical padding */
  z-index: 1000;
  /* Token-driven so the sticky bar inverts with the theme; it was a literal
     white rgba, which left a white strip across every page in dark mode.
     A plain per-theme token rather than color-mix() — Chromium does not
     re-resolve color-mix when data-theme flips, so the bar kept its old colour
     until the next reload. */
  background: var(--surface-translucent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 1rem;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 0 0 auto;
  min-width: 0;
}

/* Logo scales with the bar instead of being blown up by a transform, so it
   stays fully visible from 320px phones up to wide desktops. */
.logo-img {
  height: clamp(38px, 6vw, 52px);
  width: auto;
  max-width: min(46vw, 220px);
  object-fit: contain;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.95rem;
  transition: var(--transition-fast);
  position: relative;
  padding: 0.5rem 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-ink);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--accent-coral);
  border-radius: 2px;
  transition: var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.search-box {
  position: relative;
}

.search-input {
  padding: 0.6rem 1rem 0.6rem 2.4rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  font-size: 0.85rem;
  width: 180px;
  transition: var(--transition-fast);
}

.search-input:focus {
  width: 240px;
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-muted);
  font-size: 0.85rem;
}

/* Navbar CTA: tighter corners, soft shadow instead of a hard coloured slab */
.nav-actions .btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
}

.nav-actions .btn-primary {
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.18);
}

.nav-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.24);
}

.mobile-toggle {
  display: none;
  font-size: 1.4rem;
  color: var(--text-heading);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Backdrop behind the mobile drawer */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 37, 104, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* Must stay BELOW .navbar's 1000. The drawer lives inside .navbar, which is
     sticky with a z-index and therefore opens its own stacking context, so the
     drawer's own z-index:1050 only ranks it against its navbar siblings. In the
     root context the browser compares this overlay against .navbar itself, and
     anything above 1000 here paints over the drawer and swallows every tap on
     it. Raise .navbar instead if this overlay ever needs to go higher. */
  z-index: 999;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   Hero Section (60% White/Light Canvas Dominant)
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--bg-pure-white) 0%, var(--bg-surface) 60%, var(--bg-surface-alt) 100%);
  color: var(--text-heading);
  padding: 5.5rem 0 7rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}

.hero-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 70% 30%, rgba(14, 165, 233, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(255, 107, 0, 0.06) 0%, transparent 60%),
    radial-gradient(var(--border-color) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 28px 28px;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Grid items default to min-width:auto, so a track refuses to shrink below the
   widest child's min-content width. On the contact page that inflated the
   single mobile column to 376px inside a 343px grid and clipped 17px off the
   form, the headings and the counseling card. Let the track win instead. */
.hero-grid > * {
  min-width: 0;
}

.hero-content h1 {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 1.5rem;
  letter-spacing: -0.5px;
  color: var(--text-heading);
}

/* Line 1 navy, line 2 a single saffron tone. */
.hero-content h1 span.hero-title-lead {
  color: var(--text-heading);
}

.hero-content h1 span.hero-title-accent,
.hero-content h1 span.text-orange,
.hero-content h1 span.text-emerald {
  color: var(--accent-strong);
}

.hero-description {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 2rem;
  max-width: 600px;
}

/* Pills stay on one row no matter how many the CMS supplies: they shrink
   with the column rather than wrapping. */
.hero-features {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.4rem, 0.9vw, 0.9rem);
  margin-bottom: 2.5rem;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(0.72rem, 0.95vw, 0.95rem);
  font-weight: 600;
  background: var(--bg-pure-white);
  color: var(--text-heading);
  padding: 0.45rem clamp(0.6rem, 1vw, 1.1rem);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

.hero-feature-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-feature-item i {
  flex: none;
}

.hero-feature-item i {
  color: var(--accent-ink);
}

.hero-cta {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* Single hero CTA: navy outline, keeps saffron off the primary action. */
.btn-hero {
  border-width: 2px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.btn-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--navy-glow);
}

.hero-visual {
  position: relative;
}

.hero-image-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(13, 37, 104, 0.18);
  border: 4px solid var(--bg-pure-white);
  position: relative;
}

.hero-image-card img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hero-image-card:hover img {
  transform: scale(1.03);
}

.floating-badge {
  position: absolute;
  background: var(--bg-pure-white);
  border: 1px solid var(--border-color);
  padding: 0.9rem 1.3rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  box-shadow: 0 12px 30px rgba(13, 37, 104, 0.12);
  transition: transform 0.3s ease;
  z-index: 5;
}

.floating-badge.badge-placement {
  bottom: 20px;
  left: -20px;
}

.floating-badge.badge-rating {
  top: 30px;
  right: -20px;
}

.badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-on-brand-strong);
}

.badge-icon.bg-orange {
  background: var(--brand);
}

.badge-icon.bg-green, .badge-icon.bg-cyan {
  background: var(--brand-mid);
}

.badge-text strong {
  display: block;
  font-size: 1.05rem;
  color: var(--text-heading);
}

.badge-text span {
  font-size: 0.8rem;
  color: var(--slate-muted);
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* ==========================================================================
   Stats Bar Section
   ========================================================================== */
.stats-bar {
  margin-top: -3.5rem;
  position: relative;
  z-index: 10;
}

.stats-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border: 1px solid var(--border-color);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 1rem;
  border-right: 1px solid var(--border-color);
}

.stat-item:last-child {
  border-right: none;
}

.stat-icon {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.stat-icon.navy {
  background: var(--navy-glow);
  color: var(--text-heading);
}

.stat-icon.orange {
  background: var(--orange-bg);
  color: var(--orange-primary);
}

.stat-icon.green {
  background: var(--emerald-bg);
  color: var(--emerald-primary);
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.1;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--slate-muted);
  font-weight: 600;
}

/* ==========================================================================
   Courses Section (60% Dominant Light Canvas)
   ========================================================================== */
.courses-section {
  background: var(--bg-surface);
}

.course-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 3rem;
}

.filter-btn {
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-pure-white);
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-btn:hover, .filter-btn.active {
  background: var(--navy-primary);
  color: var(--text-on-brand-strong);
  border-color: var(--navy-primary);
  box-shadow: 0 4px 12px var(--navy-glow);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 2rem;
}

.course-card {
  background: var(--bg-pure-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
  /* Anchor for the stretched title link that makes the whole card clickable. */
  position: relative;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.course-thumbnail {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.course-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Stock photography arrives in every hue going. Pulling the saturation down
     and laying a navy-to-saffron scrim over it puts the whole catalogue on one
     palette; hover hands the photo back its full colour. */
  filter: saturate(0.58) contrast(1.06);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.course-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    205deg,
    rgba(13, 37, 104, 0.70) 0%,
    rgba(13, 37, 104, 0.34) 55%,
    rgba(255, 107, 0, 0.34) 100%
  );
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.course-card:hover .course-thumbnail img {
  transform: scale(1.08);
  filter: saturate(1) contrast(1);
}

.course-card:hover .course-thumbnail::after {
  opacity: 0.5;
}

.course-tag {
  position: absolute;
  z-index: 2;
  /* Decoration only. Let clicks fall through to the card link underneath. */
  pointer-events: none;
  top: 15px;
  left: 15px;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-on-brand-strong);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.course-tag.job-guaranteed {
  background: var(--brand);
}

.course-tag.popular {
  background: var(--brand-mid);
}

.course-mode {
  position: absolute;
  z-index: 2;
  /* Decoration only. Let clicks fall through to the card link underneath. */
  pointer-events: none;
  bottom: 15px;
  right: 15px;
  background: rgba(7, 22, 56, 0.88);
  color: var(--text-on-brand-strong);
  backdrop-filter: blur(8px);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.course-body {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--slate-muted);
  margin-bottom: 0.8rem;
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.course-meta span i {
  color: var(--accent-coral);
}

.course-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.course-desc {
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: 1.2rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.course-tools:empty {
  margin-bottom: 0;
}

.tool-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-heading);
}

.course-footer {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.course-price {
  display: flex;
  flex-direction: column;
}

.fee-amount {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-heading);
}

.fee-emi {
  font-size: 0.75rem;
  color: var(--accent-ink);
  font-weight: 700;
}

.course-actions {
  display: flex;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Whole-card click target
   The title anchor stretches over the card, so a click anywhere opens the
   course. Everything that needs its own click (the enquiry CTA) is lifted
   above it with position + z-index.
   -------------------------------------------------------------------------- */
.course-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.course-card:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

.course-card-link:focus-visible {
  outline: none;
}

.course-card:focus-within .course-title {
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Enquiry CTA
   One call to action per card, set as text rather than a filled button so it
   never competes with the card itself.
   -------------------------------------------------------------------------- */
.course-enquire-link {
  position: relative;
  z-index: 2;
  /* Sits to the right of the price. With no price to sit beside, it takes the
     left edge so the footer does not read as one stranded link. */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease, gap 0.2s ease;
}

.course-enquire-link:only-child {
  margin-left: 0;
}

.course-enquire-link i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.course-enquire-link:hover,
.course-enquire-link:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.course-enquire-link:hover i {
  transform: translateX(3px);
}

/* ==========================================================================
   Interactive Skill Quiz Widget Section (30% Navy Structural Card)
   ========================================================================== */
.quiz-section {
  background: var(--navy-dark);
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255, 107, 0, 0.1) 0%, transparent 50%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 28px 28px;
  color: var(--text-on-brand-strong);
  position: relative;
  overflow: hidden;
}

.quiz-container {
  background: rgba(13, 37, 104, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 3rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.quiz-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.quiz-header h3 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.quiz-header p {
  color: var(--text-body-invert);
}

.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-question {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.quiz-opt-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--text-on-brand-strong);
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-opt-btn:hover {
  background: rgba(14, 165, 233, 0.2);
  border-color: var(--accent);
  transform: scale(1.02);
}

.quiz-result-card {
  text-align: center;
  padding: 1rem;
}

.quiz-result-card i.result-icon {
  font-size: 3.5rem;
  color: var(--accent-coral);
  margin-bottom: 1rem;
}

.recommended-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent-ink);
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Why Choose Us Section (60% Dominant Light Canvas)
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature-card {
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  /* --surface-raised, not --surface: in the dark theme the canvas and the card
     would otherwise be the same colour and the cards would disappear. */
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--navy-primary);
  box-shadow: var(--shadow-lg);
}

.feature-icon-wrapper {
  width: 65px;
  height: 65px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.feature-icon-wrapper.orange, .feature-icon-wrapper.coral {
  background: var(--accent-coral-light);
  color: var(--accent-coral);
}

.feature-icon-wrapper.navy {
  background: var(--navy-glow);
  color: var(--text-heading);
}

.feature-icon-wrapper.green, .feature-icon-wrapper.cyan {
  background: var(--accent-tint);
  color: var(--accent-ink);
}

.feature-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0.8rem;
}

/* :where() drops this to element-level specificity so it stays a default for
   bare <p> in a card, but any explicit .text-* utility on the paragraph wins. */
:where(.feature-card) p {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.65;
}

/* ==========================================================================
   Placements & Corporate Partners Section (60% Light Canvas)
   ========================================================================== */
.placement-section {
  background: var(--bg-pure-white);
}

.partners-ticker {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  opacity: 0.85;
}

.partner-logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--slate-muted);
  letter-spacing: 1px;
  transition: var(--transition-fast);
}

.partner-logo:hover {
  color: var(--text-heading);
  transform: scale(1.1);
}

.student-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.student-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: var(--transition-normal);
}

.student-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.student-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.student-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
}

.student-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heading);
}

.student-info p {
  font-size: 0.85rem;
  color: var(--text-body);
}

.placement-badge {
  background: var(--accent-tint);
  color: var(--accent-ink);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-block;
  margin-bottom: 1rem;
}

.student-quote {
  font-size: 0.9rem;
  color: var(--text-body);
  font-style: italic;
}

/* ==========================================================================
   Upcoming Batches Schedule Table (60% Light Canvas / 30% Navy Table Header)
   ========================================================================== */
.batches-section {
  background: var(--bg-surface);
}

.batch-table-wrapper {
  background: var(--bg-pure-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
  border: 1px solid var(--border-color);
}

.batch-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  text-align: left;
}

.batch-table th {
  background: var(--navy-dark);
  color: var(--text-on-brand-strong);
  padding: 1.2rem 1.5rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.batch-table td {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95rem;
}

.batch-table tr:last-child td {
  border-bottom: none;
}

.batch-table tr:hover {
  background: rgba(13, 37, 104, 0.03);
}

.seats-badge {
  color: var(--accent-coral-dark);
  font-weight: 700;
  background: var(--accent-coral-light);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ==========================================================================
   FAQ Accordion Section
   ========================================================================== */
.faq-grid {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-pure-white);
  overflow: hidden;
  transition: var(--transition-fast);
}

.faq-question {
  padding: 1.4rem 1.8rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-heading);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.faq-question i {
  transition: transform 0.3s ease;
  color: var(--accent-ink);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  padding: 0 1.8rem;
  color: var(--text-body);
  font-size: 0.95rem;
}

.faq-item.active {
  border-color: var(--navy-primary);
  box-shadow: var(--shadow-sm);
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
  color: var(--accent-coral);
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 1.8rem 1.4rem 1.8rem;
  transition: max-height 0.3s ease-in-out;
}

/* ==========================================================================
   Bootstrap Quick Enquiry Modal — guaranteed viewport-fixed centering
   ========================================================================== */
#quickEnquiryModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1060 !important;
  overflow-x: hidden;
  overflow-y: auto;
}

#quickEnquiryModal .modal-dialog {
  margin: 1.75rem auto !important;
  max-width: 520px !important;
  width: calc(100% - 2rem) !important;
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

#quickEnquiryModal .modal-content {
  width: 100%;
}

.modal-backdrop {
  z-index: 1055 !important;
}

/* ==========================================================================
   Legacy custom modal overlay (course detail modal)
   NOTE: .modal-header / .modal-body are scoped under .modal-overlay so they
   do NOT conflict with Bootstrap 5's native .modal component.
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 22, 56, 0.75);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: var(--bg-pure-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 750px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: none;
  font-size: 1.2rem;
  color: var(--slate-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  z-index: 10;
}

.modal-close:hover {
  background: var(--accent-cta);
  color: #FFFFFF;
}

/* Scoped under .modal-overlay to avoid overriding Bootstrap 5 .modal-header / .modal-body */
.modal-overlay .modal-header {
  padding: 2rem 2rem 1rem 2rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-overlay .modal-header h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-heading);
}

.modal-overlay .modal-body {
  padding: 2rem;
}

/* Form Styles inside Modal */
.form-group {
  margin-bottom: 1.2rem;
}

.form-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-heading);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Safari on iOS zooms the whole page in whenever a focused field renders below
   16px, which shoves the layout sideways while someone is typing. Hold every
   text-entry control at 16px across the phone and tablet range this file
   already treats as mobile. Desktop keeps its own scale. */
@media (max-width: 991px) {
  .form-control,
  .form-control-sm,
  .form-select,
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]) {
    font-size: 16px;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Dynamic Toast Notification */
.toast-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--navy-dark);
  color: var(--text-on-brand-strong);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-left: 5px solid var(--accent);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 3000;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================================
   Footer Section (30% Navy Structural Background)
   ========================================================================== */
.footer {
  background: var(--navy-dark);
  color: var(--text-body-invert);
  padding: 5rem 0 1.25rem 0;
  border-top: 5px solid var(--accent-coral);
  margin-bottom: 0 !important;
  margin-top: auto; /* pushes footer to bottom in flex layouts */
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 2.75rem;
}

.footer-grid > * {
  flex: 0 1 auto;
  min-width: 0;
}

.footer-grid > .footer-brand {
  flex: 0 1 460px;
}

.footer-brand p {
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-title {
  color: var(--text-on-brand-strong);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 35px;
  height: 3px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px;
}

.footer-links, .footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  transition: var(--transition-fast);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--accent-ink);
  padding-left: 5px;
}

.footer-bottom {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Smaller than body copy and footer links — this is fine print. */
  font-size: 0.78rem;
  opacity: 0.75;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES — Full Mobile + Tablet Support
   Laptop/Desktop 992px+ = reference (already working)
   Tablet: 576px–991px
   Mobile: 320px–575px
   ========================================================================== */

/* ── Tablet (576px – 991px) ── */
@media (max-width: 991px) {
  /* backdrop-filter turns .navbar into the containing block for its
     position:fixed children, which mis-anchors the drawer. The bar is
     already ~opaque here, so drop the blur and keep viewport anchoring. */
  .navbar { backdrop-filter: none; }

  /* Navbar: show hamburger, hide menu by default */
  .nav-menu {
    position: fixed;
    /* --nav-offset is kept in sync with the navbar's real bottom edge by JS,
       because the non-sticky top bar shifts the navbar down until scrolled. */
    top: var(--nav-offset, 64px);
    right: 0;
    left: auto;
    width: min(300px, 82vw);
    height: calc(100vh - var(--nav-offset, 64px));
    background: var(--surface);
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.1rem;
    gap: 0.2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    overflow-y: auto;
    /* Scoped to .navbar's stacking context, so this only orders the drawer
       against its navbar siblings. What decides whether the drawer sits above
       .nav-overlay is .navbar's own z-index, not this one. */
    z-index: 1050;
  }
  .nav-menu.active {
    transform: translateX(0);
  }
  .nav-overlay { display: block; top: var(--nav-offset, 64px); }
  body.nav-open { overflow: hidden; }

  .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    color: var(--text-heading);
    cursor: pointer;
  }
  .nav-link {
    width: 100%;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
  }
  .nav-link::after { display: none; }

  /* Dropdown on mobile: tap to reveal.

     Scoped under .nav-menu on purpose. The desktop .dropdown-menu-custom rule
     lives further down this file, and a media query adds no specificity, so at
     equal weight the later desktop rule won and dragged position:absolute,
     z-index:1100 and opacity:0 into the drawer. That floated the open Courses
     panel over Trainings, Placements, Gallery and Contact Us and made them
     untappable. The extra class here outranks it regardless of source order. */
  .nav-menu .dropdown-menu-custom {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    z-index: auto;
    opacity: 1;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--accent);
    margin-left: 0.8rem;
    padding: 0;
    transition: max-height 0.3s ease, visibility 0.3s ease;
  }
  .nav-dropdown.active .dropdown-menu-custom {
    visibility: visible;
    /* Never an inner scrollbar. The list is capped server-side and trimmed
       further by fitDropdownToViewport(); the trailing link becomes View More.
       The cap here only needs to exceed the tallest trimmed list. */
    max-height: 1200px;
  }

  /* Hide top-links on tablet (saves space) */
  .top-links { display: none; }
  .top-bar-content { justify-content: center; }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .hero-content h1 { font-size: 2.2rem; }
  .hero-features, .hero-cta { justify-content: center; }
  .hero-cta { flex-wrap: wrap; gap: 0.8rem; }
  .hero-visual { max-width: 480px; margin: 0 auto; }

  /* Section sizes */
  .section-padding { padding: 3rem 0; }
  .section-title { font-size: 2rem; }
  .page-hero-title { font-size: 2.2rem; }
  .page-hero { padding: 3rem 0 2.5rem; }

  /* Grids */
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .student-wall-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-card { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .footer-grid { justify-content: flex-start; gap: 2.5rem; }
  .footer-grid > * { flex: 1 1 240px; }
  .footer-grid > .footer-brand { flex: 1 1 100%; }

  /* Navbar container height */
  .navbar-container { height: 64px; }
  .logo-img { height: 46px; }
  .nav-actions .btn { font-size: 0.85rem; padding: 0.55rem 1rem; }
}

/* ── Mobile (≤575px) ── */
@media (max-width: 575px) {
  /* Top bar: single column */
  .top-bar-content { flex-direction: column; gap: 0.4rem; text-align: center; }
  .top-info { flex-direction: column; gap: 0.3rem; }
  .top-links { display: none; }

  /* Logo */
  .navbar-container { height: 58px; }
  .logo-img { height: 38px; }
  .nav-menu { top: var(--nav-offset, 58px); height: calc(100vh - var(--nav-offset, 58px)); }
  .nav-overlay { top: var(--nav-offset, 58px); }

  /* Hero */
  .hero { padding: 3rem 0 4rem; }
  .hero-grid { gap: 1.5rem; }
  .hero-content h1 { font-size: 1.75rem; line-height: 1.25; }
  .hero-description { font-size: 1rem; }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-features { flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; }
  .hero-feature-item { font-size: 0.82rem; }

  /* Registration strip */
  .strip-inner { flex-direction: column; text-align: center; gap: 1rem; }
  .strip-inner h2 { font-size: 1rem; }
  .strip-btn { width: 100%; text-align: center; }

  /* Section */
  .section-padding { padding: 2rem 0; }
  .section-title { font-size: 1.6rem; }
  .section-subtitle { font-size: 1rem; }
  .section-header { margin-bottom: 2rem; }

  /* Page hero (inner pages) */
  .page-hero { padding: 2.5rem 0 2rem; }
  .page-hero-title { font-size: 1.75rem; }
  .page-hero-subtitle { font-size: 1rem; }

  /* Grids: all single column on mobile */
  .courses-grid,
  .features-grid,
  .student-wall-grid,
  .aktu-gallery,
  .team-grid,
  .branch-grid { grid-template-columns: 1fr; }

  /* Stats */
  .stats-card { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }

  /* Footer */
  .footer-grid { flex-direction: column; gap: 1.5rem; }
  .footer-grid > *, .footer-grid > .footer-brand { flex: 0 0 auto; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; font-size: 0.75rem; }

  /* Quiz / Form */
  .quiz-options { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* Floating badges */
  .floating-badge {
    position: relative;
    left: auto !important;
    right: auto !important;
    margin: 1rem auto;
    width: max-content;
  }

  /* Toast */
  .toast-notification { left: 12px; right: 12px; bottom: 16px; }

  /* Button touch targets */
  .btn { min-height: 48px; padding: 0.75rem 1.4rem; font-size: 0.95rem; }

  /* Nav action button hide text on very small */
  .nav-actions .btn span.btn-label { display: none; }
  .nav-actions .btn { padding: 0 0.85rem; font-size: 0.85rem; min-height: 38px; }

  /* Container padding */
  .container { padding: 0 1rem; }

  /* Keep row gutters within the container padding: a g-5 row pulls -1.5rem
     margins against 1rem of padding and overhangs the viewport by 8px. */
  .row { --bs-gutter-x: 2rem; }

  /* AKTU box */
  .aktu-box { padding: 1.5rem 1rem; }

  /* Marquee bar */
  .marquee-wrapper { font-size: 0.82rem !important; }
}

/* ==========================================================================
   Multi-Page Extension & Scortek-Inspired Styling
   ========================================================================== */

/* Navbar Dropdowns */
.nav-dropdown {
  position: relative;
}

.dropdown-menu-custom {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--bg-pure-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.8rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1100;
}

.nav-dropdown:hover .dropdown-menu-custom {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item-custom {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-heading);
  transition: var(--transition-fast);
}

.dropdown-item-custom i {
  color: var(--accent-ink);
  font-size: 1rem;
}

.dropdown-item-custom:hover {
  background: var(--bg-surface);
  color: var(--accent-coral);
  padding-left: 1.8rem;
}

/* --------------------------------------------------------------------------
   Dependent (two-level) Courses menu
   Level 1 lists branches, level 2 flies out with that branch's courses.
   -------------------------------------------------------------------------- */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-item-custom {
  padding-right: 2.6rem;
}

.submenu-label {
  flex: 1 1 auto;
}

.submenu-caret {
  position: absolute;
  right: 1.1rem;
  font-size: 0.7rem !important;
  opacity: 0.55;
  transition: var(--transition-fast);
}

/* The caret is a real control for touch and keyboard; on desktop hover drives
   the flyout instead, so it is only a hit target from tablet down. */
.submenu-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.submenu-panel {
  position: absolute;
  top: -0.8rem;
  left: 100%;
  min-width: 260px;
  /* No scrollbar: overflowing items are hidden and the panel's last link
     turns into View More. */
  overflow: hidden;
  background: var(--bg-pure-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.8rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.25s ease;
  z-index: 1200;
}

/* Near the right edge the panel would run off-screen; JS adds .flip. */
.submenu-panel.flip {
  left: auto;
  right: 100%;
  transform: translateX(-10px);
}

.dropdown-submenu:hover > .submenu-panel,
.dropdown-submenu:focus-within > .submenu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.dropdown-submenu:hover > .dropdown-item-custom {
  background: var(--bg-surface);
  color: var(--accent-coral);
}

.dropdown-submenu:hover > .dropdown-item-custom .submenu-caret {
  opacity: 1;
}

/* Trailing link of a dropdown. Reads "All <branch>" normally; JS switches it
   to "View More" whenever the list above it had to be cut short. */
.dropdown-more {
  font-weight: 700;
}

.dropdown-menu-custom.is-truncated > .dropdown-more,
.submenu-panel.is-truncated > .dropdown-more {
  background: var(--bg-surface);
}

.dropdown-menu-custom.is-truncated > .dropdown-more::after,
.submenu-panel.is-truncated > .dropdown-more::after {
  content: "\f105"; /* fa-angle-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  padding-left: 0.6rem;
  opacity: 0.7;
}
.category-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Tablet and below: the flyout becomes a nested accordion inside the drawer. */
@media (max-width: 991px) {
  .submenu-toggle {
    display: block;
  }

  .dropdown-submenu > .dropdown-item-custom {
    padding-right: 3rem;
  }

  .submenu-panel {
    position: static;
    max-height: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    visibility: hidden;
    transform: none;
    border: 0;
    border-left: 2px solid var(--accent-cyan);
    border-radius: 0;
    box-shadow: none;
    margin-left: 1.4rem;
    padding: 0;
    transition: max-height 0.3s ease, visibility 0.3s ease;
  }

  /* Hover must not open anything on touch — only the explicit toggle does. */
  .dropdown-submenu:hover > .submenu-panel,
  .dropdown-submenu:focus-within > .submenu-panel {
    visibility: hidden;
    max-height: 0;
  }

  .dropdown-submenu.open > .submenu-panel,
  .dropdown-submenu.open:hover > .submenu-panel {
    visibility: visible;
    /* Same rule as above: trimmed to fit, never scrolled. */
    max-height: 1200px;
  }

  .dropdown-submenu.open > .dropdown-item-custom .submenu-caret {
    transform: rotate(90deg);
  }

  .submenu-panel .dropdown-item-custom {
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}
.dropdown-divider-custom {
  height: 1px;
  background: var(--border-color);
  margin: 0.5rem 0;
}

/* Scortek Registration Strip */
.registration-strip {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-primary));
  color: var(--text-on-brand-strong);
  padding: 1.2rem 0;
  border-bottom: 3px solid var(--accent-coral);
}

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

.strip-inner h2 {
  font-size: 1.3rem;
  font-weight: 800;
}

.strip-inner h2 span {
  color: var(--accent-coral);
}

.strip-btn {
  background: var(--accent-cta);
  color: #FFFFFF;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px var(--accent-coral-glow);
  transition: var(--transition-fast);
}

.strip-btn:hover {
  background: var(--accent-coral-dark);
  transform: scale(1.04);
}

/* Page Hero Header Banner (for inner pages) */
.page-hero {
  /* Saffron, not navy. The inner-page hero is where this brand's accent should
     live: navy already owns the nav and footer, so a navy hero between them
     made three navy bands in a row and left the accent with nowhere to sit.
     Ink is locked white because the fill stays saturated in both themes. */
  background: var(--brand-gradient);
  color: var(--text-on-brand-strong);
  padding: 4.5rem 0 3.5rem 0;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--brand);
}

.page-hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.page-hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-body-invert);
  max-width: 700px;
  margin-bottom: 1.5rem;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-list a {
  color: var(--accent-ink);
  font-weight: 600;
}

.breadcrumb-list a:hover {
  color: var(--accent-coral);
}

/* AKTU & University Collaboration Section */
.aktu-collab-section {
  background: var(--bg-pure-white);
  padding: 4rem 0;
  border-bottom: 1px solid var(--border-color);
}

.aktu-box {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 3rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.aktu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.aktu-badge {
  background: var(--accent-coral-light);
  color: var(--accent-coral-dark);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  display: inline-block;
}

.aktu-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.aktu-card {
  background: var(--bg-pure-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.aktu-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.aktu-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.aktu-card-caption {
  padding: 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-heading);
  text-align: center;
}

/* Team & Leadership Cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.team-card {
  background: var(--bg-pure-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: var(--transition-normal);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.team-avatar {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.team-body {
  padding: 1.8rem;
}

.team-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 0.3rem;
}

.team-role {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-ink);
  margin-bottom: 1rem;
}

.team-bio {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.5;
}

/* Multi-Branch Office Location Cards */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.branch-card {
  background: var(--bg-pure-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 2.2rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
}

.branch-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-coral);
  box-shadow: var(--shadow-lg);
}

.branch-icon {
  width: 55px;
  height: 55px;
  border-radius: var(--radius-md);
  background: var(--accent-coral-light);
  color: var(--accent-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}

.branch-city {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 0.8rem;
}

.branch-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: var(--text-body);
}

.branch-detail i {
  color: var(--accent-ink);
  margin-top: 0.2rem;
}

@media (max-width: 991px) {
  .aktu-gallery, .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Utility Classes (Typography & Colors)
   ========================================================================== */
/* Body copy scale. Three steps only — every paragraph on the site picks one of
   these and sets nothing else. Line-height travels with the size so callers
   never need an inline override. */
.text-sm { font-size: 0.9rem; line-height: 1.55; }
.text-base { font-size: 1rem; line-height: 1.65; }
.text-lg { font-size: 1.125rem; line-height: 1.7; }
.heading-sm { font-size: 1.25rem; font-weight: 700; }
.heading-md { font-size: 1.5rem; font-weight: 700; }
.heading-lg { font-size: 2.2rem; font-weight: 800; }

/* Role utilities — prefer these in new markup.
   Deliberately prefixed ink-/surf-: Bootstrap already ships .text-body,
   .text-muted, .text-info and friends with !important, so unprefixed names
   would silently lose to it. */
.ink-heading { color: var(--text-heading); }
.ink-body { color: var(--text-body); }
.ink-dim { color: var(--text-muted); }
.ink-accent { color: var(--accent-ink); }
.ink-on-brand { color: var(--text-on-brand); }
.ink-success { color: var(--success); }
.ink-danger { color: var(--danger); }
.ink-warning { color: var(--warning); }
.ink-info { color: var(--info-ink); }

.surf-canvas { background-color: var(--surface); }
.surf-sunken { background-color: var(--surface-sunken); }
.surf-alt { background-color: var(--surface-alt); }
.surf-brand { background-color: var(--brand); }
.surf-brand-deep { background-color: var(--brand-deep); }
.surf-brand-gradient { background: var(--brand-gradient); }
.surf-accent { background-color: var(--accent); }
.surf-accent-tint { background-color: var(--accent-tint); }

/* Full-width brand band, used for a page's strongest call to action. Navy,
   not saffron — saffron is not permitted as a section surface. Ink is locked
   white in both themes because the fill stays saturated. */
.surf-accent-band {
  background: var(--brand-gradient);
  color: #FFFFFF;
}
.surf-accent-band .section-title,
.surf-accent-band h2,
.surf-accent-band h3 { color: #FFFFFF; }
.surf-accent-band p { color: rgba(255, 255, 255, 0.92); }

/* Deprecated aliases kept so existing markup keeps rendering. */
.text-navy-dark { color: var(--text-heading); }
.text-navy-primary { color: var(--text-heading); }
.text-slate-body { color: var(--text-body); }
.text-slate-muted { color: var(--text-muted); }
.text-accent-coral { color: var(--accent-ink); }
.text-accent-cyan { color: var(--accent-ink); }
.text-accent-cyan-dark { color: var(--accent-ink); }
.text-white { color: var(--text-on-brand-strong); }
.text-white-85 { color: var(--text-on-brand); }
.text-white-90 { color: var(--text-on-brand); }

.bg-surface { background-color: var(--surface-sunken); }
.bg-pure-white { background-color: var(--surface); }
.bg-navy-dark { background-color: var(--brand-deep); }
.bg-navy-glow { background-color: var(--brand-glow); }
.bg-accent-cyan-light { background-color: var(--accent-tint); }
.bg-white { background-color: var(--surface); }
.bg-navy-alt { background: var(--brand-deep); }
.bg-primary-gradient { background: var(--brand-gradient); }
.bg-cyan-transparent { background-color: var(--accent-glow); }
.bg-white-transparent { background-color: rgba(255, 255, 255, 0.2); }

.text-xs { font-size: 0.75rem; line-height: 1.4; }
.text-xl { font-size: 1.6rem; line-height: 1.4; }
.text-3xl { font-size: 3rem; line-height: 1.2; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-warning { color: var(--warning); }
.text-blue-400 { color: var(--info); }
.text-yellow-400 { color: var(--warning); }
/* ==========================================================================
   Gallery Album & Lightbox UI
   ========================================================================== */

/* Folder effect for Album Cards */
.album-folder {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.album-folder:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.folder-effect {
  position: relative;
}
.folder-effect::after {
  content: '';
  position: absolute;
  top: 5px;
  right: -5px;
  bottom: -5px;
  left: 5px;
  background: var(--bg-surface);
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.folder-effect::before {
  content: '';
  position: absolute;
  top: 10px;
  right: -10px;
  bottom: -10px;
  left: 10px;
  background: var(--bg-pure-white);
  z-index: -2;
  border-radius: inherit;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.album-folder:hover .folder-effect::after {
  transform: translate(3px, 3px) rotate(2deg);
}
.album-folder:hover .folder-effect::before {
  transform: translate(6px, 6px) rotate(4deg);
}

/* Album Images Grid inside Modal */
.album-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
.album-thumb-wrapper {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.album-thumb-wrapper::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(7, 22, 56, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.album-thumb-wrapper:hover::after {
  opacity: 1;
}
.album-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.album-thumb-wrapper:hover .album-thumb {
  transform: scale(1.1);
}

/* Fullscreen Lightbox */
.lightbox-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.1);
  user-select: none;
}
.lightbox-caption {
  color: white;
  margin-top: 1rem;
  font-size: 1.1rem;
  text-align: center;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}
.lightbox-close {
  top: 20px;
  right: 20px;
}
.lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-prev:hover, .lightbox-next:hover {
  transform: translateY(-50%) scale(1.1);
}
@media (max-width: 768px) {
  .lightbox-prev, .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

/* ============================================================
   FRONTEND MICRO-INTERACTION PATCHES
   ============================================================ */

/* Buttons - tactile click feel */
.btn-primary,
.btn,
button {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease !important;
}
.btn-primary:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
}
.btn-primary:active, .btn:active {
    transform: scale(0.98) !important;
    transition-duration: 0.07s !important;
}

/* Nav links */
.nav-link, .nav-link-item {
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

/* Course cards */
.course-card, .training-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.course-card:hover, .training-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Student / Placement cards */
.student-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.student-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Filter buttons / pills */
.filter-btn, .gallery-filter-btn {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.filter-btn:hover, .gallery-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.filter-btn:active, .gallery-filter-btn:active {
    transform: scale(0.97) !important;
}

/* Gallery grid items */
.gallery-item {
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}
.gallery-item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.gallery-item img {
    transition: transform 0.35s ease !important;
}
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Footer links */
footer a, .footer a {
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}
footer a:hover, .footer a:hover {
    padding-left: 4px;
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */
.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--surface-alt);
  color: var(--text-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

@media (max-width: 768px) {
  .theme-toggle { width: 34px; height: 34px; font-size: 0.85rem; }
}

/* ==========================================================================
   Bootstrap surface overrides
   Bootstrap ships .bg-light / .bg-white / .bg-body with !important, so without
   matching that here they stay literally white in the dark theme and the page
   ends up half-inverted. Mapped onto the role tokens instead of removed,
   because the templates use them for real section surfaces.
   ========================================================================== */
.bg-light { background-color: var(--surface-sunken) !important; }
.bg-white,
.bg-body { background-color: var(--surface) !important; }
.text-secondary { color: var(--text-muted) !important; }

/* Buttons sitting on a saffron or navy band keep a white chip in both themes. */
.surf-accent-band .bg-white,
.bg-brand-gradient .bg-white,
.surf-brand-gradient .bg-white { background-color: #FFFFFF !important; }
.surf-accent-band .text-navy-dark,
.surf-brand-gradient .text-navy-dark { color: #0D2568 !important; }

/* ==========================================================================
   Saffron rules
   Saffron is never a surface: no section band, no pill, no eyebrow, no icon
   chip. It survives only as (a) the fill of a filled interactive control, where
   it is --accent-cta carrying white text at 5.5:1, (b) hairline borders and
   underlines, and (c) display text on a white canvas.

   Navy ink on saffron, and saffron ink on navy, are both banned — every
   saffron/navy surface takes white text instead.
   ========================================================================== */
.course-tag { color: #FFFFFF; }

/* Saffron as display text, on the white canvas only. --accent-ink clears
   4.5:1; --accent-strong is reserved for sizes at or above 24px, which need
   only 3:1. */
.hero-title-accent,
.highlight {
  color: var(--accent-strong);
}

/* ==========================================================================
   Navy surfaces: nothing saffron sits on them
   On an explicit navy band every accent turns white — headline highlights,
   breadcrumbs, links and eyebrows. A filled CTA on navy becomes a white chip
   with navy text rather than a saffron one, because a saffron fill directly on
   navy is the pairing we are avoiding.

   The dark theme is deliberately not covered here: there the whole canvas is
   navy by construction, so saffron remains the accent on it. This block is
   about navy *bands* sitting inside a white page.
   ========================================================================== */
.page-hero,
.footer,
.top-bar,
.surf-accent-band,
.surf-brand,
.surf-brand-deep,
.surf-brand-gradient,
.bg-navy-alt,
.bg-navy-dark,
.bg-primary-gradient {
  --accent-ink: #FFFFFF;
  --accent-strong: #FFFFFF;
}

.page-hero .highlight,
.page-hero .hero-title-accent,
.footer .highlight,
.surf-accent-band .highlight,
.surf-brand .highlight,
.surf-brand-deep .highlight,
.surf-brand-gradient .highlight,
.bg-navy-alt .highlight,
.bg-navy-dark .highlight,
.bg-primary-gradient .highlight,
.page-hero .text-accent-coral,
.footer .text-accent-coral,
.surf-brand-deep .text-accent-coral,
.bg-navy-alt .text-accent-coral {
  color: #FFFFFF;
}

/* Breadcrumbs in the navy hero. */
.page-hero .breadcrumb-list,
.page-hero .breadcrumb-list a,
.page-hero .breadcrumb-list span,
.page-hero .breadcrumb-list i {
  color: rgba(255, 255, 255, 0.85);
}
.page-hero .breadcrumb-list a:hover { color: #FFFFFF; }

/* Eyebrow pill on navy: a translucent white chip, never saffron. */
.page-hero .badge-tag,
.footer .badge-tag,
.surf-accent-band .badge-tag,
.surf-brand-deep .badge-tag,
.surf-brand-gradient .badge-tag,
.bg-navy-alt .badge-tag,
.bg-primary-gradient .badge-tag {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.30);
  color: #FFFFFF;
}
.page-hero .badge-tag i,
.surf-accent-band .badge-tag i,
.surf-brand-deep .badge-tag i,
.surf-brand-gradient .badge-tag i,
.bg-navy-alt .badge-tag i,
.bg-primary-gradient .badge-tag i { color: #FFFFFF; }

/* A filled CTA on navy inverts to a white chip with navy text. */
.page-hero .btn-primary,
.surf-accent-band .btn-primary,
.surf-brand-deep .btn-primary,
.surf-brand-gradient .btn-primary,
.bg-navy-alt .btn-primary,
.bg-primary-gradient .btn-primary {
  background: #FFFFFF;
  color: var(--brand);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.page-hero .btn-primary:hover,
.surf-accent-band .btn-primary:hover,
.surf-brand-deep .btn-primary:hover,
.surf-brand-gradient .btn-primary:hover,
.bg-navy-alt .btn-primary:hover,
.bg-primary-gradient .btn-primary:hover {
  background: #F1F5F9;
  color: var(--brand);
}

/* ==========================================================================
   Course catalogue, category hubs and course detail pages
   ========================================================================== */

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  min-height: 0;
}

/* Branch grouping on the catalogue and home page */
.course-category-block {
  margin-bottom: 3.5rem;
}

.course-branch-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-heading, var(--navy-dark));
  margin: 2.5rem 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--border-color);
}

.course-branch-heading a,
.course-category-block .section-title a {
  color: inherit;
}

.course-branch-heading a:hover,
.course-category-block .section-title a:hover {
  color: var(--accent-coral);
}

.course-card .course-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.course-card:hover .course-title a,
.course-card .course-title a:hover {
  color: var(--accent-ink);
}

.course-card .course-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Detail page */
.course-detail-body {
  line-height: 1.8;
  color: var(--slate-body);
}

.course-detail-body p {
  margin-bottom: 1rem;
}

.course-syllabus {
  counter-reset: syllabus;
}

.course-syllabus-item {
  background: var(--bg-surface);
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-coral);
  color: var(--text-heading, var(--navy-dark));
}

.course-syllabus-item p {
  color: var(--slate-body);
  margin-top: 0.35rem;
}

.course-detail-card {
  background: var(--bg-pure-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.4rem;
  position: sticky;
  top: calc(var(--nav-offset, 70px) + 1rem);
}

.course-detail-thumb {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: 1.2rem;
  object-fit: cover;
}

.course-detail-facts {
  margin: 0;
}

.course-detail-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-muted);
  font-weight: 700;
  margin-top: 0.8rem;
}

.course-detail-facts dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
  color: var(--text-heading, var(--navy-dark));
}

/* The sticky sidebar fights the mobile drawer; release it on small screens. */
@media (max-width: 991px) {
  .course-detail-card {
    position: static;
  }

  .course-branch-heading {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Mission / Vision
   The section itself is white canvas; the two cards are the navy element on
   it. Ink inside a card is locked white in both themes because the card fill
   stays a saturated navy — --text-on-brand would invert and disappear.
   ========================================================================== */
#mission-vision {
  background: var(--surface);
}

#mission-vision .mv-card {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #FFFFFF;
  box-shadow: var(--shadow-md);
}

#mission-vision .mv-card h2,
#mission-vision .mv-card h3 { color: #FFFFFF; }
#mission-vision .mv-card p  { color: rgba(255, 255, 255, 0.88); }

/* Icon chip inside a navy card: translucent white, never navy on navy and
   never saffron on navy. */
#mission-vision .mv-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-right: 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

@media (max-width: 768px) {
  #mission-vision .mv-icon { width: 48px; height: 48px; font-size: 1.4rem; margin-right: 1rem; }
}

/* Home page course taster: exactly three across, so six courses read as two
   tidy rows instead of reflowing to four on wide screens. Scoped to desktop
   only — the existing 2-column (<=991px) and 1-column (<=575px) rules for
   .courses-grid still apply below that. */
@media (min-width: 992px) {
  .courses-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Director portrait in the home About section.

   The image is a transparent cutout, so drop-shadow follows her silhouette.
   box-shadow would draw a rectangle instead, which is the whole thing we are
   avoiding here. */
.about-portrait {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(15, 23, 42, 0.28));
}

/* The shadow reads as mud against the near-black dark-mode surface; a light
   rim separates her from the background instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about-portrait {
    filter: drop-shadow(0 0 14px rgba(148, 163, 184, 0.30));
  }
}

:root[data-theme="dark"] .about-portrait {
  filter: drop-shadow(0 0 14px rgba(148, 163, 184, 0.30));
}

/* Group headings inside the team section (Leadership, Our Trainers). */
.team-group-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  text-align: center;
  margin: 2.5rem 0 1.75rem;
  letter-spacing: 0.02em;
}

.team-group-heading:first-of-type {
  margin-top: 0;
}

/* Half size. The cap sits on the wrapper rather than the image so the two
   decorative shapes, which are absolutely positioned against it, shrink and
   stay with her instead of drifting out to the column edges. */
.about-portrait-wrap {
  max-width: 50%;
  margin-inline: auto;
}

/* ==========================================================================
   About page: intro tagline and Director's Message
   ========================================================================== */

.about-tagline {
  font-size: 1.05rem;
  font-weight: 600;
  font-style: italic;
  color: var(--accent-coral);
  line-height: 1.7;
}

.about-tagline i {
  font-size: 0.8rem;
  opacity: 0.6;
  margin: 0 0.3rem;
}

/* Editorial rows rather than cards: a signed message should not read as
   another tile in a grid. */
.director-row + .director-row {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--border-color);
}

/* Cropping to a portrait ratio matters: the source photos sit on a white
   background, and object-fit crops that margin away instead of showing a
   white block against the section (which dark mode would make obvious). */
.director-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.director-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-heading);
}

.director-role {
  margin: 0.15rem 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate-muted);
}

/* Prose block. The copy is a structured profile with headings and lists, not
   a pull quote, so it is styled as body text rather than as a blockquote. */
.director-message {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--slate-body);
}

.director-message > :first-child {
  margin-top: 0;
}

.director-message > :last-child {
  margin-bottom: 0;
}

.director-message p {
  margin: 0 0 1rem;
}

.director-message h4 {
  margin: 2rem 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heading);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-tint-soft);
}

.director-message h5 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-coral);
}

.director-message strong {
  color: var(--text-heading);
  font-weight: 600;
}

.director-message ul {
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
}

.director-message ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Marker drawn rather than a list bullet, so it lines up with the type. */
.director-message ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan-dark, var(--accent-coral));
}

@media (min-width: 992px) {
  .director-photo {
    position: sticky;
    top: calc(var(--nav-offset, 70px) + 1.5rem);
  }
}

@media (max-width: 991px) {
  .director-photo {
    max-width: 340px;
    margin-inline: auto;
  }

  .director-row + .director-row {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }
}

/* Registration state on a training card. Replaces the price slot, since a
   training shows availability where a course shows a fee. */
.training-status {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.training-status.is-open {
  color: var(--emerald-primary, #059669);
}

.training-status.is-closed {
  color: var(--slate-muted);
}

.course-actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}