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

  body {
    font-family: 'Inter', sans-serif;
    background: #f7f5f2;
    color: #1a1a1a;
    min-height: 100vh;
  }

  /* ── NAV ── */
  nav {
    display: flex;
    align-items: center;
    /* .nav-links used flex:1 to push the Login button to the right edge.
       That worked, but with the default flex-start packing, ALL of the
       leftover width landed in one spot — after the last link, before
       Login — while every link-to-link gap stayed a fixed 33px. On a
       1366px screen that showed up as an 80px gap next to 33px ones.
       space-between here divides the row into three groups (logo / links
       / actions) so the slack splits into two matched gaps instead of
       piling into one. */
    justify-content: space-between;
    /* Without a ceiling, that same space-between slack grows with the
       viewport — 15px at 1366px, 292px by 1920px. Capping nav to the same
       1400px the rest of the site uses (--container-width in Global.css)
       keeps it in the range that reads as "the same gap family" as the
       33px link gaps on any screen, instead of ballooning on wide ones. */
    /* The bar itself now runs the full width of the viewport; only its
       CONTENTS stay on the site's 1400px measure, via the padding below.
       Capping the element meant the bar stopped short of the edges and read
       as floating with a gap on either side on anything wider than 1400. */
    width: 100%;
    /* Floor for the two space-between gaps below 1400px — without it the
       links-to-Login gap can shrink to 0 around 1280px, where there just
       isn't much slack left to distribute. `gap` and `justify-content`
       compose: this is a minimum, space-between still adds whatever slack
       remains beyond it. */
    /* Below 1400 every one of these clamps is what buys the row its width
       back: at and above 1400 they all sit at their maximum, so the bar is
       pixel-identical to what it was. */
    gap: clamp(10px, 1.1vw, 24px);
    /* max() keeps the old 56px gutter on narrow screens and, once the viewport
       passes 1400, grows it so the logo and Login land exactly where the
       1400px cap used to put them. */
    padding-inline: max(clamp(18px, 2.6vw, 56px), calc((100% - 1400px) / 2));
    padding-block: 0;
    height: 76px;
    background: linear-gradient(
    90deg,
    #fbf6f3 0%,
    #f9f2ed 50%,
    #f6ece6 100%
);
    /* box-shadow: 0 1px 0 #ede9e3; */
    box-shadow: 0 8px 24px rgba(214, 177, 146, 0.12);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* No radius now that the bar meets the viewport edges — rounded corners
       only made sense while it floated inside a gutter. */
    overflow:visible;
  }

  .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: clamp(12px, 2.2vw, 52px);
    text-decoration: none;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    /* overflow:hidden above removes the browser's normal "don't shrink
       past content size" floor for a flex item, so when nav-links/
       nav-actions get wide (e.g. the logged-in "My Courses"+"Logout"
       state), the logo was the one item with room to squeeze — down to
       a sliver. flex-shrink:0 keeps it at full size regardless. */
    flex-shrink: 0;
  }
  .logo img{
    width: auto;
    /* Was height:98%. There is an inline <div> between .logo and this <img>
       with no height of its own, so the percentage had nothing to resolve
       against and fell back to auto -- the logo was being sized by the PNG's
       own pixel height, not by this rule. Which meant the file could never
       be larger than the size it was meant to paint at, and on a retina
       screen it was always soft.

       114px is what auto was resolving to, so this changes nothing on screen
       and frees the file to ship at 3x. .logo keeps overflow:hidden, so the
       transparent margin above and below the mark is trimmed to the bar
       exactly as before. */
    height: 114px;
    display: block;
    max-height: none;
    object-fit: contain;
}

  .logo-sub {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #555;
    margin-top: 1px;
    text-transform: uppercase;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(13px, 1.5vw, 33px);
    list-style: none;
  }

  /* .nav-links > li { position: relative; } */

  /* Scoped to direct children for the same reason as the "FIGMA PARITY"
     block further down: an unscoped `.nav-links a` also matches
     .dd-item-link three levels down inside the KickStarter dropdown, so
     Udaan 90 was picking up top-level nav-link sizing instead of the
     16px every other dropdown row gets from .dd-item. */
  .nav-links > li > a {
    text-decoration: none;
    font-size: clamp(13px, 0.95vw, 15px);
    font-weight: 500;
    color: #333;
    transition: color .2s;
    white-space: nowrap;
  }

  .nav-links > li > a:hover { color: #f47b20; }

  .nav-links .active {
    color: #f47b20;
    border-bottom: 2px solid #f47b20;
    padding-bottom: 8px;
    font-size: clamp(15px, 1.28vw, 18px);
    padding: 10px clamp(4px, .7vw, 10px);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    gap: 30px;
    margin-left:clamp(10px, 2vw, 45px);
    margin-right: 30px;
  }
  .nav-links .res{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 17px;
    padding: 10px;
    padding-bottom: 8px;
    gap: 30px;
  }

  .nav-links .refer-link {
    display: flex;
    align-items: center;
    gap: 0px;
    font-family:'Poppins',sans-serif;
    font-size:17px;
    font-weight:600;
  }

  .gift-animation{
    width: 60px;
    height:60px;
    margin-right:-8px;
    flex-shrink:0;
    margin: 0;
    padding: 0;
    transform: translateX(6px);
}

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    z-index: 1002;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  .menu-toggle:hover {
    background: #f1f5f9;
  }
  .menu-toggle:active {
    transform: scale(0.95);
  }
  .menu-toggle .bar {
    display: block;
    width: 22px;
    height: 2.2px;
    background-color: #1f2937;
    border-radius: 3px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                background-color 0.28s ease;
    transform-origin: center;
  }
  .menu-toggle.is-active {
    background: #fff7ed;
    border-color: rgba(255, 107, 0, 0.3);
  }
  .menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(7.2px) rotate(45deg);
    background-color: #ff6b00;
  }
  .menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-6px);
  }
  .menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-7.2px) rotate(-45deg);
    background-color: #ff6b00;
  }

  .btn-login {
    border: 1.5px solid #f47b20;
    background: transparent;
    color: #f47b20;
    padding: 8px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
  }
  .btn-login:hover { background: #fff5ed; }

  /* .nav-actions .btn-signup{
    background:#f47b20;
    color:#fff;
    border:none;
    padding:10px 24px;
    border-radius:8px;
    font-size:15px;
    font-family:'Poppins',sans-serif;
    font-weight:600;
}
  .btn-signup:hover { background: #d96a10; } */

  /* ── KICKSTARTER DROPDOWN TRIGGER ── */
  .ks-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    user-select: none;
    padding: 10px 0;
    transition: color .2s;
    font-family: 'Poppins', sans-serif;
    height: 100%;
  }
  .ks-trigger:hover, .ks-trigger.open { color: #f47b20; }

  .ks-trigger .chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s;
    font-size: 24px;
    line-height: 1;
    margin-top: 1px;
  }
  .ks-trigger.open .chevron { transform: rotate(180deg); }

  /* ── LEVEL-1 DROPDOWN ── */
  .ks-dropdown {
    position: absolute;
    top: 100%;
    margin-top: 8px;
    left: 0;
    background: #f7ece2;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    min-width: 270px;
    max-height: min(400px, calc(100vh - 140px));
    max-height: min(400px, calc(100dvh - 140px));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 123, 32, 0.4) transparent;
    padding: 3px 0;
    display: none;
    z-index: 9999;
    border: none;
  }

  .ks-dropdown::-webkit-scrollbar {
    width: 5px;
  }
  .ks-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }
  .ks-dropdown::-webkit-scrollbar-thumb {
    background: rgba(244, 123, 32, 0.4);
    border-radius: 4px;
  }
  .ks-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(244, 123, 32, 0.7);
  }

  #ks-nav-item{
    position:relative;
    display: flex;
    align-items: center;
    height: 76px;   /* same as navbar */
}
  .ks-dropdown.open { display: block; animation: fadeSlide .2s ease; }

  @keyframes fadeSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* shared item style for both levels */
  .dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 14.5px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    transition: background .15s, color .15s;
    position: relative;
    gap: 8px;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .dd-item:last-child { border-bottom: none; }
  .dd-item:hover { background: rgba(244,123,32,.08); color: #f47b20; }
  .dd-item.active-cat { background: rgba(244,123,32,.08); color: #f47b20; }

  .dd-item .dd-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: #f47b20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
  }
  .dd-item .dd-label { flex: 1; }
  .dd-item .dd-arrow {
    font-size: 13px;
    color: #888;
    transition: transform .2s;
  }

  .dd-item.active-cat .dd-arrow { transform: rotate(180deg); color: #f47b20; }

  /* First row of the Udaan 90 submenu: a normal .sub-item link, styled
     slightly bolder so "go to the overview page" reads as distinct from
     the 15 individual course links below it. */
  .sub-item-all {
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* ── LEVEL-2 SUBMENU (inline accordion) ── */
  .sub-menu {
    display: none;
    background: #fdf9f5;
    border-left: 3px solid #f47b20;
    margin: 0 6px 2px 16px;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
  }
  .sub-menu.open { display: block; animation: fadeSlide .18s ease; }

  .sub-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
  }
  .sub-item:hover { background: #ffeedd; color: #f47b20; }

  .sub-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f47b20;
    flex-shrink: 0;
    opacity: .5;
  }
  .sub-item:hover .dot { opacity: 1; }

  .dd-divider {
    height: 1px;
    background: #f0ebe4;
    margin: 4px 12px;
  }


/* ==========================
   SCROLL STATE

   Figma draws the header as a warm glass bar with rounded
   bottom corners and a very soft, very wide shadow. js/animations.js
   toggles .is-scrolled past 40px; without that script the bar
   simply keeps its default look.
========================== */

nav{
    background:var(--grad-nav,linear-gradient(63deg,rgba(255,255,255,.75) 0%,#F1E0D6 100%));
    /* The rounded bottom corners came from the Figma header, which floated
       inside a gutter. The bar meets the viewport edges now, so a radius
       would leave two notches of page showing through at the corners. */
    border-radius:0;
    transition:
        box-shadow var(--dur-base,320ms) var(--ease-out,ease),
        backdrop-filter var(--dur-base,320ms) var(--ease-out,ease);
}

nav.is-scrolled{
    backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(0,0,0,.10);
}

/* No underline here: the Figma header marks the current page with orange
   text alone, and `.nav-links .active` already draws its own border-bottom.
   Adding a second rule stacked two lines under the active item. */

.nav-links > li > a,
.nav-links .ks-trigger{
    transition:color var(--dur-base,320ms) var(--ease-out,ease);
}

/* ==========================
   NAVBAR — FIGMA PARITY

   The base rules above size each link differently (a=15px, .res=17px,
   .active=18px+border-bottom), so "Home" visibly jumped in size/weight
   the moment it became the active page — the header looked like a
   different navbar depending which page you were on. Figma sets every
   item in Inter Medium 18.2/black and marks the current page with orange
   text alone, no size change and no rule. Applied unscoped so every page
   shares this one header, not just the pages that happened to opt in.
========================== */

/* `.nav-links a` (no `>`) matched any link anywhere under a top-level <li>
   — including .dd-item-link three levels down inside the KickStarter
   dropdown, which is why Udaan 90 rendered at this rule's 18.2px instead
   of the 16px every other dropdown row gets from .dd-item. Scoped to
   direct children only; every top-level link (Home, .res, .refer-link,
   .ks-trigger) is still one, so nothing else changes. */
.nav-links > li > a,
.nav-links .res,
.nav-links .refer-link,
.nav-links .ks-trigger{
    /* Same box size as .active below (padding, margin) — only the color
       should change when a link becomes the active page. Before this,
       .active carried +10px padding that plain links didn't, so every
       item after "Home" visibly shifted position depending on whether
       Home was the active page or not (i.e. shifted between pages). */
    padding:10px;
    margin-inline:0;
    font-family:var(--font-sans);
    font-size:18.2px;
    font-weight:500;
    color:var(--ink);
}

.nav-links .active{
    padding:10px;
    border-bottom:0;
    font-family:var(--font-sans);
    font-size:18.2px;
    font-weight:500;
    color:var(--primary);
    margin-inline:0;
}

.nav-links a:hover,
.nav-links .ks-trigger:hover{
    color:var(--primary);
}

/* Figma's login pill: transparent, thin orange rule, #F89028 label. */

.btn-login{
    border:1.58px solid var(--primary-65);
    border-radius:6.9px;
    background:transparent;
    color:#F89028;
    font-family:var(--font-sans);
    font-weight:500;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.btn-login:hover{
    background:var(--primary);
    color:#fff;
}



/* ==========================
   THE LAST DESKTOP TIER

   The hamburger used to take over at 1279. A 125% browser zoom on a 1355px
   window is a 1084px viewport, and that is common enough on a Windows
   laptop that collapsing there made the site look like it had lost its
   navigation -- logo, a burger, and nothing else.

   The row does fit at that width. Measured at 1284 it needs 1103px of
   content, and about 1148 once padding and the gaps between the three
   groups are counted. What is left is found by tightening, not by dropping
   anything: the gutters, the two gaps, the space after the logo, the gap
   between links, and the logo itself, which comes down a step. That frees
   roughly 100px against the 64 needed, so the row still has slack at the
   bottom of the range.

   Below 1080 the mobile blocks above take over, unchanged. 1080 is
   measured, not chosen: at 1068 the Login button still lands 14px
   past the bar's right edge.
========================== */

@media (max-width:1279px) and (min-width:1080px){

  nav{
    padding-inline:14px;
    gap:8px;
  }

  .logo{
    margin-right:10px;
  }

  /* The box is 129 wide at 114 tall, so this is about 104 wide with the
     mark at 54 -- .logo's overflow:hidden trims the transparent margin to
     the bar as it always has. */
  .logo img{
    height:92px;
  }

  .nav-links{
    gap:10px;
  }

}

/* ==========================
   SIGNED-IN NAVBAR

   js/auth-nav.js replaces the single Login button with a greeting and two
   pill buttons, which is roughly 180px the signed-out bar never had to
   budget for -- enough to push "My Courses" and "Logout" off the right
   edge. These are scoped to nav so they outrank the <style> that script
   injects, and only apply below the widths where the row stops fitting.
========================== */

@media (max-width:1560px){

    /* The greeting is the decorative part of the cluster; dropping it is
       what buys the two buttons their room back. */

    nav .nav-actions.is-auth .nav-user{
        display:none;
    }

}

@media (max-width:1460px){

    nav .nav-actions.is-auth{
        margin-left:0;
        gap:6px;
    }

    nav .nav-actions.is-auth .btn-login{
        padding:6px 10px;
    }

}

/* The last stretch before the hamburger takes over at 1279. */

@media (max-width:1340px){

    nav .nav-actions.is-auth{
        gap:4px;
    }

    nav .nav-actions.is-auth .btn-login{
        padding:6px 8px;
    }

}


/* ==========================
   FLOATING PILL HEADER

   The bar used to run edge to edge as a warm gradient band. This lifts it
   off the page as a white pill that floats inside a gutter, which is the
   look the rest of the site's cards already use.

   Everything here is CSS only and lives at the end of the file on purpose:
   the nav markup is duplicated across ~45 HTML pages, so restyling in one
   stylesheet is the only change that reaches all of them at once, and
   sitting last means these rules win over the tiers above without any
   specificity games.

   Width budget: the block at max-width:1279px documents that the row needs
   about 1148px of content at 1284. The outer gutter below is capped at 24px
   a side, so at 1280 the pill still hands the row 1232px minus its own
   padding -- more slack than the tier was tuned against. Nothing collapses
   earlier than it did before.
========================== */

nav{
    /* White, not the old peach gradient -- a floating element reads as
       floating only if it is lighter than what it sits on. */
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);

    border:1px solid rgba(23,23,23,.05);
    border-radius:999px;

    /* Two shadows: a tight one to seat the pill, a wide soft one for the
       lift. A single large shadow reads as smudge at this radius. */
    box-shadow:
        0 1px 2px rgba(23,23,23,.04),
        0 12px 34px rgba(23,23,23,.09);

    /* The gutter that makes it a pill instead of a bar. max-width keeps the
       contents on the site's 1400px measure; the old padding-inline formula
       was doing that job by growing its gutter past 1400, which a real
       max-width does more directly. */
    max-width:1400px;
    margin-inline:auto;
    margin-block-start:0;
    padding-inline:clamp(16px, 1.9vw, 30px);

    /* Was 76px. The pill carries its own shadow and gutter, so the same
       optical weight arrives at a shorter height. */
    height:72px;

    /* The pill now sits flush under the announcement bar, so there is no
       gap above it to match. This offset is only for the stuck state:
       once the announcement bar has scrolled past, it is the one thing
       keeping the pill off the viewport edge. */
    top:6px;
}

/* The pill needs breathing room on both sides at every width. Applied to a
   wrapper rather than nav's own margin so margin-inline:auto above still
   centres it. nav has no wrapper in the markup, so the gutter is bought
   here with width instead. */
nav{
    width:calc(100% - clamp(16px, 3vw, 48px));
}

/* Active link: the old rule painted an orange underline AND jumped the font
   from 15px to 18px, so the row visibly reflowed depending on which page you
   were on. Inside a pill the underline reads as a stray rule. Colour alone
   marks the page now, at the same size as its neighbours. */
nav .nav-links .active{
    border-bottom:0;
    padding-bottom:0;
    padding:0;
    font-size:clamp(13px, 0.95vw, 15px);
    font-weight:600;
    color:var(--primary);
}

/* Floating desktop navigation — a compact, centred pill rather than a full
   width strip. The fixed measure keeps every link gap visually consistent. */
@media (min-width:1080px){
  nav{
    width:min(1110px,calc(100% - 40px));
    height:100px;
    margin:8px auto 0;
    padding:0 18px 0 26px;
    gap:20px;
    border-radius:0 0 38px 38px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 34px rgba(43,31,19,.14);
    backdrop-filter:blur(16px);
    border:1px solid #72777e;
  }

  .logo{
    width:98px;
    height:72px;
    margin:0 4px 0 0;
  }

  .logo img{
    width:94px;
    height:auto;
    max-height:62px;
    object-fit:contain;
  }

  .nav-links{
    flex:1 1 auto;
    justify-content:center;
    gap:clamp(13px,1.5vw,25px);
  }

  .nav-links > li > a,
  .nav-links .res,
  .nav-links .refer-link,
  .nav-links .ks-trigger{
    padding:0!important;
    margin:0!important;
    border:0!important;
    font-family:Inter,sans-serif;
    font-size:14px!important;
    font-weight:500!important;
    color:#263141;
  }

  .nav-links .active{color:#263141!important}
  .gift-animation{display:none}
  #ks-nav-item{height:100px}

  .nav-actions{
    gap:12px;
    padding-left:0;
    border-left:0;
  }

  .nav-actions .btn-login{
    width:78px;
    height:78px;
    padding:0;
    border:0;
    border-radius:50%;
    background:linear-gradient(145deg,#ff9b55,#ff6b25);
    box-shadow:0 8px 20px rgba(255,105,37,.28);
    color:#fff;
    font:700 12px/1.35 Inter,sans-serif;
  }

  .nav-actions .btn-login:hover{background:linear-gradient(145deg,#ffad70,#ff7737)}

  .btn-nav-login{
    width:78px;
    height:78px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#081325;
    box-shadow:0 8px 20px rgba(8,19,37,.22);
    color:#fff;
    font:700 12px/1 Inter,sans-serif;
    cursor:pointer;
  }

  .btn-nav-login:hover{background:#152944}
}

@media (max-width:1079px){.nav-language{display:none}}

/* Give each desktop link its own breathing room across the navigation bar. */
@media (min-width:1080px){
  .nav-links{
    justify-content:space-around;
    gap:clamp(18px,2vw,34px);
  }

  #ks-nav-item:hover .ks-dropdown{
    display:block;
    animation:fadeSlide .2s ease;
  }
}

/* Login becomes the filled pill the floating header needs as its one anchor
   of colour. Outlined-on-white was too quiet against the new background. */
nav .btn-login{
    border:1.5px solid var(--primary);
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    padding:9px 24px;
    font-weight:600;
    box-shadow:0 6px 16px rgba(255,102,0,.24);
}

nav .btn-login:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
    color:#fff;
}

/* ── Narrow widths ──
   A 999px radius on a short bar with a hamburger looks like a capsule with
   nothing in it, so the pill squares off into a rounded card instead. */

/* ========================================================
   MOBILE & TABLET RESPONSIVE NAVIGATION (< 1080px)
   ======================================================== */

@media (max-width: 1079px) {

    nav {
        border-radius: 20px !important;
        height: 66px !important;
        padding: 0 16px !important;
        margin: 0 auto !important;
        top: 6px !important;
        width: calc(100% - 24px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        position: sticky !important;
        z-index: 1000 !important;
    }

    .logo {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        overflow: visible !important;
    }

    .logo img {
        height: 54px !important;
        max-height: 56px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .menu-toggle {
        display: inline-flex !important;
    }

    /* Backdrop Overlay */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    body.nav-open .nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    html.nav-open,
    body.nav-open {
        overflow: hidden !important;
        height: 100% !important;
        overscroll-behavior: none !important;
    }

    body.nav-open nav {
        position: fixed !important;
        top: 6px !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        z-index: 1000 !important;
    }

    /* Mobile Drawer Panel */
    nav .nav-links {
        display: none;
    }

    nav .nav-links.show {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        border: 1px solid rgba(255, 107, 0, 0.16) !important;
        border-radius: 20px !important;
        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.16), 0 2px 10px rgba(0, 0, 0, 0.04) !important;
        padding: 14px 14px 20px !important;
        gap: 3px !important;
        max-height: calc(100dvh - 86px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        z-index: 1001 !important;
        animation: mobileNavPop 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes mobileNavPop {
        from {
            opacity: 0;
            transform: translateY(-8px) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* List Items & Links */
    nav .nav-links > li {
        width: 100% !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    nav .nav-links > li > a,
    nav .nav-links .res {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-family: 'Poppins', 'Inter', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        text-decoration: none !important;
        transition: background-color 0.18s ease, color 0.18s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        text-align: left !important;
    }

    nav .nav-links > li > a:hover,
    nav .nav-links > li > a:active,
    nav .nav-links .res:hover {
        background: #fff7ed !important;
        color: #ff6b00 !important;
    }

    nav .nav-links > li > a.active {
        background: #ffedd5 !important;
        color: #ea580c !important;
        font-weight: 600 !important;
    }

    nav .nav-links .refer-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-family: 'Poppins', 'Inter', sans-serif !important;
        font-size: 15px !important;
        color: #ea580c !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        border: none !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    nav .nav-links .refer-link:hover {
        background: #fff7ed !important;
    }

    nav .nav-links .gift-animation {
        display: inline-block !important;
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        flex-shrink: 0 !important;
        order: 2 !important;
    }

    /* KickStarter Courses on Mobile */
    #ks-nav-item {
        height: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ks-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-family: 'Poppins', 'Inter', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        cursor: pointer !important;
        transition: background-color 0.18s ease, color 0.18s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        border: none !important;
    }

    .ks-trigger:hover,
    .ks-trigger.open {
        background: #fff7ed !important;
        color: #ff6b00 !important;
    }

    .ks-trigger .chevron {
        font-size: 24px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.25s ease !important;
    }

    .ks-trigger.open .chevron {
        transform: rotate(180deg) !important;
    }

    .ks-dropdown {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: #fffbf7 !important;
        border: 1px solid #fed7aa !important;
        border-radius: 14px !important;
        padding: 8px !important;
        margin: 4px 0 8px !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
        display: none;
        z-index: 10 !important;
    }

    .ks-dropdown.open {
        display: block !important;
        animation: mobileAccordionIn 0.22s ease both !important;
    }

    @keyframes mobileAccordionIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .dd-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 11px 14px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        border-radius: 10px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        cursor: pointer !important;
        transition: background 0.15s ease, color 0.15s ease !important;
        margin-bottom: 2px !important;
    }

    .dd-item:last-child {
        border-bottom: none !important;
    }

    .dd-item:hover,
    .dd-item.active-cat {
        background: #ffedd5 !important;
        color: #c2410c !important;
    }

    .dd-item .dd-arrow {
        transition: transform 0.22s ease !important;
        font-size: 14px !important;
    }

    .dd-item.active-cat .dd-arrow {
        transform: rotate(180deg) !important;
        color: #ea580c !important;
    }

    /* Submenus on Mobile */
    .sub-menu {
        display: none;
        background: #ffffff !important;
        border-left: 3px solid #ff6b00 !important;
        border-radius: 0 10px 10px 0 !important;
        margin: 4px 4px 8px 12px !important;
        padding: 4px 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        max-height: 260px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sub-menu.open {
        display: block !important;
        animation: mobileAccordionIn 0.2s ease both !important;
    }

    .sub-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #475569 !important;
        text-decoration: none !important;
        border-radius: 6px !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

    .sub-item:hover {
        background: #fff7ed !important;
        color: #ea580c !important;
    }

    .sub-item .dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: #ff6b00 !important;
    }

    /* Actions inside Mobile Drawer */
    nav .nav-actions {
        display: none;
    }

    nav .nav-links .nav-actions,
    nav .nav-actions.show {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 14px !important;
        padding-top: 16px !important;
        border-top: 1.5px solid #f1f5f9 !important;
        box-shadow: none !important;
        position: static !important;
    }

    nav .nav-actions a {
        width: 100% !important;
        display: block !important;
        text-decoration: none !important;
    }

    nav .nav-actions .btn-login,
    nav .nav-actions .btn-nav-login {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 12px !important;
        font-family: 'Poppins', 'Inter', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition: transform 0.15s ease, filter 0.18s ease !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    nav .nav-actions .btn-login br {
        display: none !important;
    }

    nav .nav-actions .btn-login {
        background: linear-gradient(135deg, #ff7a18 0%, #ff5000 100%) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(255, 107, 0, 0.32) !important;
    }

    nav .nav-actions .btn-login:hover {
        filter: brightness(1.06) !important;
    }

    nav .nav-actions .btn-nav-login {
        background: #ffffff !important;
        color: #ff6b00 !important;
        border: 1.5px solid #ff6b00 !important;
    }

    nav .nav-actions .btn-nav-login:hover {
        background: #fff7ed !important;
    }

    nav .nav-actions.is-auth {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-left: 0 !important;
    }

    nav .nav-actions.is-auth .nav-user {
        text-align: center !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        padding: 4px 0 8px !important;
    }

}

/* The 1080-1279 tier above is measured, not chosen: it was tuned to a 14px
   gutter and has little slack left at the bottom of its range. The pill's
   own gutter would eat about 45px of that, so here it shrinks back to the
   width that tier was budgeted against. Still rounded, just tighter. */

@media (max-width:1279px) and (min-width:1080px){

    nav{
        width:calc(100% - 20px);
        padding-inline:14px;
        border-radius:999px;
    }

}


/* ==========================
   GLASS INTERIOR

   The pill was flat white at 92% opacity, which on a light page is
   indistinguishable from opaque -- the blur behind it was doing no visible
   work. This tints it grey and drops the opacity far enough that the page
   actually shows through, so the blur reads as frosted glass.

   The two inset shadows are what sell it as glass rather than as a grey
   box: a bright top edge where light would catch the lip, and a barely
   there dark bottom edge for thickness.
========================== */

nav{
    background:linear-gradient(
        180deg,
        rgba(250,250,252,.74) 0%,
        rgba(236,236,241,.62) 100%
    );

    -webkit-backdrop-filter:saturate(175%) blur(22px);
    backdrop-filter:saturate(175%) blur(22px);

    /* Lighter than the fill so the rim catches before the face does. */
    border:1px solid rgba(255,255,255,.55);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -1px 0 rgba(23,23,23,.05),
        0 1px 2px rgba(23,23,23,.04),
        0 12px 34px rgba(23,23,23,.10);
}


/* ==========================
   HIDE ON THE WAY DOWN

   Paired with js/nav-scroll.js, which owns the two classes below. The
   slide is a transform rather than a change of top/height so it runs on
   the compositor and never reflows the row inside the pill.
========================== */

nav{
    transition:
        transform .38s cubic-bezier(.4, 0, .2, 1),
        box-shadow .3s var(--ease-out, ease),
        background .3s var(--ease-out, ease);
    will-change:transform;
}

/* Past its own height plus the stuck offset plus room for the shadow, so
   nothing of it is left clipped against the top edge. A plain -100% left
   the shadow smeared across the first few pixels of the page. */
nav.is-hidden{
    transform:translateY(calc(-100% - 28px));
}

/* Once the announcement bar has scrolled away the pill is floating over
   live content rather than over the top of the page, so it earns a
   deeper shadow and a slightly more opaque face to stay legible. */
nav.is-stuck{
    background:linear-gradient(
        180deg,
        rgba(250,250,252,.82) 0%,
        rgba(234,234,240,.72) 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -1px 0 rgba(23,23,23,.05),
        0 2px 6px rgba(23,23,23,.06),
        0 16px 40px rgba(23,23,23,.13);
}

@media (prefers-reduced-motion: reduce){

    nav{
        transition:none;
    }

}


/* The older SCROLL STATE block up the file sets its own backdrop-filter and
   box-shadow on nav.is-scrolled, which animations.js adds past 40px. At equal
   specificity it was beating the glass rules above for the entire time the
   page is scrolled -- dropping the blur to 10px, losing the saturation, and
   replacing both inset edges with a flat drop shadow. Restated here so the
   glass survives the scrolled state. is-scrolled arms at 40px and is-stuck at
   140, so both are present together for most of a page. */

nav.is-scrolled,
nav.is-stuck{
    -webkit-backdrop-filter:saturate(175%) blur(22px);
    backdrop-filter:saturate(175%) blur(22px);

    background:linear-gradient(
        180deg,
        rgba(250,250,252,.82) 0%,
        rgba(234,234,240,.72) 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -1px 0 rgba(23,23,23,.05),
        0 2px 6px rgba(23,23,23,.06),
        0 16px 40px rgba(23,23,23,.13);
}