.dash-wrap {
    padding: 60px 0 100px;
    background: var(--ed-color-grey-1, #F2F4F7);
}
.dash-sidebar {
    background: #fff;
    border-radius: 14px;
    padding: 24px 0;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    position: sticky;
    top: 20px;
}
.dash-sidebar .dash-user {
    text-align: center;
    padding: 0 20px 20px;
    border-bottom: 1px solid #eef1f0;
    margin-bottom: 10px;
}
.dash-sidebar .dash-user img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}
.dash-sidebar .dash-user h4 {
    font-size: 16px;
    margin-bottom: 2px;
    color: var(--ed-color-heading-primary, #16265A);
}
.dash-sidebar .dash-user span {
    font-size: 13px;
    color: var(--ed-color-theme-primary, #D6A029);
    text-transform: capitalize;
}
.dash-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: var(--ed-color-heading-primary, #16265A);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dash-nav a:hover, .dash-nav a.active {
    background: rgba(214, 160, 41, 0.1);
    border-left-color: var(--ed-color-theme-primary, #D6A029);
    color: var(--ed-color-heading-primary, #16265A);
}
.dash-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    margin-bottom: 24px;
}
.dash-card h3 {
    font-size: 18px;
    margin-bottom: 18px;
    color: var(--ed-color-heading-primary, #16265A);
}
.stat-tile {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    text-align: center;
    margin-bottom: 24px;
}
.stat-tile .num {
    font-size: 30px;
    font-weight: 700;
    color: var(--ed-color-heading-primary, #16265A);
}
.stat-tile .label {
    color: var(--ed-color-text-body, #6C706F);
    font-size: 14px;
}
.progress-track {
    background: #eef1f0;
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
}
.progress-track .bar {
    background: var(--ed-color-theme-primary, #D6A029);
    height: 100%;
}
.dash-table {
    width: 100%;
}
.dash-table th {
    color: var(--ed-color-text-body, #6C706F);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 2px solid #eef1f0;
    text-align: left;
}
.dash-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #eef1f0;
    vertical-align: middle;
}
.badge-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-success { background: rgba(27, 156, 110, .12); color: #1B9C6E; }
.badge-pending { background: rgba(214, 160, 41, .14); color: #A87A16; }
.badge-danger { background: rgba(220, 53, 69, .12); color: #dc3545; }

.lesson-sidebar {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    max-height: 80vh;
    overflow-y: auto;
}
.lesson-sidebar .module-title {
    background: var(--ed-color-heading-primary, #16265A);
    color: #fff;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px;
}
.lesson-sidebar .lesson-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef1f0;
    color: var(--ed-color-heading-primary, #16265A);
    text-decoration: none;
    font-size: 14px;
}
.lesson-sidebar .lesson-link.active {
    background: rgba(214, 160, 41, .1);
    color: var(--ed-color-heading-primary, #16265A);
    font-weight: 600;
}
.lesson-sidebar .lesson-link .fa-circle-check { color: #1B9C6E; }

.gateway-option {
    border: 1px solid #eef1f0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 12px;
}
.gateway-option input { width: 18px; height: 18px; }
.gateway-option:has(input:checked) { border-color: var(--ed-color-theme-primary, #D6A029); background: rgba(214, 160, 41, .06); }

.star-rate { color: #D6A029; }

@media (max-width: 991px) {
    .dash-sidebar {
        position: static;
        margin-bottom: 24px;
    }
    .dash-card, .stat-tile {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .dash-wrap { padding: 32px 0 60px; }
    .dash-table { display: block; overflow-x: auto; white-space: nowrap; }
    .gateway-option { flex-wrap: wrap; }
}

/* Aspire Nations logo is a square icon+wordmark lockup, not a wide wordmark —
   constrain by height so it fits the header/side-menu row instead of the
   default max-width rule stretching it to a 224px-tall square. */
.header .primary-header-inner .header-logo img,
.header .primary-header-inner .header-right .header-logo img {
    max-height: 58px;
    width: auto;
}
.mobile-side-menu .side-menu-head img {
    max-height: 84px;
    width: auto;
}
@media (max-width: 575px) {
    .header .primary-header-inner .header-logo img {
        max-height: 46px;
    }
}

/* The theme's page-header expects bg-img to be a contained photo pinned
   top-right, fading under a light overlay; our gradient is decorative, not a
   photo, so cover the whole banner instead of leaving a hard-edged box. */
.page-header .bg-img {
    background-size: cover !important;
}

/* .hero-bg-wrap has no width of its own in the theme's CSS, so it stretches
   to the photo's unconstrained natural size (~83% of the viewport at our
   image's aspect ratio) instead of the narrower, contained panel this
   template's hero is meant to show. Give it a real width/height and make
   the photo fill it with object-fit so nothing distorts. */
.hero-section-2 .hero-bg-wrap {
    width: 42%;
    height: 700px;
}
.hero-section-2 .hero-bg-wrap .hero-bg,
.hero-section-2 .hero-bg-wrap .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 1399px) {
    .hero-section-2 .hero-bg-wrap {
        width: 46%;
        height: 620px;
        right: 0;
    }
}
@media (max-width: 1200px) {
    .hero-section-2 .hero-bg-wrap {
        width: 50%;
        height: 560px;
        right: 0;
    }
}
@media (max-width: 767px) {
    .hero-section-2 .shapes .shape-1 {
        display: none;
    }
}

/* The theme's .hero-text-box has no left/right of its own (the original
   template set it via inline JS), so it falls back to its in-flow static
   position — which lands on top of the headline. Anchor it onto the photo,
   matching the "floating stat card" pattern used elsewhere in this theme. */
.hero-section-2 .hero-bg-wrap .hero-text-box {
    top: 8%;
    right: 12%;
    left: auto;
}
@media (max-width: 1600px) {
    .hero-section-2 .hero-bg-wrap .hero-text-box {
        right: 6%;
    }
}

/* Preloader shows the full Aspire Nations logo instead of the theme's tiny
   favicon-in-a-ring; the logo itself pulses gently as the loading cue. */
#preloader .spinner-logo img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    animation: sc-logo-pulse 1.6s ease-in-out infinite;
}
@keyframes sc-logo-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.92); opacity: 0.7; }
}
@media (max-width: 575px) {
    #preloader .spinner-logo img {
        width: 140px;
        height: 140px;
    }
}

/* Belt-and-braces: if JS never runs (blocked, disabled, or an embedding
   context strips it) the preloader must still not cover the page forever.
   The inline script in base.html hides it as soon as the page loads; this
   pure-CSS fallback hides it a few seconds later regardless. */
#preloader {
    animation: sc-preloader-autohide 0.01s 4s forwards;
}
@keyframes sc-preloader-autohide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Same reasoning for data-background: it's applied by JS, so give the
   sections it targets a sane solid-color fallback that needs no script. */
.footer-section {
    background-color: #0E1730;
}
.page-header .bg-img {
    background-color: #16265A;
}

/* Gold (--ed-color-theme-primary) replaced the theme's original dark teal.
   Teal was dark enough to carry white text as a full-bleed section
   background; gold is a light, warm hue and fails contrast with white text
   at that scale. Keep full-bleed accent blocks navy (still on-brand) and
   only use gold as a light-background accent: buttons, badges, icons. */
.testimonial-section,
.counter-section {
    background-color: var(--ed-color-heading-primary) !important;
}

/* Small badges/buttons that sit ON gold need dark text, not white, for
   the same contrast reason. */
.ed-primary-btn,
.header .primary-header-inner .header-right .header-right-icon .number,
.hero-section-2 .hero-bg-wrap .faq-text-box .faq-thumb-list-wrap .faq-thumb-list li.number,
.scroll-to-top {
    color: var(--ed-color-heading-primary) !important;
}