/**
 * ExamBlaze Dark Theme
 * Premium dark navy color scheme across entire site
 * ONE consistent dark background - NO green, NO white sections
 *
 * Color Palette:
 * - Primary BG:     #0f172a (dark navy)
 * - Secondary BG:   #0c1222 (deeper navy)
 * - Card BG:        rgba(255,255,255,0.03) (glass)
 * - Card BG Alt:    rgba(255,255,255,0.05) (slightly brighter glass)
 * - Border:         rgba(255,255,255,0.07)
 * - Border Hover:   rgba(20,184,166,0.25)
 * - Heading Text:   #ffffff
 * - Body Text:      #e2e8f0 (bright light)
 * - Muted Text:     #94a3b8
 * - Accent:         #14b8a6 (teal - text/icons only)
 * - CTA Orange:     #f97316
 * - Gold Stars:     #fbbf24
 *
 * @version 2.0
 */

/* ========================================
   OVERRIDE CSS VARIABLES - Dark Theme
   This turns ALL var(--bg-white) etc to dark
   ======================================== */

html:root {
    /* Background overrides */
    --bg-white: rgba(255, 255, 255, 0.03);
    --bg-light: #0f172a;
    --bg-lighter: #0f172a;
    --bg-light-blue: rgba(255, 255, 255, 0.02);
    --bg-dark: #0c1222;
    --bg-gray: #0f172a;
    --bg-overlay: rgba(15, 23, 42, 0.8);

    /* Text overrides */
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-light: #94a3b8;
    --text-dark: #ffffff;
    --text-white: #ffffff;
    --text-muted: #94a3b8;

    /* Border overrides */
    --border-light: rgba(255, 255, 255, 0.07);
    --border-medium: rgba(255, 255, 255, 0.1);
    --border-dark: rgba(255, 255, 255, 0.15);
    --border-card: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.07);

    /* Shadow overrides */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 15px 40px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);

    /* Gradient overrides - no green/teal backgrounds */
    --gradient-hero: linear-gradient(135deg, #0c1222 0%, #0f172a 50%, #131d35 100%);
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);

    /* Card */
    --card-bg: rgba(255, 255, 255, 0.03);

    /* Deep navy alias */
    --deep-navy: #0c1222;
}

/* ========================================
   GLOBAL BODY & PAGE BACKGROUND
   ======================================== */

html {
    background: #0c1222 !important;
}

body {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    overflow-x: hidden !important;
}

main {
    background: #0f172a !important;
    overflow-x: hidden !important;
}

/* ========================================
   NUCLEAR OVERRIDE - NO WHITE OR GREEN BG
   Force ALL elements to dark backgrounds
   ======================================== */

/* Kill ALL white and light backgrounds */
section,
div.section,
.wrapper,
.content-wrapper {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
}

/* Kill alternating section backgrounds */
section:nth-of-type(even),
section:nth-of-type(odd) {
    background: #0f172a !important;
    background-image: none !important;
}

/* ========================================
   TOP TICKER BAR - Dark Theme
   ======================================== */

.top-ticker,
.ticker-bar,
.announcement-bar,
[class*="ticker"] {
    background: linear-gradient(135deg, #050810 0%, #0a0f1e 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.top-ticker *,
.ticker-bar *,
[class*="ticker"] a,
[class*="ticker"] span {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-weight: 600 !important;
}

[class*="ticker"] a:hover {
    color: #14b8a6 !important;
}

/* ========================================
   CONTACT BAR - Dark Theme (no green)
   ======================================== */

.contact-bar,
.top-bar,
.top-contact-bar,
[class*="contact-bar"] {
    background: #070b16 !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.contact-bar *,
.top-contact-bar *,
[class*="contact-bar"] * {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

.contact-bar a:hover,
.top-contact-bar a:hover {
    color: #5eead4 !important;
}

.trust-badges .badge,
.top-contact-bar .badge {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
    font-weight: 600 !important;
}

.top-contact-bar .badge i,
.trust-badges .badge i {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
}

/* ========================================
   MAIN HEADER / NAVBAR - Beautiful Dark
   ======================================== */

.main-header {
    background: linear-gradient(180deg, #070b16 0%, #0a0f1e 100%) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.12) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

.main-header.scrolled {
    background: rgba(7, 11, 22, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Header layout - flexible and adaptive */
.main-header .container {
    max-width: 1500px !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

.main-header .nav-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 60px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Nav menu - flexible gap */
.main-header .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;
    justify-content: center !important;
}

/* Logo takes only needed space */
.main-header .logo {
    flex-shrink: 0 !important;
    margin-right: 15px !important;
}

/* Nav CTA area - flex shrink */
.main-header .nav-cta {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 10px !important;
}

/* Logo - NO border, NO background box */
.main-header .logo,
.main-header .logo a,
.logo,
.logo a {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.main-header .logo a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: transform 0.3s ease !important;
}

.main-header .logo a:hover {
    transform: scale(1.05) !important;
    border: none !important;
    background: transparent !important;
}

.main-header .logo-text,
.main-header .logo span.logo-text,
span.logo-text,
.logo-text {
    background: linear-gradient(135deg, #5eead4, #2dd4bf, #14b8a6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    filter: drop-shadow(0 2px 10px rgba(20, 184, 166, 0.4)) !important;
}

.main-header .logo-icon,
.logo-icon {
    font-size: 32px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important;
}

/* Nav Items - Round bordered pills (exclude logo) */
.main-header .nav-item > a,
.main-header .nav-link,
.main-header .nav-menu > li > a,
.main-header .nav-item-dropdown > a {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 50px !important;
    padding: 9px 20px !important;
    min-width: 80px !important;
    text-align: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.main-header .nav-item > a:hover,
.main-header .nav-link:hover,
.main-header .nav-menu > li > a:hover,
.main-header .nav-item-dropdown > a:hover {
    background: rgba(20, 184, 166, 0.15) !important;
    border-color: rgba(20, 184, 166, 0.5) !important;
    color: #5eead4 !important;
    -webkit-text-fill-color: #5eead4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.2) !important;
}

.main-header .nav-item.active > a,
.main-header .nav-link.active {
    background: rgba(20, 184, 166, 0.18) !important;
    border-color: #14b8a6 !important;
    color: #5eead4 !important;
    -webkit-text-fill-color: #5eead4 !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2) !important;
}

/* Prevent nav styling from applying to logo link */
.main-header .logo a,
.main-header .logo > a,
.main-header nav .logo a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.main-header .logo a:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Nav chevron icons - brighter */
.main-header .nav-link i.fa-chevron-down,
.main-header .nav-menu a i {
    color: rgba(94, 234, 212, 0.6) !important;
    -webkit-text-fill-color: rgba(94, 234, 212, 0.6) !important;
    font-size: 9px !important;
}

.main-header .nav-link:hover i.fa-chevron-down,
.main-header .nav-menu a:hover i {
    color: #5eead4 !important;
    -webkit-text-fill-color: #5eead4 !important;
}

/* Star rating in header */
.main-header .trust-rating,
.main-header [class*="rating"],
.main-header [class*="trust"] {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
}

/* Dropdown Menus */
.main-header .dropdown-menu,
.main-header .nav-dropdown,
.main-header [class*="dropdown"] {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

.main-header .dropdown-menu a,
.main-header .nav-dropdown a {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

.main-header .dropdown-menu a:hover,
.main-header .nav-dropdown a:hover {
    background: rgba(20, 184, 166, 0.1) !important;
    color: #14b8a6 !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

/* Mobile Menu Toggle */
.mobile-toggle,
.menu-toggle,
.hamburger {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

.mobile-toggle span,
.hamburger span {
    background: #e2e8f0 !important;
}

/* Mobile Menu */
.mobile-menu,
.nav-mobile,
[class*="mobile-menu"],
.mobile-dropdown-menu {
    background: #0f172a !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mobile-menu a,
.nav-mobile a,
.mobile-dropdown-menu a {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    background: transparent !important;
}

.mobile-menu a:hover,
.nav-mobile a:hover,
.mobile-dropdown-menu a:hover {
    color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.08) !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

.mobile-divider {
    background: rgba(255, 255, 255, 0.06) !important;
}

.mobile-contact-btn {
    background: rgba(20, 184, 166, 0.1) !important;
    color: #14b8a6 !important;
}

/* ========================================
   FORMS - Dark Theme (Order Page, Contact)
   ======================================== */

/* Form inputs, textareas, selects */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #14b8a6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

/* Select dropdown option styling */
select option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Form labels */
.form-group label,
label {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* Form small/helper text */
.form-group small,
form small {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

/* CAPTCHA box */
.form-group[style*="rgba(249, 115, 22"] {
    background: rgba(249, 115, 22, 0.08) !important;
}

/* Checkbox label text */
input[type="checkbox"] + span,
label span {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

label span a {
    color: #14b8a6 !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

/* Alert messages */
.alert {
    border-radius: 8px !important;
}

/* ========================================
   BREADCRUMBS - Dark Theme
   ======================================== */

.breadcrumb,
.breadcrumbs,
[class*="breadcrumb"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.breadcrumb a,
.breadcrumbs a,
[class*="breadcrumb"] a {
    color: #94a3b8 !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: #14b8a6 !important;
}

.breadcrumb span,
.breadcrumbs span,
[class*="breadcrumb"] span {
    color: #64748b !important;
}

.breadcrumb .separator,
[class*="breadcrumb"] i {
    color: #475569 !important;
}

/* ========================================
   HERO SECTIONS - DARK NAVY (NO GREEN!)
   ======================================== */

.hero-section,
.wgu-hero,
.wgu-classes-hero,
.wgu-assignments-hero,
.wgu-proctored-hero,
[class*="hero-section"],
[class*="-hero"],
.hero,
.page-hero {
    background: linear-gradient(135deg, #0c1222 0%, #0f172a 40%, #131d35 70%, #0f172a 100%) !important;
    background-image: linear-gradient(135deg, #0c1222 0%, #0f172a 40%, #131d35 70%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.1) !important;
}

/* Hero text stays white and bright */
.hero-section *,
.wgu-hero *,
[class*="hero-section"] h1,
[class*="hero-section"] h2,
[class*="hero-section"] p,
[class*="-hero"] h1,
[class*="-hero"] h2,
[class*="-hero"] p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[class*="hero-section"] p,
[class*="-hero"] p,
.hero-section p,
.wgu-hero p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* Hero trust badges */
.hero-section .trust-badge,
.hero-section .trust-item,
[class*="hero"] .trust-badge,
[class*="hero"] .trust-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ========================================
   ALL CONTENT SECTIONS - Dark Glass Cards
   NO green/teal gradient backgrounds
   ======================================== */

/* Light-bg sections become dark */
.services-section,
.success-stories-section,
.faq-section,
.how-it-works-section,
.cert-logos-section,
.wgu-services,
.wgu-why-choose,
.wgu-courses,
.wgu-process,
.wgu-stats,
.wgu-faq,
.nursing-section,
.content-section,
.about-section,
.stats-section,
.related-services-section,
/* WGU subpages */
.wgu-classes-about,
.wgu-classes-services,
.wgu-popular-classes,
.wgu-classes-process,
.wgu-classes-benefits,
.wgu-classes-faq,
.wgu-pa-explained,
.wgu-assignment-types,
.wgu-quality-difference,
.wgu-assignments-process,
.wgu-assignments-pricing,
.wgu-assignments-faq,
.wgu-proctored-explained,
.wgu-exam-types,
.wgu-popular-exams,
.wgu-proctoring-software,
.wgu-proctored-process,
.wgu-proctored-guarantees,
.wgu-proctored-faq,
[class*="wgu-classes-"],
[class*="wgu-assignments-"],
[class*="wgu-proctored-"] {
    background: rgba(255, 255, 255, 0.015) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* CTA, testimonials, guarantees - DARK NAVY (no green gradient!) */
.guarantees-section,
.wgu-testimonials,
.wgu-cta,
.ged-testimonials,
.certifications-testimonials,
[class*="-testimonials"],
[class*="-cta"]:not(.hero-buttons):not([class*="footer"]):not(.eb-footer-cta),
.final-cta-section,
.limited-offer-section,
.wgu-classes-testimonials,
.wgu-classes-cta,
.wgu-assignments-testimonials,
.wgu-assignments-cta,
.wgu-proctored-testimonials,
.wgu-proctored-cta {
    background: linear-gradient(135deg, #0c1222 0%, #131d35 50%, #0f172a 100%) !important;
    background-image: linear-gradient(135deg, #0c1222 0%, #131d35 50%, #0f172a 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.1) !important;
}

/* Accent line on sections */
.services-section::before,
.success-stories-section::before,
.faq-section::before,
.how-it-works-section::before,
.wgu-services::before,
.wgu-why-choose::before,
.wgu-courses::before,
.wgu-process::before,
.wgu-stats::before,
.wgu-faq::before,
[class*="wgu-classes-"]::before,
[class*="wgu-assignments-"]::before,
[class*="wgu-proctored-"]::before {
    background: linear-gradient(90deg, transparent, #14b8a6, transparent) !important;
}

/* Container backgrounds */
.container,
main .container {
    background: transparent !important;
}

/* Any div that might have white bg */
.services-grid,
.service-cards,
.grid,
[class*="grid"],
[class*="cards-container"],
[class*="cards-grid"] {
    background: transparent !important;
}

/* ========================================
   ALL TEXT - Bright & Bold on Dark
   ======================================== */

/* ========================================
   NUCLEAR TEXT OVERRIDE
   Force ALL text bright on dark background
   -webkit-text-fill-color overrides everything
   ======================================== */

/* Main headings - bright white */
h1, h2,
.section-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Section titles - teal accent */
.section-title {
    color: #14b8a6 !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

/* CTA/testimonial section titles stay white */
.guarantees-section .section-title,
.final-cta-section .section-title,
.wgu-cta .section-title,
[class*="-testimonials"] .section-title,
[class*="-cta"] .section-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Subheadings - bright white */
h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
}

h4, h5, h6 {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    font-weight: 700 !important;
}

/* Paragraphs - bright readable */
p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-weight: 400;
    line-height: 1.8;
}

/* List items - bright */
li {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* Spans - readable (not dim) */
span {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* Strong/bold text - extra bright */
strong, b {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
}

/* Section subtitles */
.section-subtitle {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-weight: 500 !important;
}

/* All generic text elements inside sections */
section h2,
section h3,
section h4,
section p,
section li,
section span,
section strong,
section b,
section label,
section td,
section th,
div h2,
div h3,
div h4,
div p,
div li,
div span {
    -webkit-text-fill-color: inherit !important;
}

/* Re-enforce ALL text colors with max specificity */
section h2, div h2, main h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
section h3, div h3, main h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
section h4, div h4, main h4 {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}
section h5, div h5, main h5,
section h6, div h6, main h6 {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}
section p, div p, main p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}
section li, div li, main li {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}
section span, div span, main span {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}
section strong, div strong, main strong,
section b, div b, main b {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
section td, div td, main td {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}
section a, div a, main a {
    -webkit-text-fill-color: inherit !important;
}

/* Cert logo cards */
.cert-logo,
.cert-card,
[class*="cert-logo"],
[class*="logo-card"],
.logo-item,
.brand-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
}

.cert-logo span,
.cert-card span,
[class*="cert-logo"] span,
[class*="logo-card"] span {
    color: #e2e8f0 !important;
}

/* Section badges */
.section-badge {
    background: rgba(20, 184, 166, 0.12) !important;
    color: #14b8a6 !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    font-weight: 700 !important;
}

/* ========================================
   SERVICE CARDS - Dark Glass (NO white!)
   ======================================== */

.service-card,
.wgu-service-card,
.card,
[class*="service-card"],
[class*="-card"]:not(.eb-footer-card):not([class*="footer"]):not([class*="nav"]):not(.back-to-top):not([class*="whatsapp"]) {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    color: #e2e8f0 !important;
}

.service-card:hover,
.wgu-service-card:hover,
.card:hover,
[class*="service-card"]:hover {
    background: rgba(20, 184, 166, 0.05) !important;
    border-color: rgba(20, 184, 166, 0.25) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
}

.service-card::after,
.wgu-service-card::before {
    background: linear-gradient(90deg, #14b8a6, #0d9488) !important;
}

.service-card.featured,
.wgu-service-card.featured {
    border-color: rgba(20, 184, 166, 0.4) !important;
    box-shadow: 0 8px 30px rgba(20, 184, 166, 0.15) !important;
}

.service-title,
.service-card-title,
.service-card h3,
.card h3 {
    color: #14b8a6 !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

.service-description,
.service-card-description,
.service-card p,
.card p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

.service-features li,
.service-card-features li,
.service-card li,
.card li {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

.service-features li i,
.service-card-features li i {
    color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.12) !important;
}

.service-card-link {
    color: #14b8a6 !important;
}

.service-card-link:hover {
    color: #34d399 !important;
}

/* Service icon wrapper */
.service-icon,
.service-card-icon {
    background: rgba(20, 184, 166, 0.1) !important;
    border: 1px solid rgba(20, 184, 166, 0.2) !important;
}

.service-card-icon i {
    color: #14b8a6 !important;
}

/* Featured badge */
.featured-badge {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #ffffff !important;
}

/* ========================================
   RELATED SERVICES - Dark Glass Cards
   ======================================== */

.related-services-section,
.related-services,
[class*="related-service"],
[class*="related"] {
    background: #0f172a !important;
    background-image: none !important;
}

.related-service-card,
.related-services .card,
.related-services-section .card,
[class*="related"] .card,
[class*="related-service"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    color: #e2e8f0 !important;
}

.related-service-card:hover,
.related-services .card:hover,
[class*="related"] .card:hover,
.related-services-section a:hover {
    background: rgba(20, 184, 166, 0.05) !important;
    border-color: rgba(20, 184, 166, 0.25) !important;
}

/* Related services links styled as dark cards */
.related-services-section a {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* btn-white override on dark theme */
.btn-white,
.btn.btn-white {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-white:hover,
.btn.btn-white:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

.related-service-card h3,
.related-services .card h3,
[class*="related"] .card h3,
[class*="related"] h3 {
    color: #14b8a6 !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

.related-service-card p,
.related-services .card p,
[class*="related"] .card p,
[class*="related"] p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* ========================================
   WHY CHOOSE / BENEFITS - Dark Cards
   ======================================== */

.why-choose-item,
.benefit-item,
[class*="benefit"],
[class*="why-choose"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.why-choose-item:hover,
.benefit-item:hover {
    border-color: rgba(20, 184, 166, 0.3) !important;
    background: rgba(20, 184, 166, 0.05) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.why-choose-icon,
.benefit-icon {
    background: rgba(20, 184, 166, 0.1) !important;
    border: 1.5px solid rgba(20, 184, 166, 0.2) !important;
}

.why-choose-icon i,
.benefit-icon i {
    color: #14b8a6 !important;
}

.why-choose-item h3,
.benefit-item h3 {
    color: #ffffff !important;
}

.why-choose-item p,
.benefit-item p {
    color: #cbd5e1 !important;
}

/* ========================================
   TIMELINE / PROCESS STEPS - Dark Cards
   ======================================== */

.timeline-item,
.step-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.timeline-item:hover,
.step-item:hover {
    border-color: rgba(20, 184, 166, 0.25) !important;
    background: rgba(20, 184, 166, 0.04) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.timeline-number,
.step-number {
    background: linear-gradient(135deg, #0d9488, #14b8a6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.35) !important;
}

.timeline-title,
.step-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.timeline-description,
.step-description {
    color: #cbd5e1 !important;
}

.timeline-list li {
    color: #cbd5e1 !important;
}

.timeline-list li::before {
    color: #14b8a6 !important;
}

.timeline-note {
    color: #14b8a6 !important;
    border-top: 1px solid rgba(20, 184, 166, 0.15) !important;
}

/* ========================================
   SUCCESS STORY CARDS - Dark
   ======================================== */

.success-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.success-card:hover {
    border-color: rgba(20, 184, 166, 0.3) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
}

.success-content {
    color: #cbd5e1 !important;
}

/* ========================================
   CLASS CATEGORY CARDS - Dark (WGU)
   ======================================== */

.class-category {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.class-category:hover {
    border-color: rgba(20, 184, 166, 0.3) !important;
    background: rgba(20, 184, 166, 0.05) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
}

.class-category .category-header {
    border-bottom: 2px solid rgba(20, 184, 166, 0.15) !important;
}

.class-category .category-header i {
    color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.12) !important;
    border: 1px solid rgba(20, 184, 166, 0.2) !important;
}

.class-category .category-header h3 {
    color: #14b8a6 !important;
}

.class-list li {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.class-code,
.exam-code {
    color: #14b8a6 !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

.class-name,
.exam-name {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* ========================================
   COURSE CATEGORY CARDS - Dark
   ======================================== */

.course-category {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.course-category:hover {
    border-color: rgba(20, 184, 166, 0.3) !important;
}

.category-header {
    background: rgba(20, 184, 166, 0.06) !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.1) !important;
}

.category-header h3 {
    color: #14b8a6 !important;
}

/* ========================================
   FAQ / ACCORDION - Dark Cards
   ======================================== */

.faq-item,
.accordion-item,
[class*="faq-item"],
[class*="accordion-item"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
}

.faq-item:hover,
.accordion-item:hover {
    border-color: rgba(20, 184, 166, 0.2) !important;
}

.faq-question,
.accordion-title,
.accordion-header,
.accordion-btn,
[class*="faq-question"],
[class*="accordion-title"],
[class*="accordion"] button,
.faq-item button,
.faq-item .question {
    color: #ffffff !important;
    font-weight: 700 !important;
    background: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
}

.faq-answer,
.faq-answer p,
.accordion-content,
.accordion-content p,
.accordion-body,
.accordion-body p {
    color: #94a3b8 !important;
}

.faq-item i,
.accordion-item i.fas.fa-chevron-down,
.accordion-toggle i {
    color: #14b8a6 !important;
}

/* ========================================
   STAT BOXES / COUNTERS - Dark Glass
   ======================================== */

.stat-item,
.stat-box,
.counter-box,
[class*="stat-item"],
[class*="stat-box"],
[class*="stat-card"] {
    background: rgba(20, 184, 166, 0.06) !important;
    border: 1px solid rgba(20, 184, 166, 0.15) !important;
    border-radius: 16px !important;
}

.stat-number,
.counter-number,
[class*="stat-number"],
.stat-item strong,
.stat-box strong {
    color: #14b8a6 !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: #14b8a6 !important;
}

.stat-label,
[class*="stat-label"],
.stat-item span,
.stat-box span {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* ========================================
   PRICING CARDS - Dark
   ======================================== */

.pricing-card,
[class*="pricing-card"],
[class*="price-card"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.pricing-card:hover,
[class*="pricing-card"]:hover {
    border-color: rgba(20, 184, 166, 0.3) !important;
}

.pricing-card.featured,
[class*="pricing-card"].featured {
    border-color: rgba(20, 184, 166, 0.5) !important;
    box-shadow: 0 8px 30px rgba(20, 184, 166, 0.15) !important;
}

/* ========================================
   REVIEW / TESTIMONIAL CARDS - Dark
   ======================================== */

.review-card,
.testimonial-card,
[class*="review-card"],
[class*="testimonial-card"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.review-card:hover,
.testimonial-card:hover {
    border-color: rgba(20, 184, 166, 0.25) !important;
}

.review-card .stars i,
.testimonial-card .stars i {
    color: #fbbf24 !important;
}

/* ========================================
   TRUST BADGES - Dark Glass
   ======================================== */

section:not([class*="hero"]) .trust-badge,
section:not([class*="hero"]) .trust-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

section:not([class*="hero"]) .trust-badge:hover,
section:not([class*="hero"]) .trust-item:hover {
    background: rgba(20, 184, 166, 0.08) !important;
    border-color: rgba(20, 184, 166, 0.2) !important;
}

/* ========================================
   BUTTONS - Keep Orange CTA, Dark Secondary
   ======================================== */

/* Primary CTA stays orange */
.btn-primary,
.btn-orange,
.btn-pulse,
a.btn-primary,
a.btn-orange {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.35) !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-primary:hover,
.btn-orange:hover,
.btn-pulse:hover {
    box-shadow: 0 10px 35px rgba(249, 115, 22, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Secondary / outline buttons */
.btn-secondary,
.btn-outline,
a.btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

.btn-secondary:hover,
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* WhatsApp CTA button */
.btn-whatsapp,
a[href*="wa.me"],
a[href*="whatsapp"] {
    background: rgba(37, 211, 102, 0.12) !important;
    color: #25d366 !important;
    border: 1.5px solid rgba(37, 211, 102, 0.25) !important;
}

a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover {
    background: #25d366 !important;
    color: #ffffff !important;
}

/* ========================================
   LINKS - Teal on Dark
   ======================================== */

a {
    color: #14b8a6;
}

a:hover {
    color: #34d399;
}

/* ========================================
   FORMS & INPUTS - Dark Theme
   ======================================== */

input, textarea, select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border-radius: 12px !important;
}

input:focus, textarea:focus, select:focus {
    border-color: rgba(20, 184, 166, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1) !important;
    outline: none !important;
}

input::placeholder, textarea::placeholder {
    color: #64748b !important;
}

label {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

/* ========================================
   TABLES - Dark Theme
   ======================================== */

table {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

th {
    background: rgba(20, 184, 166, 0.1) !important;
    color: #14b8a6 !important;
    border-bottom: 2px solid rgba(20, 184, 166, 0.2) !important;
    font-weight: 700 !important;
}

td {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ========================================
   BACK TO TOP BUTTON - Dark Theme
   ======================================== */

.back-to-top,
#backToTop {
    background: linear-gradient(135deg, #0d9488, #14b8a6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(20, 184, 166, 0.3) !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3) !important;
}

/* ========================================
   FLOATING WHATSAPP BUTTON
   ======================================== */

.whatsapp-float,
[class*="whatsapp-float"],
.floating-whatsapp {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35) !important;
}

/* ========================================
   CONTENT TEXT BLOCKS - Dark
   ======================================== */

.services-section > .container > div[style*="max-width"],
.content-section > .container > div,
.about-content {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   GUARANTEE CARDS - Dark Glass
   ======================================== */

.guarantee-card,
[class*="guarantee-card"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
}

.guarantee-card h3,
[class*="guarantee-card"] h3 {
    color: #ffffff !important;
}

.guarantee-card p,
[class*="guarantee-card"] p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ========================================
   ICONS - Teal Accent
   ======================================== */

.service-icon i,
.why-choose-icon i,
.benefit-icon i,
i.fas.fa-check-circle,
i.fas.fa-check {
    color: #14b8a6 !important;
}

/* Star icons */
i.fas.fa-star {
    color: #fbbf24 !important;
}

/* ========================================
   HR / DIVIDERS
   ======================================== */

hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ========================================
   SCROLLBAR - Dark Theme
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    background: #0c1222;
}

::-webkit-scrollbar-thumb {
    background: rgba(20, 184, 166, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 184, 166, 0.5);
}

/* ========================================
   NUCLEAR: OVERRIDE ALL INLINE STYLES
   Any white/light/green inline backgrounds
   ======================================== */

section[style*="background"],
div[style*="background"] {
    background: #0f172a !important;
    background-image: none !important;
}

/* Re-apply CTA sections that use inline dark bg */
section[style*="color: white"],
section[style*="color:white"],
section[style*="var(--bg-dark)"] {
    background: linear-gradient(135deg, #0c1222 0%, #131d35 50%, #0f172a 100%) !important;
}

section[style*="color: white"] *,
section[style*="color:white"] *,
section[style*="var(--bg-dark)"] * {
    color: #ffffff !important;
}

/* ========================================
   MEGA OVERRIDE: Any remaining white/green
   backgrounds from page-specific CSS
   ======================================== */

/* Override ALL card-like elements with white backgrounds */
[class*="Card"],
[class*="card-body"],
[class*="card-content"],
[class*="card-wrapper"],
[class*="card-header"],
[class*="card-footer"],
[class*="panel"],
[class*="box"]:not([class*="checkbox"]):not(select),
[class*="feature-item"],
[class*="info-card"],
[class*="content-card"] {
    background: rgba(255, 255, 255, 0.03) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    color: #e2e8f0 !important;
}

/* Override any green/teal section backgrounds */
[style*="background: linear-gradient"],
[style*="background:linear-gradient"],
[style*="background-image: linear-gradient"] {
    background: #0f172a !important;
    background-image: none !important;
}

/* Override var-based backgrounds */
[style*="--bg-light"],
[style*="--bg-white"],
[style*="--bg-lighter"],
[style*="--bg-gray"] {
    background: #0f172a !important;
}

/* ========================================
   SOPHIA / ONLINE COURSES - Stats sections
   Kill green/teal gradient backgrounds
   ======================================== */

.sophia-stats,
.course-stats,
[class*="stats-section"],
[class*="stats-grid"],
[class*="stats-row"],
[class*="counter-section"],
.stats-bar,
.stats-row {
    background: #0f172a !important;
    background-image: none !important;
}

/* ========================================
   RESPONSIVE - Mobile Menu Dark
   ======================================== */

/* Nav pill size adjustments for all viewports */
@media (max-width: 1600px) {
    .main-header .nav-item > a,
    .main-header .nav-link,
    .main-header .nav-menu > li > a {
        padding: 8px 16px !important;
        font-size: 13px !important;
        min-width: 70px !important;
    }
    .main-header .nav-menu {
        gap: 5px !important;
    }
}

@media (max-width: 1400px) {
    .main-header .nav-item > a,
    .main-header .nav-link,
    .main-header .nav-menu > li > a {
        padding: 7px 12px !important;
        font-size: 12px !important;
        min-width: 60px !important;
    }
    .main-header .nav-menu {
        gap: 4px !important;
    }
    .main-header .logo-text, .logo-text {
        font-size: 24px !important;
    }
}

@media (max-width: 1200px) {
    .main-header .nav-item > a,
    .main-header .nav-link,
    .main-header .nav-menu > li > a {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        min-width: auto !important;
    }
    .main-header .nav-menu {
        gap: 3px !important;
    }
    .main-header .logo-text, .logo-text {
        font-size: 22px !important;
    }
}

@media (max-width: 1024px) {
    .main-header .nav-item > a,
    .main-header .nav-link,
    .main-header .nav-menu > li > a {
        padding: 5px 8px !important;
        font-size: 11px !important;
        min-width: auto !important;
    }
    .main-header .nav-menu {
        gap: 2px !important;
    }
    .main-header .nav-cta {
        display: none !important;
    }
}

/* ========================================
   MOBILE HEADER - Complete Mobile Layout
   ======================================== */

/* Tablet breakpoint - hide desktop nav, show hamburger */
@media (max-width: 900px) {
    /* Hide desktop nav menu */
    .main-header .nav-menu,
    .main-header #navMenu {
        display: none !important;
    }

    /* Hide desktop CTA buttons */
    .main-header .nav-cta {
        display: none !important;
    }

    /* Show hamburger toggle */
    .main-header .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 12px !important;
        cursor: pointer;
        padding: 10px !important;
        flex-direction: column;
        gap: 5px;
    }

    .main-header .mobile-menu-toggle span {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background: #e2e8f0 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    /* Header layout: logo left, hamburger right */
    .main-header .nav-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 0 !important;
        min-height: 56px !important;
        gap: 10px !important;
    }

    /* Logo sizing on mobile */
    .main-header .logo-text,
    .logo-text {
        font-size: 24px !important;
    }

    .main-header .logo-icon,
    .logo-icon {
        font-size: 22px !important;
    }

    /* Keep header dark */
    .main-header {
        background: #070b16 !important;
        padding: 0 !important;
    }

    .main-header .container {
        padding: 0 16px !important;
    }

    /* Hide top contact bar on small screens */
    .top-contact-bar {
        display: none !important;
    }
}

/* Mobile slide-out menu styling */
@media (max-width: 900px) {
    .mobile-menu {
        background: #0a1025 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 300px !important;
        max-width: 85vw !important;
        z-index: 10000 !important;
    }

    .mobile-menu-header {
        background: #070b16 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 14px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .mobile-menu-header .logo-text {
        font-size: 22px !important;
    }

    .mobile-menu-close {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #e2e8f0 !important;
        -webkit-text-fill-color: #e2e8f0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        cursor: pointer;
    }

    .mobile-nav-menu {
        padding: 10px 0 !important;
        list-style: none !important;
        margin: 0 !important;
        overflow-y: auto !important;
    }

    .mobile-nav-menu > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .mobile-nav-menu > li > a,
    .mobile-dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 20px !important;
        color: #e2e8f0 !important;
        -webkit-text-fill-color: #e2e8f0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        transition: background 0.2s ease !important;
    }

    .mobile-nav-menu > li > a:hover,
    .mobile-dropdown-toggle:hover {
        background: rgba(20, 184, 166, 0.08) !important;
        color: #14b8a6 !important;
        -webkit-text-fill-color: #14b8a6 !important;
    }

    /* Mobile dropdown sub-items */
    .mobile-dropdown-menu {
        background: rgba(255, 255, 255, 0.02) !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        padding: 4px 0 !important;
    }

    .mobile-dropdown-menu li a {
        padding: 10px 20px 10px 36px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: none !important;
    }

    .mobile-dropdown-menu li a:hover {
        color: #14b8a6 !important;
        -webkit-text-fill-color: #14b8a6 !important;
        background: rgba(20, 184, 166, 0.06) !important;
    }

    .mobile-divider {
        height: 1px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        margin: 4px 20px !important;
    }

    /* Mobile menu CTA buttons */
    .mobile-menu .mobile-cta-buttons,
    .mobile-menu .mobile-contact-btn {
        margin: 12px 16px !important;
    }

    .mobile-menu .btn-orange,
    .mobile-menu .mobile-order-btn {
        display: block !important;
        background: linear-gradient(135deg, #f97316, #ea580c) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        text-align: center !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        border: none !important;
        margin: 12px 16px !important;
    }

    .mobile-menu .btn-outline-white,
    .mobile-menu .mobile-portal-btn {
        display: block !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: #e2e8f0 !important;
        -webkit-text-fill-color: #e2e8f0 !important;
        text-align: center !important;
        padding: 12px 20px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        margin: 8px 16px !important;
    }

    /* Mobile overlay */
    .mobile-menu-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 9999 !important;
    }

    /* Mobile menu chevron icons */
    .mobile-dropdown-toggle i,
    .mobile-nav-menu > li > a > i {
        font-size: 12px !important;
        color: #64748b !important;
        -webkit-text-fill-color: #64748b !important;
        transition: transform 0.3s ease !important;
    }

    .mobile-dropdown.active > .mobile-dropdown-toggle i {
        transform: rotate(180deg) !important;
        color: #14b8a6 !important;
        -webkit-text-fill-color: #14b8a6 !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .main-header .logo-text,
    .logo-text {
        font-size: 20px !important;
    }

    .main-header .logo-icon,
    .logo-icon {
        font-size: 18px !important;
    }

    .main-header .nav-content {
        padding: 6px 0 !important;
        min-height: 50px !important;
    }

    .main-header .container {
        padding: 0 12px !important;
    }

    .mobile-menu {
        width: 280px !important;
    }

    /* Ticker smaller on mobile */
    .top-ticker {
        font-size: 12px !important;
        padding: 4px 0 !important;
    }
}

/* Content cards responsive */
@media (max-width: 768px) {
    .service-card,
    .wgu-service-card,
    .why-choose-item,
    .timeline-item,
    .step-item,
    .class-category {
        padding: 20px 18px !important;
    }
}

/* ========================================
   SELECTION HIGHLIGHT
   ======================================== */

::selection {
    background: rgba(20, 184, 166, 0.3);
    color: #ffffff;
}

::-moz-selection {
    background: rgba(20, 184, 166, 0.3);
    color: #ffffff;
}