/* ================================================================
   main.css — base styles: variables, layout, header/nav/footer, hero,
   homepage sections, forms, cards, buttons, modals. Loaded first.
   ================================================================ */

    html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
      background-color: #EAF3FA;
      background-image: radial-gradient(circle, rgba(10,65,116,0.08) 1.2px, transparent 1.2px);
      background-size: 22px 22px;
      color: #001D39;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      letter-spacing: 0.1px;
    }

    h1, h2, h3, h4, h5, .logo-text, .plan-name, .section-title {
      font-family: var(--font-heading, 'Poppins'), 'Segoe UI', sans-serif;
      letter-spacing: -0.2px;
    }

    :root {
      --font-heading: 'Poppins';
      --primary: #0A4174;
      --primary-dark: #001D39;
      --primary-light: #E4EFF9;
      --secondary: #001D39;
      --accent: #49769F;
      --green: #4E8EA2;
      --gray: #4a5a72;
      --border: #BDD8E9;
      --danger: #dc3545;
      --shade1: #001D39;
      --shade2: #0A4174;
      --shade3: #49769F;
      --shade4: #4E8EA2;
      --shade5: #6EA2B3;
      --shade6: #7BBDE8;
      --shade7: #BDD8E9;
    }

    /* Near edge-to-edge on desktop (≈1cm outer margin on a 1920px screen)
       rather than a fixed 1200/1300px canvas with large blank side gaps —
       the padding below still keeps content off the very edge; it's not
       stretched, the max-width just stopped artificially capping it. */
    .container { max-width: 1900px; margin: 0 auto; padding: 0 clamp(16px, 2vw, 28px); width: 100%; }


    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 28px; border-radius: 40px; font-weight: 600; font-size: 15px;
      border: none; cursor: pointer; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none;
      position: relative;
    }

    .btn:active { transform: scale(0.97); }

    .btn-primary { background: linear-gradient(135deg, var(--shade2), var(--shade1)); color: #fff; box-shadow: 0 8px 20px -4px rgba(10,65,116,0.45); }

    .btn-primary:hover { background: linear-gradient(135deg, var(--shade1), var(--shade1)); transform: translateY(-3px); box-shadow: 0 14px 28px -6px rgba(10,65,116,0.5); }

    .btn-green { background: linear-gradient(135deg, var(--shade4), var(--shade3)); color: #fff; box-shadow: 0 8px 20px -4px rgba(78,142,162,0.4); }

    .btn-green:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -6px rgba(78,142,162,0.45); }

    .btn-danger { background: linear-gradient(135deg, #e5556a, var(--danger)); color: #fff; box-shadow: 0 8px 20px -4px rgba(220,53,69,0.35); }

    .btn-danger:hover { background: #c82333; transform: translateY(-3px); box-shadow: 0 14px 28px -6px rgba(220,53,69,0.4); }

    .btn-accent { background: linear-gradient(135deg, var(--shade3), var(--shade2)); color: #fff; box-shadow: 0 8px 20px -4px rgba(73,118,159,0.4); }

    .btn-accent:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -6px rgba(73,118,159,0.45); }

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

    .btn-outline:hover { background: var(--primary-light); transform: translateY(-2px); }

    .btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 30px; }


    :root {
      --hnav-bg1: var(--shade2);
      --hnav-bg2: var(--shade1);
      --hnav-active: linear-gradient(120deg, var(--shade6), var(--shade7));
      --hnav-active-text: var(--secondary);
    }

    header {
      /* Deliberately NOT sticky/fixed — the header and navbar scroll away
         with the rest of the page, per an explicit site-owner request. */
      box-shadow: 0 2px 16px rgba(0,29,57,0.10);
    }

    /* ---- Top info bar: logo + contact details — same single-line layout
       at every screen width now (no more "desktop site" needed); shrinks
       gracefully on narrow phones, with a horizontal-scroll safety net so
       nothing ever wraps to a 2nd line. ---- */
    .header-top { background: #ffffff; border-bottom: 1px solid var(--border); }

    .header-top-inner {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding: 10px clamp(12px, 2vw, 28px); max-width: 1900px; margin: 0 auto;
    }

    .header-top-inner::-webkit-scrollbar { display: none; }

    .logo { display: flex; align-items: center; gap: 10px; flex: none; }

    .logo-icon {
      width: 42px; height: 42px; background: linear-gradient(145deg, var(--shade2), var(--shade1));
      border-radius: 12px; display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 19px; box-shadow: 0 8px 18px -4px rgba(0,29,57,0.4); flex: none; overflow: hidden;
    }

    /* Our own illustrated default mark (tree + book) — square, like the icon
       slot it replaces, just without the navy box behind it (the mark
       already has its own colours). */
    .logo-icon.logo-icon-svg { background: transparent; box-shadow: none; border-radius: 0; }

    /* An uploaded logo from Admin → Branding usually isn't square — so it
       gets a compact, auto-width box instead of being squashed square. */
    .logo-icon.logo-icon-custom {
      width: auto; max-width: 56px; height: 42px; background: transparent; box-shadow: none; border-radius: 0;
    }

    .logo-text { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; flex: none; }

    .logo-text .top { font-weight: 800; font-size: 17px; color: var(--secondary); line-height: 1.1; font-family: 'Playfair Display', var(--font-heading, 'Poppins'), serif; }

    .logo-text .bottom {
      display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; white-space: nowrap;
      font-family: 'Playfair Display', var(--font-heading, 'Poppins'), serif; font-style: italic;
      color: var(--accent); letter-spacing: 0.3px;
    }

    .logo-text .bottom::before, .logo-text .bottom::after {
      content: ''; width: 10px; height: 1px; background: var(--border); flex: none;
    }

    .logo-divider { display: block; width: 1px; align-self: stretch; background: var(--border); flex: none; }

    .header-contact { display: flex; align-items: center; gap: 12px; flex: none; }

    .header-contact-item { display: flex; align-items: center; gap: 7px; flex: none; }

    .header-contact-item .hc-icon {
      width: 30px; height: 30px; border-radius: 9px; background: var(--primary-light); color: var(--primary);
      display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none;
    }

    .header-contact-item .hc-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }

    .header-contact-item .hc-text a, .header-contact-item .hc-text span.hc-main {
      font-weight: 700; font-size: 12px; color: var(--secondary); text-decoration: none;
    }

    .header-contact-item .hc-text small { font-size: 9.5px; color: var(--gray); font-weight: 500; }

    /* ---- Nav bar: horizontal scrollable pill nav on desktop/tablet-landscape
       (>900px); a real slide-down hamburger panel on phones/tablet-portrait
       (<=900px) — see the max-width:900px block further below. ---- */
    .header-nav-bar { background: linear-gradient(120deg, var(--hnav-bg1), var(--hnav-bg2)); }

    /* All public nav items sit in a single row, always — no "More" dropdown,
       no hamburger. The row uses the full available width (see .nav-wrap's
       wide max-width below) and spaces the items evenly across it so there
       is no leftover gap on wide screens and no wrapping to a 2nd row. */
    .nav-wrap {
      display: flex; align-items: stretch; justify-content: space-between; gap: 10px;
      padding: 0 clamp(10px, 2vw, 20px); max-width: 1880px; margin: 0 auto; position: relative;
    }

    nav { flex: 1; min-width: 0; position: relative; }

    nav ul {
      display: flex; gap: 3px; font-size: 13.5px; font-weight: 600; color: #fff; flex-wrap: nowrap;
      list-style: none; padding: 6px 0; justify-content: space-between; width: 100%;
      /* Safety net only — at the sizing below this scrollbar never actually
         appears on any of the tested widths (1024–1920px); it just means a
         future label edit or an unusually narrow real browser window can
         never break the whole page's layout. */
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    }

    nav ul li { flex: none; position: relative; }

    nav ul li a {
      cursor: pointer; position: relative; transition: 0.2s; color: inherit; text-decoration: none;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
      padding: 9px 12px; border-radius: 10px; white-space: nowrap; text-align: center; line-height: 1.15;
    }

    nav ul li a i { font-size: 17px; }

    nav ul li a:hover { background: rgba(255,255,255,0.1); }

    nav ul li a.active { background: var(--hnav-active); color: var(--hnav-active-text); box-shadow: 0 6px 16px -4px rgba(0,29,57,0.45); }

    .nav-utility { display: flex; align-items: center; gap: 6px; padding: 6px 0 6px 10px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,0.18); flex: none; }

    .nav-utility button {
      width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.06); color: #fff; font-size: 13px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: 0.2s; flex: none;
    }

    .nav-utility button:hover { background: var(--hnav-active); color: var(--hnav-active-text); border-color: var(--shade6); }


    .page-inner { display: none; }

    .page-inner.active { display: block; }

    .inner-header {
      background: var(--primary-light); padding: 28px 0; border-bottom: 1px solid var(--border);
    }

    .inner-header h1 { font-size: 28px; color: var(--secondary); font-weight: 800; }

    .breadcrumb { font-size: 13px; color: var(--gray); }

    .breadcrumb a { color: var(--primary); font-weight: 600; cursor: pointer; }


    .hero {
      background: linear-gradient(155deg, var(--shade1) 0%, var(--shade2) 100%);
      padding: 44px 0 40px;
      overflow: hidden;
      position: relative;
    }

    .hero::before {
      /* dot-grid texture overlay */
      content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
      background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1.4px, transparent 1.4px);
      background-size: 26px 26px;
    }

    .hero-decor-shape {
      position: absolute; pointer-events: none; z-index: 0; opacity: 0.9;
    }

    .hero-grid { display: flex; align-items: center; gap: 24px; position: relative; z-index: 1; }

    .hero-top { max-width: 560px; flex: 1; min-width: 0; text-align: left; margin: 0; animation: heroFadeUp 0.7s ease both; }

    .hero-visual { animation: heroFadeUp 0.7s ease 0.15s both; }

    .reveal-pre { opacity: 0; transform: translateY(16px); }

    .reveal-in { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease, transform 0.55s ease; }

    .hero .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 700;
      padding: 7px 18px; border-radius: 40px; margin-bottom: 16px;
      border: 1px solid rgba(255,255,255,0.25);
    }

    .hero h1 { font-family: var(--font-heading, 'Poppins'), sans-serif; font-size: 42px; line-height: 1.16; font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: -0.5px; }

    .hero h1 .accent { background: linear-gradient(120deg, var(--shade6), var(--shade7)); -webkit-background-clip: text; background-clip: text; color: transparent; }

    .hero p.lead { color: rgba(255,255,255,0.82); font-size: 16.5px; max-width: 480px; margin: 0 0 22px; }

    .hero-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; justify-content: flex-start; }

    .hero-buttons .btn { padding: 12px 20px; font-size: 13.5px; white-space: nowrap; }

    /* Hero sits on a dark navy background, so its 3 CTA buttons get their
       own higher-contrast colors here — this does NOT change how these
       same .btn-primary / .btn-green / .btn-outline classes look anywhere
       else on the page (e.g. on light sections further down). */
    .hero-buttons .btn-primary { background: linear-gradient(120deg,#f6a93a,#f67b1e); color: #001D39; box-shadow: 0 8px 22px -4px rgba(246,169,58,0.55); }

    .hero-buttons .btn-green { background: #ffffff; color: var(--secondary); box-shadow: 0 8px 20px -4px rgba(255,255,255,0.3); }

    .hero-buttons .btn-outline { background: rgba(255,255,255,0.14); color: #fff; border: 2px solid rgba(255,255,255,0.85); }

    .hero-buttons .btn-outline:hover { background: rgba(255,255,255,0.24); }

    .trusted-line { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; justify-content: flex-start; }


    /* Hero image: photo sits over a soft blob backdrop with India map + monument silhouettes */
    .hero-visual { position: relative; width: 54%; flex: none; min-height: 400px; }

    .hero-blob {
      position: absolute; z-index: 0; inset: 0 -4% 0 -6%;
      background: radial-gradient(120% 100% at 62% 38%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 55%, transparent 78%);
      border-radius: 44% 56% 52% 48% / 54% 44% 56% 46%;
    }

    .hero-decor { position: absolute; z-index: 1; inset: -6% -4% 0 -6%; width: 110%; height: 106%; pointer-events: none; }

    .hero-photo-frame {
      position: relative; z-index: 2; overflow: hidden;
      width: 78%; margin: 6% 6% 0 auto; aspect-ratio: 700 / 580;
      border-radius: 200px 200px 20px 20px;
      box-shadow: 0 30px 60px -10px rgba(0,29,57,0.35), 0 10px 24px -6px rgba(0,29,57,0.18);
      border: 6px solid #fff;
    }

    .hero-photo-frame img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }

    /* Trust badge card: sits in the true top-right corner, slightly overlapping outside the photo frame */
    .badge-card {
      /* max(...) keeps the original -6% look at normal widths but stops it
         poking up far enough to clip against .hero's own overflow:hidden
         edge now that the hero (intentionally, per the wider desktop
         layout) can render noticeably wider than before. */
      position: absolute; top: max(-6%, -22px); right: -3%; z-index: 3; min-width: 0;
      width: clamp(130px, 20%, 168px);
      background: linear-gradient(160deg, var(--shade2) 0%, var(--shade1) 100%);
      border-radius: 14px; padding: 10px 11px;
      box-shadow: 0 18px 36px -6px rgba(0,29,57,0.4); border: 1px solid rgba(255,255,255,0.15);
    }

    .badge-card-inner { display: flex; flex-direction: column; gap: 0; }

    .badge-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }

    .badge-item:last-child { border-bottom: none; }

    .badge-item .ic { width: 20px; height: 20px; flex: none; background: rgba(255,255,255,0.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: #fff; }

    .badge-item .t { font-size: 10.5px; font-weight: 700; color: #fff; line-height: 1.2; }

    .badge-item .s { font-size: 9px; color: #c6d6f0; line-height: 1.2; }


    .stats { background: transparent; border-bottom: 1px solid var(--border); padding: 26px 0; }

    .stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; justify-items: center; }

    .stat-item {
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px;
      min-width: 0; width: 100%; text-align: center; background: #fff; border-radius: 16px;
      padding: 16px 8px; box-shadow: 0 10px 22px -6px rgba(0,29,57,0.16), 0 2px 6px rgba(0,29,57,0.06);
      border: 1px solid rgba(189,216,233,0.5); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    }

    .stat-item:hover { transform: translateY(-5px); box-shadow: 0 18px 32px -6px rgba(0,29,57,0.22), 0 5px 12px rgba(0,29,57,0.08); }

    .stat-item .ic {
      width: clamp(36px, 8vw, 46px); height: clamp(36px, 8vw, 46px); border-radius: 14px;
      color: #fff; display: flex; align-items: center; justify-content: center;
      font-size: clamp(14px, 3.5vw, 18px); flex: none;
      box-shadow: 0 6px 14px -3px rgba(0,29,57,0.3);
    }

    .stat-item:nth-child(1) .ic { background: linear-gradient(145deg, var(--shade2), var(--shade1)); }

    .stat-item:nth-child(2) .ic { background: linear-gradient(145deg, var(--shade4), var(--shade3)); }

    .stat-item:nth-child(3) .ic { background: linear-gradient(145deg, #7c5cd6, #5637a8); }

    .stat-item:nth-child(4) .ic { background: linear-gradient(145deg, #e08a4f, #c76a2e); }

    .stat-item:nth-child(5) .ic { background: linear-gradient(145deg, #e0b23d, #c4941f); }

    .stat-item:nth-child(6) .ic { background: linear-gradient(145deg, var(--shade5), var(--shade3)); }

    .stat-text { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

    .stat-item .num { font-weight: 800; font-size: clamp(12px, 3.4vw, 18px); color: var(--secondary); display: block; line-height: 1.25; }

    .stat-item .lbl { font-size: clamp(9px, 2.4vw, 12px); color: var(--gray); margin-left: 0; display: block; line-height: 1.3; }

    .stat-item .lbl-only { font-weight: 700; font-size: clamp(10.5px, 2.9vw, 14px); color: var(--secondary); display: block; line-height: 1.25; }

    .stat-item .lbl-sub { font-size: clamp(9px, 2.4vw, 11px); color: var(--gray); margin-left: 0; display: block; line-height: 1.3; }

    .stat-sep { display: none; }


    .offer { padding: 30px 0 26px; background: transparent; }

    .offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 18px; }

    .offer-card {
      position: relative; overflow: hidden;
      border: 1px solid rgba(189,216,233,0.5); border-radius: 20px; padding: 30px 18px 24px;
      text-align: center; transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); background: #fff;
      box-shadow: 0 12px 26px -8px rgba(0,29,57,0.14), 0 3px 8px rgba(0,29,57,0.05);
    }

    .offer-card::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, var(--shade2), var(--shade5));
      transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
    }

    .offer-card:hover::before { transform: scaleX(1); }

    .offer-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 24px 46px -10px rgba(0,29,57,0.28), 0 8px 16px rgba(0,29,57,0.1); border-color: transparent; }

    .offer-card .ic {
      width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; font-size: 24px; color: #fff;
      box-shadow: 0 10px 20px -4px rgba(0,29,57,0.3);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .offer-card:hover .ic { transform: rotate(-6deg) scale(1.08); }

    .offer-card h3 { font-size: 17px; font-weight: 700; color: var(--secondary); margin-bottom: 6px; }

    .offer-card p { font-size: 13px; color: var(--gray); margin-bottom: 12px; line-height: 1.5; }

    .c1 .ic { background: linear-gradient(145deg, var(--shade2), var(--shade1)); }

    .c2 .ic { background: linear-gradient(145deg, var(--shade4), var(--shade3)); }

    .c3 .ic { background: linear-gradient(145deg, #7c5cd6, #5637a8); }

    .c4 .ic { background: linear-gradient(145deg, #f0985a, #d97438); }

    .c5 .ic { background: linear-gradient(145deg, var(--shade5), var(--shade3)); }

    .offer-card .explore-link { font-size: 13.5px; font-weight: 700; color: var(--primary); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

    .offer-card .explore-link i { font-size: 12px; transition: 0.2s; }

    .offer-card .explore-link:hover i { transform: translateX(4px); }

    .explore-static { font-size: 13.5px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }


    .cities { padding: 0 0 22px; background: var(--primary-light); position: relative; }

    .skyline-strip { display: block; width: 100%; height: 60px; }

    .cities .container { padding-top: 22px; }

    /* Real India-monuments skyline banner used as the header of the city box */
    .city-banner {
      position: relative; width: 100%; height: 200px; overflow: hidden;
      background: linear-gradient(180deg,#eaf1ff 0%,#dbe8ff 100%);
    }

    .city-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

    .city-banner-text {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      padding: 14px 26px 16px; text-align: center;
      background: linear-gradient(180deg, rgba(0,29,57,0) 0%, rgba(0,29,57,0.55) 100%);
    }

    .city-banner-text .tag {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(0,29,57,0.72); backdrop-filter: blur(4px);
      color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px;
      padding: 6px 16px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.3);
    }

    .city-tabs { display: flex; justify-content: center; gap: 10px; margin: 16px 0 20px; flex-wrap: wrap; }

    .city-tab {
      padding: 10px 22px; border-radius: 40px; font-size: 13px; font-weight: 600;
      background: #fff; border: 1px solid var(--border); color: #1a2c44; cursor: pointer;
      transition: 0.15s;
    }

    .city-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    .city-tab:hover { border-color: var(--primary); }

    .city-list {
      background: #fff; border-radius: 20px; padding: 22px 26px;
      box-shadow: 0 8px 24px rgba(11,43,94,0.05);
    }

    .city-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px 8px; justify-items: center; }

    .city-grid span.c { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: #1a2c44; font-weight: 500; width: 100%; text-align: center; }

    .city-grid span.c i { color: var(--primary); font-size: 12px; width: 16px; text-align: center; }

    .note-line { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--gray); display: flex; align-items: center; justify-content: center; gap: 8px; }


    .subjects { padding: 18px 0; background: transparent; }

    .subject-chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

    .chip {
      display: flex; align-items: center; gap: 8px; padding: 10px 22px;
      border: 1px solid var(--border); border-radius: 40px; font-size: 14px;
      font-weight: 600; color: #1a2c44; background: #f8faff; transition: 0.15s;
    }

    .chip:hover { background: var(--primary-light); border-color: var(--primary); }


    .three-col { padding: 14px 0 22px; background: transparent; }

    .three-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

    .panel {
      border-radius: 24px; padding: 24px; background: #fff;
      border: 1px solid var(--border); transition: 0.2s;
    }

    .panel:hover { box-shadow: 0 12px 30px -8px rgba(11,43,94,0.06); }

    .panel h3 { font-size: 20px; font-weight: 800; margin-bottom: 14px; color: var(--secondary); }

    .panel ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; padding: 5px 0; color: #1a2c44; list-style: none; }

    .panel ul li i { color: var(--primary); margin-top: 3px; width: 18px; }

    .panel-teacher { border-top: 4px solid var(--green); }

    .panel-parent { border-top: 4px solid var(--primary); }

    .panel-why { border-top: 4px solid var(--accent); }

    .panel-img { border-radius: 16px; overflow: hidden; margin-bottom: 14px; height: 160px; }

    .panel-img img { width: 100%; height: 100%; object-fit: cover; }

    .step-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 50%; background: var(--primary);
      color: #fff; font-size: 12px; font-weight: 700; flex: none;
    }

    .trophy-wrap { display: flex; justify-content: center; margin: 4px 0 8px; font-size: 56px; }


    .trust { padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fafcff; }

    .trust-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 40px; }

    .trust-item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: #1a2c44; flex: 0 1 auto; min-width: 160px; }

    .trust-item i { color: var(--primary); font-size: 20px; width: 28px; }


    .section-title { text-align: center; font-size: 26px; font-weight: 700; color: var(--secondary); margin-bottom: 16px; position: relative; padding-bottom: 12px; }

    .section-title::after {
      content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 56px; height: 4px; border-radius: 4px;
      background: linear-gradient(90deg, var(--shade2), var(--shade6));
    }


    .card-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
      gap: 16px; margin: 20px 0;
    }

    .pick-card {
      border: 1px solid rgba(189,216,233,0.7); border-radius: 16px; padding: 22px 14px;
      text-align: center; font-weight: 700; color: var(--secondary);
      cursor: pointer; background: #fff; transition: 0.2s;
      box-shadow: 0 8px 18px -6px rgba(0,29,57,0.14), 0 2px 5px rgba(0,29,57,0.06);
    }

    .pick-card:hover { border-color: var(--primary); box-shadow: 0 14px 26px -6px rgba(0,29,57,0.2); transform: translateY(-3px); }

    .pick-card .sub { display: block; font-size: 12px; color: var(--gray); font-weight: 500; margin-top: 4px; }


    .res-panel {
      border: 1px solid rgba(189,216,233,0.7); border-radius: 20px; padding: 26px;
      margin-bottom: 30px; background: #f9fcff;
      box-shadow: 0 14px 30px -10px rgba(0,29,57,0.14), 0 4px 10px rgba(0,29,57,0.05);
    }

    .res-panel h3 { color: var(--secondary); margin-bottom: 16px; font-size: 18px; }


    .chapter-list { display: flex; flex-direction: column; gap: 6px; }

    .book-title { color: var(--primary); font-weight: 700; font-size: 14px; margin: 14px 0 4px; }

    .chapter-item {
      background: #fff; border: 1px solid var(--border); border-radius: 10px;
      padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: #1a2c44;
      cursor: pointer; transition: 0.1s;
    }

    .chapter-item:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

    .chapter-item.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    .chapter-block { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

    .chapter-block .chapter-item { border: none; border-radius: 0; }

    .chapter-accordion-panel {
      display: none; background: #f8faff; border-top: 1px solid var(--border);
      padding: 14px 16px;
    }

    .chapter-accordion-panel.open { display: block; }


    .res-list {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
      gap: 12px; margin-top: 16px;
    }

    .res-list div {
      background: #fff; border: 1px solid rgba(189,216,233,0.7); border-radius: 12px;
      padding: 14px; font-size: 14px; font-weight: 600; color: var(--primary);
      cursor: pointer; text-align: center; transition: 0.15s;
      box-shadow: 0 6px 14px -6px rgba(0,29,57,0.14), 0 2px 4px rgba(0,29,57,0.05);
    }

    .res-list div:hover { background: var(--primary-light); border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 20px -6px rgba(0,29,57,0.2); }

    .res-list div i { margin-right: 6px; }


    .content-display { margin-top: 16px; }

    .content-item {
      background: #fff; border: 1px solid var(--border); border-radius: 12px;
      padding: 16px 20px; margin-bottom: 12px;
      border-left: 4px solid var(--primary);
    }

    .content-item .title { font-weight: 700; color: var(--secondary); font-size: 15px; display: flex; justify-content: space-between; align-items: center; }

    .content-item .body { margin-top: 8px; font-size: 14px; color: var(--gray); line-height: 1.6; white-space: pre-wrap; }

    .file-preview {
      margin-top: 12px; border: 1px solid var(--border); border-radius: 8px;
      overflow: hidden; background: #f8faff; max-height: 220px;
    }

    .file-preview img { width: 100%; height: 220px; object-fit: contain; display: block; user-select: none; pointer-events: none; background:#fff; }

    .file-preview .file-info { padding: 15px; text-align: center; background: #f0f4ff; }

    .file-preview iframe { width: 100%; height: 220px; border: none; pointer-events: none; }

    .file-preview-toolbar {
      display: flex; justify-content: space-between; align-items: center;
      padding: 6px 12px; background: #eef2ff; font-size: 12px; font-weight: 700; color: var(--secondary);
    }

    .file-preview-toolbar button {
      background: var(--primary); color: #fff; border: none; border-radius: 20px;
      padding: 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
    }

    /* Compact view-only file chip (Study Material / Entrance Exam resources) */
    .content-file-chip {
      display: flex; align-items: center; gap: 8px; margin-top: 10px;
      background: #f0f4ff; border: 1px solid var(--border); border-radius: 30px;
      padding: 8px 14px; font-size: 12.5px; color: var(--secondary); font-weight: 600;
    }

    .content-file-chip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .content-file-chip .btn-sm { padding: 4px 12px; font-size: 11px; border-radius: 20px; }


    /* Festival / Occasion Popup Banner */
    .festival-popup-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,29,57,0.72);
      z-index: 10500; align-items: center; justify-content: center; padding: 20px;
      backdrop-filter: blur(4px); animation: fpFadeIn 0.3s ease;
    }

    .festival-popup-overlay.show { display: flex; }

    .festival-popup-box {
      position: relative; background: #fff; border-radius: 20px; max-width: 420px; width: 100%;
      overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.4);
      animation: fpPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .festival-popup-close {
      position: absolute; top: 10px; right: 10px; z-index: 2;
      width: 32px; height: 32px; border-radius: 50%; border: none;
      background: rgba(0,29,57,0.55); color: #fff; font-size: 15px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }

    .festival-popup-close:hover { background: rgba(0,29,57,0.8); }

    .festival-popup-img { width: 100%; display: block; }

    .festival-popup-default {
      background: linear-gradient(155deg, var(--shade1), var(--shade2));
      padding: 46px 26px 34px; text-align: center; color: #fff; position: relative; overflow: hidden;
    }

    .festival-popup-default::before {
      content: ""; position: absolute; inset: 0; opacity: 0.5;
      background-image: radial-gradient(circle, rgba(255,255,255,0.16) 1.4px, transparent 1.4px);
      background-size: 20px 20px;
    }

    .festival-popup-default .emoji { font-size: 52px; margin-bottom: 10px; position: relative; z-index: 1; }

    .festival-popup-default h2 { font-family: var(--font-heading, 'Poppins'), sans-serif; font-size: 24px; margin-bottom: 8px; position: relative; z-index: 1; }

    .festival-popup-default p { font-size: 14px; color: rgba(255,255,255,0.85); position: relative; z-index: 1; }

    .festival-popup-cta { padding: 16px 24px 24px; text-align: center; }


    

    /* In-page file viewer modal — opens ON the site instead of a new tab/page */
    .file-view-modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(11,30,51,0.72);
      z-index: 10000; align-items: center; justify-content: center; padding: 24px;
      backdrop-filter: blur(4px);
    }

    .file-view-modal-overlay.show { display: flex; }

    .file-view-modal-box {
      background: #fff; border-radius: 16px; width: 100%; max-width: 780px; max-height: 88vh;
      display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    }

    .file-view-modal-head {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 16px; background: var(--primary-light); font-weight: 700; color: var(--secondary); font-size: 14px;
    }

    .file-view-modal-head button { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--secondary); }

    .file-view-modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; background: #eef1f6; display: block; padding: 10px 0; }

    .file-view-modal-body img { width: 100%; height: auto; display: block; }

    .file-view-modal-body iframe { width: 100%; height: 78vh; border: none; display: block; }

    .view-only-wrap { position: relative; width: 100%; margin-bottom: 18px; background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.09); overflow: hidden; }

    .view-only-wrap:last-child { margin-bottom: 0; }

    .view-only-watermark { position: absolute; inset: 0; pointer-events: none; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; overflow: hidden; opacity: 0.09; transform: rotate(-28deg) scale(1.1); }

    .view-only-watermark span { font-size: 12px; font-weight: 800; color: #0b2b5e; white-space: nowrap; margin: 48px 60px; }


    .form-wrap {
      max-width: 720px; margin: 0 auto 60px; background: #fff;
      border: 1px solid var(--border); border-radius: 24px; padding: 36px 40px;
    }

    .form-section-title {
      color: var(--secondary); font-size: 17px; font-weight: 800;
      margin: 28px 0 14px; padding-bottom: 6px; border-bottom: 2px solid var(--primary-light);
    }

    .form-section-title:first-child { margin-top: 0; }

    .form-row { margin-bottom: 16px; }

    .form-row label { display: block; font-size: 13.5px; font-weight: 700; color: var(--secondary); margin-bottom: 5px; }

    .form-row input, .form-row select, .form-row textarea {
      width: 100%; padding: 12px 16px; border: 1px solid var(--border);
      border-radius: 12px; font-size: 14px; font-family: inherit; background: #fafcff;
      transition: 0.15s;
    }

    .check-inline-group { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px; background: var(--primary-light); border-radius: 10px; border: 1px solid var(--border); }

    .check-inline-group label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--secondary); margin: 0; }

    .check-inline-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

    .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
      outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(26,76,255,0.08);
    }

    .student-block {
      border: 1px dashed var(--border); border-radius: 16px; padding: 18px;
      margin-bottom: 16px; position: relative; background: #fafcff;
    }

    .student-block .remove-student {
      position: absolute; top: 12px; right: 12px;
      background: #fee9e7; color: #b91c1c; border: none;
      border-radius: 30px; padding: 4px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
    }

    .add-student-btn {
      background: #fff; border: 1.5px dashed var(--primary); color: var(--primary);
      padding: 12px; border-radius: 12px; width: 100%; font-weight: 700; font-size: 14px;
      cursor: pointer; margin-bottom: 18px; transition: 0.15s;
    }

    .add-student-btn:hover { background: var(--primary-light); }

    .policy-box {
      background: #f9f6f0; border-radius: 12px; padding: 16px 20px;
      font-size: 13px; color: #1a2c44; margin-bottom: 16px;
    }

    .policy-box li { margin-bottom: 6px; padding-left: 18px; position: relative; list-style: none; }

    .policy-box li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }

    .agree-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; font-size: 13.5px; }

    .agree-row input { width: auto; margin-top: 3px; }

    .success-box { display: none; text-align: center; padding: 30px 10px; }

    .success-box .ic { font-size: 48px; margin-bottom: 10px; }


    /* ===== Premium Membership: plan cards + payment box ===== */
    .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 18px; }

    .plan-card {
      position: relative; border: 2px solid var(--border); border-radius: 16px; padding: 18px 18px 16px;
      cursor: pointer; transition: 0.15s; background: #fff;
    }

    .plan-card:hover { border-color: var(--primary); }

    .plan-card.selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 6px 18px rgba(26,76,255,0.12); }

    .plan-card input[type="radio"] { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; }

    .plan-card .plan-name { font-weight: 800; font-size: 16px; color: var(--secondary); margin-bottom: 4px; }

    .plan-card .plan-price { font-weight: 800; font-size: 22px; color: var(--primary); margin-bottom: 8px; }

    .plan-card .plan-price span { font-size: 12px; font-weight: 600; color: var(--gray); }

    .plan-card ul { list-style: none; }

    .plan-card ul li { font-size: 12.5px; color: var(--gray); padding: 3px 0 3px 20px; position: relative; }

    .plan-card ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

    .plan-card.premium-card { border-color: #f6c98a; }

    .plan-card.premium-card.selected { border-color: var(--accent); background: #fff6ec; }

    .plan-card .plan-star-tag {
      position: absolute; top: -10px; left: 14px; background: var(--accent); color: #fff;
      font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    }

    .premium-payment-box {
      display: none; background: #fff6ec; border: 1.5px dashed var(--accent); border-radius: 14px;
      padding: 18px; margin: 4px 0 18px;
    }

    .premium-payment-box.show { display: block; }

    .premium-payment-box h4 { color: #8a5300; font-size: 15px; margin-bottom: 10px; }

    .pay-qr-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

    .pay-qr-box { width: 130px; height: 130px; flex: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 8px; }

    .pay-qr-box img { width: 100%; height: 100%; object-fit: contain; }

    .pay-upi-info { font-size: 13.5px; color: #4a3200; }

    .pay-upi-info .upi-id { font-weight: 800; font-size: 15px; color: var(--secondary); background: #fff; padding: 6px 12px; border-radius: 8px; display: inline-block; margin: 4px 0 6px; border: 1px solid var(--border); }

    .pay-amount-chip { display: inline-block; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 14px; border-radius: 20px; margin-top: 4px; }

    .badge-premium-pill {
      display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(120deg,#f6a93a,#f67b1e);
      color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.2px;
    }

    .premium-status-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; }

    .ps-pending { background: #fff3d6; color: #8a5300; }

    .ps-active { background: #E4EFF9; color: #0A4174; }

    .ps-rejected { background: #fde3e3; color: #a11d1d; }

    .ps-expired { background: #eceff3; color: #4a5a72; }

    .ps-none { background: #eceff3; color: #4a5a72; }

    .reject-reason-box { margin-top: 6px; font-size: 11.5px; color: #a11d1d; }


    /* ===== Homepage Notice / Announcement panel ===== */
    .notice-section { background: transparent; border-bottom: 1px solid var(--border); padding: 16px 0; }

    .notice-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }

    .notice-card {
      flex: 0 0 auto; min-width: 260px; max-width: 320px; background: var(--primary-light);
      border: 1px solid #d8e4ff; border-radius: 14px; padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start;
    }

    .notice-card .emoji { font-size: 20px; flex: none; }

    .notice-card .title { font-weight: 700; font-size: 13.5px; color: var(--secondary); margin-bottom: 2px; }

    .notice-card .desc { font-size: 12px; color: var(--gray); margin-bottom: 4px; }

    .notice-card .date { font-size: 10.5px; color: #7f8ea3; }

    .notice-card a.notice-link { font-size: 11.5px; font-weight: 700; color: var(--primary); text-decoration: none; }


    /* ===== Teacher Profiles Showcase ===== */
    .teacher-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 10px; }

    .teacher-card { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 6px 16px rgba(11,43,94,0.08); border: 1px solid var(--border); position: relative; text-align: center; transition: transform 0.2s ease; }

    .teacher-card:hover { transform: translateY(-4px); }

    .teacher-card .medal { position: absolute; top: 8px; left: 8px; font-size: 16px; }

    .teacher-card .plan-tag { position: absolute; top: 8px; right: 8px; font-size: 8.5px; font-weight: 800; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.3px; }

    .teacher-card .plan-tag.premium { background: linear-gradient(135deg,#f6c94a,#e6a12a); color: #4a3200; }

    .teacher-card .plan-tag.basic { background: var(--primary-light); color: var(--primary); }

    .teacher-card .photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 4px auto 8px; background: var(--primary-light); border: 2px solid var(--primary-light); }

    .teacher-card .name { font-weight: 800; font-size: 13.5px; color: var(--secondary); }

    .teacher-card .qual { font-size: 10.5px; color: var(--gray); margin-bottom: 4px; }

    .teacher-card .stars { color: #f6a93a; font-size: 11px; }

    .teacher-card .loc { font-size: 10px; color: var(--gray); margin: 3px 0; }

    .teacher-card .expertise-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 6px 0; }

    .teacher-card .expertise-tags span { background: var(--primary-light); color: var(--primary); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }

    .teacher-card .bio { font-size: 10.5px; color: #4a5a72; line-height: 1.4; margin: 6px 0; min-height: 28px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    .teacher-card .fee { font-weight: 800; color: var(--secondary); font-size: 12px; margin-top: 2px; }

    .teacher-card .btn-sm { padding: 6px 10px; font-size: 11px; }

    /* Homepage "Meet Our Teachers" preview only — a single scrollable row
       (not the full grid used on the dedicated "Our Teachers" page), so
       15-20 cards fit in the same vertical space as before; swipe or use
       the arrow buttons to see the rest. */
    #homepageTeacherPreviewGrid {
      display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding-bottom: 6px;
    }

    #homepageTeacherPreviewGrid::-webkit-scrollbar { display: none; }

    #homepageTeacherPreviewGrid .teacher-card { flex: 0 0 210px; scroll-snap-align: start; }

    /* Section heading + left/right arrow buttons, reused by every
       horizontal-scroll section (Teachers, Testimonials, Premium Leads). */
    .hscroll-nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

    .hscroll-nav-wrap .section-title { margin-bottom: 0; }

    .hscroll-arrow-btns { display: flex; gap: 8px; flex: none; }

    .hscroll-arrow-btns button {
      width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
      background: #fff; color: var(--primary); cursor: pointer; font-size: 13px;
      display: flex; align-items: center; justify-content: center; transition: 0.2s;
    }

    .hscroll-arrow-btns button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }


    /* ===== What We Offer banner (image, admin-editable) ===== */
    .offer-banner-wrap { margin: 6px 0 26px; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(11,43,94,0.08); }

    .offer-banner-wrap img { width: 100%; display: block; object-fit: cover; max-height: 340px; }


    /* ===== Homepage Notice / Announcement panel — boosted visibility ===== */
    .notice-section { background: linear-gradient(135deg,#fff8e6,#fff1cf); border-top: 1px solid #f3dd9e; border-bottom: 1px solid #f3dd9e; padding: 20px 0; }

    .notice-section .notice-heading { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: #8a5300; margin-bottom: 12px; }

    .notice-card { background: #fff; border: 1px solid #f0d69a; box-shadow: 0 4px 14px rgba(138,83,0,0.10); border-left: 5px solid #e6a12a; cursor: pointer; }

    .skel { background: linear-gradient(90deg, #eef1f6 25%, #e4e9f1 37%, #eef1f6 63%); background-size: 400px 100%; animation: skeletonPulse 1.3s ease-in-out infinite; border-radius: 8px; }

    .skel-card { background: #fff; border-radius: 14px; padding: 14px; border: 1px solid var(--border); }

    .skel-line { height: 10px; margin-bottom: 8px; }

    .skel-circle { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px; }

    /* ===== Parent Feedback / Testimonials ===== */
    .testimonials { background: var(--primary-light); padding: 24px 0; }

    .testimonial-grid {
      display: flex; flex-wrap: nowrap; gap: 18px; margin-top: 20px; overflow-x: auto;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding-bottom: 6px;
    }

    .testimonial-grid::-webkit-scrollbar { display: none; }

    .testimonial-grid .testimonial-card { flex: 0 0 300px; scroll-snap-align: start; }

    .testimonial-card { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 8px 24px rgba(11,43,94,0.06); }

    .testimonial-card .stars { color: #f6a93a; font-size: 13px; margin-bottom: 10px; }

    .testimonial-card .review { font-size: 13.5px; color: #33455e; line-height: 1.6; margin-bottom: 16px; min-height: 60px; }

    .testimonial-card .who { display: flex; align-items: center; gap: 12px; }

    .testimonial-card .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--primary-light); }

    .testimonial-card .who .name { font-weight: 700; font-size: 13.5px; color: var(--secondary); }

    .testimonial-card .who .loc { font-size: 11.5px; color: var(--gray); }

    .faq-section { padding: 30px 0 40px; background: #fff; }

    .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

    .faq-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fafcff; }

    .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 14px 16px; font-size: 14.5px; font-weight: 700; color: var(--secondary); display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }

    .faq-q i { transition: transform 0.2s ease; color: var(--primary); flex: none; }

    .faq-item.open .faq-q i { transform: rotate(180deg); }

    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }

    .faq-item.open .faq-a { max-height: 500px; }

    .faq-a p { padding: 0 16px 16px; font-size: 13.5px; color: #33455e; line-height: 1.6; margin: 0; }


    /* ===== Admin small pieces reused for premium / announcements / feedback ===== */
    .mini-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray); margin-top: 6px; width: 100%; }

    .img-thumb-sm { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--primary-light); }

    .max3-note { font-size: 11.5px; color: var(--accent); font-weight: 600; margin: 6px 0 10px; }

    .visibility-save-bar {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      background: #fff3e0; border: 1px solid #f6c98a; color: #8a5300;
      padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600;
    }

    .visibility-save-bar .pending-note { flex: 1; min-width: 180px; }

    .premium-leads-grid { grid-template-columns: repeat(3,1fr); }

    .premium-leads-grid .offer-card {
      text-align: left; position: relative; border-top: 4px solid #e6a12a;
      background: linear-gradient(180deg, #fffaf0 0%, #ffffff 22%);
    }

    .premium-leads-grid .offer-card .ic { margin: 0 0 10px; background: linear-gradient(135deg,#f6c94a,#e6a12a); color: #4a3200; }

    .premium-leads-grid .offer-card .lead-status-badge {
      position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
      padding: 4px 11px; border-radius: 20px; color: #fff; background: linear-gradient(135deg,#4a90e2,#1e5fc2);
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }


    .login-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px); z-index: 9999;
      display: none; align-items: center; justify-content: center;
    }

    .login-overlay.show { display: flex; }

    .login-box {
      background: #fff; border-radius: 24px; padding: 40px; max-width: 400px; width: 90%;
      box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    }

    .login-box h2 { color: var(--secondary); margin-bottom: 8px; }

    .login-box p { color: var(--gray); font-size: 14px; margin-bottom: 24px; }

    .login-box input {
      width: 100%; padding: 14px 16px; border: 1px solid var(--border);
      border-radius: 12px; font-size: 14px; margin-bottom: 12px;
    }

    .login-box input:focus { outline: none; border-color: var(--primary); }

    .login-box .error { color: var(--danger); font-size: 13px; margin-top: 8px; display: none; }

    .login-box .btn { width: 100%; justify-content: center; }


    .info-modal-overlay {
      position: fixed; inset: 0; background: rgba(11,43,94,0.55);
      backdrop-filter: blur(6px); z-index: 9999;
      display: none; align-items: center; justify-content: center; padding: 20px;
    }

    .info-modal-overlay.show { display: flex; }

    .info-modal-box {
      background: #fff; border-radius: 22px; padding: 32px; max-width: 480px; width: 100%;
      box-shadow: 0 30px 60px rgba(0,0,0,0.3); max-height: 85vh; overflow-y: auto; position: relative;
    }

    .info-modal-box .close-x { position: absolute; top: 16px; right: 18px; background: none; border: none; font-size: 20px; color: var(--gray); cursor: pointer; }

    .info-modal-box .trophy-wrap { margin: 0 0 8px; }

    .info-modal-box h3 { color: var(--secondary); font-size: 22px; margin-bottom: 16px; }

    .info-modal-box ul { list-style: none; padding: 0; }

    .info-modal-box ul li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--gray); }

    .info-modal-box ul li:last-child { border-bottom: none; }

    .info-modal-box ul li i { color: var(--accent); margin-top: 3px; flex: none; }

    .login-hint {
      margin-top: 12px; font-size: 12px; color: var(--gray);
      text-align: center; border-top: 1px solid var(--border);
      padding-top: 12px;
    }

    .stat-card {
      background: #fff; padding: 20px; border-radius: 16px;
      border: 1px solid var(--border); text-align: center;
    }

    .stat-card .number { font-size: 32px; font-weight: 800; color: var(--primary); }

    .stat-card .label { font-size: 14px; color: var(--gray); }

.pdfv-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:14px 0 18px;}

.pdfv-head h1{font-size:20px;color:var(--secondary);display:flex;align-items:center;gap:10px;margin:0;}

.pdfv-pages{font-size:12.5px;color:var(--gray);background:var(--primary-light);padding:5px 12px;border-radius:14px;font-weight:700;white-space:nowrap;}

.pdfv-pages-wrap{max-width:780px;margin:0 auto 60px;background:#eef1f6;border-radius:16px;padding:14px;}

.pdfv-pages-wrap img{width:100%;height:auto;display:block;border-radius:6px;}

.pdfv-page-num{position:absolute;right:10px;bottom:8px;background:rgba(0,29,57,.65);color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:10px;}

    .content-file-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; font-size: 13.5px; color: var(--secondary); font-weight: 600; }

    .content-file-chip span { flex: 1; min-width: 0; }

    .content-file-chip button { flex: none; }

    /* Compact icon buttons (Edit/Delete) — the show/hide checkbox itself
       reuses .mini-toggle-row, same as Announcements/Teacher Profiles. */
    .lead-action-row { display: flex; gap: 6px; margin-bottom: 8px; }

    #adminLeadTable .mini-toggle-row, #adminPremiumLeadsTable .mini-toggle-row {
      display: flex; padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 0;
    }

    select[multiple] {
      height: auto !important;
      min-height: 42px;
      padding: 6px 10px;
    }

    select[multiple] option:checked {
      background: var(--primary);
      color: #fff;
    }


    .img-cfg-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 16px; background: #fafcff; }

    .img-cfg-head { margin-bottom: 10px; font-size: 14px; color: var(--secondary); }

    .img-cfg-head .img-cfg-note { font-weight: 400; font-size: 12px; color: var(--gray); }

    .img-cfg-body { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }

    .img-cfg-preview { width: 130px; height: 95px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #eef2f8; flex: none; }

    .img-cfg-fields { flex: 1; min-width: 240px; }

    .file-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border: 2px dashed var(--primary); border-radius: 8px; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; text-align: center; }

    .file-btn:hover { background: var(--primary-light); }

    .mini-lbl { font-size: 11px; font-weight: 700; color: var(--gray); display: block; margin-bottom: 3px; }

    .content-type-tag {
      display: inline-block; padding: 2px 10px; border-radius: 12px;
      font-size: 11px; font-weight: 600;
    }

    .type-notes { background: #e3f2fd; color: #0d47a1; }

    .type-mindmap { background: #f3e5f5; color: #6a1b9a; }

    .type-exercise { background: #E4EFF9; color: #0A4174; }

    .type-extra { background: #fff3e0; color: #e65100; }

    .type-practice { background: #fce4ec; color: #880e4f; }

    .type-pyq { background: #e0f7fa; color: #006064; }


    .detail-container {
      margin-top: 20px;
      padding: 20px;
      background: #f8faff;
      border-radius: 16px;
      border: 1px solid var(--border);
      display: none;
    }

    .detail-container.show { display: block; }


    .lead-toggle {
      position: fixed; right: 0; top: 46%; transform: translateY(-50%);
      background: #ff0000; color: #fff; border: none;
      padding: 16px 10px; border-radius: 12px 0 0 12px;
      font-weight: 700; font-size: 13px; cursor: pointer;
      writing-mode: vertical-rl; letter-spacing: 1px; z-index: 200;
      box-shadow: -6px 0 20px rgba(255,0,0,0.35);
    }

    .lead-sidebar {
      position: fixed; top: 0; right: -400px; width: 380px; height: 100%;
      background: #fff; z-index: 210; box-shadow: -12px 0 40px rgba(0,0,0,0.1);
      transition: right 0.3s ease; display: flex; flex-direction: column;
    }

    .lead-sidebar.open { right: 0; }

    .lead-head {
      background: var(--secondary); color: #fff; padding: 20px 22px;
      display: flex; justify-content: space-between; align-items: center;
    }

    .lead-head h3 { font-size: 16px; font-weight: 700; }

    .lead-head span { font-size: 12px; color: #b8cce0; }

    .lead-close {
      background: rgba(255,255,255,0.1); border: none; color: #fff;
      width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px;
    }

    .lead-body { padding: 18px; overflow-y: auto; flex: 1; background: #f5f9ff; }

    .lead-card {
      background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: 14px;
      padding: 16px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    .lead-card.status-open { border-left-color: var(--green); }

    .lead-card.status-closed { border-left-color: #9aa5b1; }

    .lead-card .top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

    .lead-card .lead-id { font-weight: 700; font-size: 12px; color: var(--primary); background: var(--primary-light); padding: 2px 10px; border-radius: 12px; }

    .lead-card .name { font-weight: 700; font-size: 15px; color: var(--secondary); }

    .lead-tag { font-size: 10.5px; font-weight: 800; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.3px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }

    .tag-new { background: linear-gradient(135deg,#ff8a3d,#e6621a); }

    .tag-open { background: linear-gradient(135deg,#4a90e2,#1e5fc2); }

    .tag-closed { background: linear-gradient(135deg,#9aa5b1,#6c757d); }

    .lead-card .meta { font-size: 12.5px; color: var(--gray); display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }

    .lead-card .pref { font-size: 12px; color: var(--secondary); background: #eef2ff; padding: 2px 10px; border-radius: 12px; display: inline-block; margin-top: 4px; }

    .lead-card .budget { font-size: 14px; font-weight: 700; color: var(--primary); margin-top: 6px; }

    .lead-card .whatsapp-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      width: 100%; margin-top: 10px; padding: 8px 12px; border-radius: 40px;
      border: none; background: #0A4174; color: #fff; font-weight: 600; font-size: 12.5px;
      cursor: pointer; transition: 0.15s; text-decoration: none;
    }

    .lead-card .whatsapp-btn:hover { background: #001D39; }

    .lead-footer {
      padding: 14px 18px; border-top: 1px solid var(--border);
      font-size: 11px; color: var(--gray); text-align: center; background: #fff;
    }

    .overlay {
      position: fixed; inset: 0; background: rgba(11,30,51,0.3);
      backdrop-filter: blur(2px); z-index: 205; display: none;
    }

    .overlay.show { display: block; }


    .toast {
      position: fixed; bottom: 30px; right: 30px; background: var(--secondary);
      color: #fff; padding: 16px 24px; border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2); z-index: 999;
      transform: translateY(100px); opacity: 0; transition: all 0.3s ease;
    }

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


    footer {
      background: #0b1e33; color: #b8cce0; padding: 34px 0 16px; margin-top: 20px;
    }

    .footer-grid {
      display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
      gap: 24px; margin-bottom: 20px;
    }

    footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }

    footer ul { list-style: none; }

    footer ul li { margin-bottom: 8px; font-size: 13.5px; }

    footer ul li a { color: #b8cce0; cursor: pointer; text-decoration: none; }

    footer ul li a:hover { color: #fff; }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 18px; display: flex; justify-content: space-between;
      font-size: 12.5px; color: #8aa3c4; flex-wrap: wrap; gap: 10px;
    }

    .footer-bottom-links a { color: #8aa3c4; text-decoration: none; cursor: pointer; }

    .footer-bottom-links a:hover { color: #fff; }

    .footer-logo-row { display: flex; align-items: center; gap: 10px; }

    .footer-app-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

    .app-btn {
      display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 12.5px; font-weight: 600;
      padding: 8px 14px; border-radius: 10px; cursor: pointer; text-decoration: none;
    }

    .app-btn:hover { background: rgba(255,255,255,0.14); }

    footer ul li i { width: 16px; color: #6f8fd9; }


/* ================= v2 UI: Latest Updates / Admin sidebar / Registration / Floating widgets ================= */
:root{--u-navy:#0b2a66;--u-blue:#1e6be0;--u-soft:#eef5ff;--u-line:#d6e4f7;--u-red:#e5323b}

/* ---------- Latest Education Updates (home) ---------- */
.upd-section{padding:22px 0 10px;background:transparent;border:0}

.upd-box{background:#fff;border:1px solid var(--u-line);border-radius:18px;padding:18px;box-shadow:0 8px 26px rgba(11,42,102,.07)}

.upd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}

.upd-head h2{display:flex;align-items:center;gap:10px;font-size:20px;color:var(--u-navy);font-weight:800;margin:0}

.upd-head h2 i{width:34px;height:34px;border-radius:10px;background:#fde8ea;color:var(--u-red);display:flex;align-items:center;justify-content:center;font-size:15px}

.upd-all{color:var(--u-blue);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;background:none;border:0}

.upd-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}

.upd-feat{display:grid;grid-template-columns:170px 1fr;gap:16px;background:#fff;border:1px solid var(--u-line);border-radius:16px;padding:14px;box-shadow:0 4px 16px rgba(11,42,102,.06)}

.upd-thumb{position:relative;border-radius:12px;overflow:hidden;min-height:150px;background:linear-gradient(135deg,#0b2a66,#1e6be0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px}

.upd-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.upd-thumb .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:10.5px;padding:14px 8px 6px;font-weight:600}

.upd-flag{position:absolute;top:8px;left:8px;background:var(--u-red);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;z-index:2}

.upd-chip{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:14px;white-space:nowrap}

.upd-feat h3{font-size:19px;color:var(--u-navy);font-weight:800;line-height:1.3;margin:8px 0 6px}

.upd-feat p{font-size:13.5px;color:var(--gray);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.upd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}

.upd-date{font-size:12.5px;color:#5a6b85;display:flex;align-items:center;gap:6px}

.upd-btn{background:var(--u-navy);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}

.upd-list{background:#fff;border:1px solid var(--u-line);border-radius:16px;padding:6px 14px;box-shadow:0 4px 16px rgba(11,42,102,.06)}

.upd-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #e9f0fa;cursor:pointer}

.upd-row:last-child{border-bottom:0}

.upd-ico{flex:none;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background-size:cover;background-position:center}

.upd-row .t{font-weight:700;font-size:13.5px;color:var(--u-navy);line-height:1.35}

.upd-row .s{font-size:12px;color:#6b7c95;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.upd-row .m{margin-left:auto;text-align:right;flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}

.upd-row .m .upd-date{font-size:11.5px}

.upd-empty{padding:22px;text-align:center;color:var(--gray);font-size:14px}

/* updates page */
.upd-filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}

.upd-filters button{border:1px solid var(--u-line);background:#fff;color:var(--u-navy);font-weight:700;font-size:13px;padding:7px 14px;border-radius:20px;cursor:pointer;font-family:inherit}

.upd-filters button.on{background:var(--u-navy);color:#fff;border-color:var(--u-navy)}

.upd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:50px}

.upd-card{background:#fff;border:1px solid var(--u-line);border-radius:16px;overflow:hidden;cursor:pointer;box-shadow:0 4px 16px rgba(11,42,102,.06);display:flex;flex-direction:column}

.upd-card .upd-thumb{border-radius:0;min-height:150px}

.upd-card .b{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}

.upd-card h3{font-size:15.5px;color:var(--u-navy);font-weight:800;line-height:1.35}

.upd-card p{font-size:13px;color:var(--gray);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* detail page */
.udt-wrap{max-width:1180px;margin:0 auto 60px;padding-top:14px}

.udt-crumb{font-size:13px;color:#5a6b85;margin-bottom:14px}

.udt-crumb a{color:var(--u-blue);font-weight:600;cursor:pointer}

.udt-frame{border:1.5px solid #9cc2f2;border-radius:20px;padding:16px;background:#f6faff}

.udt-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}

.udt-main{background:#fff;border-radius:16px;padding:20px;border:1px solid var(--u-line)}

.udt-badge{display:inline-flex;align-items:center;gap:6px;background:var(--u-red);color:#fff;font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:8px}

.udt-main h1{font-size:30px;color:var(--u-navy);font-weight:800;line-height:1.25;margin:12px 0 16px}

.udt-mid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}

.udt-mid .upd-thumb{min-height:220px;border-radius:12px}

.udt-sum{background:var(--u-soft);border:1px solid var(--u-line);border-radius:12px;padding:14px 16px}

.udt-sum h4{font-size:14.5px;color:var(--u-navy);font-weight:800;margin-bottom:6px}

.udt-sum p{font-size:13.5px;color:#3f5170;line-height:1.6;white-space:pre-line}

.udt-kp{margin-top:14px}

.udt-kp h4{font-size:14.5px;color:var(--u-navy);font-weight:800;margin-bottom:8px;display:flex;gap:8px;align-items:center}

.udt-kp h4 i{color:var(--u-blue)}

.udt-kp li{list-style:none;display:flex;gap:9px;font-size:13.5px;color:#3f5170;line-height:1.5;margin-bottom:8px}

.udt-kp li i{color:var(--u-blue);margin-top:3px}

.udt-src{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--u-soft);border:1px solid var(--u-line);border-radius:12px;padding:12px 14px}

.udt-src .ic{width:44px;height:44px;border-radius:12px;background:#fff;color:#6d28d9;display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid var(--u-line)}

.udt-src b{color:#6d28d9;font-size:15px;display:block}

.udt-src a.u{font-size:12.5px;color:#3f5170;word-break:break-all}

.udt-src .upd-btn{margin-left:auto;text-decoration:none;background:var(--u-blue);display:inline-block}

.udt-side .card{background:#fff;border:1px solid var(--u-line);border-radius:16px;padding:16px;margin-bottom:14px}

.udt-side h4{font-size:15px;color:var(--u-navy);font-weight:800;margin-bottom:10px}

.udt-side .upd-row{padding:10px 0}

.udt-side .upd-btn{width:100%;margin-top:10px;background:var(--u-navy)}

.udt-share{display:flex;gap:10px;flex-wrap:wrap}

.udt-share a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;text-decoration:none}

.udt-fig{margin:0 0 14px;border-radius:12px;overflow:hidden;background:#eef3fb;border:1px solid var(--u-line)}

.udt-fig img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;margin:0 auto}

.udt-fig figcaption{font-size:11.5px;color:#5a6b85;padding:6px 10px;text-align:center}

.udt-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12.5px;color:#5a6b85;margin:-4px 0 14px}

.udt-ver{display:inline-flex;align-items:center;gap:5px;background:#e6f6ec;color:#177a3c;font-weight:700;font-size:12px;padding:3px 10px;border-radius:14px}

.udt-sec{margin-top:18px}

.udt-sec h2,.udt-sec h4{font-size:15px;color:var(--u-navy);font-weight:800;margin-bottom:8px;display:flex;gap:8px;align-items:center}

.udt-sec h4 i,.udt-sec h2 i{color:var(--u-blue)}

.udt-txt{font-size:14px;color:#3f5170;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere}

.udt-list{margin:0;padding-left:20px;font-size:14px;color:#3f5170;line-height:1.6}

.udt-list li{margin-bottom:6px;list-style:disc}

ol.udt-list li{list-style:decimal}

.udt-tblwrap{overflow-x:auto;border:1px solid var(--u-line);border-radius:12px}

.udt-tbl{width:100%;border-collapse:collapse;font-size:13.5px}

.udt-tbl td{padding:10px 14px;border-bottom:1px solid var(--u-line);vertical-align:top;color:#3f5170}

.udt-tbl tr:last-child td{border-bottom:0}

.udt-tbl td:first-child{font-weight:700;color:var(--u-navy);width:42%;background:var(--u-soft)}

.udt-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}

.udt-links a{display:flex;align-items:center;gap:10px;border:1px solid var(--u-line);border-radius:12px;padding:11px 14px;font-weight:700;font-size:13.5px;color:var(--u-navy);background:#fff;text-decoration:none;overflow-wrap:anywhere;cursor:pointer}

.udt-links a i{color:var(--u-blue)}

.udt-links a.pri{background:var(--u-blue);color:#fff;border-color:var(--u-blue)}

.udt-links a.pri i{color:#fff}

.udt-note{margin-top:16px;font-size:12px;color:#6b7c95}

.udt-body p{font-size:14.5px;color:#33455e;line-height:1.75;margin:0 0 12px;overflow-wrap:anywhere}

.udt-body h2{font-size:19px;color:var(--u-navy);margin:20px 0 8px}

.udt-body h3{font-size:16px;color:var(--u-navy);margin:16px 0 6px}

.udt-body a{color:var(--u-blue);font-weight:600;text-decoration:underline;cursor:pointer}

/* Homepage Education Update card: compact thumbnail (Step 4) */
.upd-feat{grid-template-columns:130px 1fr}

.upd-feat .upd-thumb{min-height:0;aspect-ratio:1/1;max-height:130px;font-size:34px;align-self:start}

.upd-feat .upd-flag{font-size:10px;padding:2px 6px;top:6px;left:6px}

.upd-feat .upd-thumb .cap{display:none}

#admMenuBtn{display:none;background:#0b1f4a;color:#fff;border:0;border-radius:12px;padding:11px 16px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;align-items:center;gap:8px;flex:none}

#admBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10040}

#admCollapseTab{display:none;position:sticky;top:124px;align-self:flex-start;margin-left:-32px;background:var(--u-navy,#0b2a66);color:#fff;border:0;border-radius:0 10px 10px 0;padding:14px 6px;font-weight:700;font-size:11px;cursor:pointer;writing-mode:vertical-rl;letter-spacing:1px;box-shadow:4px 4px 14px rgba(11,42,102,.25);z-index:20;flex:none;}

.up-img{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.up-img img{width:110px;height:62px;object-fit:cover;border-radius:8px;border:1px solid var(--u-line);background:#eef3fb}


/* ---------- Registration forms ---------- */
.reg-head .reg-title{display:flex;align-items:center;gap:14px;margin-top:8px}

.reg-head .reg-ic{width:58px;height:58px;border-radius:16px;background:#fff;border:1px solid var(--u-line);color:var(--u-blue);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none;box-shadow:0 4px 12px rgba(11,42,102,.08)}

.reg-head p{color:var(--gray);font-size:14px;margin-top:2px}

.reg-strip{max-width:1240px;margin:18px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#fff;border:1px solid var(--u-line);border-radius:14px;padding:12px}

.reg-strip div{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--u-navy)}

.reg-strip i{width:34px;height:34px;border-radius:10px;background:var(--u-soft);color:var(--u-blue);display:flex;align-items:center;justify-content:center;flex:none}

.reg-layout{display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:18px;max-width:1240px;margin:18px auto 60px;align-items:start}

.reg-layout .form-wrap{max-width:none;margin:0;padding:26px 30px;border-radius:18px;border-color:var(--u-line);box-shadow:0 8px 26px rgba(11,42,102,.06)}

.reg-layout form,.reg-layout .student-block{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}

.reg-layout form > *,.reg-layout .student-block > *{grid-column:1/-1}

.reg-layout .form-row{grid-column:auto;margin-bottom:14px}

.reg-layout .form-row:has(textarea),.reg-layout .form-row:has(.check-inline-group){grid-column:1/-1}

.reg-layout .form-row label{font-size:13px}

.reg-layout .form-row input,.reg-layout .form-row select,.reg-layout .form-row textarea{padding:11px 12px;border-radius:9px;background:#fff}

.reg-layout .form-section-title{color:var(--u-navy);font-size:16px;border-bottom:1px solid var(--u-line);padding-bottom:8px}

.reg-layout .form-section-title i{color:var(--u-blue);margin-right:6px}

.reg-layout .student-block{background:#f8fbff}

.reg-layout button[type=submit]{background:var(--u-navy);border-radius:10px;padding:14px;font-size:15px}

.reg-side{position:sticky;top:110px}

.reg-side .card{background:#fff;border:1px solid var(--u-line);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 4px 16px rgba(11,42,102,.05)}

.reg-side h3{font-size:14.5px;color:var(--u-navy);font-weight:800;margin-bottom:10px}

.reg-side .it{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:11.5px;color:#3f5170;line-height:1.35}

.reg-side .it i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-size:12px}

.reg-quote{text-align:left;overflow:hidden}

.reg-quote q{display:block;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:14.5px;color:var(--u-navy);line-height:1.3;quotes:none}

.reg-quote .art{margin-top:10px;width:100%;display:block;border-radius:10px;overflow:hidden}

.reg-quote .art svg{width:100%;height:auto;display:block}

.reg-quote .reg-side-img{width:100%;border-radius:10px;margin-top:10px;display:block;object-fit:cover;max-height:150px}


/* ---------- Floating FAQ / Ask widgets (styled like the chatbot bubble) ---------- */
.fw-dock{position:fixed;right:16px;bottom:var(--alti-clear,98px);z-index:9990;display:none;flex-direction:column;gap:14px;align-items:center}

.fw-dock.left{right:auto;left:16px;bottom:20px}

.fw-item{position:relative}

.fw-btn{width:64px;height:64px;border-radius:50%;background:var(--u-navy);color:#fff;border:0;font-size:25px;cursor:pointer;box-shadow:0 8px 24px rgba(11,42,102,.4);display:flex;align-items:center;justify-content:center;font-family:inherit}

.fw-btn.ask{background:#1e6be0;box-shadow:0 8px 24px rgba(30,107,224,.4)}

.fw-panel{position:fixed;right:16px;bottom:calc(var(--alti-clear,98px) + 74px);z-index:9995;width:min(390px,92vw);max-height:min(560px,calc(100vh - 150px));background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.28);border:1px solid var(--u-line);display:none;flex-direction:column;overflow:hidden}

.fw-panel.left{right:auto;left:16px;bottom:98px}

.fw-panel.show{display:flex}

.fw-head{display:flex;align-items:center;justify-content:space-between;background:var(--u-navy);color:#fff;padding:12px 14px;font-weight:700;font-size:14.5px}

.fw-head button{background:none;border:0;color:#fff;font-size:16px;cursor:pointer}

.fw-body{overflow-y:auto;padding:12px;background:#f6faff}

.fw-body .faq-section{padding:0;background:transparent;display:block}

#fwPanel-faq #faqSection{display:block!important}

.fw-empty{display:none;text-align:center;color:var(--gray);font-size:13.5px;padding:18px}

#faqList:empty + .fw-empty,#faqList:empty ~ .fw-empty{display:block}

.fw-body .community-form-card{max-width:none;border:0;padding:0;background:transparent}

.fw-note{font-size:12.5px;color:var(--gray);margin-bottom:10px;line-height:1.5}


  

  .community-section-unused { padding: 10px 0 46px; background: var(--primary-light); }

  .community-form-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }

  .community-form-card select, .community-form-card input, .community-form-card textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 13.5px; }

/* ---- keyframe animations ---- */

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

    @keyframes heroFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-14px) rotate(6deg); }
    }

    @keyframes fpFadeIn { from { opacity: 0; } to { opacity: 1; } }

    @keyframes fpPop { from { opacity: 0; transform: scale(0.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

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


    /* ===== Loading skeleton (Teacher / Announcement / Testimonial sections) ===== */
    @keyframes skeletonPulse { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }