/* =========================================================
           STUDYVERSE DESIGN SYSTEM
        ========================================================= */

        :root {
            --sv-navy: #12346B;
            --sv-blue: #087FC1;
            --sv-cyan: #22B8E6;
            --sv-green: #67B82E;
            --sv-orange: #F58A0B;
            --sv-red: #EF3E48;
            --sv-pink: #D91A73;
            --sv-purple: #762BB8;
            --sv-ink: #12233F;
            --sv-muted: #64748B;
            --sv-line: #E5EDF7;
            --sv-soft: #F6FAFF;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 110px;
        }

        body {
            margin: 0;
            color: var(--sv-ink);
            background: #ffffff;
            font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: "Plus Jakarta Sans", "Inter", sans-serif;
        }

        ::selection {
            background: var(--sv-blue);
            color: #ffffff;
        }

        a {
            text-decoration: none;
        }

        /* =========================================================
           COLOR UTILITIES
        ========================================================= */

        .sv-gradient-text {
            background: linear-gradient(
                90deg,
                var(--sv-navy) 0%,
                var(--sv-blue) 28%,
                var(--sv-green) 48%,
                var(--sv-orange) 68%,
                var(--sv-pink) 84%,
                var(--sv-purple) 100%
            );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sv-gradient {
            background:
                linear-gradient(
                    120deg,
                    var(--sv-navy),
                    var(--sv-blue) 28%,
                    var(--sv-purple) 72%,
                    var(--sv-pink)
                );
        }

        .sv-rainbow-line {
            height: 4px;
            width: 100%;
            background:
                linear-gradient(
                    90deg,
                    var(--sv-orange),
                    var(--sv-red),
                    var(--sv-pink),
                    var(--sv-purple),
                    var(--sv-blue),
                    var(--sv-green)
                );
        }

        /* =========================================================
           TOP UTILITY BAR
        ========================================================= */

        .utility-link {
            color: #D9E7F7;
            transition: color .2s ease, transform .2s ease;
        }

        .utility-link:hover {
            color: #ffffff;
            transform: translateY(-1px);
        }

        .utility-action {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 10px;
            border-radius: 9px;
            color: #D9E7F7;
            font-size: 11px;
            font-weight: 700;
            transition: background .2s ease, color .2s ease;
        }

        .utility-action:hover {
            color: #ffffff;
            background: rgba(255,255,255,.08);
        }

        /* =========================================================
           MAIN NAVIGATION
        ========================================================= */

        .main-nav-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 11px 12px;
            border-radius: 11px;
            color: #43546D;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .015em;
            white-space: nowrap;
            transition:
                color .2s ease,
                background .2s ease,
                transform .2s ease;
        }

        .main-nav-link i {
            font-size: 10px;
            color: #7890AD;
            transition: color .2s ease;
        }

        .main-nav-link:hover {
            color: var(--sv-blue);
            background: #F0F8FD;
        }

        .main-nav-link:hover i {
            color: var(--sv-blue);
        }

        .main-nav-link.active {
            color: #ffffff;
            background:
                linear-gradient(
                    135deg,
                    var(--sv-navy),
                    var(--sv-blue)
                );
            box-shadow: 0 8px 20px rgba(8,127,193,.18);
        }

        .main-nav-link.active i {
            color: #ffffff;
        }

        .nav-dropdown {
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            pointer-events: none;
            transition:
                opacity .2s ease,
                transform .2s ease,
                visibility .2s ease;
        }

        .nav-dropdown-wrap:hover .nav-dropdown,
        .nav-dropdown-wrap:focus-within .nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .nav-dropdown-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 12px;
            border-radius: 10px;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            transition: background .2s ease, color .2s ease;
        }

        .nav-dropdown-link:hover {
            background: #F0F8FD;
            color: var(--sv-blue);
        }

        .nav-dropdown-link i {
            width: 18px;
            text-align: center;
            color: var(--sv-blue);
        }

/* =========================================================
   STUDYVERSE UTILITY NAVIGATION
========================================================= */

.study-utility-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 5px 8px;

    border-radius: 10px;

    color: #64748b;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        color .25s ease,
        background-color .25s ease,
        transform .25s ease;
}

.study-utility-link:hover {
    color: #1e40af;

    background: rgba(255, 255, 255, .95);

    transform: translateY(-1px);
}


.study-utility-icon {
    width: 25px;
    height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 10px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.study-utility-link:hover .study-utility-icon {
    transform: scale(1.08);

    box-shadow:
        0 3px 8px rgba(15, 23, 42, .08);
}


.study-utility-divider {
    width: 1px;
    height: 20px;

    background: #e2e8f0;

    flex-shrink: 0;
}


/* =========================================================
   MOBILE UTILITY LINKS
========================================================= */

.mobile-utility-link {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 12px;

    border-radius: 10px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #475569;

    font-size: 11px;
    font-weight: 800;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.mobile-utility-link:hover {
    background: #ffffff;

    border-color: #bfdbfe;

    transform: translateY(-1px);
}

.mobile-utility-link i {
    width: 18px;
    text-align: center;
}

        /* =========================================================
           MOBILE NAV
        ========================================================= */

        #mobileMenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease;
        }

        #mobileMenu.open {
            max-height: 900px;
        }

        .mobile-nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 14px;
            border-radius: 12px;
            color: #43546D;
            font-size: 12px;
            font-weight: 800;
            background: #ffffff;
            border: 1px solid transparent;
            transition: background .2s ease, color .2s ease, border-color .2s ease;
        }

        .mobile-nav-link:hover {
            color: var(--sv-blue);
            background: #F0F8FD;
            border-color: #D9EDF8;
        }

        .mobile-nav-link i {
            width: 20px;
            text-align: center;
            color: var(--sv-blue);
        }

        /* =========================================================
           HERO
        ========================================================= */

        .hero-section {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 12%, rgba(34,184,230,.16), transparent 26%),
                radial-gradient(circle at 90% 15%, rgba(217,26,115,.10), transparent 24%),
                radial-gradient(circle at 75% 90%, rgba(103,184,46,.11), transparent 25%),
                linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
        }

        .hero-orb {
            position: absolute;
            border-radius: 999px;
            filter: blur(1px);
            pointer-events: none;
            z-index: -1;
        }

        .hero-orb.one {
            width: 260px;
            height: 260px;
            top: 50px;
            left: -120px;
            background: rgba(245,138,11,.08);
        }

        .hero-orb.two {
            width: 340px;
            height: 340px;
            right: -170px;
            top: 220px;
            background: rgba(118,43,184,.08);
        }

        .hero-logo {
            width: clamp(260px, 48vw, 520px);
            max-height: 520px;
            object-fit: contain;
            filter: drop-shadow(0 18px 35px rgba(18,52,107,.10));
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 13px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid #DCEAF7;
            box-shadow: var(--shadow-study-sm);
            color: var(--sv-blue);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .hero-badge-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background:
                linear-gradient(
                    135deg,
                    var(--sv-green),
                    var(--sv-cyan)
                );
            box-shadow: 0 0 0 5px rgba(103,184,46,.10);
        }

        .hero-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 50px;
            padding: 0 20px;
            border-radius: 13px;
            font-size: 13px;
            font-weight: 800;
            transition:
                transform .2s ease,
                box-shadow .2s ease,
                background .2s ease;
        }

        .hero-cta:hover {
            transform: translateY(-2px);
        }

        .hero-cta-primary {
            color: #ffffff;
            background:
                linear-gradient(
                    135deg,
                    var(--sv-navy),
                    var(--sv-blue)
                );
            box-shadow: 0 12px 25px rgba(8,127,193,.20);
        }

        .hero-cta-primary:hover {
            box-shadow: 0 17px 32px rgba(8,127,193,.27);
        }

        .hero-cta-secondary {
            color: var(--sv-navy);
            background: #ffffff;
            border: 1px solid #D9E7F7;
            box-shadow: 0 8px 22px rgba(18,52,107,.06);
        }

        /* =========================================================
           STATS
        ========================================================= */

        .stat-card {
            position: relative;
            overflow: hidden;
            background: rgba(255,255,255,.92);
            border: 1px solid #E1ECF6;
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 10px 28px rgba(18,52,107,.06);
        }

        .stat-card::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 4px;
            background: var(--stat-color, var(--sv-blue));
        }

        .stat-number {
            font-family: "Plus Jakarta Sans", sans-serif;
            font-size: 26px;
            line-height: 1;
            font-weight: 900;
            color: var(--sv-navy);
        }

        /* =========================================================
           SECTION SYSTEM
        ========================================================= */

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--sv-blue);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .section-label::before {
            content: "";
            width: 26px;
            height: 3px;
            border-radius: 999px;
            background:
                linear-gradient(
                    90deg,
                    var(--sv-orange),
                    var(--sv-pink),
                    var(--sv-blue)
                );
        }

        .section-heading {
            color: var(--sv-navy);
            letter-spacing: -.035em;
        }

        .section-copy {
            color: #64748B;
            line-height: 1.8;
        }

        .soft-section {
            background:
                radial-gradient(circle at 5% 10%, rgba(34,184,230,.08), transparent 25%),
                radial-gradient(circle at 95% 90%, rgba(118,43,184,.06), transparent 25%),
                #F7FBFF;
        }


        /* =========================================================
           TEACHER CARDS
        ========================================================= */

        .teacher-card {
            position: relative;
            overflow: hidden;
            height: 100%;
            background: #ffffff;
            border: 1px solid #E1EAF4;
            border-radius: 22px;
            box-shadow: 0 8px 25px rgba(18,52,107,.055);
            transition:
                transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
        }

        .teacher-card:hover {
            transform: translateY(-7px);
            border-color: #B9DCEF;
            box-shadow: 0 20px 45px rgba(18,52,107,.13);
        }

        .teacher-image-wrap {
            position: relative;
            height: 250px;
            overflow: hidden;
        }

        .teacher-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .45s ease;
        }

        .teacher-card:hover .teacher-image {
            transform: scale(1.05);
        }

        .teacher-image-wrap::after {
            content: "";
            position: absolute;
            inset: auto 0 0 0;
            height: 35%;
            background: linear-gradient(transparent, rgba(18,52,107,.24));
            pointer-events: none;
        }

        .teacher-speciality {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 9px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .04em;
            text-transform: uppercase;
        }




/* =========================================================
   STUDYVERSE - PREMIUM COURSE FILTER
========================================================= */

.filter-shell {
    position: relative;
    width: 100%;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;

    padding: 18px;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #fff9fc 100%
        );

    border: 1px solid #dce9f5;

    box-shadow:
        0 18px 50px rgba(18, 52, 107, 0.10);

    z-index: 30;
}


/* =========================================================
   FILTER GRID
========================================================= */

.course-filter-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 16px;
}


/* =========================================================
   CUSTOM SELECT
========================================================= */

.custom-select {
    position: relative;
    width: 100%;
}


/* =========================================================
   SELECT BUTTON
========================================================= */

.custom-select-button {
    width: 100%;
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 11px 17px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fbfdff
        );

    border: 1px solid #d7e5f1;

    color: #334155;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(18, 52, 107, 0.04);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease,
        background .25s ease;
}


.custom-select-button:hover {
    border-color: #8ec8e5;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f6fbff
        );

    box-shadow:
        0 10px 28px rgba(8, 127, 193, .09);

    transform: translateY(-1px);
}


.custom-select.open .custom-select-button {
    border-color: var(--sv-blue);

    box-shadow:
        0 0 0 4px rgba(8, 127, 193, .10),
        0 12px 30px rgba(8, 127, 193, .08);
}


/* =========================================================
   SELECT ICON
========================================================= */

.custom-select-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eaf7ff,
            #f0edff
        );

    color: var(--sv-blue);

    font-size: 17px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);
}


/* =========================================================
   SELECT TEXT
========================================================= */

.custom-select-text {
    min-width: 0;
    flex: 1;
}


.custom-select-label {
    display: block;

    margin-bottom: 4px;

    color: #94a3b8;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.custom-select-value {
    display: block;

    overflow: hidden;

    color: #0f172a;

    font-size: 13px;

    font-weight: 900;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   CHEVRON
========================================================= */

.custom-select-chevron {
    flex-shrink: 0;

    color: #94a3b8;

    font-size: 12px;

    transition:
        transform .25s ease,
        color .25s ease;
}


.custom-select.open .custom-select-chevron {
    transform: rotate(180deg);

    color: var(--sv-blue);
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.custom-select-menu {
    position: absolute;

    z-index: 9999;

    top: calc(100% + 10px);

    left: 0;

    width: 100%;

    max-height: 390px;

    overflow-y: auto;

    padding: 9px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #dce8f3;

    box-shadow:
        0 25px 65px rgba(15, 23, 42, .18);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-8px)
        scale(.98);

    transform-origin: top;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


.custom-select.open .custom-select-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   DROPDOWN SCROLLBAR
========================================================= */

.custom-select-menu::-webkit-scrollbar {
    width: 7px;
}

.custom-select-menu::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.custom-select-menu::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* =========================================================
   SEARCH BOX
========================================================= */

.custom-select-search {
    position: sticky;

    top: 0;

    z-index: 5;

    padding-bottom: 9px;

    background: #ffffff;
}


.custom-select-search input {
    width: 100%;

    height: 43px;

    padding:
        0 13px
        0 38px;

    border-radius: 12px;

    border: 1px solid #e2e8f0;

    background: #f8fafc;

    outline: none;

    color: #334155;

    font-size: 11px;

    font-weight: 700;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.custom-select-search input:focus {
    background: #ffffff;

    border-color: #8ec8e5;

    box-shadow:
        0 0 0 3px rgba(8,127,193,.08);
}


.custom-select-search input::placeholder {
    color: #94a3b8;
}


/* =========================================================
   OPTIONS
========================================================= */

.custom-select-option {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 11px 12px;

    margin-bottom: 2px;

    border-radius: 12px;

    border: 0;

    background: transparent;

    color: #475569;

    text-align: left;

    cursor: pointer;

    font-size: 11px;

    font-weight: 800;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.custom-select-option:hover {
    background:
        linear-gradient(
            135deg,
            #eff8ff,
            #f5f0ff
        );

    color: var(--sv-blue);

    transform: translateX(3px);
}


.custom-select-option.active {
    background:
        linear-gradient(
            135deg,
            #eaf7ff,
            #f0edff
        );

    color: var(--sv-blue);
}


.custom-select-option i {
    width: 25px;

    height: 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #f1f5f9;

    color: #94a3b8;

    font-size: 10px;

    flex-shrink: 0;
}


.custom-select-option:hover i,
.custom-select-option.active i {
    background: #e0f2fe;

    color: var(--sv-blue);
}


/* =========================================================
   FILTER FOOTER
========================================================= */

.course-filter-footer {
    margin-top: 14px;

    padding: 0 4px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.course-filter-status {
    color: #64748b;

    font-size: 10px;

    font-weight: 800;
}


.course-filter-reset {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 10px;

    background: #f1f7fc;

    color: var(--sv-blue);

    border: 1px solid #dceaf5;

    font-size: 9px;

    font-weight: 900;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.course-filter-reset:hover {
    background: var(--sv-blue);

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(8,127,193,.18);
}




/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .filter-shell {
        padding: 13px;

        border-radius: 22px;
    }

    .course-filter-grid {
        grid-template-columns: 1fr;
    }

    .custom-select-button {
        min-height: 66px;
    }

    .custom-select-menu {
        max-height: 330px;
    }

    .course-filter-footer {
        flex-direction: column;

        align-items: stretch;
    }

    .course-filter-reset {
        justify-content: center;
    }
}



/* =========================================================
   COURSE CARDS
========================================================= */

.course-card {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.course-card:hover {
    transform: translateY(-5px);

    border-color: rgba(37, 99, 235, 0.20);

    box-shadow:
        0 16px 35px rgba(15, 23, 42, 0.11);
}


/* =========================================================
   COURSE IMAGE
========================================================= */

.course-image-wrap {
    position: relative;

    width: 100%;
    height: 180px;

    overflow: hidden;

    flex-shrink: 0;
}

.course-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.course-card:hover .course-image {
    transform: scale(1.04);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.course-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(15, 23, 42, 0.02),
            rgba(15, 23, 42, 0.20)
        );

    pointer-events: none;
}


/* =========================================================
   CATEGORY BADGE
========================================================= */

.course-badge {
    position: absolute;

    top: 13px;
    left: 13px;

    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    border-radius: 999px;

    background: rgba(18, 52, 107, 0.90);

    color: #ffffff;

    font-size: 8.5px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.07em;

    white-space: nowrap;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   COURSE CONTENT
========================================================= */

.course-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 19px 18px 17px;
}


/* =========================================================
   COURSE TITLE
========================================================= */

.course-title {
    margin: 0;

    color: #0f172a;

    font-size: 17px;
    line-height: 1.35;

    font-weight: 900;

    min-height: 46px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* =========================================================
   COURSE DESCRIPTION
========================================================= */

.course-description {
    margin-top: 8px;

    color: #64748b;

    font-size: 10.5px;
    line-height: 1.6;

    font-weight: 600;

    min-height: 34px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* =========================================================
   COURSE META
========================================================= */

.course-meta {
    margin-top: auto;
    padding-top: 14px;

    border-top: 1px solid #f1f5f9;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


/* =========================================================
   RATING
========================================================= */

.course-rating {
    color: #f59e0b;

    font-size: 11.5px;

    line-height: 1;

    letter-spacing: 1px;

    white-space: nowrap;
}


/* =========================================================
   FREE LABEL
========================================================= */

.course-free {
    color: #16a34a;

    font-size: 10px;

    line-height: 1;

    font-weight: 900;

    white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .course-image-wrap {
        height: 180px;
    }

    .course-content {
        padding: 17px;
    }

}


/* =========================================================
   MOBILE / 2 COLUMN
========================================================= */

@media (max-width: 768px) {

    .course-grid {
        gap: 16px;
    }

    .course-image-wrap {
        height: 165px;
    }

    .course-content {
        padding: 16px;
    }

    .course-title {
        font-size: 16px;
        min-height: 43px;
    }

    .course-description {
        font-size: 9.5px;
        line-height: 1.55;
    }

}


/* =========================================================
   SMALL MOBILE / 1 COLUMN
========================================================= */

@media (max-width: 640px) {

    .course-grid {
        grid-template-columns: 1fr !important;

        gap: 16px;
    }

    .course-card {
        width: 100%;

        border-radius: 18px;
    }

    .course-image-wrap {
        height: 200px;
    }

    .course-content {
        padding: 17px;
    }

    .course-title {
        font-size: 17px;

        min-height: auto;
    }

    .course-description {
        font-size: 10px;

        min-height: auto;
    }

    .course-meta {
        margin-top: 15px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .course-image-wrap {
        height: 185px;
    }

    .course-content {
        padding: 15px;
    }

}


/* =========================================================
   COURSE FEATURED SLIDER
========================================================= */

.course-slider-card {
    width: 360px;
    min-width: 360px;
    min-height: 330px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.course-slider-card:hover {
    transform: translateY(-6px);

    border-color: rgba(37, 99, 235, 0.20);

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.13);
}


/* IMAGE */

.course-slider-image {
    position: relative;

    width: 100%;
    height: 180px;

    flex-shrink: 0;

    overflow: hidden;
}

.course-slider-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.course-slider-card:hover .course-slider-image img {
    transform: scale(1.06);
}


/* BADGE */

.course-slider-badge {
    position: absolute;

    top: 13px;
    left: 13px;

    padding: 6px 10px;

    border-radius: 999px;

    color: #ffffff;

    background: rgba(18, 52, 107, 0.88);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.07em;

    white-space: nowrap;
}


/* CONTENT */

.course-slider-content {
    min-width: 0;

    flex: 1;

    padding: 18px;

    display: flex;
    flex-direction: column;
}


/* SPECIALITY */

.course-slider-speciality {
    display: inline-flex;

    align-items: center;
    align-self: flex-start;

    gap: 6px;

    padding: 6px 10px;

    border-radius: 8px;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.04em;

    white-space: nowrap;
}


/* TITLE */

.course-slider-content h4 {
    margin-top: 12px;

    color: #0f172a;

    font-size: 17px;
    line-height: 1.3;

    font-weight: 900;
}


/* DESCRIPTION */

.course-slider-content p {
    margin-top: 6px;

    color: #64748b;

    font-size: 10px;
    line-height: 1.5;

    font-weight: 600;
}


/* META */

.course-slider-meta {
    margin-top: auto;

    padding-top: 13px;

    border-top: 1px solid #f1f5f9;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    color: #94a3b8;

    font-size: 9px;
    font-weight: 800;
}

.course-slider-meta .course-rating {
    color: #f59e0b;

    font-size: 11px;

    letter-spacing: 1px;

    white-space: nowrap;
}


/* TABLET */

@media (max-width: 768px) {

    .course-slider-card {
        width: 350px;
        min-width: 350px;

        min-height: 320px;
    }

    .course-slider-image {
        height: 175px;
    }

}


/* MOBILE */

@media (max-width: 640px) {

    .course-slider-card {
        width: 320px;
        min-width: 320px;

        min-height: 305px;

        border-radius: 20px;
    }

    .course-slider-image {
        height: 165px;
    }

    .course-slider-content {
        padding: 16px 15px;
    }

    .course-slider-content h4 {
        font-size: 16px;
    }

}


/* VERY SMALL PHONES */

@media (max-width: 380px) {

    .course-slider-card {
        width: 300px;
        min-width: 300px;
    }

    .course-slider-image {
        height: 155px;
    }

}



/* =========================================================
   TEACHER INFINITE SLIDER
========================================================= */

.teacher-slider-card {
    width: 390px !important;
    min-width: 390px !important;

    height: 210px !important;
    min-height: 210px !important;

    flex: 0 0 390px !important;

    display: flex;
    align-items: stretch;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.teacher-slider-card:hover {
    transform: translateY(-6px);

    border-color: rgba(37, 99, 235, 0.20);

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.13);
}


/* =========================================================
   IMAGE
========================================================= */

.teacher-slider-image {
    width: 150px !important;
    min-width: 150px !important;

    height: 210px !important;
    min-height: 210px !important;

    flex: 0 0 150px !important;

    overflow: hidden;

    position: relative;
}


.teacher-slider-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to right,
            transparent 60%,
            rgba(255,255,255,0.12)
        );

    pointer-events: none;
}


.teacher-slider-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.teacher-slider-card:hover
.teacher-slider-image img {
    transform: scale(1.07);
}


/* =========================================================
   CONTENT
========================================================= */

.teacher-slider-content {
    min-width: 0;

    flex: 1;

    padding: 22px 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.teacher-slider-speciality {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 9px;

    font-size: 9px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    white-space: nowrap;
}


.teacher-slider-content h4 {
    margin-top: 13px;

    color: #0f172a;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 900;
}


.teacher-slider-content p {
    margin-top: 6px;

    color: #64748b;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 600;
}


.teacher-slider-meta {
    margin-top: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    color: #94a3b8;

    font-size: 9px;

    font-weight: 800;
}


.teacher-rating {
    color: #f59e0b;

    font-size: 11px;

    letter-spacing: 1px;

    white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .teacher-slider-card {
        width: 350px !important;
        min-width: 350px !important;

        height: 195px !important;
        min-height: 195px !important;

        flex-basis: 350px !important;
    }

    .teacher-slider-image {
        width: 130px !important;
        min-width: 130px !important;

        height: 195px !important;
        min-height: 195px !important;

        flex-basis: 130px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .teacher-slider-card {
        width: 320px !important;
        min-width: 320px !important;

        height: 180px !important;
        min-height: 180px !important;

        flex-basis: 320px !important;

        border-radius: 20px;
    }

    .teacher-slider-image {
        width: 115px !important;
        min-width: 115px !important;

        height: 180px !important;
        min-height: 180px !important;

        flex-basis: 115px !important;
    }

    .teacher-slider-content {
        padding: 17px 15px;
    }

    .teacher-slider-content h4 {
        font-size: 16px;
    }

}



        /* =========================================================
           WHY STUDYVERSE
        ========================================================= */

        .feature-card {
            position: relative;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid #E1EAF4;
            border-radius: 20px;
            padding: 22px;
            box-shadow: 0 8px 25px rgba(18,52,107,.05);
            transition:
                transform .25s ease,
                box-shadow .25s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 38px rgba(18,52,107,.10);
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        /* =========================================================
           TESTIMONIALS
        ========================================================= */

        .testimonial-card {
            height: 100%;
            background: #ffffff;
            border: 1px solid #E1EAF4;
            border-radius: 22px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(18,52,107,.05);
            transition:
                transform .25s ease,
                box-shadow .25s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 40px rgba(18,52,107,.10);
        }

        .testimonial-quote {
            color: #475569;
            line-height: 1.8;
        }

        /* =========================================================
           CTA
        ========================================================= */

        .cta-section {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 10% 20%, rgba(34,184,230,.28), transparent 25%),
                radial-gradient(circle at 90% 75%, rgba(217,26,115,.20), transparent 25%),
                linear-gradient(
                    120deg,
                    var(--sv-navy),
                    var(--sv-blue) 42%,
                    var(--sv-purple)
                );
        }

        .cta-section::after {
            content: "";
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.16);
            right: -100px;
            top: -100px;
        }

        /* =========================================================
           FOOTER
        ========================================================= */

        .footer-link {
            color: #B8C8DB;
            font-size: 12px;
            transition: color .2s ease, transform .2s ease;
        }

        .footer-link:hover {
            color: #ffffff;
            transform: translateX(2px);
        }

        .social-link {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.10);
            transition:
                background .2s ease,
                transform .2s ease;
        }

        .social-link:hover {
            background: rgba(255,255,255,.16);
            transform: translateY(-2px);
        }

        /* =========================================================
           REVEAL
        ========================================================= */

        .reveal {
            opacity: 0;
            transform: translateY(22px);
            transition:
                opacity .65s ease,
                transform .65s ease;
        }

        .reveal.show {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-delay-1 {
            transition-delay: .08s;
        }

        .reveal-delay-2 {
            transition-delay: .16s;
        }

        .reveal-delay-3 {
            transition-delay: .24s;
        }

        /* =========================================================
           BACK TO TOP
        ========================================================= */

        #backToTop {
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            transition:
                opacity .2s ease,
                visibility .2s ease,
                transform .2s ease;
        }

        #backToTop.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 1023px) {
            .hero-logo {
                width: min(500px, 82vw);
            }
        }

        @media (max-width: 640px) {
            .hero-section {
                background:
                    radial-gradient(circle at 5% 10%, rgba(34,184,230,.13), transparent 35%),
                    radial-gradient(circle at 95% 35%, rgba(217,26,115,.08), transparent 30%),
                    #F8FCFF;
            }

            .quote-card {
                border-radius: 22px;
            }

            .teacher-image-wrap {
                height: 235px;
            }
        }

        /* Respect reduced-motion preferences */
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important;
            }

            .reveal {
                opacity: 1;
                transform: none;
            }
        }
        
        
/* =========================================================
   LEARNER TESTIMONIAL ANIMATION
========================================================= */

.testimonial-enter {

    animation:
        testimonialFadeIn .55s ease both;

}


@keyframes testimonialFadeIn {

    from {
        opacity: 0;
        transform:
            translateY(14px)
            scale(.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   TEACHER TESTIMONIAL ANIMATIONS
========================================================= */

.teacher-testimonial-enter {

    animation:
        teacherTestimonialIn
        .6s
        cubic-bezier(.22,1,.36,1)
        both;
}


.teacher-testimonial-exit {

    animation:
        teacherTestimonialOut
        .3s
        ease
        both;
}


@keyframes teacherTestimonialIn {

    from {

        opacity: 0;

        transform:
            translateY(18px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes teacherTestimonialOut {

    from {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

    to {

        opacity: 0;

        transform:
            translateY(-12px)
            scale(.98);

    }

}


/* =========================================================
   SIDE TESTIMONIAL FLOAT
========================================================= */

.teacher-stage-card {

    transition:
        transform .6s ease,
        opacity .6s ease,
        box-shadow .6s ease;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #teacherTestimonialStage {

        min-height: 390px;

    }

}




/* =========================================================
   STUDYVERSE PHONE FIELDS
========================================================= */

.iti {
    width: 100%;
    display: block;
}

.iti input[type="tel"] {
    width: 100%;
}

.iti__country-container {
    z-index: 15;
}

.iti__selected-country {
    height: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

.iti__dropdown {
    z-index: 100;
}