/* Shamla Tech Lightweight Mega Menu v2.0.0 */

.st-mega-wrap {
  --panel: #1b1e4a;
  --rail: #181a42;
  --cat: #5d93ec;
  --link: #c9cee5;
  --link-hover: #fff;
  --promo: #2a2d70;
  --grad: linear-gradient(95deg, #3b5bfd, #9b3bff);
  --tab-bg: #fff;
  --tab-ink: #3a3f63;
  --tab-active: #1b2456;
  --rail-bg: transparent;
  --rail-hover: #30367f;
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  font-family: Poppins, Arial, sans-serif;
  color: var(--link);
}
.st-mega-wrap * { box-sizing: border-box; }
/* Neutralise the browser/OS default blue tap-highlight flash on touch
   (mobile Chrome/Safari show this on every tap unless it is explicitly
   turned off) and any theme-level default link colour, so nothing but
   this component's own intentional colours ever shows on tap/hover. */
.st-mega-wrap, .st-mega-wrap * {
  -webkit-tap-highlight-color: transparent;
}

.st-mega-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-width: 0; }
.st-mega-header__logo { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; margin-right: auto; }
.st-mega-header__logo a { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.st-mega-header__logo img { display: block; width: auto; max-width: 170px; height: auto; max-height: 58px; object-fit: contain; }

.st-mega-header__partner { flex: 0 0 auto; display: flex; justify-content: flex-end; min-width: 0; }
.st-mega-header__partner-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 10px 22px; border-radius: 24px;
  background: var(--grad); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 8px 18px rgba(59, 91, 253, .18);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
/* Round 4 fix: lift increased from -1px to -5px (a slight, ~3-5px bigger
   movement per request) -- transition (.16s ease, unchanged above) keeps
   it smooth/soft, only the distance travelled is larger. */
.st-mega-header__partner-btn:hover { color: #fff; transform: translateY(-5px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(59, 91, 253, .24); }
.st-mega-header__partner-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* ONE nav element (.st-mega) holds the top-level tabs AND the panel   */
/* on every breakpoint — desktop and mobile share the same DOM; only   */
/* CSS (this file) repositions/restyles it. There is no separate      */
/* mobile-only markup anywhere in this component.                     */
/* ------------------------------------------------------------------ */

.st-mega { flex: 1 1 auto; width: 100%; min-width: 0; position: relative; z-index: 100; }
.st-mega__mobile-head { display: none; }

.st-mega__tabs {
  display: flex; flex-wrap: wrap; row-gap: 8px; align-items: center;
  justify-content: flex-start; /* Main Menu row is left-aligned */
  gap: 7px; min-width: 0;
}
.st-mega__tab {
  font-family: "Barlow Semi Condensed", Poppins, Arial, sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--tab-ink); background: transparent;
  border: 1px solid transparent; padding: 8px 12px; /* plain text at rest — no box/border/background */
  border-radius: 0; /* flat, not a rounded "button" */
  cursor: pointer; line-height: 1.2; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  appearance: none;
}
/* Hover is the ONLY thing that opens/colours a Main Menu item on desktop
   (see mega-menu.js: tabs open on mouseenter/focusin, not on click).
   .is-active here just mirrors "currently hovered/open" state — nothing
   stays coloured after the pointer leaves. At rest the tab is plain text
   with no visible box; colour/background only ever appear on hover. */
.st-mega__tab:hover,
.st-mega__tab.is-active {
  background: var(--tab-active) !important;
  color: #fff !important;
  border-color: var(--tab-active) !important;
}

/* Top-level Main Menu hover is visually neutral. Submenu/category/link
   hover styles are intentionally untouched.
   :active and :focus are added here alongside :hover — a plain mouse
   click leaves a <button> in the :focus state (without :focus-visible,
   which mouse clicks normally don't trigger) even after the pointer moves
   away to hover a different tab. Without an explicit override here, that
   left-over :focus state was exposed to whatever a WordPress theme or
   Elementor sets as its own default button/link colour (its "base"
   colour), which is the blue base-colour bleed reported on the
   previously-clicked tab while hovering the next one. */
.st-mega__tab:hover,
.st-mega__tab:focus,
.st-mega__tab:active {
  background: transparent !important;
  color: var(--tab-ink) !important;
  border-color: transparent !important;
}

/* Desktop open state mirrors hover, so it must also remain neutral. */
@media (min-width: 1025px) {
  .st-mega__tab.is-active {
    background: transparent !important;
    color: var(--tab-ink) !important;
    border-color: transparent !important;
  }
}
.st-mega__tab:focus-visible { outline: 3px solid #5d93ec; outline-offset: 2px; }
.st-mega__tab:visited { color: inherit; }
.st-mega__chevron { flex: 0 0 auto; color: currentColor; transition: transform .18s ease; }
.st-mega__tab.is-active .st-mega__chevron { transform: rotate(180deg); }

/* Change 1 (320-1024px only): one small icon per Main Menu item, to the
   left of its label. Hidden by default (desktop, 1025-1920px); shown only
   inside the existing max-width:1024px block below. Present in the DOM at
   every width (single DOM, per this project's architecture) -- purely
   CSS-gated visibility, no extra markup/JS/network cost either way. No
   Submenu/Link icon exists anywhere (not touched). */
.st-mega__tab-icon { display: none; flex: 0 0 auto; align-items: center; }
/* This round: icon size fixed at 22x22px (was 16x16), and colour fixed at
   #1a4ba9 regardless of the tab's own text colour/state (was currentColor,
   which followed the tab's own hover/active/current colour) -- explicit
   per-request values, set directly on the color property since the icon's
   own <svg> paths use stroke="currentColor"/fill="currentColor". */
.st-mega__tab-icon-svg { display: block; width: 22px; height: 22px; color: #1a4ba9; }

/* v3.0: persistent "you are currently on this page/section" indicator --
   separate from .is-active (temporary hover/open interaction state) so it
   never conflicts with the "no lingering click colour" behaviour above.
   One rule works at every breakpoint (desktop text-only tab and mobile's
   white-background tab both use var(--tab-ink)/#1b2456 at rest, and this
   colour is visibly different from both). */
/* This round: Main Menu Active/Selected colour is now #1d4ab3 with an
   always-on #14c9c6 underline (see the consolidated, unscoped rule near
   the end of this file, which sets both .is-current's and .is-active's
   colour + underline together at every breakpoint) -- this rule now only
   carries font-weight; the colour value itself lives solely in that later
   rule so there is exactly one place it is authored. */
.st-mega__tab.is-current { font-weight: 700; }

/* Dropdown panel — stays centred under the (now left-aligned) nav,
   independent of where the tab row itself starts. */
.st-mega__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0; /* left-aligned to match the (also left-aligned) Main Menu row */
  transform: translateY(-6px);
  width: min(1120px, 94vw);
  display: grid;
  grid-template-columns: 266px minmax(0, 1fr) 248px;
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 50px -22px rgba(15, 18, 60, .45);
  min-height: 420px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.st-mega__panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.st-mega__backdrop { position: fixed; inset: 0; background: rgba(10, 12, 34, .35); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.st-mega__backdrop.is-visible { opacity: 1; pointer-events: auto; }

.st-mega__rail { background: var(--rail); padding: 18px 12px; border-right: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.st-mega__rail-label {
  font-family: "Barlow Semi Condensed", Poppins, Arial, sans-serif;
  font-size: 11px; letter-spacing: 2px; color: #7e84c9; font-weight: 700;
  text-transform: uppercase; padding: 8px 14px 12px;
}
.st-mega__categories { min-width: 0; }
.st-mega__category {
  width: 100%; text-align: left; border: 0; background: var(--rail-bg); cursor: pointer;
  font-family: "Barlow Semi Condensed", Poppins, Arial, sans-serif;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 10px; color: var(--link);
  font-size: 16px; font-weight: 600; line-height: 1.2;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
  appearance: none;
}
/* Submenu (category rail) is purely hover-driven — clicking a category
   switches its content (still needed: mobile/tablet has no hover, so a
   tap must still work), but must never leave any persistent "selected"
   colour behind. This block order matters:
   1) :focus / :active / .is-active are forced back to the neutral resting
      colours, with !important. This is what removes the click-and-it-
      stays-coloured behaviour, AND (same fix as before) blocks a
      WordPress/Elementor theme's own default button:focus/button:active
      colour from showing on a previously-clicked item.
   2) :hover / :focus-visible are declared AFTER, so genuine pointer-hover
      or keyboard focus-visible still wins and shows colour — :focus-visible
      also matches :focus, so it must come after (1) to still take effect
      for keyboard users tabbing through the rail. */
.st-mega__category:focus,
.st-mega__category:active,
.st-mega__category.is-active {
  background: var(--rail-bg) !important;
  color: var(--link) !important;
  transform: none;
}
/* Round 10 fix: :hover scoped to real hover-capable pointers only
   (mouse/trackpad) via the hover:hover feature query -- on a touchscreen, a
   tap triggers :hover but there is no genuine "unhover" until a later tap
   elsewhere, so this rail row's hover colour/shift used to visibly stick
   after being tapped on mobile/tablet (320-1024px), even though the
   underlying accordion toggle itself worked correctly. :focus-visible is
   left completely unscoped/untouched below (still applies at every
   breakpoint, including a touchscreen device with an attached keyboard) --
   only the pointer-hover effect is gated here. Desktop (a real
   mouse/trackpad) is completely unaffected: hover:hover matches there
   exactly as :hover always did before. */
@media (hover: hover) and (pointer: fine) {
  .st-mega__category:hover {
    background: var(--rail-hover) !important;
    color: #fff !important;
    transform: translateX(4px);
  }
}
.st-mega__category:focus-visible {
  background: var(--rail-hover) !important;
  color: #fff !important;
  transform: translateX(4px);
}
.st-mega__category:focus-visible { outline: 3px solid #5d93ec; outline-offset: 2px; }
/* A category button belonging to a menu with fewer categories than a
   previously-rendered menu is marked [hidden] by JS instead of being
   removed (the rail buttons are reused across every top-level menu, per
   the ONE DOM architecture). Without this rule the base display:flex above
   would win over the browser's default [hidden] styling, and the leftover
   button would stay visibly stuck on screen with stale content from
   whichever menu was open before — this is what caused categories from one
   top-level menu (e.g. Clone Scripts/NFT/DeFi) to visibly linger under
   every other top-level menu that has fewer categories. */
.st-mega__category[hidden] { display: none; }
.st-mega__count { font-size: 12px; color: #7e84c9; font-weight: 600; flex: 0 0 auto; }
.st-mega__category:hover .st-mega__count,
.st-mega__category:focus-visible .st-mega__count { color: #cfd4ff; }
/* v3.0: persistent "current page" indicator (distinct from .is-active,
   which only tracks which category is presently SELECTED in the rail). */
/* v3.0.7: Active/Selected Submenu colour changed to #14c9c6 (was #fff);
   this is the ONLY change here -- .is-active/:focus/:active/:hover above
   are untouched. !important is added because the "current" category is
   very often ALSO .is-active at the same time (e.g. it's the default/
   first-shown category, or the visitor is hovering it) -- the existing
   .is-active neutral-colour rule above already uses !important, so
   without matching !important here this colour would stay invisible
   (masked back to var(--link)) in exactly that common case. Main Menu
   (.st-mega__tab.is-current, elsewhere in this file) is deliberately left
   at var(--cat) -- unchanged, per this round's explicit scope. */
.st-mega__category.is-current { color: #14c9c6 !important; font-weight: 700; }
.st-mega__category.is-current .st-mega__count { color: var(--cat); }

.st-mega__content { padding: 24px 28px; min-width: 0; }
.st-mega__content-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.st-mega__content-head h3 { font-family: "Barlow Semi Condensed", Poppins, Arial, sans-serif; color: var(--cat); font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; }
.st-mega__view-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #dfe3f6; text-decoration: none; white-space: nowrap; transition: color .16s ease, transform .16s ease; }
.st-mega__view-all:hover { color: #fff; transform: translateX(3px); }
.st-mega__view-all span { color: #9b3bff; font-size: 15px; }
.st-mega__view-all:focus-visible { outline: 3px solid #5d93ec; outline-offset: 2px; border-radius: 7px; }

.st-mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 26px; min-width: 0; }
.st-mega__links a { display: flex; align-items: center; min-width: 0; gap: 6px; color: var(--link); text-decoration: none; font-size: 14px; padding: 9px 8px; border-radius: 7px; line-height: 1.3; transition: background-color .16s ease, color .16s ease, transform .16s ease; }
/* Round 10 fix: same touch-sticky-hover fix as .st-mega__category above --
   :hover scoped to real hover-capable pointers only, so tapping a Submenu
   link on mobile/tablet (320-1024px) no longer leaves its hover
   background/colour/shift stuck on afterward. :focus-visible directly below
   is untouched/unscoped. Desktop hover is unaffected. */
@media (hover: hover) and (pointer: fine) {
  .st-mega__links a:hover { background: #262a63; color: var(--link-hover); transform: translateX(5px); }
}
.st-mega__links a:focus-visible { outline: 3px solid #5d93ec; outline-offset: 2px; border-radius: 7px; }
/* v3.0: persistent "this is the page you're on" indicator, at rest only --
   :hover above still wins (transition kept smooth) while genuinely
   hovering/focusing. */
/* v3.0.7: Active/Selected Link colour changed to #14c9c6 (was #fff), same
   treatment/reasoning as .st-mega__category.is-current directly above --
   only this rest-state colour changes, applies at every breakpoint
   (320-1920px), :hover above and normal/unselected links are untouched. */
.st-mega__links a.is-current { color: #14c9c6; font-weight: 700; }
.st-mega__links a[hidden] { display: none; }
.st-mega__link-label { min-width: 0; }
.st-mega__new { display: inline-block; flex: 0 0 auto; font-family: "Barlow Semi Condensed", Poppins, Arial, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .4px; color: #0f1230; background: var(--grad); padding: 2px 6px; border-radius: 20px; text-transform: uppercase; margin-left: 6px; }

.st-mega__promo { background: var(--promo); margin: 22px 22px 22px 0; border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.st-mega__promo-tag { font-family: "Barlow Semi Condensed", Poppins, Arial, sans-serif; font-size: 11px; letter-spacing: 1.6px; color: #9fb4ff; font-weight: 700; text-transform: uppercase; }
.st-mega__promo h4 { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; margin: 10px 0 0; }
.st-mega__promo p { color: #c9cee5; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.st-mega__promo-btn { display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; text-decoration: none; text-align: center; padding: 13px; border-radius: 26px; font-size: 14px; font-weight: 700; margin-top: 20px; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
/* Round 4 fix: same -1px -> -5px lift increase as the Partner button
   above, transition (.16s ease, unchanged) keeps it smooth/soft. */
/* Round 10 fix: same touch-sticky-hover fix as .st-mega__category /
   .st-mega__links a above -- :hover scoped to real hover-capable pointers
   only, so tapping the CTA button on mobile/tablet (320-1024px) no longer
   leaves its lift/shadow/brightness stuck on afterward. :focus-visible
   directly below is untouched/unscoped. Desktop hover is unaffected. */
@media (hover: hover) and (pointer: fine) {
  .st-mega__promo-btn:hover { color: #fff; transform: translateY(-5px); filter: brightness(1.05); box-shadow: 0 8px 18px rgba(59, 91, 253, .2); }
}
.st-mega__promo-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.st-mega__burger {
  display: none; flex: 0 0 auto; width: 40px; height: 40px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; appearance: none; padding: 0;
  margin-left: auto;
}
.st-mega__burger span { display: block; width: 28px; height: 3px; background: var(--tab-active) !important; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.st-mega__burger:focus-visible { outline: 3px solid #5d93ec; outline-offset: 3px; }

@media (min-width: 1025px) {
  .st-mega__burger { display: none !important; }
  .st-mega { order: 2; }
  .st-mega-header__partner { order: 3; }
  .st-mega-header__logo { order: 1; }
  /* Desktop rail stays exactly as before -- no arrow on a Submenu row;
     the mobile/tablet-only accordion arrow (added alongside the mobile
     Submenu-Links accordion) must never appear here. */
  .st-mega__category .st-mega__chevron { display: none; }

  /* Round 6 fix: the rail label showing the currently-hovered Main Menu's
     own name above its Submenu list was 11px (see the base, unscoped
     .st-mega__rail-label rule near the top of this file) -- increased to
     13px, desktop only. Mobile/tablet already hides this label entirely
     (display:none, further down in the ≤1024px block) so it was never
     visible there anyway; scoping the size change here too (rather than
     editing the shared base rule) keeps this a strictly desktop-only
     change with no risk of any mobile side effect. */
  .st-mega__rail-label { font-size: 13px; }

  /* Desktop-only (1025-1920px): plain :hover (a tab merely being pointed
     at, distinct from .is-active -- see the consolidated Active/Selected
     rule near the end of this file for that).
     Round 6 fix: solid #181A42 (was a translucent rgba(24, 26, 66, .35))
     -- this is the "Normal Hover Main Menu" underline colour, and must
     stay visually distinct from the "Active Main Menu" colour (#14C9C6,
     see the consolidated rule + the new .is-active:not(.is-current)
     override directly below this block, which is what makes this colour
     actually reach a real dropdown-opening hover -- this bare :hover rule
     by itself only ever applies to a plain-link tab, one with no dropdown
     and therefore no .is-active class). box-shadow (inset, not a real
     border) is used deliberately instead of border-bottom/text-decoration
     so no layout/box-size change. */
  .st-mega__tab:hover {
    box-shadow: inset 0 -2px 0 0 #181A42;
  }

  /* Round 6 fix: on desktop, hovering a Main Menu row opens its dropdown
     and adds .is-active to it (see mega-menu.js openPanel()) -- before
     this fix, the consolidated Active/Selected rule further down this
     file (.is-active, .is-current { ...; box-shadow: ... #14c9c6
     !important }) made EVERY hovered/open row show the same #14C9C6
     "Active" underline, with no visual distinction from the actual
     current-page tab. Per this round's explicit request, "Active" (the
     current page, .is-current) and "Normal Hover" (any other row merely
     being hovered/opened, .is-active without .is-current) must use two
     separate, fixed colours. `:not(.is-current)` gives this selector
     higher specificity than the consolidated rule's plain `.is-active`
     selector (two classes' worth vs one), so it wins even though both are
     !important -- .is-current keeps its #14C9C6 underline completely
     unaffected and "remains fixed" exactly as requested, including while
     it is itself being hovered. Desktop only; mobile/tablet already has
     no Main Menu underline at all (Round 3's max-width:1024px box-shadow:
     none rule, untouched here) so this cannot affect it. */
  .st-mega__tab.is-active:not(.is-current) {
    box-shadow: inset 0 -2px 0 0 #181A42 !important;
  }

  /* Change 4 (1025-1920px only): replace the previous plain light/faded
     backdrop (just the base rule's flat rgba(10,12,34,.35) tint, no blur)
     with the same type of background-focus blur already used on mobile/
     tablet (compare the 481-1024px backdrop rule further down -- same
     blur(14px) value, for a consistent feel across breakpoints). The tint
     itself is left exactly as-is (still the base, unscoped
     .st-mega__backdrop rule) -- this only adds the blur layer on top of it,
     matching how mobile/tablet already combine tint + blur. JS is
     unchanged: openBackdrop() already opens this element on desktop today
     (desktopMql.matches), so no script change is needed here -- this is a
     CSS-only addition. .st-mega (nav, z-index:100) and .st-mega__panel
     (z-index:120) both stack above .st-mega__backdrop (z-index:90), so the
     header and the open Mega Menu itself stay completely sharp; only the
     page/body content behind the backdrop is blurred. Mobile/tablet
     (≤1024px) is unaffected -- this rule lives only inside this exact
     media query. */
  .st-mega__backdrop {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  /* Belt-and-braces for the point directly above: .st-mega-header's own
     children (logo, nav, partner CTA) are guaranteed to paint above the
     fixed, z-index:90 backdrop once it is blurred and therefore far more
     visible than the previous plain tint.
     Round 3 fix: this component never set its own top/bottom padding on
     .st-mega-header (only "gap" between the logo/nav/partner columns),
     so on the live site the logo/tabs were sitting flush against the
     surrounding page header's own edges with no breathing room, cropping/
     touching the top and bottom. Adding equal, symmetric vertical padding
     here (desktop only, 1025-1920px -- the exact range this was reported
     in) gives the header consistent top/bottom spacing matching the
     reference design, without changing width, gap, alignment, or any
     other existing layout rule. */
  .st-mega-header {
    position: relative;
    z-index: 95;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* Desktop header hover-glitch fix: removing the page's vertical scrollbar
   via overflow:hidden below makes the viewport's rendered content area
   wider for as long as the lock is applied, which was shifting the whole
   header (social bar, logo, Main Menu) to the right on the very first
   desktop hover. --st-mega-scrollbar-w is set live, in JS, right before
   this class is added (see lockScroll() in mega-menu.js) to the real
   scrollbar width being removed (0 on touch/overlay-scrollbar devices) --
   applying that same amount back as padding-right here keeps the total
   rendered width constant, so nothing visibly shifts. Falls back to 0px
   if the variable is ever unset for any reason (no shift compensation,
   same as before this fix, never a negative/broken layout). */
html.st-mega-lock { padding-right: var(--st-mega-scrollbar-w, 0px); }
/* iOS Safari scroll-lock fix (Step 1, minimal/CSS-only): overflow:hidden
   alone is well-documented as insufficient on iOS Safari to stop the
   underlying page from touch-scrolling/rubber-banding while the mobile
   drawer or desktop backdrop is open. overscroll-behavior:none tells
   WebKit not to chain any leftover scroll gesture past this element (the
   scroll-chaining escape hatch iOS uses even when overflow:hidden is set),
   so the locked page itself can no longer bounce. Purely additive -- does
   not change the existing overflow:hidden lock, its trigger points in
   mega-menu.js, or any other breakpoint's layout/behavior. */
html.st-mega-lock, html.st-mega-lock body { overflow: hidden; overscroll-behavior: none; }

/* ==================================================================== */
/* Mobile / tablet (≤1024px): the SAME .st-mega element becomes a       */
/* full-screen off-canvas panel. Always 100% of the viewport width at   */
/* every width in this range — never a partial-width drawer, so the     */
/* header behind it can never show through and there is only ever one   */
/* close control.                                                       */
/* ==================================================================== */

@media (max-width: 1024px) {
  .st-mega-header { gap: 12px; justify-content: space-between; width: 100%; min-width: 0; }
  .st-mega-header__partner { display: none; }
  .st-mega__burger { display: inline-flex !important; margin-left: auto !important; order: 2; position: relative; inset: auto; align-self: center; flex: 0 0 40px; }

  .st-mega {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100dvh;
    background: #fff;
    color: #1b2456;
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS Safari scroll-lock fix (Step 1): this drawer is independently
       scrollable (its own content can exceed one screen). Without this,
       once a user scrolls it to its own top/bottom edge and keeps
       dragging, iOS chains the remaining gesture to the locked page
       behind it (the html.st-mega-lock overflow:hidden rule above does
       not reliably stop that chain on iOS the way it does elsewhere).
       overscroll-behavior:contain keeps scrolling contained to this
       drawer once it reaches its own boundary, instead of leaking
       through. Does not change the drawer's own scroll/momentum
       behavior in any other way. */
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -16px 0 40px rgba(15, 18, 60, .18);
    padding: 0;
  }
  .st-mega.is-open { transform: translateX(0); }

  .st-mega__mobile-head {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; border-bottom: 1px solid #eceefa;
    position: sticky; top: 0; background: #fff; z-index: 3;
  }
  /* This round: background changed from transparent to a solid #181a42
     navy fill, with border-radius:8px so it reads as a proper button
     instead of a bare icon -- the X itself (the ::before/::after bars
     below) is switched from the old #1b2456-on-transparent to white so it
     stays visible against the new solid dark background. Close
     functionality (the actual click handler in mega-menu.js) is completely
     untouched -- this is a styling-only change. */
  .st-mega__mobile-close {
    width: 34px !important; height: 34px !important; flex: 0 0 34px !important;
    border: 0 !important; background: #181a42 !important; background-color: #181a42 !important;
    border-radius: 8px !important;
    color: #ffffff !important; box-shadow: none !important; cursor: pointer; padding: 0 !important;
    margin: 0 !important; position: relative; appearance: none !important;
    outline: none; text-decoration: none;
  }
  .st-mega__mobile-close::before, .st-mega__mobile-close::after {
    content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
    background: #ffffff; border-radius: 2px;
  }
  .st-mega__mobile-close::before { transform: rotate(45deg); }
  .st-mega__mobile-close::after { transform: rotate(-45deg); }
  .st-mega__mobile-close:hover,
  .st-mega__mobile-close:active,
  .st-mega__mobile-close:focus,
  .st-mega__mobile-close:focus-visible {
    background: #181a42 !important; background-color: #181a42 !important;
    color: #ffffff !important; box-shadow: none !important;
  }
  .st-mega__mobile-close:focus-visible { outline: 2px solid rgba(27, 36, 86, .35); outline-offset: -2px; border-radius: 6px; }
  /* No heading label next to the close button — the close (X) control is
     the only thing in this row now. */
  .st-mega__mobile-heading { display: none; }

  .st-mega__tabs { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 8px 12px; border-bottom: 1px solid #eceefa; }
  /* border intentionally NOT overridden here (stays the base rule's
     "border: 1px solid transparent" from line 68 — invisible either way,
     .st-mega-wrap * is box-sizing:border-box so it never affects layout
     size). Previously this set "border: 0", which made border-WIDTH jump
     0 <-> 1px exactly at the 1024/1025px breakpoint edge; since
     border-color (not border-width) is in this element's `transition`
     list, that width snap combined with a hover/active state right at the
     boundary could show a brief flash as the color transitioned against a
     suddenly-changed width. Keeping the width constant across the
     breakpoint removes the mismatch entirely with no visual difference at
     rest. */
  /* justify-content changed from the original "space-between" to the
     default (flex-start) + margin-left:auto on the chevron alone (see the
     .st-mega__chevron rule right below) -- purely mechanical, same visual
     result (label/icon packed to the left edge, arrow docked at the far
     right edge) for a tab with a chevron. This swap is required so the new
     Change 1 icon (a 3rd child on category tabs, a 2nd on plain-link tabs)
     doesn't get pulled away from the label by space-between's equal-gap
     distribution -- with flex-start, icon+label always stay adjacent on
     the left regardless of whether a trailing chevron is present. */
  .st-mega__tab { width: 100%; justify-content: flex-start; border-radius: 0; padding: 14px 12px; background: #fff; color: #1b2456; font-size: 16px; }
  .st-mega__tab .st-mega__chevron { margin-left: auto; }
  /* Change 1: show the per-Main-Menu icon only at this range (320-1024px).
     Submenu (.st-mega__category) and Link (.st-mega__links a) rows are
     untouched -- neither has an icon at any width. */
  .st-mega__tab-icon { display: inline-flex; }
  /* Main-menu selection/hover must stay neutral on mobile too.
     Submenu/category/link hover styles below remain unchanged.
     :focus added alongside :hover/:active for the same reason as the
     desktop rule above — a tapped/clicked button keeps :focus after the
     tap ends, and without this it stayed exposed to a theme's own default
     button colour. */
  .st-mega__tab:hover,
  .st-mega__tab:active,
  .st-mega__tab:focus,
  .st-mega__tab.is-active {
    background: transparent !important;
    color: #1b2456 !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  /* This round: the mobile/tablet-only neutral rule directly above (and
     the desktop neutral .is-active rule elsewhere in this file) would
     otherwise mask the new Main Menu Active/Selected colour+underline --
     that override now lives in ONE consolidated, unscoped rule near the
     end of this file (applies at every breakpoint via source order, so no
     mobile-specific duplicate is needed here any more). */
  .st-mega__tab:focus-visible {
    outline: 2px solid rgba(27, 36, 86, .35);
    outline-offset: -3px;
  }
  .st-mega__tab.is-active .st-mega__chevron { transform: rotate(180deg); }
  /* Mobile/tablet only: the arrow needs to read 3px larger here than its
     14x14 desktop/base size (set inline on the SVG markup) -- this CSS
     rule outranks that inline width/height attribute, and only applies
     inside this ≤1024px block, so the desktop chevron is untouched. */
  .st-mega__chevron { width: 17px; height: 17px; }
  /* Submenu (category) accordion arrow -- mirrors the Main Menu tab's own
     rotate-on-open rule directly above. .is-expanded is a separate,
     mobile-only state from .is-active (which already tracks something
     else -- which category is the content SOURCE, unrelated to whether
     its own accordion row is visually expanded here). */
  .st-mega__category.is-expanded .st-mega__chevron { transform: rotate(180deg); }

  .st-mega__panel {
    position: relative; top: auto; left: auto; transform: none; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "rail" "content" "promo";
    border-radius: 0; min-height: 0; box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: var(--panel); transition: none;
    /* The desktop rule above (line ~133) sets z-index: 120 for the
       absolutely-positioned dropdown. This mobile/tablet override changes
       position to relative but, without this line, silently KEEPS that
       z-index: 120 (unrelated properties are never reset just by entering
       a new @media block). Since .st-mega__mobile-head (the sticky Close
       row) only has z-index: 3, the panel's inherited 120 let it stack
       ABOVE the sticky header as the user scrolled the off-canvas menu,
       visually covering the Close (X) button. Explicitly reset to 1 here
       so the sticky header always stays on top while this panel scrolls
       beneath it. */
    z-index: 1;
  }
  .st-mega__panel[hidden] { display: none; }
  .st-mega__rail { grid-area: rail; grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 14px 10px; }
  /* mega-menu.js already clears this label's text on mobile since it
     duplicates the just-tapped Main Menu row's own name directly above
     this panel -- this removes the now-empty label's box entirely too
     (including its own padding), so no blank gap is left behind either.
     Desktop is untouched: .st-mega__rail-label keeps showing the Main
     Menu name exactly as before there. */
  .st-mega__rail-label { display: none; }
  .st-mega__content { grid-area: content; grid-column: 1 / -1; padding: 20px 18px; }
  /* Explicit, same defensive pairing as .st-mega__panel[hidden] above --
     the Submenu accordion (below) moves this SAME element to sit right
     after the tapped category button and toggles [hidden] on it; once
     nested there it's no longer a grid item so grid-area has no effect,
     and this rule is what actually hides/shows it either way. */
  .st-mega__content[hidden] { display: none; }
  /* The Submenu accordion (mega-menu.js) already clears this heading's
     text on mobile since it duplicates the row's own label directly
     above it -- this removes the now-empty heading's box entirely too
     (including its margin-bottom), so no blank gap is left behind
     either. Desktop is untouched: .st-mega__content-head keeps showing
     its title exactly as before there. */
  .st-mega__content-head { display: none; }
  .st-mega__promo { grid-area: promo; grid-column: 1 / -1; margin: 0 14px 14px; padding: 20px; }
  .st-mega__links { grid-template-columns: 1fr; }
  .st-mega__backdrop { display: block; z-index: 190; }
  .st-mega__backdrop.is-visible { pointer-events: auto; }
  /* iOS Safari scroll-lock fix (Step 1): this fixed, full-viewport overlay
     is the element a touch/drag actually starts on when the mobile drawer
     is open. touch-action:none stops WebKit from interpreting a drag that
     begins here as a page-scroll/bounce gesture, without affecting its
     existing tap-to-close click handler (mega-menu.js) at all -- taps are
     unaffected, only pan/scroll gestures on this element are. Scoped to
     this mobile/tablet media query only; desktop's backdrop is untouched. */
  .st-mega__backdrop { touch-action: none; }
}

/* Mobile/tablet header rule: logo stays left, menu trigger stays right.
   Selectors here are deliberately scoped with .st-mega-wrap (instead of the
   bare class alone) so this wins the cascade even against a theme/Elementor
   rule that also targets .st-mega-header with !important — a bare-class
   selector cannot out-specify this one regardless of stylesheet order.
   The burger is docked with position:absolute against .st-mega-header's own
   box (not flex auto-margins) so it stays pinned to OUR header's right edge
   even if a page-builder wraps this whole component in its own narrow or
   center-aligned flex container — an ancestor's flex/justify-content can
   neutralize margin-left:auto on a flex child, but it cannot move an
   absolutely-positioned box out of its own positioned parent's corner. */
@media (max-width: 1024px) {
  .st-mega-wrap .st-mega-header {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 40px;
    padding-right: 52px; /* reserve room so the logo never sits under the absolutely-positioned burger */
  }
  .st-mega-wrap .st-mega-header__logo {
    order: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }
  .st-mega-wrap .st-mega__burger {
    position: absolute !important;
    top: 50% !important; right: 0 !important; left: auto !important; bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 40px !important; height: 40px !important;
    margin: 0 !important; padding: 0 !important;
    float: none !important; order: initial !important; flex: 0 0 40px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: transparent !important; background-color: transparent !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: var(--tab-active) !important; appearance: none !important;
    outline: none;
  }
  .st-mega-wrap .st-mega__burger:hover,
  .st-mega-wrap .st-mega__burger:active,
  .st-mega-wrap .st-mega__burger:focus,
  .st-mega-wrap .st-mega__burger:focus-visible {
    background: transparent !important; background-color: transparent !important;
    color: var(--tab-active) !important; box-shadow: none !important;
  }
  .st-mega-wrap .st-mega__burger:focus-visible { outline: 2px solid rgba(27, 36, 86, .35); outline-offset: -2px; }
  .st-mega-wrap .st-mega-header__partner { display: none !important; }
}

/* 481–1024: the off-canvas menu is capped to 380px wide instead of the full
   viewport width used at 320–480. Only .st-mega's own width/left change here
   — position (still docked to the right edge via right:0, still a
   slide-in-from-the-right drawer via transform: translateX(100%)/(0), which
   scales automatically to the element's own width so no JS change is
   needed), design, and every other rule/behaviour are untouched. left is
   switched from the general rule's 0 to auto so only the right edge stays
   pinned; the general ≤1024px block above still supplies top/bottom/
   position/z-index/etc., this block only overrides width and left. */
@media (min-width: 481px) and (max-width: 1024px) {
  .st-mega {
    left: auto;
    width: 380px;
    max-width: 380px;
  }
  /* v3.0.7 change #1: in this 481-1024px tablet range only, the
     background/side area outside the 380px drawer gets a strong blur
     while the drawer is open (mega-menu.js now also opens the backdrop in
     this range -- previously it only ever opened on desktop). This targets
     .st-mega__backdrop only; the drawer itself (.st-mega) is a separate,
     later-stacked element (z-index 200 vs the backdrop's 190) with its own
     opaque #fff background, so it stays completely sharp/unaffected.
     320-480px and 1025-1920px are untouched -- this rule lives only inside
     this exact media query, and the JS gate (tabletMql) keeps the backdrop
     from ever opening outside this range either. */
  .st-mega__backdrop {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* ==================================================================== */
/* Responsive breakpoints — EXACT project ranges.
   Same DOM at every range; CSS only controls responsive layout. */

/* 320–480 — same lean burger-position rule as 768–880/881–1024 below
   (the extra position/inset-inline/margin/align-self properties this block
   used to carry were redundant with the general ≤1024px rule further up
   this file, and its justify-content:flex-end on .st-mega-header never
   even applied — that general rule's .st-mega-wrap .st-mega-header
   selector already out-specifies a bare .st-mega-header here regardless
   of !important. Simplified to match the other two breakpoints exactly. */
@media (min-width: 320px) and (max-width: 480px) {
  /* Change 3: the off-canvas drawer is now ~3/4 of the viewport width
     (instead of the previous fixed-at-100%-viewport-width) across this
     whole 320-480px range, automatically adapting as the viewport changes
     -- vw is relative so no extra media-query steps are needed within this
     range. Same pattern already used at 481-1024px below (left switches
     from the general ≤1024px rule's 0 to auto so only the right edge stays
     pinned; transform/position/slide-in behaviour there needs no JS change
     since it scales to the element's own width automatically). 481-1024px
     itself is untouched -- this rule lives only inside this exact media
     query. */
  .st-mega { left: auto; width: 75vw; max-width: 75vw; }
  /* Round 3 fix: the drawer here is only 75vw wide (see Change 3 directly
     above), leaving the remaining 25vw of the page visibly showing on its
     left -- previously that strip had no blur at all, since the backdrop
     was only ever opened by mega-menu.js for the 481-1024px tablet range
     and up (openBackdrop() gate has now been widened to include this
     320-480px range too). Same blur(14px) value already used at
     481-1024px and 1025px+, for a consistent "focus effect" across every
     breakpoint. The drawer itself (.st-mega, opaque #fff background,
     higher z-index) stays completely sharp/unaffected -- only the page
     content behind the backdrop is blurred. */
  .st-mega__backdrop {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .st-mega-header { gap: 8px; }
  .st-mega-header__logo img { max-width: 112px; max-height: 44px; }
  .st-mega-header__partner-btn { min-height: 36px; padding: 8px 12px; font-size: 11px; }
  .st-mega__mobile-heading { font-size: 11px; letter-spacing: 1.5px; }
  .st-mega__tab { font-size: 15px; padding: 13px 10px; }
  .st-mega__category { font-size: 13.5px; }
  .st-mega__links a { font-size: 13px; }
  .st-mega__promo h4 { font-size: 18px; }
  .st-mega-wrap .st-mega__burger { right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; }
}

/* 481–767 — same simplification as 320–480 above. */
@media (min-width: 481px) and (max-width: 767px) {
  .st-mega-header { gap: 12px; }
  .st-mega-header__logo img { max-width: 135px; max-height: 48px; }
  .st-mega-header__partner-btn { min-height: 40px; padding: 10px 16px; font-size: 12px; }
  .st-mega-wrap .st-mega__burger { right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; }
}

/* 768–880 */
@media (min-width: 768px) and (max-width: 880px) {
  .st-mega-header { gap: 14px; }
  .st-mega-header__logo img { max-width: 140px; }
  .st-mega-header__partner-btn { padding: 10px 16px; font-size: 12px; }
  .st-mega__tabs { padding-left: 10px; padding-right: 10px; }
  .st-mega-wrap .st-mega__burger { right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; }
}

/* 881–1024 */
@media (min-width: 881px) and (max-width: 1024px) {
  .st-mega-header { gap: 16px; }
  .st-mega-header__logo img { max-width: 150px; }
  .st-mega-header__partner-btn { padding: 11px 18px; font-size: 12.5px; }
  .st-mega-wrap .st-mega__burger { right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; }
}

/* 1025–1200 */
@media (min-width: 1025px) and (max-width: 1200px) {
  .st-mega-header { gap: 15px; }
  .st-mega-header__logo img { max-width: 155px; }
  .st-mega__tab { font-size: 15px; }
  /* Round 4 fix: the 6 Main Menu tabs were wrapping onto a second row at
     this narrower 1025-1200px width (Partner CTA is hidden here, but the
     6 tabs alone still didn't fit on one line at the tighter end of this
     range). Same 5px-per-side reduction already used at 1201-1920px
     (12px -> 7px, see the "Change 5" rule further down) applied here too,
     Main Menu tabs only -- every other tab style, and every other
     breakpoint, is untouched. */
  .st-mega__tab { padding-left: 7px; padding-right: 7px; }
  .st-mega__panel { grid-template-columns: 220px minmax(0, 1fr) 230px; }
  .st-mega__content { padding: 23px 22px; }
  .st-mega__promo { margin: 22px 16px 22px 0; padding: 22px 18px; }
  /* Change 5: the Partner CTA is scoped to 1201-1920px only. The general
     1025px+ rule (above, earlier in this file) sets it visible (order:3,
     inheriting display:flex from the base/unscoped rule) starting at
     1025px -- this narrower 1025-1200px range explicitly hides it again so
     it only actually shows from 1201px up. 1201px+ is untouched here (no
     display rule set there, so it keeps showing via that general rule). */
  .st-mega-header__partner { display: none; }
}

/* 1201–1366 */
@media (min-width: 1201px) and (max-width: 1366px) {
  .st-mega__panel { grid-template-columns: 240px minmax(0, 1fr) 240px; }
}

/* Change 5 (1201-1920px only): "Partner with Us" is now a 7th item beside
   the 6 Main Menu tabs (the button itself is unchanged CSS -- it already
   uses var(--grad) and the translateY(-5px) hover, see
   .st-mega-header__partner-btn near the top of this file). Reduce the
   Main Menu tabs' own left/right spacing only in this exact range, and
   only enough to keep the row from wrapping now that a 7th item shares it
   -- .st-mega__tab's left/right padding is reduced by 5px per side
   (12px -> 7px); top/bottom padding, gap between tabs, font-size and every
   other tab style are untouched. 1025-1200px (Partner CTA not shown there)
   and everything ≤1024px are unaffected -- this rule lives only inside
   this exact media query. */
@media (min-width: 1201px) and (max-width: 1920px) {
  .st-mega__tab { padding-left: 7px; padding-right: 7px; }
}

/* 1367–1680 */
@media (min-width: 1367px) and (max-width: 1680px) {
  .st-mega__panel { grid-template-columns: 250px minmax(0, 1fr) 248px; }
}

/* 1681–1920+ */
@media (min-width: 1681px) {
  .st-mega__panel { grid-template-columns: 266px minmax(0, 1fr) 248px; }
}

@media (max-width: 319px) {
  .st-mega-header__partner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-mega-wrap * { transition: none !important; scroll-behavior: auto !important; }
}

/* This round: Main Menu Active/Selected state, 320-1920px (every
   breakpoint) --
     .is-active = the tab whose panel is currently open (desktop:
       hover/focus-driven; mobile/tablet: tap-driven).
     .is-current = the persistent "you're on this page" indicator.
   Both now share ONE colour (#1d4ab3) and ONE always-on underline
   (#14c9c6, inset box-shadow -- no layout/box-size change, same technique
   already used elsewhere in this file), replacing the old #181A42
   is-current colour and the old desktop-only #181A42 active underline.
   Deliberately does NOT touch the bare :hover selector anywhere in this
   file, so a tab that is merely being pointed at but not yet .is-active
   (relevant for a plain-link tab, which never receives .is-active) keeps
   its existing appearance exactly as before, per explicit instruction to
   leave normal/hover colour unchanged. Deliberately placed as the LAST
   rule in this stylesheet, fully unscoped (no media query), so it reliably
   wins the cascade over every earlier neutral-forcing !important rule at
   every breakpoint (desktop's neutral .is-active override, mobile/tablet's
   neutral hover/active/focus/.is-active override) via source order, with
   matching selector specificity -- the same technique already used
   elsewhere in this file for current-page colours. Submenu
   (.st-mega__category) and Link (.st-mega__links a) active/current
   colours are completely untouched, per this round's explicit scope. */
.st-mega__tab.is-active,
.st-mega__tab.is-current {
  color: #1d4ab3 !important;
  box-shadow: inset 0 -2px 0 0 #14c9c6 !important;
}

/* Round 3 fix (320-1024px only): remove the Main Menu active/selected
   underline on mobile/tablet -- the #14c9c6 box-shadow added by the
   consolidated rule directly above this one. Keeps that same rule's
   #1d4ab3 active/selected TEXT colour completely unchanged (only
   box-shadow is neutralised here, nothing else). There was never a
   mobile hover underline to begin with (the only :hover box-shadow rule
   in this file is already scoped desktop-only, min-width:1025px, further
   up), so this covers the "no active/selected underline" requirement
   only. Placed as the new LAST rule in the stylesheet, matching
   selector specificity to the rule above, so source order lets it win
   the cascade within this narrower max-width:1024px range; 1025-1920px
   is untouched and keeps the underline exactly as before. Submenu
   (.st-mega__category) and Link (.st-mega__links a) styling is
   completely untouched -- this only targets Main Menu tabs. */
@media (max-width: 1024px) {
  .st-mega__tab.is-active,
  .st-mega__tab.is-current {
    box-shadow: none !important;
  }
}