/* =========================================================
   AlokaOne Learner Header
   ========================================================= */

:root {
    --header-primary: #6941c6;
    --header-primary-dark: #53389e;
    --header-primary-light: #f4f0ff;
    --header-secondary: #0f172a;
    --header-text: #344054;
    --header-muted: #667085;
    --header-border: #e4e7ec;
    --header-surface: rgba(255, 255, 255, 0.92);
    --header-white: #ffffff;
    --header-success: #12b76a;
    --header-danger: #e11d48;
    --header-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.06);
}

/* Header container */

.learner-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    width: 100%;
    background: var(--header-surface);
    border-bottom: 1px solid rgba(228, 231, 236, 0.85);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

    .learner-header.is-scrolled {
        background: rgba(255, 255, 255, 0.97);
        box-shadow: var(--header-shadow);
    }

    .learner-header .navbar {
        min-height: 82px;
        padding: 0;
    }

/* Brand */

.learner-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 0;
    margin-right: 28px;
    text-decoration: none;
}

.brand-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: var(--header-white);
    border: 1px solid var(--header-border);
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(16, 24, 40, 0.08);
}

    .brand-logo::after {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: "";
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: inherit;
    }

    .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.brand-content {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    color: var(--header-secondary);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.brand-label {
    margin-top: 4px;
    color: var(--header-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* Main navigation */

.learner-navigation {
    align-items: center;
    gap: 5px;
}

    .learner-navigation .nav-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 14px !important;
        color: var(--header-text);
        font-size: 14px;
        font-weight: 650;
        border-radius: 12px;
        transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    }

        .learner-navigation .nav-link:hover {
            color: var(--header-primary);
            background: var(--header-primary-light);
        }

        .learner-navigation .nav-link.active {
            color: var(--header-primary);
            background: linear-gradient( 135deg, rgba(105, 65, 198, 0.12), rgba(127, 86, 217, 0.06) );
        }

            .learner-navigation .nav-link.active::after {
                position: absolute;
                right: 14px;
                bottom: 5px;
                left: 14px;
                height: 2px;
                content: "";
                background: linear-gradient( 90deg, var(--header-primary), #9e77ed );
                border-radius: 99px;
            }

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .nav-link-icon i {
        font-size: 19px;
    }

/* Right-side header actions */

.learner-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}

/* Language selector */

.language-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 6px 11px;
    color: var(--header-text);
    background: var(--header-white);
    border: 1px solid var(--header-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .language-button:hover,
    .language-button:focus,
    .language-button.show {
        color: var(--header-primary);
        border-color: rgba(105, 65, 198, 0.38);
        box-shadow: 0 0 0 4px rgba(105, 65, 198, 0.08);
    }

    .language-button::after,
    .user-profile-button::after {
        display: none;
    }

.language-flag {
    width: 23px;
    height: 23px;
    object-fit: cover;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 50%;
}

.language-code {
    font-size: 13px;
    font-weight: 750;
}

.language-chevron {
    color: var(--header-muted);
    font-size: 16px;
    transition: transform 0.2s ease;
}

.language-button.show .language-chevron {
    transform: rotate(180deg);
}

/* Icon button and cart */

.header-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--header-text);
    text-decoration: none;
    background: var(--header-white);
    border: 1px solid var(--header-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .header-icon-button i {
        font-size: 23px;
    }

    .header-icon-button:hover {
        color: var(--header-primary);
        background: var(--header-primary-light);
        border-color: rgba(105, 65, 198, 0.28);
        box-shadow: 0 5px 15px rgba(105, 65, 198, 0.12);
        transform: translateY(-1px);
    }

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    color: var(--header-white);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    border: 2px solid var(--header-white);
    border-radius: 99px;
    box-shadow: 0 3px 8px rgba(225, 29, 72, 0.25);
}

/* User profile button */

.user-profile-button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 188px;
    height: 52px;
    padding: 5px 9px 5px 6px;
    text-align: left;
    background: var(--header-white);
    border: 1px solid var(--header-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .user-profile-button:hover,
    .user-profile-button:focus,
    .user-profile-button.show {
        border-color: rgba(105, 65, 198, 0.35);
        box-shadow: 0 0 0 4px rgba(105, 65, 198, 0.08);
    }

.user-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
}

    .user-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 2px solid var(--header-white);
        border-radius: 12px;
        box-shadow: 0 2px 7px rgba(16, 24, 40, 0.14);
    }

.online-indicator {
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    background: var(--header-success);
    border: 2px solid var(--header-white);
    border-radius: 50%;
}

.user-information {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.user-greeting {
    margin-bottom: 2px;
    color: var(--header-muted);
    font-size: 10px;
    font-weight: 600;
}

.user-name {
    max-width: 105px;
    overflow: hidden;
    color: var(--header-secondary);
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chevron {
    color: var(--header-muted);
    font-size: 18px;
    transition: transform 0.2s ease;
}

.user-profile-button.show .user-chevron {
    transform: rotate(180deg);
}

/* Dropdowns */

.modern-dropdown {
    padding: 8px;
    margin-top: 12px !important;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(228, 231, 236, 0.9);
    border-radius: 16px;
    box-shadow: 0 20px 30px rgba(16, 24, 40, 0.12), 0 5px 10px rgba(16, 24, 40, 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: headerDropdownIn 0.18s ease;
}

@keyframes headerDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.98);
    }

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

.dropdown-title {
    padding: 9px 11px 7px;
    color: var(--header-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.modern-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 9px 11px;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    transition: color 0.18s ease, background-color 0.18s ease;
}

    .modern-dropdown .dropdown-item:hover,
    .modern-dropdown .dropdown-item:focus {
        color: var(--header-primary);
        background: var(--header-primary-light);
    }

    .modern-dropdown .dropdown-item i {
        flex: 0 0 auto;
        color: var(--header-muted);
        font-size: 19px;
    }

    .modern-dropdown .dropdown-item:hover i {
        color: var(--header-primary);
    }

.modern-dropdown .dropdown-divider {
    margin: 7px 3px;
    border-color: var(--header-border);
}

/* Language menu */

.language-menu {
    width: 238px;
}

    .language-menu .dropdown-item.selected {
        color: var(--header-primary);
        background: var(--header-primary-light);
    }

    .language-menu .dropdown-item > .bx-check {
        margin-left: auto;
        color: var(--header-primary);
        font-size: 20px;
    }

.language-option-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    background: #f8fafc;
    border-radius: 9px;
}

    .language-option-flag img {
        width: 21px;
        height: 21px;
        object-fit: cover;
        border-radius: 50%;
    }

.language-option-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

    .language-option-content strong {
        color: inherit;
        font-size: 13px;
        font-weight: 700;
    }

    .language-option-content small {
        margin-top: 2px;
        color: var(--header-muted);
        font-size: 10px;
        font-weight: 500;
    }

/* User menu */

.user-menu {
    width: 268px;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
}

    .user-menu-header > span:last-child {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .user-menu-header strong {
        overflow: hidden;
        color: var(--header-secondary);
        font-size: 13px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-menu-header small {
        margin-top: 3px;
        overflow: hidden;
        color: var(--header-muted);
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.user-menu-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
}

    .user-menu-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }

.user-menu form {
    margin: 0;
}

.logout-button {
    width: 100%;
    color: var(--header-danger) !important;
    background: transparent;
    border: 0;
    text-align: left;
}

    .logout-button i {
        color: var(--header-danger) !important;
    }

/* Mobile menu toggle */

.mobile-header-actions {
    align-items: center;
    gap: 8px;
}

.learner-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--header-border);
    border-radius: 12px;
    box-shadow: none !important;
}

    .learner-menu-toggle span {
        display: block;
        width: 19px;
        height: 2px;
        background: var(--header-secondary);
        border-radius: 99px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .learner-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .learner-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .learner-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

/* Tablet adjustments */

@media (max-width: 1199.98px) and (min-width: 992px) {
    .brand-label,
    .user-information {
        display: none;
    }

    .user-profile-button {
        min-width: auto;
        width: 52px;
        padding: 5px;
    }

    .user-chevron {
        display: none;
    }

    .learner-navigation .nav-link {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
}

/* Mobile navigation */

@media (max-width: 991.98px) {
    .learner-header .navbar {
        min-height: 72px;
        padding: 10px 0;
    }

    .learner-brand {
        margin-right: 10px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
    }

    .brand-name {
        font-size: 17px;
    }

    .brand-label {
        font-size: 9px;
    }

    .learner-header .navbar-collapse {
        max-height: calc(100vh - 90px);
        padding: 15px;
        margin-top: 10px;
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--header-border);
        border-radius: 18px;
        box-shadow: var(--header-shadow);
    }

    .learner-navigation {
        align-items: stretch;
        gap: 5px;
    }

        .learner-navigation .nav-link {
            width: 100%;
            min-height: 48px;
            padding: 11px 13px !important;
        }

            .learner-navigation .nav-link.active::after {
                top: 11px;
                right: auto;
                bottom: 11px;
                left: 4px;
                width: 3px;
                height: auto;
            }

    .learner-header-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        padding-top: 14px;
        margin: 14px 0 0;
        border-top: 1px solid var(--header-border);
    }

    .language-dropdown,
    .user-dropdown {
        width: 100%;
    }

    .language-button,
    .user-profile-button {
        width: 100%;
    }

    .language-button {
        justify-content: flex-start;
        padding-right: 14px;
        padding-left: 14px;
    }

    .language-chevron {
        margin-left: auto;
    }

    .user-profile-button {
        min-width: 0;
    }

    .user-name {
        max-width: none;
    }

    .desktop-cart-button {
        display: none;
    }

    .modern-dropdown {
        width: 100%;
        margin-top: 7px !important;
    }
}

/* Small phones */

@media (max-width: 479.98px) {
    .learner-header .container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .brand-label {
        display: none;
    }

    .brand-name {
        font-size: 16px;
    }

    .brand-logo {
        width: 41px;
        height: 41px;
        border-radius: 12px;
    }

    .header-icon-button,
    .learner-menu-toggle {
        width: 41px;
        height: 41px;
    }
}

/* Accessibility */

.learner-header button:focus-visible,
.learner-header a:focus-visible {
    outline: 3px solid rgba(105, 65, 198, 0.25);
    outline-offset: 2px;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .learner-header *,
    .learner-header *::before,
    .learner-header *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}



/* =========================================================
   Learner Welcome Buffer Section
   ========================================================= */

.learner-welcome-section {
    position: relative;
    padding: 34px 0 42px;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0%, #faf9ff 48%, #ffffff 100% );
}

/* Decorative background elements */

.learner-welcome-decoration {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
}

    .learner-welcome-decoration.decoration-one {
        top: -120px;
        left: -80px;
        width: 300px;
        height: 300px;
        background: rgba(105, 65, 198, 0.08);
    }

    .learner-welcome-decoration.decoration-two {
        right: -110px;
        bottom: -160px;
        width: 370px;
        height: 370px;
        background: rgba(23, 178, 106, 0.06);
    }

/* Main panel */

.learner-welcome-panel {
    position: relative;
    z-index: 1;
    padding: 42px;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(248, 247, 255, 0.98), rgba(255, 255, 255, 0.98) );
    border: 1px solid rgba(105, 65, 198, 0.12);
    border-radius: 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 18px 45px rgba(16, 24, 40, 0.06);
}

    .learner-welcome-panel::before {
        position: absolute;
        top: -100px;
        right: 30%;
        width: 240px;
        height: 240px;
        content: "";
        background: rgba(105, 65, 198, 0.05);
        border-radius: 50%;
    }

/* Left-side content */

.learner-welcome-content {
    position: relative;
    z-index: 2;
    max-width: 590px;
}

.learner-welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px 6px 7px;
    margin-bottom: 17px;
    color: #6941c6;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(105, 65, 198, 0.08);
    border: 1px solid rgba(105, 65, 198, 0.11);
    border-radius: 99px;
}

.eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: #ffffff;
    background: linear-gradient(135deg, #6941c6, #9e77ed);
    border-radius: 50%;
}

    .eyebrow-icon i {
        font-size: 14px;
    }

.learner-welcome-content h1 {
    max-width: 550px;
    margin: 0 0 13px;
    color: #101828;
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.25px;
}

    .learner-welcome-content h1 span {
        color: #6941c6;
    }

.learner-welcome-content > p {
    max-width: 530px;
    margin: 0 0 23px;
    color: #667085;
    font-size: 15px;
    line-height: 1.75;
}

/* Course search */

.learner-course-search {
    max-width: 570px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 6px 6px 6px 18px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 20px rgba(16, 24, 40, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .search-input-wrapper:focus-within {
        border-color: rgba(105, 65, 198, 0.5);
        box-shadow: 0 0 0 4px rgba(105, 65, 198, 0.08), 0 8px 20px rgba(16, 24, 40, 0.05);
    }

    .search-input-wrapper > i {
        flex: 0 0 auto;
        color: #98a2b3;
        font-size: 22px;
    }

    .search-input-wrapper input {
        flex: 1;
        min-width: 0;
        height: 44px;
        padding: 0 13px;
        color: #101828;
        font-size: 14px;
        background: transparent;
        border: 0;
        outline: 0;
    }

        .search-input-wrapper input::placeholder {
            color: #98a2b3;
        }

    .search-input-wrapper button {
        flex: 0 0 auto;
        min-width: 94px;
        height: 44px;
        padding: 0 19px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        background: linear-gradient(135deg, #6941c6, #7f56d9);
        border: 0;
        border-radius: 12px;
        box-shadow: 0 7px 14px rgba(105, 65, 198, 0.22);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .search-input-wrapper button:hover {
            box-shadow: 0 10px 20px rgba(105, 65, 198, 0.28);
            transform: translateY(-1px);
        }

/* Search suggestions */

.popular-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: #98a2b3;
    font-size: 11px;
}

    .popular-searches > span {
        font-weight: 700;
    }

    .popular-searches a {
        color: #667085;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .popular-searches a:not(:last-child)::after {
            margin-left: 7px;
            color: #d0d5dd;
            content: "•";
        }

        .popular-searches a:hover {
            color: #6941c6;
        }

/* =========================================================
   Learner Intro Buffer
   ========================================================= */

.learner-intro-section {
    padding: 28px 0 38px;
    background: #ffffff;
}

.learner-intro-panel {
    position: relative;
    padding: 38px 42px;
    overflow: hidden;
    background: linear-gradient( 135deg, #f8f7ff 0%, #ffffff 52%, #f7fbff 100% );
    border: 1px solid rgba(105, 65, 198, 0.12);
    border-radius: 26px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 18px 45px rgba(16, 24, 40, 0.06);
}

/* Background accents */

.learner-intro-decoration {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.intro-decoration-one {
    top: -120px;
    left: -80px;
    width: 280px;
    height: 280px;
    background: rgba(105, 65, 198, 0.07);
}

.intro-decoration-two {
    right: -90px;
    bottom: -150px;
    width: 320px;
    height: 320px;
    background: rgba(14, 165, 233, 0.06);
}

/* Left content */

.learner-intro-content {
    position: relative;
    z-index: 2;
    max-width: 670px;
}

.learner-intro-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    margin-bottom: 15px;
    color: #6941c6;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    background: rgba(105, 65, 198, 0.08);
    border: 1px solid rgba(105, 65, 198, 0.12);
    border-radius: 99px;
}

    .learner-intro-label i {
        font-size: 15px;
    }

.learner-intro-content h1 {
    max-width: 650px;
    margin: 0 0 13px;
    color: #101828;
    font-size: clamp(31px, 3.5vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.3px;
}

    .learner-intro-content h1 span {
        color: #6941c6;
    }

.learner-intro-content > p {
    max-width: 610px;
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.75;
}

/* Actions */

.learner-intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.primary-learning-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    max-width: 430px;
    padding: 8px 13px 8px 9px;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient( 135deg, #6941c6, #7f56d9 );
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(105, 65, 198, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .primary-learning-button:hover {
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(105, 65, 198, 0.28);
        transform: translateY(-2px);
    }

.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: #6941c6;
    background: #ffffff;
    border-radius: 11px;
}

    .button-icon i {
        font-size: 20px;
    }

.button-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

    .button-content small {
        margin-bottom: 3px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    .button-content strong {
        overflow: hidden;
        font-size: 13px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.button-arrow {
    flex: 0 0 auto;
    font-size: 22px;
    transition: transform 0.2s ease;
}

.primary-learning-button:hover .button-arrow {
    transform: translateX(3px);
}

.secondary-learning-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 18px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .secondary-learning-button i {
        font-size: 18px;
    }

    .secondary-learning-button:hover {
        color: #6941c6;
        border-color: rgba(105, 65, 198, 0.3);
        box-shadow: 0 8px 16px rgba(105, 65, 198, 0.1);
        transform: translateY(-1px);
    }

/* =========================================================
   Course Card Content
   ========================================================= */

.course-card-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 18px 17px 17px;
}

.course-card-meta {
    display: flex;
    align-items: center;
    min-height: 18px;
    margin-bottom: 12px;
    overflow: hidden;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.course-type-label,
.course-module-count {
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-type-label {
    color: var(--primary-color, #5b5bd6);
}

.course-card-dot {
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    margin: 0 8px;
    background: #c4c9d4;
    border-radius: 50%;
}

.course-card-title {
    display: -webkit-box;
    min-height: 52px;
    margin: 0 0 10px;
    overflow: hidden;
    color: #101828;
    font-size: 17px;
    font-weight: 720;
    line-height: 1.5;
    letter-spacing: -0.018em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

    .course-card-title a {
        color: inherit;
        text-decoration: none;
        transition: color 180ms ease;
    }

        .course-card-title a:hover {
            color: var(--primary-color, #5b5bd6);
        }

.course-card-description {
    display: -webkit-box;
    min-height: 66px;
    margin: 0;
    overflow: hidden;
    color: #667085;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.course-card-footer {
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
    padding-top: 17px;
    margin-top: 17px;
    border-top: 1px solid #eef0f3;
}

.course-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: color 180ms ease;
}

    .course-view-link i {
        flex: 0 0 auto;
        font-size: 20px;
        transition: transform 180ms ease;
    }

    .course-view-link:hover {
        color: var(--primary-color, #5b5bd6);
    }

        .course-view-link:hover i {
            transform: translateX(4px);
        }

/* Course details */

.current-course-body {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.current-course-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    color: #ffffff;
    background: linear-gradient( 135deg, #6941c6, #9e77ed );
    border-radius: 13px;
    box-shadow: 0 7px 15px rgba(105, 65, 198, 0.2);
}

    .current-course-icon i {
        font-size: 22px;
    }

.current-course-details {
    min-width: 0;
}

.current-course-category {
    display: block;
    margin-bottom: 4px;
    color: #7f56d9;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.current-course-details h2 {
    display: -webkit-box;
    margin: 0 0 6px;
    overflow: hidden;
    color: #101828;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -0.25px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.current-course-details p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #667085;
    font-size: 11px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* Progress */

.current-course-progress {
    margin-top: 19px;
}

.course-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}

    .course-progress-heading span {
        color: #667085;
        font-size: 10px;
        font-weight: 650;
    }

    .course-progress-heading strong {
        color: #6941c6;
        font-size: 10px;
        font-weight: 800;
    }

.learner-course-progress {
    height: 7px;
    overflow: hidden;
    background: rgba(105, 65, 198, 0.11);
    border-radius: 99px;
}

    .learner-course-progress .progress-bar {
        background: linear-gradient( 90deg, #6941c6, #9e77ed );
        border-radius: 99px;
    }

/* Continue course link */

.continue-course-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 13px;
    margin-top: 17px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: #101828;
    border-radius: 12px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .continue-course-link i {
        font-size: 19px;
        transition: transform 0.2s ease;
    }

    .continue-course-link:hover {
        color: #ffffff;
        background: #6941c6;
        transform: translateY(-1px);
    }

        .continue-course-link:hover i {
            transform: translateX(3px);
        }

/* =========================================================
   New Learner State
   ========================================================= */

.start-learning-card {
    text-align: center;
}

.start-learning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    color: #6941c6;
    background: #f4f0ff;
    border-radius: 15px;
}

    .start-learning-icon i {
        font-size: 25px;
    }

.start-learning-label {
    display: block;
    margin-bottom: 5px;
    color: #7f56d9;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.start-learning-card h2 {
    margin: 0 0 8px;
    color: #101828;
    font-size: 20px;
    font-weight: 750;
}

.start-learning-card p {
    max-width: 320px;
    margin: 0 auto 17px;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}

.start-learning-card > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6941c6;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

    .start-learning-card > a i {
        font-size: 18px;
        transition: transform 0.2s ease;
    }

    .start-learning-card > a:hover i {
        transform: translateX(3px);
    }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991.98px) {
    .learner-intro-section {
        padding: 22px 0 32px;
    }

    .learner-intro-panel {
        padding: 31px;
    }

    .current-course-card,
    .start-learning-card {
        margin-top: 4px;
    }
}

@media (max-width: 767.98px) {
    .learner-intro-panel {
        padding: 27px 22px;
        border-radius: 22px;
    }

    .learner-intro-content h1 {
        font-size: 32px;
    }

    .learner-intro-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-learning-button,
    .secondary-learning-button {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .learner-intro-section {
        padding-top: 17px;
    }

    .learner-intro-panel {
        padding: 23px 16px;
        border-radius: 19px;
    }

    .learner-intro-content h1 {
        font-size: 27px;
        letter-spacing: -0.7px;
    }

    .learner-intro-content > p {
        font-size: 14px;
    }

    .primary-learning-button {
        min-height: 56px;
    }

    .button-content strong {
        max-width: 210px;
    }

    .current-course-card,
    .start-learning-card {
        padding: 18px;
    }
}


/* =========================================================
   Course Catalog Section
   ========================================================= */

.course-catalog-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0%, #fafbff 100% );
}

    .course-catalog-section::before {
        position: absolute;
        top: 80px;
        right: -180px;
        width: 420px;
        height: 420px;
        pointer-events: none;
        content: "";
        background: rgba(105, 65, 198, 0.035);
        border-radius: 50%;
    }

    .course-catalog-section .container {
        position: relative;
        z-index: 1;
    }

/* Section heading */

.course-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

    .course-section-header .section-title {
        max-width: 680px;
        padding: 0;
        margin: 0;
    }

        .course-section-header .section-title .sub-title {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 12px;
            margin-bottom: 13px;
            color: #6941c6;
            font-size: 11px;
            font-weight: 750;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            background: #f4f0ff;
            border: 1px solid rgba(105, 65, 198, 0.12);
            border-radius: 999px;
        }

            .course-section-header .section-title .sub-title::before {
                width: 6px;
                height: 6px;
                content: "";
                background: #6941c6;
                border-radius: 50%;
            }

        .course-section-header .section-title h2 {
            margin: 0;
            color: #101828;
            font-size: clamp(29px, 3vw, 42px);
            font-weight: 800;
            line-height: 1.18;
            letter-spacing: -1px;
        }

/* Slider buttons */

.course-slider-navigation {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.course-slider-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 0;
    color: #344054;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    box-shadow: 0 3px 8px rgba(16, 24, 40, 0.04);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .course-slider-button i {
        font-size: 21px;
    }

    .course-slider-button:hover {
        color: #ffffff;
        background: #6941c6;
        border-color: #6941c6;
        box-shadow: 0 9px 20px rgba(105, 65, 198, 0.2);
        transform: translateY(-2px);
    }


/* =========================================================
   Unified Course Detail Experience
   ========================================================= */

.course-experience-area {
    --course-primary: #6941c6;
    --course-primary-dark: #53389e;
    --course-primary-soft: #f4f0ff;
    --course-heading: #101828;
    --course-text: #344054;
    --course-muted: #667085;
    --course-light-muted: #98a2b3;
    --course-border: #e4e7ec;
    --course-surface: #ffffff;
    --course-background: #f8f9fc;
    --course-success: #039855;
    position: relative;
    padding: 28px 0 90px;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0, #f9faff 360px, #f7f8fc 100% );
}

/* =========================================================
   Breadcrumb
   ========================================================= */

.course-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    overflow: hidden;
    color: var(--course-light-muted);
    font-size: 12px;
    white-space: nowrap;
}

    .course-detail-breadcrumb a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        color: var(--course-muted);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .course-detail-breadcrumb a:hover {
            color: var(--course-primary);
        }

        .course-detail-breadcrumb a i {
            font-size: 16px;
        }

    .course-detail-breadcrumb > span {
        overflow: hidden;
        color: var(--course-heading);
        font-weight: 700;
        text-overflow: ellipsis;
    }

.breadcrumb-divider {
    flex: 0 0 auto;
    color: #d0d5dd;
    font-size: 15px;
}

/* =========================================================
   Unified Hero
   ========================================================= */

.course-detail-hero {
    position: relative;
    padding: 48px;
    overflow: hidden;
    background: linear-gradient( 135deg, #f7f4ff 0%, #ffffff 48%, #f7fbff 100% );
    border: 1px solid rgba(105, 65, 198, 0.13);
    border-radius: 30px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 22px 55px rgba(16, 24, 40, 0.07);
}

.course-hero-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.course-hero-glow-one {
    top: -180px;
    left: -150px;
    width: 390px;
    height: 390px;
    background: rgba(105, 65, 198, 0.08);
}

.course-hero-glow-two {
    right: -150px;
    bottom: -220px;
    width: 440px;
    height: 440px;
    background: rgba(14, 165, 233, 0.06);
}

.course-hero-content {
    position: relative;
    z-index: 2;
}

.course-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    margin-bottom: 17px;
    color: var(--course-primary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.65px;
    text-transform: uppercase;
    background: rgba(105, 65, 198, 0.08);
    border: 1px solid rgba(105, 65, 198, 0.12);
    border-radius: 999px;
}

    .course-hero-label i {
        font-size: 16px;
    }

.course-hero-content h1 {
    max-width: 850px;
    margin: 0 0 17px;
    color: var(--course-heading);
    font-size: clamp(36px, 4vw, 55px);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.course-hero-description {
    max-width: 760px;
    margin: 0;
    color: var(--course-muted);
    font-size: 15px;
    line-height: 1.8;
}

.course-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 27px;
}

.course-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 145px;
    padding: 9px 13px 9px 9px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(228, 231, 236, 0.94);
    border-radius: 14px;
    box-shadow: 0 3px 9px rgba(16, 24, 40, 0.04);
    backdrop-filter: blur(10px);
}

.course-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    color: var(--course-primary);
    background: var(--course-primary-soft);
    border-radius: 10px;
}

    .course-meta-icon i {
        font-size: 18px;
    }

.course-meta-copy {
    display: flex;
    flex-direction: column;
}

    .course-meta-copy small {
        margin-bottom: 2px;
        color: var(--course-light-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.45px;
        text-transform: uppercase;
    }

    .course-meta-copy strong {
        color: var(--course-heading);
        font-size: 12px;
        font-weight: 750;
    }

.course-hero-supporting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 19px;
}

    .course-hero-supporting-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--course-muted);
        font-size: 11px;
        font-weight: 600;
    }

    .course-hero-supporting-meta i {
        color: var(--course-primary);
        font-size: 16px;
    }

/* Enrollment panel */

.course-enrollment-panel {
    position: relative;
    z-index: 2;
    padding: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(228, 231, 236, 0.95);
    border-radius: 22px;
    box-shadow: 0 2px 5px rgba(16, 24, 40, 0.03), 0 18px 38px rgba(16, 24, 40, 0.08);
    backdrop-filter: blur(14px);
}

.course-review-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.course-review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f79009;
}

    .course-review-stars i {
        font-size: 17px;
    }

.course-review-row > span {
    color: var(--course-muted);
    font-size: 11px;
    font-weight: 650;
}

.course-enrollment-panel h2 {
    margin: 0 0 10px;
    color: var(--course-heading);
    font-size: 23px;
    font-weight: 780;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.course-enrollment-panel > p {
    margin: 0;
    color: var(--course-muted);
    font-size: 12px;
    line-height: 1.7;
}

.enrollment-highlights {
    display: grid;
    gap: 9px;
    padding: 18px 0;
    margin-top: 18px;
    border-top: 1px solid #f0f1f3;
}

    .enrollment-highlights span {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--course-text);
        font-size: 11px;
        font-weight: 650;
    }

    .enrollment-highlights i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 21px;
        height: 21px;
        color: var(--course-success);
        font-size: 14px;
        background: #ecfdf3;
        border-radius: 50%;
    }

.course-primary-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 53px;
    padding: 0 17px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    background: linear-gradient( 135deg, var(--course-primary), #7f56d9 );
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(105, 65, 198, 0.23);
    transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .course-primary-action i {
        font-size: 21px;
        transition: transform 0.2s ease;
    }

    .course-primary-action:hover {
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(105, 65, 198, 0.3);
        transform: translateY(-2px);
    }

        .course-primary-action:hover i {
            transform: translateX(4px);
        }

.course-action-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 11px;
    color: var(--course-light-muted);
    font-size: 9px;
    font-weight: 600;
}

    .course-action-note i {
        font-size: 13px;
    }

/* =========================================================
   Course Workspace
   ========================================================= */

.course-workspace {
    margin-top: 34px;
}

/* Media */

.course-media-panel {
    position: relative;
    height: 455px;
    overflow: hidden;
    background: #eef0f5;
    border: 1px solid var(--course-border);
    border-radius: 24px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.03), 0 18px 40px rgba(16, 24, 40, 0.08);
}

    .course-media-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.course-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(15, 23, 42, 0.02) 35%, rgba(15, 23, 42, 0.75) 100% );
}

.course-media-caption {
    position: absolute;
    right: 25px;
    bottom: 24px;
    left: 25px;
    display: flex;
    flex-direction: column;
}

.media-caption-label {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.course-media-caption strong {
    max-width: 680px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.35;
}

/* =========================================================
   Unified Course Detail Experience
   ========================================================= */

.course-experience-area {
    --course-primary: #6941c6;
    --course-primary-dark: #53389e;
    --course-primary-soft: #f4f0ff;
    --course-heading: #101828;
    --course-text: #344054;
    --course-muted: #667085;
    --course-light-muted: #98a2b3;
    --course-border: #e4e7ec;
    --course-surface: #ffffff;
    --course-background: #f8f9fc;
    --course-success: #039855;
    position: relative;
    padding: 28px 0 90px;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0, #f9faff 360px, #f7f8fc 100% );
}

/* =========================================================
   Breadcrumb
   ========================================================= */

.course-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    overflow: hidden;
    color: var(--course-light-muted);
    font-size: 12px;
    white-space: nowrap;
}

    .course-detail-breadcrumb a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        color: var(--course-muted);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .course-detail-breadcrumb a:hover {
            color: var(--course-primary);
        }

        .course-detail-breadcrumb a i {
            font-size: 16px;
        }

    .course-detail-breadcrumb > span {
        overflow: hidden;
        color: var(--course-heading);
        font-weight: 700;
        text-overflow: ellipsis;
    }

.breadcrumb-divider {
    flex: 0 0 auto;
    color: #d0d5dd;
    font-size: 15px;
}

/* =========================================================
   Unified Hero
   ========================================================= */

.course-detail-hero {
    position: relative;
    padding: 48px;
    overflow: hidden;
    background: linear-gradient( 135deg, #f7f4ff 0%, #ffffff 48%, #f7fbff 100% );
    border: 1px solid rgba(105, 65, 198, 0.13);
    border-radius: 30px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 22px 55px rgba(16, 24, 40, 0.07);
}

.course-hero-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.course-hero-glow-one {
    top: -180px;
    left: -150px;
    width: 390px;
    height: 390px;
    background: rgba(105, 65, 198, 0.08);
}

.course-hero-glow-two {
    right: -150px;
    bottom: -220px;
    width: 440px;
    height: 440px;
    background: rgba(14, 165, 233, 0.06);
}

.course-hero-content {
    position: relative;
    z-index: 2;
}

.course-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    margin-bottom: 17px;
    color: var(--course-primary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.65px;
    text-transform: uppercase;
    background: rgba(105, 65, 198, 0.08);
    border: 1px solid rgba(105, 65, 198, 0.12);
    border-radius: 999px;
}

    .course-hero-label i {
        font-size: 16px;
    }

.course-hero-content h1 {
    max-width: 850px;
    margin: 0 0 17px;
    color: var(--course-heading);
    font-size: clamp(36px, 4vw, 55px);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.course-hero-description {
    max-width: 760px;
    margin: 0;
    color: var(--course-muted);
    font-size: 15px;
    line-height: 1.8;
}

.course-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 27px;
}

.course-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 145px;
    padding: 9px 13px 9px 9px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(228, 231, 236, 0.94);
    border-radius: 14px;
    box-shadow: 0 3px 9px rgba(16, 24, 40, 0.04);
    backdrop-filter: blur(10px);
}

.course-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    color: var(--course-primary);
    background: var(--course-primary-soft);
    border-radius: 10px;
}

    .course-meta-icon i {
        font-size: 18px;
    }

.course-meta-copy {
    display: flex;
    flex-direction: column;
}

    .course-meta-copy small {
        margin-bottom: 2px;
        color: var(--course-light-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.45px;
        text-transform: uppercase;
    }

    .course-meta-copy strong {
        color: var(--course-heading);
        font-size: 12px;
        font-weight: 750;
    }

.course-hero-supporting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 19px;
}

    .course-hero-supporting-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--course-muted);
        font-size: 11px;
        font-weight: 600;
    }

    .course-hero-supporting-meta i {
        color: var(--course-primary);
        font-size: 16px;
    }

/* Enrollment panel */

.course-enrollment-panel {
    position: relative;
    z-index: 2;
    padding: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(228, 231, 236, 0.95);
    border-radius: 22px;
    box-shadow: 0 2px 5px rgba(16, 24, 40, 0.03), 0 18px 38px rgba(16, 24, 40, 0.08);
    backdrop-filter: blur(14px);
}

.course-review-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.course-review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f79009;
}

    .course-review-stars i {
        font-size: 17px;
    }

.course-review-row > span {
    color: var(--course-muted);
    font-size: 11px;
    font-weight: 650;
}

.course-enrollment-panel h2 {
    margin: 0 0 10px;
    color: var(--course-heading);
    font-size: 23px;
    font-weight: 780;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.course-enrollment-panel > p {
    margin: 0;
    color: var(--course-muted);
    font-size: 12px;
    line-height: 1.7;
}

.enrollment-highlights {
    display: grid;
    gap: 9px;
    padding: 18px 0;
    margin-top: 18px;
    border-top: 1px solid #f0f1f3;
}

    .enrollment-highlights span {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--course-text);
        font-size: 11px;
        font-weight: 650;
    }

    .enrollment-highlights i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 21px;
        height: 21px;
        color: var(--course-success);
        font-size: 14px;
        background: #ecfdf3;
        border-radius: 50%;
    }

.course-primary-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 53px;
    padding: 0 17px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    background: linear-gradient( 135deg, var(--course-primary), #7f56d9 );
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(105, 65, 198, 0.23);
    transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .course-primary-action i {
        font-size: 21px;
        transition: transform 0.2s ease;
    }

    .course-primary-action:hover {
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(105, 65, 198, 0.3);
        transform: translateY(-2px);
    }

        .course-primary-action:hover i {
            transform: translateX(4px);
        }

.course-action-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 11px;
    color: var(--course-light-muted);
    font-size: 9px;
    font-weight: 600;
}

    .course-action-note i {
        font-size: 13px;
    }

/* =========================================================
   Course Workspace
   ========================================================= */

.course-workspace {
    margin-top: 34px;
}

/* Media */

.course-media-panel {
    position: relative;
    height: 455px;
    overflow: hidden;
    background: #eef0f5;
    border: 1px solid var(--course-border);
    border-radius: 24px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.03), 0 18px 40px rgba(16, 24, 40, 0.08);
}

    .course-media-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.course-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(15, 23, 42, 0.02) 35%, rgba(15, 23, 42, 0.75) 100% );
}

.course-media-caption {
    position: absolute;
    right: 25px;
    bottom: 24px;
    left: 25px;
    display: flex;
    flex-direction: column;
}

.media-caption-label {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.course-media-caption strong {
    max-width: 680px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.35;
}

/* =========================================================
   Main Course Content
   ========================================================= */

.course-content-panel {
    padding: 10px 38px;
    margin-top: 24px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 24px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.025), 0 16px 36px rgba(16, 24, 40, 0.05);
}

/* Individual content section */

.course-detail-section {
    padding: 42px 0;
    border-bottom: 1px solid #eaecf0;
}

    .course-detail-section:last-child {
        border-bottom: 0;
    }

/* Section heading */

.course-detail-section-header {
    margin-bottom: 22px;
}

.course-detail-section-label {
    display: block;
    margin-bottom: 7px;
    color: #6941c6;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.course-detail-section h2 {
    margin: 0;
    color: #101828;
    font-size: 29px;
    font-weight: 780;
    line-height: 1.25;
    letter-spacing: -0.6px;
}

/* General content typography */

.course-detail-section p {
    max-width: 780px;
    margin: 0 0 22px;
    color: #475467;
    font-size: 16px;
    line-height: 1.8;
}

    .course-detail-section p:last-child {
        margin-bottom: 0;
    }

/* Standard bullet list */

.course-detail-list {
    display: grid;
    gap: 13px;
    max-width: 820px;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .course-detail-list li {
        position: relative;
        padding-left: 27px;
        color: #344054;
        font-size: 16px;
        line-height: 1.75;
    }

        .course-detail-list li::before {
            position: absolute;
            top: 10px;
            left: 2px;
            width: 8px;
            height: 8px;
            content: "";
            background: #6941c6;
            border-radius: 50%;
            box-shadow: 0 0 0 5px rgba(105, 65, 198, 0.09);
        }

/* Two-column short-item list */

.course-detail-grid-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

    .course-detail-grid-list li {
        position: relative;
        min-height: 54px;
        padding: 15px 18px 15px 42px;
        color: #344054;
        font-size: 15px;
        font-weight: 650;
        line-height: 1.55;
        background: #fafbfc;
        border: 1px solid #e4e7ec;
        border-radius: 13px;
    }

        .course-detail-grid-list li::before {
            position: absolute;
            top: 22px;
            left: 19px;
            width: 8px;
            height: 8px;
            content: "";
            background: #6941c6;
            border-radius: 50%;
        }

/* =========================================================
   Modules
   ========================================================= */

.course-module-list {
    display: grid;
    gap: 12px;
}

.course-module-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 17px;
    padding: 20px;
    background: #fafbfc;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .course-module-item:hover {
        background: #fcfbff;
        border-color: rgba(105, 65, 198, 0.22);
        box-shadow: 0 9px 20px rgba(16, 24, 40, 0.055);
        transform: translateY(-2px);
    }

.course-module-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #6941c6;
    font-size: 13px;
    font-weight: 800;
    background: #f4f0ff;
    border-radius: 13px;
}

.course-module-content {
    min-width: 0;
}

    .course-module-content h3 {
        margin: 1px 0 7px;
        color: #101828;
        font-size: 18px;
        font-weight: 750;
        line-height: 1.4;
    }

    .course-module-content p {
        margin: 0;
        color: #667085;
        font-size: 15px;
        line-height: 1.75;
    }

/* =========================================================
   Capstone
   ========================================================= */

.course-capstone-content {
    padding: 26px 28px;
    background: linear-gradient( 135deg, #f7f4ff, #ffffff );
    border: 1px solid rgba(105, 65, 198, 0.15);
    border-left: 4px solid #6941c6;
    border-radius: 15px;
}

    .course-capstone-content h3 {
        margin: 0 0 10px;
        color: #101828;
        font-size: 21px;
        font-weight: 760;
        line-height: 1.4;
    }

    .course-capstone-content p {
        margin: 0;
    }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991.98px) {
    .course-content-panel {
        padding-right: 30px;
        padding-left: 30px;
    }

    .course-detail-section {
        padding: 36px 0;
    }
}

@media (max-width: 767.98px) {
    .course-content-panel {
        padding-right: 23px;
        padding-left: 23px;
        border-radius: 20px;
    }

    .course-detail-section h2 {
        font-size: 26px;
    }

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

    .course-module-item {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 13px;
        padding: 17px;
    }

    .course-module-number {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 575.98px) {
    .course-content-panel {
        padding: 0 18px;
        margin-top: 17px;
        border-radius: 17px;
    }

    .course-detail-section {
        padding: 30px 0;
    }

    .course-detail-section-header {
        margin-bottom: 18px;
    }

    .course-detail-section-label {
        font-size: 10px;
    }

    .course-detail-section h2 {
        font-size: 23px;
    }

    .course-detail-section p,
    .course-detail-list li {
        font-size: 15px;
    }

    .course-detail-grid-list li {
        min-height: 50px;
        padding: 13px 15px 13px 38px;
        font-size: 14px;
    }

        .course-detail-grid-list li::before {
            top: 20px;
            left: 17px;
        }

    .course-module-item {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px;
    }

    .course-module-number {
        width: 40px;
        height: 40px;
        font-size: 11px;
    }

    .course-module-content h3 {
        font-size: 16px;
    }

    .course-module-content p {
        font-size: 14px;
    }

    .course-capstone-content {
        padding: 20px;
    }

        .course-capstone-content h3 {
            font-size: 18px;
        }
}


/* =========================================================
   Sidebar
   ========================================================= */

.course-sidebar {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 18px;
}

.course-sidebar-card {
    padding: 26px;
    background: var(--course-surface);
    border: 1px solid var(--course-border);
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.025), 0 13px 30px rgba(16, 24, 40, 0.055);
}

.course-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 19px;
    margin-bottom: 10px;
    border-bottom: 1px solid #edf0f4;
}

.sidebar-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    color: var(--course-primary);
    background: var(--course-primary-soft);
    border-radius: 12px;
}

.course-sidebar .sidebar-heading-icon i {
    font-size: 22px !important;
}

.course-sidebar .course-sidebar-heading > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .course-sidebar .course-sidebar-heading > div > span {
        margin-bottom: 4px;
        color: var(--course-light-muted);
        font-size: 12px !important;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0.65px;
        text-transform: uppercase;
    }

.course-sidebar .course-sidebar-heading h3 {
    margin: 0;
    color: var(--course-heading);
    font-size: 21px !important;
    font-weight: 760;
    line-height: 1.3;
}

/* Course information rows */

.course-sidebar .course-information-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .course-sidebar .course-information-list li {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 15px 0;
        border-bottom: 1px solid #f0f1f3;
    }

        .course-sidebar .course-information-list li:last-child {
            padding-bottom: 4px;
            border-bottom: 0;
        }

.course-sidebar .information-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    color: var(--course-primary);
    background: #faf8ff;
    border-radius: 10px;
}

    .course-sidebar .information-icon i {
        font-size: 19px !important;
    }

.course-sidebar .information-copy {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

    .course-sidebar .information-copy small {
        flex: 0 0 42%;
        color: var(--course-muted);
        font-size: 14px !important;
        font-weight: 600;
        line-height: 1.5;
    }

    .course-sidebar .information-copy strong {
        max-width: 58%;
        overflow: visible;
        color: var(--course-heading);
        font-size: 14px !important;
        font-weight: 750;
        line-height: 1.5;
        text-align: right;
        text-overflow: unset;
        white-space: normal;
    }

    .course-sidebar .information-copy a {
        color: var(--course-primary);
        font-size: inherit;
        text-decoration: none;
    }

/* Syllabus headings */

.course-sidebar .syllabus-chapter-heading small {
    font-size: 12px !important;
    line-height: 1.4;
}

.course-sidebar .syllabus-chapter-heading strong {
    font-size: 15px !important;
    line-height: 1.4;
}

/* Syllabus lesson text */

.course-sidebar .syllabus-lesson-content strong {
    font-size: 14px !important;
    line-height: 1.5;
}

.course-sidebar .syllabus-lesson-content small {
    font-size: 12px !important;
    line-height: 1.4;
}

.course-sidebar .syllabus-free-badge {
    font-size: 11px !important;
}

/* Final quiz */

.course-sidebar .syllabus-final-item strong {
    font-size: 14px !important;
}

.course-sidebar .syllabus-final-item small {
    font-size: 12px !important;
    line-height: 1.4;
}


/* Information list */

.course-information-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .course-information-list li {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 0;
        border-bottom: 1px solid #f0f1f3;
    }

        .course-information-list li:last-child {
            padding-bottom: 2px;
            border-bottom: 0;
        }

.information-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: var(--course-primary);
    background: #faf8ff;
    border-radius: 10px;
}

    .information-icon i {
        font-size: 17px;
    }

.information-copy {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    min-width: 0;
}

    .information-copy small {
        color: var(--course-muted);
        font-size: 10px;
        font-weight: 600;
    }

    .information-copy strong {
        max-width: 58%;
        overflow: hidden;
        color: var(--course-heading);
        font-size: 10px;
        font-weight: 750;
        text-align: right;
        text-overflow: ellipsis;
    }

    .information-copy a {
        color: var(--course-primary);
        text-decoration: none;
    }

/* Syllabus */

.syllabus-chapter-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
}

.syllabus-chapter-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    color: var(--course-primary);
    font-size: 9px;
    font-weight: 800;
    background: var(--course-primary-soft);
    border-radius: 9px;
}

.syllabus-chapter-heading > div {
    display: flex;
    flex-direction: column;
}

.syllabus-chapter-heading small {
    margin-bottom: 1px;
    color: var(--course-light-muted);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.syllabus-chapter-heading strong {
    color: var(--course-heading);
    font-size: 12px;
    font-weight: 750;
}

.course-syllabus-list {
    display: grid;
    gap: 7px;
}

.syllabus-lesson-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 9px;
    color: var(--course-text);
    text-decoration: none;
    background: #fbfcfd;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .syllabus-lesson-item:hover {
        color: var(--course-primary);
        background: #faf8ff;
        border-color: rgba(105, 65, 198, 0.2);
        transform: translateX(2px);
    }

.syllabus-lesson-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    color: var(--course-primary);
    font-size: 9px;
    font-weight: 800;
    background: var(--course-primary-soft);
    border-radius: 9px;
}

.syllabus-lesson-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .syllabus-lesson-content strong {
        display: -webkit-box;
        overflow: hidden;
        color: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .syllabus-lesson-content small {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        color: var(--course-light-muted);
        font-size: 8px;
        font-weight: 600;
    }

        .syllabus-lesson-content small i {
            font-size: 12px;
        }

.syllabus-free-badge {
    padding: 4px 7px;
    color: var(--course-success);
    font-size: 8px;
    font-weight: 800;
    background: #ecfdf3;
    border-radius: 999px;
}

.syllabus-lesson-item.locked:hover {
    transform: none;
}

.syllabus-final-heading {
    margin-top: 8px;
    border-top: 1px solid #edf0f4;
}

.syllabus-final-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: linear-gradient( 135deg, #f8f5ff, #ffffff );
    border: 1px solid rgba(105, 65, 198, 0.13);
    border-radius: 12px;
}

    .syllabus-final-item > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        color: #ffffff;
        background: var(--course-primary);
        border-radius: 10px;
    }

    .syllabus-final-item i {
        font-size: 18px;
    }

    .syllabus-final-item > div {
        display: flex;
        flex-direction: column;
    }

    .syllabus-final-item strong {
        color: var(--course-heading);
        font-size: 10px;
        font-weight: 750;
    }

    .syllabus-final-item small {
        margin-top: 2px;
        color: var(--course-muted);
        font-size: 8px;
    }

/* Business card */

.course-business-card {
    position: relative;
    padding: 24px;
    overflow: hidden;
    background: linear-gradient( 145deg, #151b2b, #202940 );
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(16, 24, 40, 0.18);
}

    .course-business-card::after {
        position: absolute;
        right: -65px;
        bottom: -80px;
        width: 180px;
        height: 180px;
        content: "";
        background: rgba(158, 119, 237, 0.2);
        border-radius: 50%;
    }

.business-card-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    margin-bottom: 17px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}

    .business-card-icon i {
        font-size: 21px;
    }

.business-card-label {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 7px;
    color: #b9a6f5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.course-business-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.4;
}

.course-business-card p {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 11px;
    line-height: 1.7;
}

.course-business-card > a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 43px;
    padding: 0 13px;
    color: var(--course-heading);
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    background: #ffffff;
    border-radius: 11px;
    transition: color 0.2s ease, transform 0.2s ease;
}

    .course-business-card > a i {
        font-size: 18px;
        transition: transform 0.2s ease;
    }

    .course-business-card > a:hover {
        color: var(--course-primary);
        transform: translateY(-1px);
    }

        .course-business-card > a:hover i {
            transform: translateX(3px);
        }

/* =========================================================
   Mobile Quick Facts
   ========================================================= */

.course-mobile-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.course-mobile-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 11px;
    background: #ffffff;
    border: 1px solid var(--course-border);
    border-radius: 12px;
}

    .course-mobile-fact > i {
        color: var(--course-primary);
        font-size: 19px;
    }

    .course-mobile-fact > span {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .course-mobile-fact small {
        color: var(--course-light-muted);
        font-size: 7px;
        font-weight: 750;
        letter-spacing: 0.4px;
        text-transform: uppercase;
    }

    .course-mobile-fact strong {
        overflow: hidden;
        color: var(--course-heading);
        font-size: 9px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199.98px) {
    .course-detail-hero {
        padding: 40px;
    }

    .course-media-panel {
        height: 410px;
    }

    .course-content-panel {
        padding-right: 28px;
        padding-left: 28px;
    }
}

@media (max-width: 991.98px) {
    .course-experience-area {
        padding-top: 22px;
        padding-bottom: 70px;
    }

    .course-detail-hero {
        padding: 33px;
        border-radius: 25px;
    }

    .course-enrollment-panel {
        margin-top: 5px;
    }

    .course-workspace {
        margin-top: 25px;
    }

    .course-media-panel {
        height: 380px;
    }

    .course-mobile-facts {
        display: grid !important;
    }

    .course-sidebar {
        position: static;
        margin-top: 3px;
    }
}

@media (max-width: 767.98px) {
    .course-detail-hero {
        padding: 28px 23px;
    }

    .course-hero-content h1 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .course-hero-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .course-meta-pill {
        min-width: 0;
        padding-right: 8px;
    }

    .course-meta-icon {
        width: 34px;
        height: 34px;
    }

    .course-meta-copy strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .course-media-panel {
        height: 330px;
        border-radius: 20px;
    }

    .course-content-panel {
        padding: 4px 22px;
        border-radius: 20px;
    }

    .course-format-grid,
    .course-outcome-list {
        grid-template-columns: 1fr;
    }

    .course-section-introduction,
    .assessment-type-grid {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .course-experience-area {
        padding-top: 17px;
        padding-bottom: 55px;
    }

    .course-detail-breadcrumb {
        margin-bottom: 15px;
    }

        .course-detail-breadcrumb a:first-child span {
            display: none;
        }

    .course-detail-hero {
        padding: 24px 17px;
        border-radius: 20px;
    }

    .course-hero-label {
        margin-bottom: 13px;
    }

    .course-hero-content h1 {
        margin-bottom: 13px;
        font-size: 29px;
        letter-spacing: -0.75px;
    }

    .course-hero-description {
        font-size: 13px;
    }

    .course-hero-meta {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 20px;
    }

    .course-meta-pill {
        width: 100%;
    }

    .course-hero-supporting-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-top: 15px;
    }

    .course-enrollment-panel {
        padding: 21px;
        border-radius: 18px;
    }

        .course-enrollment-panel h2 {
            font-size: 20px;
        }

    .course-media-panel {
        height: 245px;
        border-radius: 17px;
    }

    .course-media-caption {
        right: 17px;
        bottom: 16px;
        left: 17px;
    }

        .course-media-caption strong {
            font-size: 15px;
        }

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

    .course-content-panel {
        padding: 1px 17px;
        margin-top: 16px;
        border-radius: 17px;
    }

    .course-content-section {
        padding: 28px 0;
    }

    .course-section-heading {
        gap: 10px;
        margin-bottom: 19px;
    }

    .course-section-number {
        width: 35px;
        height: 35px;
    }

    .course-section-heading h2 {
        font-size: 21px;
    }

    .course-format-item,
    .course-audience-item,
    .course-module-overview-item {
        padding: 12px;
    }

    .course-capstone-card {
        padding: 17px;
    }

    .course-capstone-icon {
        width: 44px;
        height: 44px;
    }

    .course-sidebar-card,
    .course-business-card {
        padding: 19px;
        border-radius: 17px;
    }
}

/* Accessibility */

.course-experience-area a:focus-visible {
    outline: 3px solid rgba(105, 65, 198, 0.25);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .course-experience-area *,
    .course-experience-area *::before,
    .course-experience-area *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}