:root {
        --color-bg-primary: #0F2537;
        --color-bg-secondary: #17344D;
        --color-bg-tertiary: #32373c;
        --color-accent-lime: #A0FF00;
        --color-accent-blue: #2F68E2;
        --color-accent-amber: #FDBE19;
      }
      .bg-\[\#06183D\] { background-color: #0F2537 !important; }
      .bg-\[\#0A1E4A\] { background-color: #17344D !important; }
      .bg-\[\#32373c\] { background-color: #32373c !important; }
      .text-\[\#A0FF00\] { color: #A0FF00 !important; }
      .bg-\[\#A0FF00\] { background-color: #A0FF00 !important; }
      .hover\:bg-\[\#84D319\]:hover { background-color: #84D319 !important; }
      .bg-\[\#2F68E2\] { background-color: #2F68E2 !important; }
      .border-\[\#2F68E2\] { border-color: #2F68E2 !important; }
      .hover\:bg-\[\#1A4BBA\]:hover { background-color: #1A4BBA !important; }
      .text-\[\#FDBE19\] { color: #FDBE19 !important; }
      .shadow-\[0_0_15px_rgba\(160\,255\,0\,0\.3\)\] { box-shadow: 0 0 15px rgba(160,255,0,0.3) !important; }
      .shadow-\[0_0_24px_rgba\(160\,255\,0\,0\.25\)\] { box-shadow: 0 0 24px rgba(160,255,0,0.25) !important; }
      .hover\:shadow-\[0_0_32px_rgba\(160\,255\,0\,0\.4\)\]:hover { box-shadow: 0 0 32px rgba(160,255,0,0.4) !important; }
      .shadow-\[0_4px_20px_rgba\(160\,255\,0\,0\.25\)\] { box-shadow: 0 4px 20px rgba(160,255,0,0.25) !important; }
      .hover\:shadow-\[0_4px_28px_rgba\(160\,255\,0\,0\.4\)\]:hover { box-shadow: 0 4px 28px rgba(160,255,0,0.4) !important; }
      .bg-\[\#2F68E2\]\/20 { background-color: rgba(47, 104, 226, 0.2) !important; }
      .border-\[\#2F68E2\]\/30 { border-color: rgba(47, 104, 226, 0.3) !important; }
      .selection\:bg-\[\#2F68E2\]\/30::selection { background-color: rgba(47, 104, 226, 0.3) !important; }
      .from-\[\#2F68E2\]\/25 { --tw-gradient-from: rgba(47, 104, 226, 0.25) !important; --tw-gradient-stops: var(--tw-gradient-from), transparent !important; }
      .bg-\[\#2F68E2\]\/10 { background-color: rgba(47, 104, 226, 0.1) !important; }
      .saw-hidden { opacity: 0 !important; }
      .saw-hidden[data-anim="up"] { transform: translateY(40px) !important; }
      .saw-hidden[data-anim="left"] { transform: translateX(-40px) !important; }
      .saw-hidden[data-anim="right"] { transform: translateX(40px) !important; }
      .saw-hidden[data-anim="scale"] { transform: scale(0.92) !important; }
      .saw-reveal {
        opacity: 1 !important;
        transform: translateY(0) translateX(0) scale(1) !important;
        transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
      }
    
  
  
  
  

  

  

  

  

  

  

  /* --- Contact Page: Hero Section Navbar Clearance --- */
  .contact-hero {
    padding-top: 8rem !important; /* Clears the fixed navbar (navbar ~80px + 20px top offset + breathing room) */
  }
  @media (max-width: 900px) {
    .contact-hero { padding-top: 7rem !important; }
  }
  @media (max-width: 600px) {
    .contact-hero { padding-top: 6rem !important; }
  }

  /* --- Floating SBG Header Overrides --- */
  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

  /* ============================================================
     FULLY FLUID RESPONSIVE NAVBAR — scales on every screen size
  ============================================================ */
  .sbg-header {
    font-family: 'Outfit', 'Poppins', 'Segoe UI', sans-serif !important;
    background: linear-gradient(90deg, #051b44 0%, #0b7595 100%) !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(11, 117, 149, 0.35) !important;
    border: 1.5px solid #A0FF00 !important;
    /* Fluid padding: tighter on small screens, generous on large */
    padding: clamp(8px, 1vw, 12px) clamp(16px, 2.5vw, 36px) !important;
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: 92% !important;
    max-width: 1200px !important;
    box-sizing: border-box !important;
    display: block !important;
    /* Prevent navbar from ever growing taller than needed */
    overflow: visible !important;
  }

  .sbg-inner-container {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(6px, 1vw, 16px) !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
  }

  /* --- Text Logo (fallback) --- */
  .sbg-logo {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(15px, 1.4vw, 20px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .sbg-logo span {
    color: #A0FF00 !important;
    font-weight: 800 !important;
    margin-left: 2px !important;
  }

  /* --- Image Logo: fluid clamp() height, scales at EVERY viewport width --- */
  .sbg-logo-img {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
  }
  .sbg-logo-img img {
    /* clamp(min, preferred, max)
       At 360px → ~30px | At 768px → ~40px | At 1024px → ~46px | At 1400px → ~56px */
    height: clamp(30px, 4vw, 56px) !important;
    width: auto !important;
    max-width: clamp(100px, 14vw, 190px) !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.2s ease !important;
  }
  .sbg-logo-img:hover img {
    opacity: 0.85 !important;
  }

  /* --- Nav Links: fluid font + padding --- */
  .sbg-nav-links-container {
    display: flex !important;
    align-items: center !important;
    gap: clamp(0px, 0.3vw, 6px) !important;
    flex-wrap: nowrap !important;
  }
  .sbg-nav-link {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(11px, 1.1vw, 15px) !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    position: relative !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    padding: clamp(4px, 0.4vw, 8px) clamp(5px, 0.8vw, 14px) !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }
  .sbg-nav-link:hover { color: #ffffff !important; }

  /* Active underline bar */
  .sbg-nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 14px !important;
    height: 3px !important;
    background-color: #f1b317 !important;
    border-radius: 10px !important;
  }

  /* --- FREE Audit button --- */
  .sbg-btn {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-family: 'Outfit', sans-serif !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .sbg-btn:hover { transform: scale(1.05) !important; }

  .sbg-btn-pill {
    background-color: #A0FF00 !important;
    color: #000000 !important;
    font-size: clamp(8px, 0.75vw, 10px) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 3px 7px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
  }
  .sbg-btn-dot {
    background-color: #000000 !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 4px !important;
    animation: sbg-blink 1.5s infinite !important;
  }
  .sbg-btn-text {
    color: #ffffff !important;
    font-size: clamp(12px, 1.1vw, 15px) !important;
    font-weight: 600 !important;
    margin-left: 5px !important;
  }

  @keyframes sbg-blink {
    0%   { opacity: 0.4; }
    50%  { opacity: 1; }
    100% { opacity: 0.4; }
  }

  /* ── Breakpoint overrides for safety ── */

  /* Medium laptops 900–1100px */
  @media (max-width: 1100px) {
    .sbg-header { padding: 8px 20px !important; top: 14px !important; }
    .sbg-logo-img img { height: clamp(28px, 3.8vw, 46px) !important; }
    .sbg-nav-link { font-size: 12px !important; padding: 5px 8px !important; }
    .sbg-btn-text { font-size: 13px !important; }
  }

  /* Small laptops / large tablets 768–900px */
  @media (max-width: 900px) {
    .sbg-header { padding: 8px 16px !important; top: 12px !important; }
    .sbg-logo-img img { height: clamp(26px, 3.5vw, 40px) !important; max-width: 130px !important; }
    .sbg-nav-link { font-size: 11px !important; padding: 4px 6px !important; }
    .sbg-btn-text { font-size: 12px !important; }
    .sbg-btn-pill { font-size: 8px !important; padding: 2px 5px !important; }
  }

  /* Tablets / mobile ≤768px — hide desktop nav, show hamburger */
  @media (max-width: 768px) {
    .sbg-desktop-nav { display: none !important; }
    .sbg-logo-img img { height: 36px !important; max-width: 120px !important; }
    .sbg-header { padding: 8px 14px !important; top: 10px !important; }
  }

  /* Small mobile ≤480px */
  @media (max-width: 480px) {
    .sbg-logo-img img { height: 30px !important; max-width: 100px !important; }
    .sbg-header { width: 95% !important; top: 8px !important; }
  }



  :root {
    --color-bg-primary: #0F2537;
    --color-bg-secondary: #17344D;
    --color-bg-tertiary: #32373c;
    --color-accent-lime: #A0FF00;
    --color-accent-blue: #2F68E2;
    --color-accent-amber: #FDBE19;
  }
  
  /* --- Default Utility Background Colors for Primary Dark Sections --- */
  .bg-\[\#0C0C1D\] { background-color: #0F2537 !important; }
  .bg-\[\#050505\] { background-color: #0F2537 !important; }
  .bg-\[\#06183D\] { background-color: #0F2537 !important; }
  .bg-\[\#0A1E4A\] { background-color: #17344D !important; }
  .bg-\[\#141428\] { background-color: #17344D !important; }

  /* --- Alternating Layout System (Even Sections = Light Gray #FEFEFE) --- */
  main section:nth-of-type(even) {
    background-color: #FEFEFE !important;
    background-image: none !important;
    color: #0F2437 !important;
    border-top: 1px solid rgba(15, 37, 55, 0.06) !important;
    border-bottom: 1px solid rgba(15, 37, 55, 0.06) !important;
  }

  /* Force Dark Text inside Even sections */
  main section:nth-of-type(even) h1,
  main section:nth-of-type(even) h2,
  main section:nth-of-type(even) h3,
  main section:nth-of-type(even) h4,
  main section:nth-of-type(even) h5,
  main section:nth-of-type(even) h6,
  main section:nth-of-type(even) strong,
  main section:nth-of-type(even) .text-white,
  main section:nth-of-type(even) .text-zinc-100,
  main section:nth-of-type(even) .text-zinc-200,
  main section:nth-of-type(even) .text-zinc-50 {
    color: #0F2437 !important;
  }

  main section:nth-of-type(even) p,
  main section:nth-of-type(even) li,
  main section:nth-of-type(even) span,
  main section:nth-of-type(even) label,
  main section:nth-of-type(even) .text-zinc-400,
  main section:nth-of-type(even) .text-zinc-300,
  main section:nth-of-type(even) .text-zinc-500,
  main section:nth-of-type(even) .text-gray-400 {
    color: #0F2437 !important; /* Premium deep navy for all body text */
  }

  /* Ensure white text on dark badge pills is not overridden */
  main section:nth-of-type(even) span[style*="background-color: #0F2537"] {
    color: #FFFFFF !important;
  }

  /* Stepper number counters */
  main section:nth-of-type(even) .text-6xl.font-black {
    color: rgba(15, 37, 55, 0.08) !important;
  }

  /* Badges in Light Sections */
  main section:nth-of-type(even) .bg-white\/\[0\.04\] {
    background-color: rgba(15, 37, 55, 0.05) !important;
    border-color: rgba(15, 37, 55, 0.1) !important;
    color: #0F2537 !important;
  }
  main section:nth-of-type(even) .bg-indigo-500\/10,
  main section:nth-of-type(even) .bg-blue-500\/10,
  main section:nth-of-type(even) .bg-pink-500\/10,
  main section:nth-of-type(even) .bg-emerald-500\/10,
  main section:nth-of-type(even) .bg-purple-500\/10,
  main section:nth-of-type(even) .bg-amber-500\/10,
  main section:nth-of-type(even) .bg-white\/10 {
    background-color: rgba(15, 37, 55, 0.05) !important;
    border-color: rgba(15, 37, 55, 0.1) !important;
    color: #17344D !important;
  }

  /* Link buttons in light sections */
  main section:nth-of-type(even) a:not([class*="bg-"]) {
    color: #2F68E2 !important;
  }

  /* Border Dividers in Light Sections */
  main section:nth-of-type(even) .border-white\/10,
  main section:nth-of-type(even) .border-white\/5,
  main section:nth-of-type(even) .border-white\/\[0\.08\] {
    border-color: rgba(15, 37, 55, 0.08) !important;
  }

  /* Cards inside Light Sections - rendered as premium pure-white boxes with soft shadows */
  main section:nth-of-type(even) .bg-zinc-900\/50,
  main section:nth-of-type(even) .bg-gradient-to-br,
  main section:nth-of-type(even) .bg-zinc-900,
  main section:nth-of-type(even) .bg-black,
  main section:nth-of-type(even) .bg-\[\#141428\],
  main section:nth-of-type(even) .bg-white\/5,
  main section:nth-of-type(even) .bg-white\/10 {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid rgba(15, 37, 55, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(15, 37, 55, 0.06), 0 1px 3px rgba(15, 37, 55, 0.02) !important;
  }

  main section:nth-of-type(even) .bg-zinc-900\/50 *,
  main section:nth-of-type(even) .bg-gradient-to-br *,
  main section:nth-of-type(even) .bg-zinc-900 *,
  main section:nth-of-type(even) .bg-black *,
  main section:nth-of-type(even) .bg-\[\#141428\] *,
  main section:nth-of-type(even) .bg-white\/5 *,
  main section:nth-of-type(even) .bg-white\/10 * {
    color: #0F2437 !important;
  }
  main section:nth-of-type(even) .bg-zinc-900\/50 p,
  main section:nth-of-type(even) .bg-gradient-to-br p,
  main section:nth-of-type(even) .bg-zinc-900 p,
  main section:nth-of-type(even) .bg-black p,
  main section:nth-of-type(even) .bg-\[\#141428\] p,
  main section:nth-of-type(even) .bg-white\/5 p,
  main section:nth-of-type(even) .bg-white\/10 p {
    color: #0F2437 !important;
  }

  /* Soften glow and blur graphics in light mode */
  main section:nth-of-type(even) .absolute.inset-0.bg-\[radial-gradient\],
  
  main section:nth-of-type(even) .pointer-events-none {
    opacity: 0.12 !important;
  }

  /* Keep custom overrides for segment selector, forms, and custom color variables intact */
  .shadow-\[0_0_15px_rgba\(160\,255\,0\,0\.3\)\] { box-shadow: 0 0 15px rgba(160,255,0,0.3) !important; }
  .shadow-\[0_0_24px_rgba\(160\,255\,0\,0\.25\)\] { box-shadow: 0 0 24px rgba(160,255,0,0.25) !important; }
  .border-\[\#2F68E2\]\/30 { border-color: rgba(47, 104, 226, 0.3) !important; }

  
  
  
  
  

  

  /* Force Why Traditional Marketing Fails section background to render in clean off-white #FEFEFE */
  #traditional-fails {
    background-color: #FEFEFE !important;
    background-image: none !important;
  }

  /* Force Why Traditional Marketing Fails copy to render in premium navy #0F2437 */
  #traditional-fails h2,
  #traditional-fails h2 span,
  #traditional-fails p:not([class*="uppercase"]),
  #traditional-fails li,
  #traditional-fails li span:not([class*="uppercase"]),
  #traditional-fails strong {
    color: #0F2437 !important;
  }

  /* Force high contrast text inside deep navy (#0F2437) metrics cards inside #traditional-fails */
  #traditional-fails div[style*="background-color: #0F2437"] div,
  #traditional-fails div[style*="background-color: #0F2437"] p,
  #traditional-fails div[style*="background-color: #0F2437"] span {
    color: #FFFFFF !important;
  }
  
  /* Force high contrast text inside brand green (#A0FF01) metrics cards inside #traditional-fails */
  #traditional-fails div[style*="background-color: #A0FF01"] div,
  #traditional-fails div[style*="background-color: #A0FF01"] p,
  #traditional-fails div[style*="background-color: #A0FF01"] span {
    color: #000000 !important;
  }

  
  

  
  

  /* Force all body text, paragraphs, lists, and spans inside ODD (dark background) sections to render in pure white (#FFFFFF) */
  main section:nth-of-type(odd) p:not([class*="text-black"]),
  main section:nth-of-type(odd) li,
  main section:nth-of-type(odd) span:not([class*="text-blue"]):not([class*="text-emerald"]):not([class*="text-indigo"]):not([class*="text-[#A0FF00]"]):not([class*="text-red"]):not([class*="text-green"]):not([class*="text-[#FDBE19]"]),
  main section:nth-of-type(odd) .text-zinc-400,
  main section:nth-of-type(odd) .text-zinc-300,
  main section:nth-of-type(odd) .text-gray-400 {
    color: #FFFFFF !important;
  }
  
  /* Neon Lime Green Button premium hover effect */
  .hover-btn-lime {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .hover-btn-lime:hover {
    background-color: #84D319 !important;
    transform: scale(1.06) translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(160, 255, 1, 0.35) !important;
  }

  /* --- Force Reviews Section Cards custom style overrides --- */
  #client-reviews .backdrop-blur-xl {
    background-color: #0F2537 !important;
    border: 2px solid #A0FF00 !important;
    color: #FFFFFF !important;
    opacity: 1 !important; /* Prevent opacity: 0.12 override from even section blur elements */
    box-shadow: 0 10px 30px rgba(160, 255, 0, 0.15) !important;
  }

  /* Force all descendant text/nodes inside cards to be crisp white by default */
  #client-reviews .backdrop-blur-xl * {
    color: #FFFFFF !important;
  }

  /* Testimonial Quote Text */
  #client-reviews .backdrop-blur-xl p.leading-relaxed {
    color: #FFFFFF !important;
  }

  /* Author Name */
  #client-reviews .backdrop-blur-xl h4 {
    color: #FFFFFF !important;
  }

  /* Author Subtitle / Role */
  #client-reviews .backdrop-blur-xl p.text-zinc-500,
  #client-reviews .backdrop-blur-xl .text-zinc-500 {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  /* Metric highlight text - custom brand lime green */
  #client-reviews .backdrop-blur-xl .text-emerald-400,
  #client-reviews .backdrop-blur-xl span.text-emerald-400,
  #client-reviews .backdrop-blur-xl .text-4xl.font-black {
    color: #A0FF00 !important;
  }

  /* Metric platform subtext - semi-transparent white */
  #client-reviews .backdrop-blur-xl span.text-zinc-500 {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  /* SVG Icons (Quote icons) */
  #client-reviews .backdrop-blur-xl svg.text-blue-500 {
    color: #A0FF00 !important;
    stroke: #A0FF00 !important;
  }

  /* Golden yellow for star icons to keep them premium and bright */
  #client-reviews .backdrop-blur-xl .text-yellow-500,
  #client-reviews .backdrop-blur-xl .text-yellow-500 * {
    color: #FDBE19 !important;
    fill: #FDBE19 !important;
  }

  /* Soft blue for avatar initials to keep them pleasant and distinct */
  #client-reviews .backdrop-blur-xl .text-blue-400 {
    color: #60A5FA !important;
  }

  /* --- Premium Light FAQ Section Redesign --- */
  #admissions-faq {
    background-color: #17344D !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  /* Section Header Typography (Light on dark BG) */
  #admissions-faq .text-center h2 { color: #FFFFFF !important; }
  #admissions-faq .text-center p { color: #E4E4E7 !important; }
  #admissions-faq .text-center span { color: #A0FF00 !important; }
  #admissions-faq .text-center .bg-blue-500\/5 { background-color: rgba(160, 255, 0, 0.1) !important; border-color: rgba(160, 255, 0, 0.2) !important; }

  /* Explicitly define layout since Tailwind utils are pre-compiled */
  #admissions-faq .max-w-4xl {
    max-width: 56rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Card Typography (Dark text on White cards) */
  #admissions-faq .faq-card h3,
  #admissions-faq .faq-card span,
  #admissions-faq .faq-card button {
    color: #0F2537 !important;
  }

  #admissions-faq .faq-card {
    background-color: #FFFFFF !important;
    border: 2px solid #A0FF00 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 37, 55, 0.03), 0 2px 4px -1px rgba(15, 37, 55, 0.01) !important;
  }

  #admissions-faq .faq-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.5rem 2rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  #admissions-faq .faq-header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
    padding-right: 1rem !important;
  }

  #admissions-faq .faq-header span {
    font-size: 1.5rem !important;
    font-family: monospace !important;
    font-weight: 800 !important;
    color: #A0FF00 !important;
    opacity: 0.8 !important;
    flex-shrink: 0 !important;
  }

  #admissions-faq .faq-header h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.375 !important;
    margin: 0 !important;
  }

  #admissions-faq .faq-icon-wrapper {
    flex-shrink: 0 !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(15, 37, 55, 0.04) !important;
    border: 1px solid rgba(15, 37, 55, 0.1) !important;
    transition: all 0.25s ease !important;
  }

  #admissions-faq .faq-icon {
    width: 1rem !important;
    height: 1rem !important;
    color: #0F2537 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #admissions-faq .faq-card:hover {
    border-color: #A0FF00 !important;
    box-shadow: 0 10px 25px -5px rgba(160, 255, 0, 0.15) !important;
    transform: translateY(-1px) !important;
  }

  #admissions-faq .faq-card.active {
    border-color: #A0FF00 !important;
    box-shadow: 0 12px 30px -8px rgba(15, 37, 55, 0.06) !important;
  }

  #admissions-faq .faq-card:hover .faq-icon-wrapper,
  #admissions-faq .faq-card[open] .faq-icon-wrapper {
    background-color: #A0FF00 !important;
    border-color: #A0FF00 !important;
  }

  #admissions-faq .faq-card:hover .faq-icon {
    color: #000000 !important;
  }

  #admissions-faq .faq-card[open] .faq-icon {
    color: #000000 !important;
    transform: rotate(180deg) !important;
  }

  /* Body Content */
  #admissions-faq .faq-body {
    transition: all 0.3s ease-in-out !important;
  }

  #admissions-faq .faq-body > div {
    padding: 0 2rem 2rem 4.75rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.625 !important;
    color: rgba(15, 37, 55, 0.75) !important;
  }

\n
/* ==========================================================
   CASE STUDIES PAGE PERMANENT FIXES
   These are globally defined to survive React client-side routing
   ========================================================== */

/* 1. Green border for the case study cards */
main .bg-\[\#141428\].rounded-\[24px\] {
  border: 1.5px solid #A0FF00 !important;
}

/* 2. White boxes for metrics with dark blue text */
main .bg-\[\#141428\] .bg-\[\#0F2537\].rounded-xl {
  background-color: #FFFFFF !important;
  border: 1px solid #E4E4E7 !important;
}

main .bg-\[\#141428\] .bg-\[\#0F2537\].rounded-xl,
main .bg-\[\#141428\] .bg-\[\#0F2537\].rounded-xl *,
main .bg-\[\#141428\] .bg-\[\#0F2537\].rounded-xl p,
main .bg-\[\#141428\] .bg-\[\#0F2537\].rounded-xl div,
main .bg-\[\#141428\] .bg-\[\#0F2537\].rounded-xl svg {
  color: #0F2537 !important;
  stroke: #0F2537 !important;
}

/* 3. Pure black text for Challenge/Solution/Result overview */
main .bg-\[\#141428\] .text-zinc-400.font-light,
main .bg-\[\#141428\] .text-zinc-400.font-light *,
main .bg-\[\#141428\] .text-zinc-400.font-light p,
main .bg-\[\#141428\] .text-zinc-400.font-light strong {
  color: #000000 !important;
}


/* ==========================================================
   SERVICE SUBPAGES FIX
   Fix cards & content on SEO, SMM, SEM, AI, Web Dev, Meta Ads pages
   ========================================================== */

/* Restore dark cards on ALL service subpages - override the even-section rule */
/* These pages have dark backgrounds (#050505) so cards must stay dark */

/* Hero section badge pills */
main .bg-emerald-500\/10,
main .bg-blue-500\/15,
main .bg-indigo-500\/10,
main .bg-pink-500\/10,
main .bg-purple-500\/10,
main .bg-amber-500\/10,
main .bg-orange-500\/10 {
  opacity: 1 !important;
}

/* "What We Offer" feature cards - styled as beautiful theme blue cards */
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl {
  background: #0F2537 !important; /* Deep Navy Blue */
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(15, 37, 55, 0.12) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl:hover {
  transform: translateY(-6px) !important;
  background: #17344D !important; /* Elegant lighter blue on hover */
  box-shadow: 0 16px 36px rgba(15, 37, 55, 0.22) !important;
}

main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl h3 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl p {
  color: rgba(228, 228, 231, 0.9) !important; /* Premium high-contrast readable zinc-200 text */
}

/* Page-specific hover border transitions */
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl.hover\:border-pink-500\/20:hover { border-color: rgba(236, 72, 153, 0.45) !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl.hover\:border-emerald-500\/20:hover { border-color: rgba(16, 185, 129, 0.45) !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl.hover\:border-amber-500\/20:hover { border-color: rgba(245, 158, 11, 0.45) !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl.hover\:border-blue-500\/20:hover { border-color: rgba(59, 130, 246, 0.45) !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl.hover\:border-indigo-500\/20:hover { border-color: rgba(99, 102, 241, 0.45) !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl.hover\:border-purple-500\/20:hover { border-color: rgba(168, 85, 247, 0.45) !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl.hover\:border-orange-500\/20:hover { border-color: rgba(249, 115, 22, 0.45) !important; }

/* Ensure SVG icons keep their page-specific brand colors instead of being overwritten to white */
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg.text-pink-500 { color: #EC4899 !important; stroke: #EC4899 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg.text-emerald-500 { color: #10B981 !important; stroke: #10B981 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg.text-amber-500 { color: #F59E0B !important; stroke: #F59E0B !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg.text-blue-500 { color: #3B82F6 !important; stroke: #3B82F6 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg.text-indigo-500 { color: #6366F1 !important; stroke: #6366F1 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg.text-purple-500 { color: #A855F7 !important; stroke: #A855F7 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg.text-orange-500 { color: #F97316 !important; stroke: #F97316 !important; }


/* Fix pointer-events-none opacity override that was hiding blur decorations */
main section:nth-of-type(even) .pointer-events-none.blur-\[50px\] {
  opacity: 0.3 !important;
}

/* Service page CTA section - keep dark gradient box dark */
main section:nth-of-type(even) .bg-gradient-to-b.from-emerald-900\/20,
main section:nth-of-type(even) .bg-gradient-to-b.from-blue-900\/20,
main section:nth-of-type(even) .bg-gradient-to-b.from-indigo-900\/20,
main section:nth-of-type(even) .bg-gradient-to-b.from-pink-900\/20,
main section:nth-of-type(even) .bg-gradient-to-b.from-purple-900\/20,
main section:nth-of-type(even) .bg-gradient-to-b.from-orange-900\/20,
main section:nth-of-type(even) .bg-gradient-to-b.from-amber-900\/20 {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}

main section:nth-of-type(even) .bg-gradient-to-b.from-emerald-900\/20 h2,
main section:nth-of-type(even) .bg-gradient-to-b.from-blue-900\/20 h2,
main section:nth-of-type(even) .bg-gradient-to-b.from-indigo-900\/20 h2,
main section:nth-of-type(even) .bg-gradient-to-b.from-pink-900\/20 h2,
main section:nth-of-type(even) .bg-gradient-to-b.from-purple-900\/20 h2,
main section:nth-of-type(even) .bg-gradient-to-b.from-orange-900\/20 h2,
main section:nth-of-type(even) .bg-gradient-to-b.from-amber-900\/20 h2 {
  color: #FFFFFF !important;
}

main section:nth-of-type(even) .bg-gradient-to-b.from-emerald-900\/20 p,
main section:nth-of-type(even) .bg-gradient-to-b.from-blue-900\/20 p,
main section:nth-of-type(even) .bg-gradient-to-b.from-indigo-900\/20 p,
main section:nth-of-type(even) .bg-gradient-to-b.from-pink-900\/20 p,
main section:nth-of-type(even) .bg-gradient-to-b.from-purple-900\/20 p,
main section:nth-of-type(even) .bg-gradient-to-b.from-orange-900\/20 p,
main section:nth-of-type(even) .bg-gradient-to-b.from-amber-900\/20 p {
  color: rgba(161, 161, 170, 1) !important;
}

/* Fix "What We Offer" heading visibility on service subpages */
main[class*="bg-[#050505]"] section:nth-of-type(even) .text-center h2 {
  color: #FFFFFF !important;
}

/* SVG icons inside service cards - keep colored */
main section:nth-of-type(even) .bg-zinc-900\/50.rounded-2xl svg {
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}


/* ==========================================================
   SERVICES PAGE CARD DESCRIPTION FIX
   The services grid is inside a white section (even), but cards
   have dark blue (#0F2437) backgrounds - description text was invisible.
   ========================================================== */

/* Restore white/zinc description text inside dark cards on services page */
main section:nth-of-type(even) div[class*="bg-\[#0F2537\]"] p,
main section:nth-of-type(even) div[class*="bg-\[#0F2537\]"] p.text-zinc-400,
main section:nth-of-type(even) div[class*="bg-\[#0F2537\]"] p.leading-relaxed {
  color: rgba(161, 161, 170, 1) !important; /* zinc-400 - visible on dark bg */
}

/* Restore heading text color inside dark cards */
main section:nth-of-type(even) div[class*="bg-\[#0F2537\]"] h3 {
  color: #FEFEFE !important;
}

/* Restore link text inside dark cards */
main section:nth-of-type(even) div[class*="bg-\[#0F2537\]"] a {
  color: #FEFEFE !important;
}

/* Restore tag pill text inside dark cards */
main section:nth-of-type(even) div[class*="bg-\[#0F2537\]"] .text-zinc-300 {
  color: rgba(212, 212, 216, 1) !important; /* zinc-300 */
}

/* Restore step numbers inside dark How We Work cards */
main section:nth-of-type(even) div[class*="bg-\[#0F2537\]"] .text-5xl.font-black {
  color: rgba(160, 255, 0, 0.1) !important;
}


/* ==========================================================
   METRIC BOXES GLOBAL FIX - ALL PAGES
   Force ALL bg-[#0F2537] rounded-xl metric boxes to have
   pure white text, regardless of section position (odd/even)
   ========================================================== */

/* Target metric boxes by their specific class combination */
div.bg-\[\#0F2537\].rounded-xl,
div.bg-\[\#0F2537\].rounded-xl *,
div.bg-\[\#0F2537\].rounded-xl div,
div.bg-\[\#0F2537\].rounded-xl p,
div.bg-\[\#0F2537\].rounded-xl span {
  color: #FFFFFF !important;
}

div.bg-\[\#0F2537\].rounded-xl svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}


/* ==========================================================
   METRIC BOXES GLOBAL FIX - ALL PAGES
   White background with dark blue text on all metric boxes
   ========================================================== */

div.bg-\[\#0F2537\].rounded-xl {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(15, 37, 55, 0.12) !important;
  box-shadow: 0 2px 12px rgba(15, 37, 55, 0.08) !important;
}

div.bg-\[\#0F2537\].rounded-xl,
div.bg-\[\#0F2537\].rounded-xl *,
div.bg-\[\#0F2537\].rounded-xl div,
div.bg-\[\#0F2537\].rounded-xl p,
div.bg-\[\#0F2537\].rounded-xl span,
div.bg-\[\#0F2537\].rounded-xl .font-extrabold,
div.bg-\[\#0F2537\].rounded-xl .text-xl,
div.bg-\[\#0F2537\].rounded-xl .text-2xl {
  color: #0F2537 !important;
}

div.bg-\[\#0F2537\].rounded-xl svg {
  stroke: #0F2537 !important;
  color: #0F2537 !important;
}


/* ==========================================================
   SMM & SEM PAGES METRIC CARDS OVERRIDE
   ========================================================== */

.glass-panel {
  background: #0F2537 !important; /* Deep Navy Blue */
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(15, 37, 55, 0.12) !important;
  border-radius: 1.5rem !important; /* 24px */
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.glass-panel:hover {
  transform: translateY(-6px) !important;
  background: #17344D !important; /* Lighter theme blue on hover */
  box-shadow: 0 16px 36px rgba(15, 37, 55, 0.22) !important;
}

.glass-panel h3 {
  font-weight: 800 !important;
  font-size: 4.5rem !important;
}

.glass-panel p {
  color: rgba(228, 228, 231, 0.9) !important; /* Zinc-200 / white text */
}


/* ==========================================================
   LOCAL BUSINESS ADS PAGES CARD OVERRIDES
   ========================================================== */

/* 1. Comparison Cards (Broad Guesswork vs Precision Geofencing) */
main .bg-white\/5.border.border-white\/10.rounded-3xl {
  background: #0F2537 !important; /* Deep Navy Blue */
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(15, 37, 55, 0.12) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

main .bg-white\/5.border.border-white\/10.rounded-3xl:hover {
  transform: translateY(-6px) !important;
  background: #17344D !important; /* Lighter theme blue on hover */
  box-shadow: 0 16px 36px rgba(15, 37, 55, 0.22) !important;
}

/* 2. Metrics Cards inside the switcher segments */
#segment-selector .metrics-card {
  background: #0F2537 !important; /* Deep Navy Blue */
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 20px rgba(15, 37, 55, 0.1) !important;
  border-radius: 1rem !important; /* 16px */
  padding: 1.5rem !important;
  text-align: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#segment-selector .metrics-card:hover {
  transform: translateY(-4px) !important;
  background: #17344D !important;
  box-shadow: 0 12px 28px rgba(15, 37, 55, 0.18) !important;
}

/* High specificity wrapper to override local style tags on switcher */
body #segment-selector .metrics-card .text-4xl {
  color: #A0FF00 !important; /* Bright green/lime theme accent */
  font-weight: 800 !important;
}

#segment-selector .metrics-card .text-xs {
  color: rgba(228, 228, 231, 0.9) !important; /* Zinc-200 / white text */
}


/* ==========================================================
   SERVICE SUBPAGES OVERRIDE (AI, E-Commerce, Google Ads, Meta Ads, SEO, Web Dev)
   ========================================================== */

/* 1. Main Grid Card Container Overrides (Force Theme Solid Blue #0F2537) */
main section:nth-of-type(even) .bg-zinc-900\/50 {
  background: #0F2537 !important; /* Brand Navy Blue */
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(15, 37, 55, 0.12) !important;
  border-radius: 1.5rem !important; /* 24px */
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Hover states for service cards */
main section:nth-of-type(even) .bg-zinc-900\/50:hover {
  transform: translateY(-6px) !important;
  background: #17344D !important; /* Lighter theme blue on hover */
  box-shadow: 0 16px 36px rgba(15, 37, 55, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* 3. Force High Contrast Text & Title Colors inside Cards */
main section:nth-of-type(even) .bg-zinc-900\/50 h3 {
  color: #FFFFFF !important;
  transition: color 0.3s ease !important;
}

main section:nth-of-type(even) .bg-zinc-900\/50:hover h3 {
  color: #A0FF00 !important; /* Branded Lime Green Title highlight on hover */
}

main section:nth-of-type(even) .bg-zinc-900\/50 p,
main section:nth-of-type(even) .bg-zinc-900\/50 li {
  color: rgba(228, 228, 231, 0.95) !important; /* Off-white for high legibility */
}

/* 4. Restore original page-themed colors to SVG icons inside the cards */
main section:nth-of-type(even) .bg-zinc-900\/50 svg.text-purple-500 { color: #A855F7 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50 svg.text-pink-500 { color: #EC4899 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50 svg.text-blue-500 { color: #3B82F6 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50 svg.text-indigo-500 { color: #6366F1 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50 svg.text-emerald-500 { color: #10B981 !important; }
main section:nth-of-type(even) .bg-zinc-900\/50 svg.text-amber-500 { color: #F59E0B !important; }

/* ==========================================================
   SBG NAVIGATION RESPONSIVE & MOBILE MENU SYSTEM
   ========================================================== */

/* 1. Desktop View Settings (Large Screens) */
@media (min-width: 769px) {
  /* Completely hide the hamburger icon and mobile menu wrapper on desktop */
  .sbg-hamburger {
    display: none !important;
  }
  .sbg-mobile-menu {
    display: none !important;
  }
  /* Ensure the desktop navigation link container displays */
  .sbg-desktop-nav {
    display: flex !important;
  }
}

/* 2. Mobile View Settings (Small Screens) */
@media (max-width: 768px) {
  /* Hide the regular desktop links on mobile */
  .sbg-desktop-nav {
    display: none !important;
  }

  /* Style the mobile hamburger button properly */
  .sbg-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 8px !important;
    outline: none !important;
    z-index: 10000 !important;
  }
  
  .sbg-hamburger svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
  }

  /* Full screen overlay for mobile navigation */
  .sbg-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #0F2537 !important; /* Brand Navy Blue */
    z-index: 9998 !important; /* Sits right underneath the active header z-index */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Smooth transition animation for sliding/fading in */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
  }

  /* Active state triggered by JavaScript */
  .sbg-mobile-menu.sbg-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .sbg-mobile-menu-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 20px !important;
  }

  /* Styled navigation links on mobile */
  .sbg-mobile-link {
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 20px !important;
  }

  .sbg-mobile-link:hover,
  .sbg-mobile-link.active {
    color: #A0FF00 !important; /* Branded lime green highlight */
    transform: scale(1.05) !important;
  }
}