body {
            font-family: 'Inter', sans-serif;
            background-color: #f9fafb;
            color: #0f172a;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3 {
            font-weight: 1000;
        }

        h1 span.first,
        h2 span.first,
        h3 span.first {
            color: #ff2d55;
        }

        h1 span.last,
        h2 span.last,
        h3 span.last {
            color: black;
        }

        h1 {
            font-size: clamp(2.7rem, 6vw, 4.4rem);
        }

        h2 {
            font-size: clamp(2.0rem, 4vw, 2.7rem);
        }

        h3 {
            font-size: 1.9rem;
        }

        /*  Tighter global spacing */
        .container,
        .container-fluid {
            max-width: 1320px !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        @media (max-width: 768px) {

            .container,
            .container-fluid {
                padding-left: 12px !important;
                padding-right: 12px !important;
            }
        }

        .section {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 25px 20px;
            margin-bottom: 35px;
        }

        /* HERO SECTION */
        .ch-hero {
            background-color: #050607 !important;
            color: #ffffff !important;
            padding: 80px 0 60px 0;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100vw;
        }

        .ch-hero-inner {
            max-width: 1310px;
            margin: 0 auto;
            text-align: left !important;
            /* padding-left: 5%; */
        }

        .ch-hero-inner p {
            max-width: 60% !important;
        }

        .ch-hero-inner p span {
            background: black !important;
            color: #ffffff !important;
            font-size: 1.6rem !important;
        }

        .ch-hero-inner .ch-author {
            color: #fff !important;
            font-size: 1.4rem;
            margin-top: 15px;
            margin-bottom: 25px;
        }

        .ch-hero-inner .ch-author a {
            color: red !important;
            text-decoration: none;
        }

        .ch-hero-inner .ch-meta {
            display: flex;
            gap: 20px;
            align-items: center;
            font-size: 1.4rem;
        }

        .ch-hero .ch-sub {
            color: #ffffff !important;
            /* Pure white */
            font-size: 1.4rem;
            /* optional, looks cleaner */
            line-height: 1.6;
            font-weight: 400;
        }


        @media (max-width: 768px) {
            .ch-hero-inner {
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        /* Info card floating animation */
        @keyframes floaty {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-18px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .info-card {
            border: 1px solid #dee2e6;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            margin: 40px 0;
            position: relative;
            animation: floaty 4s ease-in-out infinite;
            z-index: 2;
        }

        .info-card .col {
            padding: 20px;
            border-right: 1px solid #e5e7eb;
        }

        .info-card .col:last-child {
            border-right: none;
        }

        .info-title {
            font-weight: 700;
            font-size: 1.8rem;
            color: #111827;
        }

        .info-text {
            color: #6b7280;
            font-size: 1.1rem;
        }

        .accordion-button:not(.collapsed) {
            color: red;
            background-color: #f8f9fa;
        }

        .nav-tabs .nav-link.active {
            border-bottom: 3px solid red;
            color: red !important;
            font-weight: 700;
        }

        .btn-primary {
            background-color: red;
            border: none;
        }

        .btn-outline-dark:hover {
            background-color: #111827;
            color: #fff;
        }

        .sticky-sidebar {
            position: sticky;
            top: 100px;
            align-self: flex-start;
            height: fit-content;
            overflow-y: visible;
            margin-top: -330px;
        }

        /* ✅ Make right sidebar text bigger */
        .sticky-sidebar,
        .sticky-sidebar * {
            font-size: 1.5rem;
            /* default ~16.8px */
            line-height: 1.6;
        }

        /* Make headings stand out */
        .sticky-sidebar h5,
        .sticky-sidebar h6 {
            font-size: 1.75rem;
            font-weight: 700;
        }

        /* Make price text slightly larger */
        .sticky-sidebar h4 {
            font-size: 1.5rem;
            font-weight: 800;
        }

        /* Buttons a bit bigger */
        .sticky-sidebar .btn {
            font-size: 1.5rem;
            font-weight: 600;
            padding: 10px 14px;
        }

        /* Sidebar card — match radius so preview clips flush */
        .sticky-sidebar > .card {
            border-radius: 12px !important;
            overflow: hidden !important;
        }

        .preview-section {
            width: 100%;
            height: auto !important;
            border-radius: 12px;
            overflow: hidden;
            display: block;
        }

        .preview-section video,
        .preview-section img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            object-fit: cover;
            display: block;
        }


        @media (min-width: 992px) {
            .preview-section {
                position: relative;
                width: 100%;
                overflow: hidden;
                max-height: 600px;
                opacity: 1;
                transform: scaleY(1) translateY(0);
                transform-origin: top center;
                transition:
                    max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity    0.42s cubic-bezier(0.4, 0, 0.2, 1),
                    transform  0.55s cubic-bezier(0.4, 0, 0.2, 1),
                    margin     0.55s cubic-bezier(0.4, 0, 0.2, 1),
                    padding    0.55s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: max-height, opacity, transform;
            }

            /* Override Bootstrap .ratio ::before aspect-ratio padding so it collapses */
            .preview-section::before {
                transition: padding-top 0.55s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* when hidden — smoothly collapse */
            .preview-section.is-hidden {
                max-height: 0 !important;
                opacity: 0;
                transform: scaleY(0.88) translateY(-10px);
                margin: 0 !important;
                padding: 0 !important;
                pointer-events: none;
            }

            /* Collapse the ratio spacer too */
            .preview-section.is-hidden::before {
                padding-top: 0 !important;
            }

            /* Fade out inner media slightly ahead */
            .preview-section video,
            .preview-section img {
                transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .preview-section.is-hidden video,
            .preview-section.is-hidden img {
                opacity: 0;
            }
        }

        @media (min-width: 768px) and (max-width: 991px) {

            /* Target the preview video/image wrapper */
            .preview-section {
                width: 100% !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
                border-radius: 12px;
                overflow: hidden;
            }

            /* Remove unwanted padding/margin from parent card */
            .sticky-sidebar .card {
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                box-shadow: none !important;

            }

            /* Make video or image fill full width */
            .preview-section video,
            .preview-section img {
                width: 100% !important;
                height: auto !important;
                object-fit: cover !important;
                /* ✅ fills horizontally */
                border-radius: 12px;
                display: block;
            }

            /* Ensure tab pane area aligns flush */
            .tab-content {
                padding: 0 !important;
            }

        }




        /* ✅ Tablet & Mobile - keep it non-sticky */
        @media (max-width: 991px) {
            .sticky-sidebar {
                position: relative !important;
                top: auto !important;
                height: auto !important;
                margin-top: 20px !important;
                overflow: visible !important;
            }

            .preview-section {
                width: 100%;
                height: auto !important;
                margin-bottom: 20px;
            }
        }


        /* Fix for very small mobile screens */
        @media (max-width: 576px) {
            .preview-section {
                margin-bottom: 15px;
            }

            .preview-section video,
            .preview-section img {
                width: 100%;
                height: auto;
                object-fit: cover !important;
            }

            .sticky-sidebar {
                margin-top: 10px !important;
            }
        }

        /* Instructor card */
        .instructor-card img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            object-fit: cover;
            border: 2px solid #e5e7eb;
        }

        .instructor-stats li {
            list-style: none;
            margin-bottom: 4px;
            color: #374151;
        }

        .course-content p {
            font-size: 1.5rem;
            line-height: 1.7;
            color: #374151;
        }

        /* Mobile layout logic */
        @media (min-width: 992px) {
            .ch-hero {
                display: flex !important;
            }
        }

        @media (max-width: 991px) {
            .ch-hero {
                display: none !important;
            }

            .col-lg-4 {
                order: -1 !important;

            }

            .col-lg-8 {
                margin-top: 1.5rem;
            }
        }

        /* course requirement*/
        .section ul {
            list-style: none;
            padding-left: 0;
        }

        .section ul li {
            position: relative;
            padding-left: 12px;
            margin-bottom: 10px;
            font-size: 1.5rem;
            line-height: 1.6;
            color: #374151;

        }

        .section[style*="--show-ticks:1"] ul li::before {
            content: "✔";
            position: absolute;
            line-height: 0;
            left: 0;
            top: 50%;
            right: 10px;
            transform: translateY(50%);
            color: red;
            font-weight: bold;
        }

        /* Strong, reliable tick alignment for the --show-ticks section */
        .section[style*="--show-ticks:1"] ul {
            list-style: none;
            padding-left: 0;
            margin-left: 0;
        }

        /* Make each li a positioned box and leave room on left for the tick */
        .section[style*="--show-ticks:1"] ul li {
            position: relative !important;
            padding-left: 20px !important;
            /* space for tick */
            margin-bottom: 10px;
            line-height: 1.45;
            /* readable line-height for wrapped text */
        }

        .no-default-tick ul li::before {
            content: none !important;
        }

        .section.no-ticks ul li::before {
            content: none;
        }

/* --- Extracted Style Block --- */
#toggleBtn,
#toggleBtn:hover,
#toggleBtn:focus,
#toggleBtn:active,
#toggleBtn:focus-visible,
#toggleBtn:not(.collapsed) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* --- Extracted Style Block --- */
.secondaryText ul {
                                                        padding-left: 0.8rem;
                                                        /* space for bullets */
                                                        margin-bottom: 0.75rem;
                                                        /* spacing below list */
                                                        list-style-type: disc;
                                                        /* normal round bullets */
                                                    }

                                                    .secondaryText ul ul {
                                                        list-style-type: circle;
                                                        /* nested list style */
                                                    }

                                                    .secondaryText li {
                                                        margin-bottom: 4px;
                                                        /* small gap between items */
                                                        line-height: 1.5;
                                                        /* improve readability */
                                                    }

/* --- Extracted Style Block --- */
.wrapper {
                        background: #fff;
                        border-radius: 12px;
                        padding: 40px 30px;
                        margin: auto;
                    }

                    .tabs {
                        display: flex;
                        justify-content: center;
                        border-bottom: 2px solid #eee;
                        flex-wrap: wrap;
                        gap: 15px;
                        flex-wrap: nowrap;
                        gap: 25px;
                        overflow-x: auto;
                        white-space: nowrap;
                        scrollbar-width: none;
                    }

                    .tab {
                        cursor: pointer;
                        font-size: 15px;
                        padding: 10px 5px;
                        position: relative;
                        color: #555;
                        transition: color 0.3s;
                        flex-shrink: 0;
                    }

                    .tab.active {
                        color: #ff2d55;
                        font-weight: bold;
                    }

                    .tab.active::after {
                        content: "";
                        display: block;
                        height: 3px;
                        width: 100%;
                        background: #ff2d55;
                        position: absolute;
                        bottom: -5px;
                        left: 0;
                    }

                    .content {
                        text-align: left;
                        margin: 0 auto;
                        max-width: 700px;
                    }

                    .content ul {
                        list-style: none;
                        padding-left: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                    }

                    .content li {
                        font-size: 22px;
                        background: #f9f9f9;
                        border-left: 5px solid #ff2d55;
                        padding: 20px;
                        border-radius: 8px;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
                        transition: transform 0.2s;
                    }

                    .content li:hover {
                        transform: translateY(-3px);
                    }

                    .floating-btn {
                        position: fixed;
                        bottom: 20px;
                        right: 20px;
                        background: #ff2d55;
                        color: #fff;
                        padding: 15px;
                        border-radius: 50%;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                        cursor: pointer;
                        transition: transform 0.2s;
                        display: none;
                        z-index: 1000;
                    }

                    .floating-btn.show {
                        display: block;
                    }

                    .floating-btn:hover {
                        transform: scale(1.1);
                    }

/* ============================================================
   LEARNING JOURNEY SECTION — Premium Redesign (lj- prefix)
   ============================================================ */
.lj-section {
    background: linear-gradient(180deg, #ffffff 0%, #fffbfc 100%);
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 50px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
    margin-bottom: 40px;
    position: relative;
}

.lj-header-wrap {
    text-align: center;
    margin-bottom: 40px;
}

.lj-title {
    font-size: clamp(2rem, 3.8vw, 2.7rem);
    font-weight: 800;
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin: 0;
}

.lj-subtitle {
    font-size: 1.45rem;
    color: #475569;
    max-width: 660px;
    margin: 12px auto 0;
    line-height: 1.6;
}

/* Tabs Navigation Track */
.lj-tabs-track {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 5px;
    border-radius: 99px;
    max-width: 960px;
    margin: 0 auto 35px;
    gap: 4px;
    flex-wrap: wrap; /* Wrap naturally on tablet/desktop to prevent cut-off */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.lj-tab-item {
    list-style: none;
}

.lj-tab-btn {
    cursor: pointer;
    font-size: 1.35rem !important;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 99px;
    color: #475569;
    background: transparent;
    border: none;
    outline: none;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.lj-tab-btn:hover {
    color: #0f172a;
}

.lj-tab-btn.active {
    color: #ffffff !important;
    background: #d62736 !important;
    box-shadow: 0 4px 12px rgba(255, 45, 85, 0.25);
}

/* Tab Content & Cards Grid */
.lj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
}

.lj-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center; /* Center-align icon and text for a balanced aesthetic */
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.lj-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.03);
    border-color: #cbd5e1;
}

.lj-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1f2;
    color: #d62736;
    width: 42px;
    height: 42px;
    border-radius: 50%; /* Circle shape instead of box */
    flex-shrink: 0;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.lj-card:hover .lj-card-icon {
    background: #ff2d55;
    color: #ffffff;
    transform: scale(1.05);
}

.lj-card-text {
    font-size: 1.45rem;
    font-weight: 500; /* Cleaner and more readable font-weight */
    color: #334155;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .lj-section {
        padding: 35px 20px;
    }
    .lj-tabs-track {
        border-radius: 20px;
        padding: 6px;
        width: 100%;
        gap: 6px;
    }
    .lj-tab-btn {
        padding: 8px 16px;
        font-size: 1.3rem !important;
        width: 100%;
        text-align: center;
    }
    .lj-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ============================================================
   LEARNING PATH — Premium Redesign (lp- prefix)
   ============================================================ */

/* Section wrapper */
.lp-section {
    background: linear-gradient(160deg, #fff 0%, #fff5f6 60%, #fff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 60px 30px 70px;
    margin-bottom: 35px;
    overflow: hidden;
    position: relative;
}
.lp-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,45,85,0.07) 0%, transparent 70%);
    pointer-events: none;
}

/* Header */
.lp-header {
    text-align: center;
    margin-bottom: 64px;
}
.lp-heading {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}
.lp-heading-dark { color: #0f172a; }
.lp-heading-red  { color: #ff2d55; }
.lp-subheading {
    font-size: 1.5rem;
    color: #64748b;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Timeline container ── */
.lp-timeline {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Vertical spine */
.lp-spine {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: linear-gradient(to bottom, #ff2d55 0%, #ff6f91 50%, #ff2d55 100%);
    border-radius: 99px;
    opacity: 0.25;
    z-index: 0;
}

/* ── Each step row ── */
.lp-step {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center;
    min-height: 140px;
    position: relative;
    z-index: 1;
    padding: 18px 0;
}

/* Left step: card | node | spacer */
.lp-step--left .lp-card        { grid-column: 1; }
.lp-step--left .lp-node        { grid-column: 2; }
.lp-step--left .lp-step-spacer { grid-column: 3; }

/* Right step: spacer | node | card */
.lp-step--right .lp-step-spacer { grid-column: 1; }
.lp-step--right .lp-node        { grid-column: 2; }
.lp-step--right .lp-card        { grid-column: 3; }

/* spacer keeps the grid balanced */
.lp-step-spacer { width: 100%; }

/* ── Node (center dot) ── */
.lp-node {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}
.lp-node-ring {
    position: absolute;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,45,85,0.3);
    animation: lp-pulse 2.6s ease-in-out infinite;
}
.lp-node-dot {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff2d55 0%, #ff6f91 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 4px 18px rgba(255,45,85,0.35);
    border: 3px solid #fff;
    z-index: 2;
    position: relative;
}

/* Finish node */
.lp-node--finish .lp-node-dot,
.lp-node--star   .lp-node-dot {
    background: linear-gradient(135deg, #ff2d55 0%, #c0392b 100%);
    box-shadow: 0 4px 18px rgba(255,45,85,0.45);
}
.lp-node--finish .lp-node-ring {
    border-color: rgba(255,45,85,0.4);
}

@keyframes lp-pulse {
    0%,100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(1.3); opacity: 0;   }
}

/* ── Card ── */
.lp-card {
    background: #fff;
    border: 1.5px solid #f1e0e4;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.lp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,45,85,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.lp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(255,45,85,0.13);
    border-color: rgba(255,45,85,0.35);
}

/* Featured card (Step 4) */
.lp-card--featured {
    border-color: #ff2d55;
    background: linear-gradient(135deg, #fff 0%, #fff0f3 100%);
    box-shadow: 0 6px 30px rgba(255,45,85,0.14);
}
.lp-card--featured::after {
    background: linear-gradient(135deg, rgba(255,45,85,0.07) 0%, transparent 60%);
}

/* Finish card (Step 6) */
.lp-card--finish {
    border-color: #ff2d55;
    background: linear-gradient(135deg, #fff 0%, #fff0f3 100%);
    box-shadow: 0 6px 30px rgba(255,45,85,0.14);
}

/* ── Card internals ── */
.lp-card-inner { position: relative; z-index: 1; }

.lp-step-badge {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,45,85,0.08);
    color: #ff2d55;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 8px;
    padding: 3px 10px;
    margin-bottom: 10px;
}
.lp-step-badge--featured {
    background: rgba(255,45,85,0.14);
    color: #ff2d55;
}
.lp-step-badge--finish {
    background: rgba(255,45,85,0.10);
    color: #ff2d55;
}

.lp-card-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff2d55 0%, #ff6f91 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(255,45,85,0.25);
    transition: transform 0.3s ease;
}
.lp-card:hover .lp-card-icon { transform: scale(1.08) rotate(-4deg); }

.lp-card-icon--alt {
    background: linear-gradient(135deg, #ff2d55 0%, #c0392b 100%);
    box-shadow: 0 4px 12px rgba(255,45,85,0.28);
}
.lp-card-icon--featured {
    background: linear-gradient(135deg, #ff2d55 0%, #c0392b 100%);
    box-shadow: 0 4px 14px rgba(255,45,85,0.3);
    width: 48px; height: 48px;
    font-size: 1.7rem;
}
.lp-card-icon--finish {
    background: linear-gradient(135deg, #ff2d55 0%, #c0392b 100%);
    box-shadow: 0 4px 14px rgba(255,45,85,0.32);
}

.lp-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    line-height: 1.35;
}
.lp-card-desc {
    font-size: 1.35rem;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 0;
}

/* ── Inline pill badges ── */
.lp-shortcut-badge,
.lp-free-badge,
.lp-flagship-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    margin-top: 12px;
}
.lp-shortcut-badge {
    background: rgba(255,45,85,0.08);
    color: #ff2d55;
}
.lp-free-badge {
    background: rgba(255,45,85,0.08);
    color: #ff2d55;
}
.lp-flagship-badge {
    background: linear-gradient(135deg, #ff2d55, #ff6f91);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255,45,85,0.25);
}

/* ── Scroll-reveal animation ── */
.lp-animate {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.lp-step--left.lp-animate  { transform: translateX(-40px); }
.lp-step--right.lp-animate { transform: translateX(40px); }
.lp-animate.lp-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── Responsive: collapse to vertical stack on mobile ── */
@media (max-width: 767px) {
    .lp-section {
        padding: 40px 16px 50px;
        border-radius: 14px;
    }
    .lp-spine { display: none; }
    .lp-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
    }
    /* always show: node → card, regardless of left/right */
    .lp-step--left  .lp-card,
    .lp-step--right .lp-card  { order: 2; width: 100%; }
    .lp-step--left  .lp-node,
    .lp-step--right .lp-node  { order: 1; }
    .lp-step-spacer             { display: none; }
    .lp-card { max-width: 100%; padding: 18px 18px; }
    .lp-card-title { font-size: 1.4rem; }
    .lp-card-desc  { font-size: 1.25rem; }
    /* reset slide animations on mobile */
    .lp-step--left.lp-animate,
    .lp-step--right.lp-animate { transform: translateY(30px); }
}

@media (min-width: 768px) and (max-width: 991px) {
    .lp-step {
        grid-template-columns: 1fr 64px 1fr;
    }
    .lp-card { padding: 18px 18px; }
    .lp-card-title { font-size: 1.4rem; }
}

/* --- Extracted Style Block --- */
.educator-card+.educator-card {
                        margin-top: 30px !important;
                        /* gap between cards */
                    }

                    /* optional: ensure individual card has internal padding and stable layout */
                    .educator-card {
                        padding-bottom: 18px;
                        padding-top: 18px;
                    }

.toggle-bio-btn {
    background-color: transparent !important;
    color: #d61b1b !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.toggle-bio-btn:hover,
.toggle-bio-btn:focus,
.toggle-bio-btn:active,
.toggle-bio-btn:focus-visible {
    background-color: transparent !important;
    color: #b01212 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    opacity: 0.9;
}

                    /* responsive tweak for small screens */
                    @media (max-width: 576px) {
                        .educator-card+.educator-card {
                            margin-top: 20px;
                        }
                    }

/* --- Extracted Style Block --- */
/* Simple star rendering for reviews */
                            .review-stars {
                                display: flex;
                                gap: 6px;
                                align-items: center;
                            }

                            .review-stars .star {
                                font-size: 18px;
                                line-height: 1;
                            }

                            .review-stars .filled {
                                color: #ffcc33;
                            }

                            .review-stars .empty {
                                color: #e5e7eb;
                            }

                            .review-item {
                                margin-bottom: 18px;
                            }

/* --- Extracted Style Block --- */
/* Review card / form */
                    .leave-review-card {
                        background: #fff;
                        border: 1px solid #e6e7ea;
                        border-radius: 10px;
                        padding: 22px;
                        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
                    }

                    .leave-review-card h3 {
                        margin-bottom: 14px;
                        font-weight: 700;
                    }

                    /* Stars */
                    .leave-review-card .stars {
                        display: flex;
                        justify-content: center;
                        gap: 12px;
                        margin-bottom: 10px;
                    }

                    .leave-review-card .star {
                        cursor: pointer;
                        font-size: 28px;
                        color: transparent;
                        -webkit-text-stroke: 1.6px #ffcc33;
                        transition: transform .12s;
                    }

                    .leave-review-card .star:hover {
                        transform: translateY(-4px);
                    }

                    .leave-review-card .star.filled {
                        color: #ffcc33;
                        -webkit-text-stroke: 0;
                    }

                    /* Inputs */
                    .rv-input {
                        background: #f6f7f8;
                        border: 0;
                        border-radius: 8px;
                        padding: 14px 14px;
                        box-shadow: none;
                    }

                    .rv-input:focus {
                        outline: none;
                        box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.06);
                    }

                    /* email wrapper with small purple chip */
                    .input-chip {
                        position: relative;
                    }

                    .input-chip .chip {
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        background: #5b21b6;
                        color: #fff;
                        width: 28px;
                        height: 28px;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: 700;
                        font-size: 24px;
                    }

                    /* textarea bigger */
                    .rv-textarea {
                        min-height: 120px;
                        resize: vertical;
                        padding: 14px;
                        border-radius: 8px;
                        background: #f6f7f8;
                        border: 0;
                    }

                    /* submit button */
                    .rv-submit {
                        background: #d63031;
                        border: none;
                        color: #fff;
                        font-weight: 700;
                        padding: 14px 18px;
                        border-radius: 8px;
                        width: 100%;
                        box-shadow: 0 6px 18px rgba(214, 48, 49, 0.12);
                        font-size: 1.5rem;
                    }

                    .rv-submit:active {
                        transform: translateY(1px);
                    }

                    @media (max-width:575px) {
                        .leave-review-card .stars {
                            gap: 10px;
                        }

                        .leave-review-card .star {
                            font-size: 24px;
                        }
                    }

/* --- Extracted Style Block --- */
.price-block {
                                            display: flex;
                                            align-items: center;
                                            justify-content: space-between;
                                            gap: 12px;
                                            width: 100%;
                                        }

                                        .price-current {
                                            display: flex;
                                            align-items: baseline;
                                            gap: 6px;
                                        }

                                        .price-current .currency {
                                            font-size: 2.6rem;
                                            color: #d32f2f;
                                            font-weight: 700;
                                        }

                                        .price-current .amount {
                                            font-size: 2.6rem;
                                            font-weight: 700;
                                            color: #d32f2f;
                                            letter-spacing: -0.02em;
                                        }

                                        .price-original {
                                            color: #6b7280;
                                            text-decoration: line-through;
                                            font-size: 1.9rem;
                                        }

                                        .price-badge {
                                            background: #fff5f5;
                                            color: #b91c1c;
                                            border-radius: 8px;
                                            padding: 6px 10px;
                                            font-weight: 700;
                                            font-size: 1.6rem;
                                            margin-left: 12px;
                                            white-space: nowrap;
                                        }

                                        @media (max-width: 576px) {
                                            .price-current .amount {
                                                font-size: 1.9rem;
                                            }

                                            .price-current .currency {
                                                font-size: 1.2rem;
                                            }
                                        }

/* --- Extracted Style Block --- */
.pop-float {
                                        display: inline-block;
                                        padding: 10px 12px;
                                        display: inline-flex;
                                        border-radius: 12px;
                                        background: rgba(255, 45, 85, 0.08);
                                        transform-origin: center;
                                        animation: popFloat 2.6s ease-in-out infinite;
                                        will-change: transform, box-shadow;
                                        cursor: default;
                                        -webkit-font-smoothing: antialiased;
                                    }

                                    .pop-float:hover {
                                        transform: translateY(-6px) scale(1.06);
                                        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
                                        transition: transform 200ms ease, box-shadow 200ms ease;
                                    }

                                    @media (prefers-reduced-motion: reduce) {
                                        .pop-float {
                                            animation: none !important;
                                            transition: none !important;
                                        }
                                    }

                                    .btn-outline-custom-9842 {
                                        border: 2px solid #dc3545;
                                        background: transparent;
                                        color: #dc3545;
                                        transition: 0.3s;
                                        padding: 4px 12px;
                                        min-height: 40px;
                                        /* SAME height */
                                        padding: 10px 12px;
                                        /* SAME padding */
                                        font-size: 18px;
                                        /* SAME text size */
                                    }

                                    .btn-outline-custom-9842:hover {
                                        background: #dc3545;
                                        color: white;
                                    }

                                    .top-action-row {
                                        display: flex;
                                        align-items: center;
                                        justify-content: flex-start;
                                        /* left - right balance */
                                        gap: 17px;
                                        width: 100%;
                                    }

                                    .btn-wrap {
                                        display: flex;
                                        gap: 10px;
                                    }

                                    h3.top-action-row {
                                        margin: 0;
                                        padding: 0;
                                        margin: 10px 0;
                                    }

                                    .small-btn {
                                        padding: 4px 10px;
                                        font-size: 16px;
                                        line-height: 1;
                                        white-space: nowrap;
                                    }

                                    .have-box {
                                        padding: 8px 14px;
                                        border-radius: 10px;
                                        display: flex;
                                        align-items: center;
                                        gap: 18px;

                                    }

                                    /* Tablet (md) */
                                    @media (max-width: 991px) {
                                        .btn-outline-custom-9842 {
                                            font-size: 14px !important;
                                            /* thoda chhota */
                                        }
                                    }

                                    /* Mobile */
                                    @media (max-width: 600px) {
                                        .btn-outline-custom-9842 {
                                            font-size: 13px !important;
                                            /* perfect balanced size */
                                        }
                                    }

/* --- Extracted Style Block --- */
:root {
            --color-dark: #ffeaea;
            --color-red: #EF4444;
        }

        .cta-section {
            background-color: var(--color-dark);
            color: #dc3545;
            padding: 5rem 2rem;
            width: 100%;
            /* margin-top: 20px; */
        }

        .cta-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .cta-text {
            flex: 1 1 500px;
        }

        .cta-text h2 {
            font-size: clamp(1.75rem, 4vw, 2.7rem);
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .cta-text p {
            font-size: 1.3rem;
            color: black;
            margin: 0;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            flex-shrink: 0;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .btn {
            padding: 0.8rem 2rem;
            border-radius: 0.8rem;
            font-size: 1.4rem;
            font-weight: 600;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            transition: all 0.25s ease;
            border: 0.2rem solid transparent;
        }

        .btn:hover {
            transform: translateY(-0.25rem);
        }

        .btn-primary {
            background-color: var(--color-red);
            color: #F7FAFC;
        }

        .btn-primary:hover {
            background-color: #dc2626;
        }

        .btn-outline {
            background-color: transparent;
            color: var(--color-red);
            border: 0.2rem solid var(--color-red);
        }

        .btn-outline:hover {
            background-color: var(--color-red);
            color: white;
        }

        @media (max-width: 768px) {
            .cta-section {
                padding: 2rem 1.5rem !important;
                /* reduced vertical padding */
            }

            .cta-container {
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 1rem !important;
                /* tighten spacing between text & buttons */
                padding: 0 !important;
                /* remove any inner padding */
            }

            .cta-text {
                flex: unset !important;
                margin-bottom: 0.5rem !important;
            }

            .cta-text h2 {
                font-size: 1.7rem !important;
                margin-bottom: 0.3rem !important;
            }

            .cta-text p {
                font-size: 1rem !important;
                margin-bottom: 0.8rem !important;
            }

            .cta-buttons {
                width: 100%;
                justify-content: flex-start !important;
            }

            .btn {
                padding: 0.7rem 1.5rem !important;
                font-size: 1.1rem !important;
            }
        }

/* --- Extracted Style Block --- */
.dashboard_popup_modal .modal-content {
            border-radius: 1.5rem;
            border: none;
            background-color: #ffffff;
            padding: 1.5rem 1rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Crect fill='%23ff9d00' width='1600' height='800'/%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05'%3E%3Ccircle fill='%23ff9d00' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fb8d17' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f47d24' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ed6e2d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e35f34' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23d85239' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23cc453e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23be3941' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23b02f43' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a02644' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23901e44' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23801843' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236f1341' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%235e0f3d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%234e0c38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%233e0933' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232e062c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dashboard_popup_modal .modal-body {
            padding: 2.5rem 1.5rem;
        }

        .dashboard_popup_modal .modal-body .fa-check {
            color: #28a745;
        }

        .dashboard_popup_modal .modal-body .rounded-circle {
            background-color: rgba(40, 167, 69, 0.1);
        }

        .dashboard_popup_modal h4 {
            font-weight: 700;
            color: #333;
        }

        .dashboard_popup_modal p {
            color: #6c757d;
        }

        .dashboard_popup_modal .course-name {
            color: #007bff;
            font-weight: 600;
        }

        .dashboard_popup_modal .course-mode {
            background: #0dcaf0;
            color: #fff;
            padding: 0.4rem 1rem;
            border-radius: 2rem;
        }

        .dashboard_popup_modal .course-amount {
            color: #212529;
            margin-top: 0.5rem;
        }

        .dashboard_popup_modal .btn-success {
            background: linear-gradient(135deg, #28a745, #218838);
            border: none;
            padding: 0.6rem 2rem;
            border-radius: 30px;
            transition: all 0.3s ease;
        }

        .dashboard_popup_modal .btn-success:hover {
            background: linear-gradient(135deg, #218838, #1e7e34);
            box-shadow: 0 4px 12px rgba(33, 136, 56, 0.3);
        }

        /* Responsive Enhancements */
        @media (max-width: 576px) {
            .dashboard_popup_modal .modal-body {
                padding: 2rem 1rem;
            }
        }

/* --- Extracted Style Block --- */
.preview-modal .modal-content {
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            background: #ffffff;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
            overflow: hidden;
        }

        .preview-modal .modal-header {
            color: #000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding: 16px 20px;
            align-items: center;
        }

        .preview-modal .modal-title {
            font-family: 'Inter', sans-serif;
            font-weight: 800;
            font-size: 1.25rem;
            color: #fff;
            margin: 0;
        }

        .preview-modal .modal-subtitle {
            display: block;
            font-size: 0.95rem;
            color: #ffb4b4;
            margin-top: 3px;
            font-weight: 600;
        }

        .preview-modal .btn-close-custom {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            line-height: 1;
            cursor: pointer;
        }

        .preview-modal .modal-body {
            background: #fafafa;
            padding: 14px;
        }

        .preview-modal .ratio-16x9 {
            border-radius: 10px;
            overflow: hidden;
            background: #000;
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
        }

        .preview-modal iframe,
        .preview-modal video {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        @media (max-width: 575px) {
            .preview-modal .modal-header {
                padding: 12px;
            }

            .preview-modal .modal-body {
                padding: 10px;
            }
        }

/* Custom premium styles for "What You'll Get" box */
.premium-what-get-card {
    background: linear-gradient(145deg, #ffffff 0%, #fffcfc 50%, #fff6f6 100%);
    border: 1px solid rgba(255, 45, 85, 0.12);
    border-left: 4px solid #ff2d55;
    box-shadow: 0 10px 25px rgba(255, 45, 85, 0.03) !important;
    border-radius: 12px;
    padding: 24px 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-what-get-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(255, 45, 85, 0.07) !important;
}

.premium-what-get-card h6 {
    color: #ff2d55 !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 1.5rem !important;
}

.premium-what-get-card li {
    transition: transform 0.2s ease;
    padding: 4px 0;
}

.premium-what-get-card li:hover {
    transform: translateX(5px);
}

.premium-what-get-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 45, 85, 0.08);
    color: #ff2d55;
    font-size: 1.35rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-what-get-card li:hover .premium-what-get-icon-wrapper {
    background-color: #ff2d55;
    color: #ffffff;
    transform: scale(1.1);
}

/* Ensure CSS rules take priority over the global sticky-sidebar * selector */
.sticky-sidebar .premium-what-get-text {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
}

/* Prevent sticky sidebar from overlapping bottom sections */
.new_section,
.faq-section {
    position: relative;
    z-index: 10;
    background-color: #f9fafb;
}

footer,
.footer {
    position: relative;
    z-index: 10;
}

/* What You'll Learn Redesign (Rev 2) */
.wyl-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wyl-section-title i {
    font-size: clamp(2.0rem, 4vw, 2.7rem);
    color: #ff2d55;
    animation: wylPulseIcon 3s infinite ease-in-out;
}

@keyframes wylPulseIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.wyl-ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.wyl-li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 2px 0;
    transition: transform 0.2s ease;
}

.wyl-li:hover {
    transform: translateX(4px);
}

.wyl-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: rgba(255, 45, 85, 0.08);
    color: #ff2d55;
    border-radius: 50%;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wyl-li:hover .wyl-bullet {
    background-color: #ff2d55;
    color: #ffffff;
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 4px 10px rgba(255, 45, 85, 0.3);
}

.wyl-text {
    font-size: 1.45rem;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.wyl-li:hover .wyl-text {
    color: #0f172a;
}

/* Course Description Redesign */
.cd-preview-wrapper {
    position: relative;
    margin-bottom: 8px;
}

.cd-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 1;
    z-index: 2;
}

.cd-toggle-btn {
    background-color: transparent !important;
    color: #ff2d55 !important;
    border: 1.5px solid #ff2d55 !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 1.4rem !important;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px !important;
}

.cd-toggle-btn:hover {
    background-color: #ff2d55 !important;
    color: #ffffff !important;
    border-color: #ff2d55 !important;
    box-shadow: 0 4px 12px rgba(255, 45, 85, 0.2) !important;
}

.cd-toggle-btn i {
    transition: transform 0.3s ease;
    font-size: 1.2rem;
}

/* ═══════════════════════════════════════════
   CURRICULUM – SECTION HEADER (PREMIUM)
   ═══════════════════════════════════════════ */
.curr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #fff8f8 50%, #ffffff 100%);
    border: 1px solid #fecaca;
    border-radius: 18px;
    margin-bottom: 1.6rem;
    gap: 1rem;
    box-shadow: 0 2px 12px rgba(214, 39, 54, .06);
    position: relative;
    overflow: hidden;
}

.curr-header::after {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(214, 39, 54, .07) 0%, transparent 70%);
    pointer-events: none;
}

.curr-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.curr-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #d62736, #b8222e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(214, 39, 54, .28);
    flex-shrink: 0;
}

.curr-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
}

.curr-header-sub {
    font-size: 12px;
    color: #e57373;
    margin-top: 2px;
    font-weight: 500;
}

/* SVG ring progress */
.curr-ring-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.curr-ring-svg {
    display: block;
}

.curr-ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #d62736;
}

/* ═══════════════════════════════════════════
   HORIZONTAL STEP TRACK (WITH SCROLL BUTTONS)
   ═══════════════════════════════════════════ */
.path-track-container {
    position: relative;
    width: 100%;
}

.track-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #fde8e8;
    color: #d62736;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(214, 39, 54, 0.08);
    opacity: 0;
    pointer-events: none;
}

.path-track-container:hover .track-scroll-btn:not(.disabled) {
    opacity: 1;
    pointer-events: auto;
}

.track-scroll-btn.disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

.track-scroll-btn:hover {
    background: #d62736;
    color: #ffffff;
    border-color: #d62736;
    box-shadow: 0 6px 16px rgba(214, 39, 54, 0.25);
}

.track-scroll-btn.scroll-left {
    left: -19px;
}

.track-scroll-btn.scroll-right {
    right: -19px;
}

.path-track-wrap {
    background: #ffffff;
    border: 1.5px solid #fde8e8;
    border-radius: 18px;
    padding: 1.25rem 1rem 1rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 4px 20px rgba(214, 39, 54, 0.04);
}

.path-track {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
    padding: 0.5rem 0.25rem;
    scroll-behavior: smooth;
}

.path-track::-webkit-scrollbar {
    display: none;
}

.path-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 86px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.path-node:hover {
    transform: translateY(-2px);
}

.path-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2.5px solid #fde8e8;
    background: #ffffff;
    color: #d62736;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 3px 10px rgba(214, 39, 54, 0.05);
}

.path-circle.active {
    background: #d62736;
    color: #ffffff;
    border-color: #d62736;
    box-shadow: 0 6px 20px rgba(214, 39, 54, 0.35);
}

.path-circle.done {
    background: #fee2e2;
    color: #d62736;
    border-color: #fca5a5;
}

.path-label-sm {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    margin-top: 8px;
    text-align: center;
    max-width: 78px;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: break-word;
    transition: color 0.2s ease;
}

.path-node:hover .path-label-sm {
    color: #d62736;
}

.path-circle.active ~ .path-label-sm {
    color: #d62736;
    font-weight: 800;
}

.path-line {
    flex: 1;
    height: 3px;
    background: #fde8e8;
    min-width: 16px;
    margin-top: 21px;
    border-radius: 3px;
    transition: background 0.3s ease;
}

.path-line.done {
    background: #fca5a5;
}

/* progress bar under the track */
.prog-bar-wrap {
    height: 4px;
    background: #fde8e8;
    border-radius: 4px;
    margin: 0.75rem 0.5rem 0;
    overflow: hidden;
}

.prog-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #d62736 0%, #fc8181 100%);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(214, 39, 54, 0.3);
}

/* ═══════════════════════════════════════════
   MODULE ACCORDION CARDS
   ═══════════════════════════════════════════ */
.mod-container {
    margin-top: 1.5rem;
}

.mod-card {
    border: 1.5px solid #fde8e8;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 0.95rem;
    background: #ffffff;
    transition: all 0.22s ease;
    position: relative;
}

.mod-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #d62736 0%, #fc8181 100%);
    border-radius: 16px 0 0 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mod-card:hover {
    border-color: #fca5a5;
    box-shadow: 0 6px 18px rgba(214, 39, 54, 0.06);
}

.mod-card.active {
    border-color: #d62736;
    box-shadow: 0 8px 30px rgba(214, 39, 54, 0.13);
}

.mod-card.active::before {
    opacity: 1;
}

.mod-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem 1.75rem;
    background: #fafafa;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease;
}

.mod-head:hover {
    background: #fff5f5;
}

.mod-card.active .mod-head {
    background: linear-gradient(135deg, #fff5f5 0%, #fff8f8 100%);
}

.mod-step-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d62736 0%, #b8222e 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(214, 39, 54, 0.25);
}

.mod-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(214, 39, 54, 0.08);
    color: #d62736;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border: 1px solid rgba(214, 39, 54, 0.1);
}

.mod-card.active .mod-icon {
    background: rgba(214, 39, 54, 0.13);
    transform: scale(1.06);
    border-color: rgba(214, 39, 54, 0.2);
}

.mod-info {
    flex: 1;
    min-width: 0;
}

.mod-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    word-break: break-word;
    transition: color 0.2s ease;
}

.mod-card.active .mod-title {
    color: #d62736;
}

.mod-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.mod-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

.mod-chip i {
    font-size: 10px;
    color: #d62736;
}

.mod-chev-wrap {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.22s ease;
    border: 1px solid #e5e7eb;
}

.mod-chev-wrap.active {
    background: #d62736;
    border-color: #d62736;
}

.chev {
    font-size: 11px;
    color: #9ca3af;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.mod-chev-wrap.active .chev {
    transform: rotate(180deg);
    color: #ffffff;
}

/* ═══════════════════════════════════════════
   LECTURE LIST (smooth max-height animation)
   ═══════════════════════════════════════════ */
.lec-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.lec-list-inner {
    padding: 0.25rem 1.75rem 1rem;
    border-top: 1.5px solid #fde8e8;
}

.lec-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.6rem 0.5rem;
    border-radius: 10px;
    transition: background 0.15s ease;
    margin: 0.1rem 0;
}

.lec-row:hover {
    background: #fff9f9;
}

.lec-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    padding-top: 2px;
}

.lec-play {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(214, 39, 54, 0.25);
    background: rgba(214, 39, 54, 0.06);
    color: #d62736;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.lec-row:hover .lec-play {
    transform: scale(1.1);
    background: rgba(214, 39, 54, 0.12);
    border-color: #d62736;
}

.lec-vline {
    width: 1.5px;
    flex: 1;
    min-height: 12px;
    margin-top: 4px;
    border-radius: 2px;
    background: rgba(214, 39, 54, 0.18);
}

.lec-body-wrap {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.lec-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    padding: 1px 8px;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
    color: #d62736;
    background: rgba(214, 39, 54, 0.06);
    border: 1px solid rgba(214, 39, 54, 0.12);
}

.lec-body {
    line-height: 1.5;
}

.lec-body p {
    margin-bottom: 0.25rem;
    font-size: 13px;
    font-weight: 400;
    color: #1f2937;
    line-height: 1.45;
}

.lec-body ul,
.lec-body ol {
    margin: 0 0 0.25rem;
    padding-left: 1.25rem;
}

.lec-body li {
    margin-bottom: 0.25rem;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.lec-body strong {
    font-weight: 700;
}

.lec-body span {
    font-family: inherit;
}

/* Lecture preview button */
.lec-preview-btn {
    font-size: 11px;
    font-weight: 700;
    color: #ff2d55;
    background: rgba(214, 39, 54, 0.08);
    border: 1px solid rgba(214, 39, 54, 0.15);
    padding: 6px 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.lec-preview-btn:hover {
    background: #ff2d55;
    color: #ffffff;
    border-color: #ff2d55;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(214, 39, 54, 0.2);
}

/* ═══════════════════════════════════════════
   RESPONSIVE OVERRIDES (CURRICULUM)
   ═══════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .path-track-wrap {
        padding: 0.75rem 0.5rem 2.2rem;
    }

    .path-node {
        min-width: 76px;
    }

    .path-circle {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .path-line {
        margin-top: 19px;
    }


    .track-scroll-btn {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .curr-header {
        flex-wrap: wrap;
        padding: 1rem;
        gap: 0.75rem;
    }

    .curr-header-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .mod-head {
        padding: 0.85rem 1rem;
        gap: 10px;
    }

    .mod-title {
        font-size: 13px;
    }

    .lec-list-inner {
        padding: 0.2rem 0.9rem 0.75rem;
    }

    .path-node {
        min-width: 68px;
    }

    .path-circle {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .path-line {
        margin-top: 17px;
    }

}

/* Course Requirements Section */
.cr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    width: 100%;
}

.cr-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 4px solid #ff2d55;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.cr-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 45, 85, 0.02) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 45, 85, 0.06);
    border-color: rgba(255, 45, 85, 0.15);
    border-left-color: #ff2d55;
}

.cr-card:hover::before {
    opacity: 1;
}

.cr-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cr-card-icon {
    font-size: 1.1rem;
    color: #ff2d55;
    background: rgba(255, 45, 85, 0.08);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cr-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1d20;
    margin: 0;
    letter-spacing: -0.01em;
}

.cr-card-desc {
    font-size: 1.35rem;
    color: #5c5e63;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   EDUCATOR PROFILE CARD  (epc-*)
   recorded-course.css — viLab
   ═══════════════════════════════════════════════════════════════ */

/* ── Card wrapper ── */
.epc-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 35px -10px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(214, 39, 54, 0.02);
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(214, 39, 54, 0.06);
    position: relative;
}

.epc-card:hover {
    box-shadow: 0 20px 50px -15px rgba(214, 39, 54, 0.16), 0 4px 15px rgba(214, 39, 54, 0.04);
    transform: translateY(-5px);
    border-color: rgba(214, 39, 54, 0.12);
}

/* ── Body ── */
.epc-body {
    padding: 30px;
}

/* ── Avatar ── */
.epc-avatar-wrap {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.epc-avatar {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    border: 6px solid #ffffff;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(214, 39, 54, 0.15);
    background: #f1f5f9;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.epc-card:hover .epc-avatar {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 14px 32px rgba(214, 39, 54, 0.22);
}

.epc-avatar-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(214, 39, 54, 0.25);
    animation: epcSpin 24s linear infinite;
    z-index: 1;
}

.epc-avatar-pulse {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px solid rgba(214, 39, 54, 0.08);
    animation: epcPulse 3.5s ease-in-out infinite;
    z-index: 0;
}

@keyframes epcSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes epcPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.1;
    }
}

/* Online Indicator */
.epc-online-indicator {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    background: #10b981;
    border: 3px solid #ffffff;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* ── Left column helper ── */
.epc-left {
    text-align: center;
}

/* ── Right column ── */
.epc-right-col {
    padding-top: 5px;
}

/* ── Header block ── */
.epc-header-block {
    margin-bottom: 20px;
}

/* ── Badges ── */
.epc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #d62736 0%, #e53e3e 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(214, 39, 54, 0.25);
    white-space: nowrap;
}

.epc-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}

/* ── Name ── */
.epc-name {
    font-size: 2.1rem;
    font-weight: 850;
    color: #0f172a;
    margin: 12px 0 8px;
    line-height: 1.15;
    letter-spacing: -0.4px;
}

/* ── Quick intro / tagline ── */
.epc-intro {
    font-size: 1.25rem;
    color: #4b5563;
    margin: 0;
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.epc-quote-icon {
    color: #d62736;
    opacity: 0.45;
    font-size: 0.95rem;
    margin-top: 4px;
    flex-shrink: 0;
}

/* ── Stats ── */
.epc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.epc-stat {
    border-radius: 16px;
    padding: 16px 12px 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: default;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
}

/* per-stat color themes */
.epc-stat--rating {
    background: linear-gradient(145deg, #fffbeb 0%, #fffdf5 100%);
    border: 1px solid rgba(245, 158, 11, 0.18);
}

.epc-stat--reviews {
    background: linear-gradient(145deg, #fff1f2 0%, #fff5f6 100%);
    border: 1px solid rgba(214, 39, 54, 0.14);
}

.epc-stat--students {
    background: linear-gradient(145deg, #f0f9ff 0%, #f4faff 100%);
    border: 1px solid rgba(14, 165, 233, 0.18);
}

.epc-stat--courses {
    background: linear-gradient(145deg, #f0fdf4 0%, #f5fdf7 100%);
    border: 1px solid rgba(34, 197, 94, 0.18);
}

.epc-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.08);
}

.epc-stat--rating:hover {
    border-color: rgba(245, 158, 11, 0.45);
}

.epc-stat--reviews:hover {
    border-color: rgba(214, 39, 54, 0.35);
}

.epc-stat--students:hover {
    border-color: rgba(14, 165, 233, 0.45);
}

.epc-stat--courses:hover {
    border-color: rgba(34, 197, 94, 0.45);
}

.epc-stat-icon {
    font-size: 1.45rem;
    margin-bottom: 6px;
    line-height: 1;
}

.epc-stat--rating .epc-stat-icon {
    color: #d97706;
}

.epc-stat--reviews .epc-stat-icon {
    color: #dc2626;
}

.epc-stat--students .epc-stat-icon {
    color: #0284c7;
}

.epc-stat--courses .epc-stat-icon {
    color: #16a34a;
}

.epc-stat-value {
    font-size: 1.65rem;
    font-weight: 850;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.2px;
}

.epc-stat-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

/* ── Divider with label ── */
.epc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
}

.epc-divider::before,
.epc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1);
}

.epc-divider::after {
    background: linear-gradient(90deg, #cbd5e1, transparent);
}

.epc-divider-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #d62736;
    white-space: nowrap;
    flex-shrink: 0;
    background: #fff5f5;
    padding: 6px 18px;
    border-radius: 50px;
    border: 1px solid rgba(214, 39, 54, 0.18);
}

/* ── Bio wrapper ── */
.epc-bio-wrapper {
    position: relative;
    background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 22px 24px;
    overflow: hidden;
}

/* Large decorative opening quote */
.epc-bio-quote {
    position: absolute;
    top: -10px;
    right: 16px;
    font-size: 7.5rem;
    line-height: 1;
    color: rgba(214, 39, 54, 0.05);
    font-family: Georgia, serif;
    font-weight: 900;
    pointer-events: none;
    user-select: none;
    letter-spacing: -4px;
}

/* ── Bio content ── */
.epc-bio-content {
    font-size: 1.45rem;
    color: #334155;
    line-height: 1.95;
    position: relative;
    z-index: 1;
}

.epc-bio-content p {
    margin-bottom: 0.85rem;
}

.epc-bio-content p:last-child {
    margin-bottom: 0;
}

.epc-bio-content strong {
    color: inherit;
    font-weight: 800;
}

.epc-bio-content ul,
.epc-bio-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.85rem;
}

.epc-bio-content li {
    margin-bottom: 0.4rem;
}

/* ── Social icons ── */
.epc-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.epc-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.epc-social-link:hover {
    transform: translateY(-4px) scale(1.1) rotate(5deg);
}

.epc-fb:hover {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
    box-shadow: 0 6px 18px rgba(24, 119, 242, 0.3);
}

.epc-tw:hover {
    background: #1da1f2;
    color: #fff;
    border-color: #1da1f2;
    box-shadow: 0 6px 18px rgba(29, 161, 242, 0.3);
}

.epc-li:hover {
    background: #0a66c2;
    color: #fff;
    border-color: #0a66c2;
    box-shadow: 0 6px 18px rgba(10, 102, 194, 0.3);
}

.epc-ig:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(220, 39, 67, 0.3);
}

/* ── Responsive media queries for Educator card ── */
@media (max-width: 991.98px) {
    .epc-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .epc-left {
        text-align: left;
    }

    .epc-socials {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .epc-body {
        padding: 20px;
    }

    .epc-avatar {
        width: 100px;
        height: 100px;
    }

    .epc-name {
        font-size: 1.35rem;
    }

    .epc-stats {
        gap: 10px;
    }

    .epc-stat {
        padding: 12px 8px 10px;
    }
}

@media (max-width: 575.98px) {
    .epc-header-block,
    .epc-header-block * {
        text-align: center;
        justify-content: center;
    }

    .epc-header-block .d-flex {
        justify-content: center;
    }
}

/* ── Leave a Review Form (Floating Labels) ── */
.review-box {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    /* border: 1px solid rgba(214, 39, 54, 0.06); */
    border-radius: 24px;
    padding: 40px;
    /* box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.01),
        0 20px 40px rgba(214, 39, 54, 0.03),
        inset 0 1px 0 #ffffff; */
    position: relative;
    overflow: hidden;
}

.review-box::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(214, 39, 54, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.review-stars-wrapper {
    background: linear-gradient(135deg, #fff5f5 0%, rgba(214, 39, 54, 0.04) 100%);
    padding: 16px 28px;
    border-radius: 18px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(214, 39, 54, 0.08);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.review-stars-label {
    font-size: 11px;
    font-weight: 700;
    color: #ff2d55;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.review-stars-wrapper .star {
    cursor: pointer;
    display: inline-block;
    font-size: 28px !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0 4px;
}

.review-stars-wrapper .star:hover {
    transform: scale(1.25);
}

.review-stars-wrapper .star i.fa {
    color: #ffb800 !important;
    text-shadow: 0 0 10px rgba(255, 184, 0, 0.4);
    filter: drop-shadow(0 2px 4px rgba(255, 184, 0, 0.2));
}

.review-box .form-group-custom {
    transition: transform 0.25s ease;
}

.review-box .form-group-custom:focus-within {
    transform: translateY(-2px);
}

/* Floating Label form group custom overrides for Review Form */
.contactForm .review-submit-btn {
    width: auto;
    min-width: 240px;
    margin: 0 auto;
    background: linear-gradient(135deg, #ff2d55 0%, #b8222e 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 16px 30px !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(214, 39, 54, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.contactForm .review-submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: 0.75s;
    opacity: 0;
}

.contactForm .review-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(214, 39, 54, 0.45);
}

.contactForm .review-submit-btn:hover::after {
    left: 125%;
    opacity: 1;
}

.contactForm .review-submit-btn svg {
    transition: transform 0.3s ease;
}

.contactForm .review-submit-btn:hover svg {
    transform: translate(3px, -3px) scale(1.1);
}

.review-stars-wrapper .stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
}

/* ── Reviews Section ── */
.bg-secondary-soft {
    background-color: rgba(214, 39, 54, 0.08);
    color: #ff2d55 !important;
}

.reviews-section-outer {
    padding-top: 36px;
    border-top: 1.5px dashed rgba(214, 39, 54, 0.15);
    margin-top: 3rem;
}

.reviews-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 2-column grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

/* Individual review card — always premium */
.review-card {
    background: linear-gradient(160deg, #ffffff 60%, #fff8f8 100%);
    border: 1.5px solid rgba(214, 39, 54, 0.14);
    border-radius: 20px;
    padding: 24px 22px 22px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.05),
        0 10px 28px rgba(214, 39, 54, 0.07);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

/* Red top accent bar — always visible */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff2d55 0%, rgba(214, 39, 54, 0.25) 100%);
    border-radius: 20px 20px 0 0;
}

/* Decorative quote mark — always visible */
.review-card::after {
    content: '\201C';
    position: absolute;
    bottom: -14px;
    right: 14px;
    font-size: 110px;
    line-height: 1;
    color: rgba(214, 39, 54, 0.07);
    font-family: Georgia, serif;
    pointer-events: none;
    user-select: none;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.07),
        0 20px 44px rgba(214, 39, 54, 0.10);
    border-color: rgba(214, 39, 54, 0.22);
}

/* Avatar */
.review-avatar-wrapper {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(214, 39, 54, 0.10) 0%, rgba(214, 39, 54, 0.22) 100%);
    color: #ff2d55;
    flex-shrink: 0;
    border: 2px solid rgba(214, 39, 54, 0.22);
    box-shadow: 0 4px 12px rgba(214, 39, 54, 0.14);
}

/* Author info */
.review-author-name {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.review-date-row {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

/* Stars */
.review-card-stars {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.review-card-stars i {
    font-size: 14px !important;
    color: #f59e0b;
    filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.45));
}

/* Review body text */
.review-text-content {
    font-size: 13.5px;
    line-height: 1.7;
    color: #475569;
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

/* ── Form Premium Style (Generic Input fields) ── */
.form-group-custom {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-control-premium {
    width: 100%;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 500;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    color: #0f172a;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

.form-control-premium:focus {
    background: #ffffff;
    border-color: #ff2d55;
    outline: none;
    box-shadow: 0 8px 20px rgba(214, 39, 54, 0.06);
}

.form-group-custom label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
    background: transparent;
    padding: 0 4px;
}

.form-group-custom textarea.form-control-premium ~ label {
    top: 24px;
    transform: none;
}

.form-control-premium:focus ~ label,
.form-control-premium:not(:placeholder-shown) ~ label,
.form-group-custom textarea.form-control-premium:focus ~ label,
.form-group-custom textarea.form-control-premium:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    background: #ffffff;
    color: #ff2d55;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════
   PREMIUM FAQ SECTION
═══════════════════════════════════════════ */
.faq-premium-section {
    padding: 5rem 0 4rem;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 60%);
    position: relative;
    overflow: hidden;
}

.faq-premium-section::before {
    content: '?';
    position: absolute;
    right: -40px;
    top: -20px;
    font-size: 26rem;
    font-weight: 900;
    color: rgba(214, 39, 54, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* ── Header ── */
.faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #fde8e8, #fee2e2);
    color: #d62736;
    font-size: var(--fs-secondary-text-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(214, 39, 54, 0.15);
}

.faq-header-badge i {
    font-size: var(--fs-secondary-text-1);
}

.faq-main-title {
    font-size: var(--fs-secondary-title);
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 0.65rem;
    line-height: 1.25;
}

.faq-main-title span {
    background: linear-gradient(135deg, #d62736, #fc8181);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.faq-subtitle {
    color: #6b7280;
    font-size: 1.5rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.faq-subtitle strong {
    color: #d62736;
    font-weight: 600;
}

/* ── Accordion Wrap ── */
.faq-accordion-wrap {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── FAQ Card ── */
.faq-card {
    background: #ffffff;
    border: 1.5px solid #fde8e8;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-card:hover {
    border-color: #fca5a5;
    box-shadow: 0 4px 20px rgba(214, 39, 54, 0.08);
}

.faq-card.faq-open {
    border-color: #d62736;
    box-shadow: 0 6px 28px rgba(214, 39, 54, 0.12);
}

/* ── Question Button ── */
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.faq-question:hover {
    background: #fff8f8;
}

.faq-card.faq-open .faq-question {
    background: linear-gradient(135deg, #fff0f0, #fff8f8);
}

.faq-q-num {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #fde8e8, #fee2e2);
    color: #d62736;
    font-size: var(--fs-secondary-text-1);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(214, 39, 54, 0.15);
    transition: all 0.25s ease;
}

.faq-card.faq-open .faq-q-num {
    background: linear-gradient(135deg, #d62736, #e85263);
    color: #fff;
    border-color: #d62736;
}

.faq-q-text {
    flex: 1;
    font-size: var(--fs-secondary-title-2);
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.faq-card.faq-open .faq-q-text {
    color: #d62736;
}

.faq-q-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #fde8e8;
    color: #d62736;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-secondary-text-1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-card.faq-open .faq-q-icon {
    background: #d62736;
    color: #fff;
    transform: rotate(180deg);
}

/* ── Answer ── */
.faq-answer {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem 1.6rem 1.4rem;
    border-top: 1px solid #fde8e8;
}

.faq-ans-icon {
    flex-shrink: 0;
    color: #d62736;
    font-size: var(--fs-primary-text);
    margin-top: 2px;
    opacity: 0.7;
}

.faq-answer-inner p {
    font-size: var(--fs-primary-text-1);
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .faq-premium-section {
        padding: 3.5rem 0 3rem;
    }

    .faq-question {
        padding: 1.2rem 1.2rem;
        gap: 1rem;
    }

    .faq-answer-inner {
        padding: 1rem 1.2rem 1.2rem;
    }
}

/* FAQ subtitle — keep on a single line */
.faq-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Udemy/Screenshot style price container */
._container_1uv5q_16 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 4px;
    margin-bottom: 15px;
}
.buy-box-module-scss-module__Au7YHG__discount-price,
.buy-box-module-scss-module__Au7YHG__discount-price * {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    color: #1c1d1f !important;
}
.buy-box-module-scss-module__Au7YHG__list-price,
.buy-box-module-scss-module__Au7YHG__list-price *,
.buy-box-module-scss-module__Au7YHG__list-price s {
    font-size: 2rem !important;
    color: #6a6f73 !important;
    text-decoration: line-through !important;
}
.buy-box-module-scss-module__Au7YHG__percent-discount,
.buy-box-module-scss-module__Au7YHG__percent-discount * {
    font-size: 2rem !important;
    color: #1c1d1f !important;
}
._discount-expiration_1uv5q_47 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    color: #b32d0f;
}
._discount-expiration_1uv5q_47 svg {
    color: #b32d0f;
    flex-shrink: 0;
}
.ud-text-xxs {
    font-size: 1.25rem;
}
.ud-text-xxs b {
    font-weight: 700;
}

/* Premium Coupon Styling (Separated Layout) */
.coupon-input-box {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1.4rem;
    color: #1e293b;
    font-weight: 500;
    outline: none !important;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

.coupon-input-box::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.coupon-input-box:hover {
    border-color: #94a3b8;
}

.coupon-input-box:focus {
    border-color: #d61b1b;
    box-shadow: 0 0 0 3px rgba(214, 27, 27, 0.12);
}

.coupon-btn-separate {
    border: none;
    outline: none;
    background-color: #dc3545;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(214, 27, 27, 0.15);
}

.coupon-btn-separate:hover {
    background-color: #b51414;
    box-shadow: 0 4px 8px rgba(214, 27, 27, 0.25);
}

.coupon-btn-separate:active {
    transform: translateY(0);
}

/* Group Tab Premium Styles */
.group-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-tab-title {
    font-size: 2.0rem;
    font-weight: 800;
    color: #1c1d1f;
}

.group-badge {
    background-color: #fee2e2;
    color: #d61b1b;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-tab-desc {
    font-size: 1.4rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* .group-cta-btn {
    display: block;
    background-color: #1c1d1f !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    border: 1px solid #1c1d1f !important;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
} */

.group-cta-btn:hover {
    background-color: #000 !important;
    border-color: #000 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.group-features-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1c1d1f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-features-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d61b1b;
    font-size: 1.4rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.feature-text {
    font-size: 1.35rem;
    color: #4b5563;
    line-height: 1.4;
}