:root {
    --primary: #482477;
    --primary-dark: #35185f;
    --secondary: #33206f;
    --text: #1e293b;
    --muted: #64748b;
    --bg: #f1f2f6;
    --white: #ffffff;
    --border: #e2e8f0;
    --success: #059669;
    --warning: #d97706;
    --radius: 16px;
    --shadow: 0 8px 30px rgba(15, 23, 42, 0.07);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1180px, 92%);
    margin: auto;
}

/* Header */
.header {
    background: #ffffff;
    border-bottom: 3px solid #e9eef7;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

/* Study Glance logo mark + text */
.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-mark img {
    position: static;
    width: 58px;
    height: 58px;
    max-width: none;
    object-fit: contain;
    display: block;
}

.brand-text {
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.brand-text .brand-study {
    color: #482477;
}

.brand-text .brand-glance {
    color: #e68a00;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #33206f;
    padding: 10px 11px;
    border-radius: 7px;
    white-space: nowrap;
}

.nav-links a:hover {
    background: #f3eef9;
    color: #482477;
}

.nav-links li:first-child a {
    background: transparent;
    color: #33206f;
}

.menu-btn {
    display: none;
    border: 0;
    background: #f3eef9;
    color: #33206f;
    font-size: 24px;
    padding: 7px 11px;
    border-radius: 10px;
    cursor: pointer;
}

/* Hero */
.hero {
     background:
                linear-gradient(
                    135deg,
                    #35185f 0%,
                    #482477 55%,
                    #5b3290 100%
                );

            
    padding: 45px 0 50px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 45px;
    align-items: center;
}

.badge {
    display: inline-block;
    background: #f3e6c8;
    color: #482477;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
}

.hero h1 {
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    color: var(--secondary);
    margin-bottom: 18px;
	color: #fff;
}

.hero h1 strong {
    color: #e68a00;
}

.hero p {
    font-size: 16px;
    color: #f3f2f7;
    max-width: 680px;
    margin-bottom: 25px;
}

.search-box {
    background: var(--white);
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    box-shadow: var(--shadow);
    max-width: 720px;
}

.search-box input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 14px;
    font-size: 15px;
    min-width: 0;
}

.search-box button {
    border: 0;
    background: var(--primary);
    color: white;
    padding: 0 22px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.search-box button:hover {
    background: var(--primary-dark);
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.quick-links a {
    background: white;
    border: 1px solid var(--border);
    padding: 7px 12px;
    border-radius: 999px;
    color: #475569;
    font-size: 13px;
}

.hero-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.hero-card h3 {
    margin-bottom: 18px;
    font-size: 20px;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #f1f5f9;
}

.hero-stat:last-child {
    border-bottom: 0;
}

.stat-icon {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: #f3eef9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.hero-stat b {
    display: block;
}

.hero-stat small {
    color: var(--muted);
}

/* Sections */
section {
    padding: 45px 0;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 28px;
}

.section-head h2 {
    font-size: 30px;
    color: var(--secondary);
    line-height: 1.2;
}

.section-head p {
    color: var(--muted);
    margin-top: 5px;
}

.view-all {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    transition: .2s ease;
    box-shadow: 0 3px 12px rgba(15,23,42,.03);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: #d9c8ee;
}

.card-icon {
    font-size: 28px;
    margin-bottom: 13px;
}

.card h3 {
    font-size: 18px;
    margin-bottom: 7px;
    color: var(--secondary);
}

.card p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 14px;
}

.card-link {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

/* Exam */
.exam-section {
    background: white;
}

.exam-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.exam-card .card-icon {
    min-width: 45px;
}

/* Subjects */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.subject {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 85px;
    transition: .2s;
}

.subject:hover {
    border-color: #c9b4e3;
    transform: translateY(-2px);
}

.subject-icon {
    width: 43px;
    height: 43px;
    border-radius: 11px;
    background: #f3eef9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
    flex-shrink: 0;
}

.subject b {
    display: block;
    font-size: 15px;
}

.subject small {
    color: var(--muted);
    font-size: 12px;
}

/* Trending */
.trending {
    background: #edf2f8;
}

.list {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 17px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.list-item:last-child {
    border-bottom: 0;
}

.list-item:hover {
    background: #f1ffe8;
}

.list-title {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

.rank {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f3e6c8;
    color: #482477;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

.arrow {
    color: var(--primary);
    font-weight: 800;
}

/* Programming */
.program-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.program {
    background: var(--secondary);
    color: white;
    padding: 25px;
    border-radius: var(--radius);
    transition: .2s;
}

.program:hover {
    transform: translateY(-4px);
}

.program h3 {
    margin-bottom: 8px;
}

.program p {
    color: #cbd5e1;
    font-size: 13px;
    margin-bottom: 18px;
}

.program a {
    display: inline-block;
    background: white;
    color: var(--secondary);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
}

/* Latest */
.latest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.latest-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.latest-card h3 {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.latest-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.latest-item:last-child {
    border-bottom: 0;
}

.latest-item a {
    font-weight: 600;
    font-size: 14px;
}

.tag {
    font-size: 11px;
    background: #fff1c9;
    color: #8a5a00;
    border-radius: 999px;
    padding: 4px 8px;
    white-space: nowrap;
    font-weight: 700;
}

/* Revision */
.revision-section {
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.revision-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.revision {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

.revision:hover {
    border-color: #c9b4e3;
    color: var(--primary);
}

/* CTA */
.cta {
    padding: 35px;
    border-radius: 22px;
	border:1px solid #6887aa;
    background:white ;
    color: var(--secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.cta h2 {
    margin-bottom: 5px;
}

.cta p {
    color: #6887aa;
}

.cta-btn {
    background: var(--secondary);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.cta-btn:hover {
	background: #5836be;
}
/* Footer */
footer {
    background: #33206f;
    color: #cbd5e1;
    padding: 30px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 35px;
    margin-bottom: 5px;
}

footer h3,
footer h4 {
    color: white;
    margin-bottom: 14px;
}

footer p {
    font-size: 14px;
    color: #94a3b8;
    max-width: 400px;
}

footer ul {
    list-style: none;
}

footer li {
    margin: 8px 0;
    font-size: 14px;
}

footer a:hover {
    color: white;
}

.copyright {
    padding-top: 10px;
    border-top: 1px solid #7389b9;
    text-align: center;
    color: #e68a00;
    font-size: 13px;
}

/* Search results message */
#searchMessage {
    display: none;
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .subject-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .program-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .revision-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 760px) {
    .nav {
        min-height: 62px;
    }

    .brand-text {
        font-size: 21px;
    }

    .brand-mark {
        width: 39px;
        height: 39px;
    }

    .brand-mark img {
        width: 120px;
        left: -81px;
    }

    .menu-btn {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 62px;
        left: 0;
        width: 100%;
        background: white;
        padding: 15px 4%;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links.show {
        display: flex;
    }

    .hero {
        padding: 50px 0 40px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero p {
        font-size: 16px;
    }

    .search-box {
        flex-direction: column;
        padding: 6px;
    }

    .search-box button {
        min-height: 45px;
    }

    section {
        padding: 45px 0;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 20px;

    }

    .cards,
    .latest-grid {
        grid-template-columns: 1fr;
    }

    .subject-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .program-grid {
        grid-template-columns: 1fr;
    }

    .revision-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .brand-text {
        font-size: 20px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .subject-grid {
        grid-template-columns: 1fr;
    }

    .revision-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-card {
        padding: 20px;
    }

    .list-item {
        padding: 14px;
    }

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

    .arrow {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

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

        .page-hero {
			background: linear-gradient(135deg, #482477, #33206f);
            color: #ffffff;
            padding: 45px 20px 25px;
            text-align: center;
        }

        .page-hero h1 {
            margin: 0 0 10px;

            color: #ffa824;

            font-size: 34px;
            line-height: 1.3;
        }

        .page-hero p {
            margin: 0 auto;

            max-width: 800px;

            color: #f5f2ff;

            font-size: 16px;
            line-height: 1.7;
        }


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

.ppt-search {
    max-width: 700px;
    margin: 30px auto 30px;
    padding: 0 20px;
}

.ppt-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.ppt-search-box input {
    width: 100%;
    box-sizing: border-box;

    padding: 14px 50px 14px 16px;

    border: 1px solid #8aa2c8;
    border-radius: 10px;

    font-size: 15px;
    outline: none;

    background: #ffffff;
}

.ppt-search-box input:focus {
    border-color: #482477;

    box-shadow: 0 0 0 3px rgba(72, 36, 119, 0.08);
}


/* Search Icon */
.ppt-search-box::after {
    content: "🔍";

    position: absolute;
    right: 16px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 18px;

    pointer-events: none;
}

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

        .ppt-section {
            padding: 10px 0 45px;
        }

        .section-title {
            text-align: center;

            margin-bottom: 25px;
        }

        .section-title h2 {
            margin: 0 0 7px;

            color: #482477;

            font-size: 25px;
        }

        .section-title p {
            margin: 0;

            color: #64748b;

            font-size: 15px;
        }


        /* =====================================================
           PPT GRID
        ===================================================== */

        .ppt-grid {
            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 18px;

            max-width: 1050px;

            margin: auto;

            padding: 0 20px;
        }


        /* =====================================================
           PPT CARD
        ===================================================== */

        .ppt-card {
            display: flex;

            align-items: center;

            gap: 18px;

            background: #ffffff;

            border: 1px solid #e2e8f0;

            border-radius: 15px;

            padding: 20px;

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

            transition: all 0.25s ease;
        }

        .ppt-card:hover {
            transform: translateY(-4px);

            border-color: #482477;

            box-shadow:
                0 12px 35px rgba(72, 36, 119, 0.13);
        }


        /* =====================================================
           NUMBER
        ===================================================== */

        .ppt-number {
            width: 48px;
            height: 48px;

            min-width: 48px;

            display: flex;

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

            border-radius: 12px;

            background: #f3eff8;

            color: #482477;

            font-size: 18px;

            font-weight: 700;
        }


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

        .ppt-info {
            flex: 1;
        }

        .ppt-info h3 {
            margin: 0 0 10px;

            color: #1e293b;

            font-size: 17px;

            line-height: 1.5;
        }


        /* =====================================================
           VIEW BUTTON
        ===================================================== */

        .ppt-btn {
            display: inline-block;

            padding: 8px 14px;

            background: #482477;

            color: #ffffff;

            border-radius: 7px;

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;

            transition: 0.2s ease;
        }

        .ppt-btn:hover {
            background: #35185f;
        }


        /* =====================================================
           BACK BUTTON
        ===================================================== */

        .back-section {
            text-align: center;

            padding: 0 20px 50px;
        }

        .back-btn {
            display: inline-block;

            padding: 11px 20px;

            background: #ffffff;

            color: #482477;

            border: 1px solid #482477;

            border-radius: 8px;

            text-decoration: none;

            font-weight: 600;

            transition: 0.2s ease;
        }

        .back-btn:hover {
            background: #f3eff8;
        }


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

        @media (max-width: 800px) {

            .ppt-grid {
                grid-template-columns: 1fr;
            }

        }


        @media (max-width: 600px) {

            .page-hero {
                padding: 35px 15px 20px;
            }

            .page-hero h1 {
                font-size: 28px;
            }

            .ppt-card {
                padding: 16px;

                gap: 13px;
            }

            .ppt-number {
                width: 42px;
                height: 42px;

                min-width: 42px;

                font-size: 16px;
            }

            .ppt-info h3 {
                font-size: 15px;
            }

            .ppt-btn {
                font-size: 12px;

                padding: 7px 12px;
            }

        }
 /* =====================================================
   PPT HERO
===================================================== */

.ppt-hero {
    background: linear-gradient(
        135deg,
        #482477,
        #33206f
    );

    color: #ffffff;

    padding: 60px 20px;
}


.ppt-hero-content {
    display: flex;

    align-items: center;

    gap: 18px;

    max-width: 1100px;

    margin: 0 auto;
}


/* =====================================================
   PPT HERO ICON BADGE
===================================================== */

.ppt-hero-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

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

    background: rgba(
        255,
        255,
        255,
        0.12
    );

    border: 1px solid rgba(
        255,
        255,
        255,
        0.20
    );

    border-radius: 14px;

    font-size: 31px;
}


/* =====================================================
   PPT HERO EYEBROW
===================================================== */

.ppt-eyebrow {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.2px;

    margin-bottom: 5px;

    opacity: 0.8;
}


/* =====================================================
   PPT HERO TITLE
===================================================== */

.ppt-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: 32px;

    line-height: 1.2;
}


/* =====================================================
   PPT HERO DESCRIPTION
===================================================== */

.ppt-hero p {
    margin: 7px 0 0;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.5;

    opacity: 0.88;
}
        .ppt-subject-section {
            padding: 20px 0 60px;
        }

        .ppt-subject-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .ppt-subject-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 28px 22px;
            text-align: center;
            text-decoration: none;
            color: #1e293b;
            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07);
            transition: all 0.25s ease;
        }

        .ppt-subject-card:hover {
            transform: translateY(-5px);
            border-color: #482477;
            box-shadow: 0 12px 35px rgba(72, 36, 119, 0.15);
        }

        .ppt-subject-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;

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

            border-radius: 14px;
            background: #f3eff8;

            font-size: 32px;
        }

        .ppt-subject-card h2 {
            margin: 0;
            font-size: 20px;
            color: #482477;
        }

        .ppt-subject-card span {
            display: block;
            margin-top: 8px;
            color: #64748b;
            font-size: 14px;
        }

        @media (max-width: 900px) {
            .ppt-subject-grid {
                grid-template-columns: repeat(2, 1fr);
                padding: 0 20px;
            }
        }

        @media (max-width: 600px) {
            .page-hero h1 {
                font-size: 28px;
            }

            .ppt-subject-grid {
                grid-template-columns: 1fr;
            }

            .ppt-subject-card {
                padding: 24px 18px;
            }
        }
		/* =====================================================
   PPT HERO - MOBILE
===================================================== */

@media (max-width: 750px) {

    .ppt-hero {
        padding: 30px 18px;
    }


    .ppt-hero-content {
        gap: 13px;
    }


    .ppt-hero-icon {
        width: 50px;
        height: 50px;

        font-size: 25px;
    }


    .ppt-hero h1 {
        font-size: 25px;
    }


    .ppt-hero p {
        font-size: 13px;
    }

}


@media (max-width: 520px) {

    .ppt-hero {
        padding: 25px 15px;
    }


    .ppt-hero-icon {
        width: 46px;
        height: 46px;

        border-radius: 12px;

        font-size: 22px;
    }


    .ppt-eyebrow {
        font-size: 10px;

        letter-spacing: 1px;
    }


    .ppt-hero h1 {
        font-size: 21px;
    }


    .ppt-hero p {
        font-size: 12px;

        margin-top: 5px;
    }

}
/* =====================================================
   LAB PROGRAMS
===================================================== */


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

.lab-hero {
    background: linear-gradient(
        135deg,
        #482477,
        #33206f
    );

    color: #ffffff;

    padding: 60px 20px;
}


.lab-hero-content {
    display: flex;

    align-items: center;

    gap: 18px;

    max-width: 1100px;

    margin: 0 auto;
}


.lab-hero-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

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

    background: rgba(
        255,
        255,
        255,
        0.12
    );

    border: 1px solid rgba(
        255,
        255,
        255,
        0.20
    );

    border-radius: 14px;

    font-size: 31px;
}


.lab-eyebrow {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.2px;

    margin-bottom: 5px;

    opacity: 0.8;
}


.lab-hero h1 {
    margin: 0;

    font-size: 32px;

    line-height: 1.2;
}

.lab-hero h1 span {
            color: #f2a329;
        }

.lab-hero p {
    margin: 7px 0 0;

    font-size: 15px;

    opacity: 0.88;
}


/* =====================================================
   SUMMARY
===================================================== */

.lab-summary-section {
    background: #ffffff;

    border-bottom:
        1px solid #e2e8f0;
}


.lab-summary {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 0;
}


.lab-summary-item {
    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 20px;

    border-right:
        1px solid #e2e8f0;
}


.lab-summary-item:last-child {
    border-right: none;
}


.lab-summary-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

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

    background: #f3effa;

    border-radius: 10px;

    font-size: 20px;
}


.lab-summary-item strong {
    display: block;

    color: #482477;

    font-size: 17px;

    line-height: 1.2;
}


.lab-summary-item span:not(
    .lab-summary-icon
) {
    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 12px;
}


/* =====================================================
   SEARCH / FILTER AREA
===================================================== */

.lab-tools {
	
	margin-top: 10px;

    padding: 15px 10px 5px;

    background: #f1f2f6;
}



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

.lab-search {
    position: relative;

    max-width: 680px;

    margin: 0 auto 18px;
}


.lab-search input {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 48px 12px 16px;

    background: #ffffff;

    border:
        2px solid #8aa2c8;

    border-radius: 10px;

    outline: none;

    color: #1e293b;

    font-size: 14px;

    transition:
        all 0.2s ease;
}


.lab-search input:focus {
    border-color: #482477;

    box-shadow:
        0 0 0 3px
        rgba(
            72,
            36,
            119,
            0.08
        );
}


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


.lab-search-icon {
    position: absolute;

    right: 16px;

    top: 50%;

    transform:
        translateY(-50%);

    font-size: 17px;

    pointer-events: none;
}


/* =====================================================
   SEMESTER FILTER
===================================================== */

.semester-nav {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin:
        0 auto 12px;
}


.semester-filter {
    padding: 7px 15px;

    background: #ffffff;

    border:
        1px solid #d5dce7;

    border-radius: 20px;

    color: #475569;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        all 0.2s ease;
}


.semester-filter:hover {
    border-color: #482477;

    color: #482477;
}


.semester-filter.active {
    background: #482477;

    border-color: #482477;

    color: #ffffff;
}


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

.lab-main {
    background: #f1f2f6;

    padding:
        18px 20px 50px;
}


/* =====================================================
   PAGE HEADING
===================================================== */

.lab-page-heading {
    max-width: 850px;

    margin: 0 auto 0px;

    text-align: center;
}


.section-label {
    display: inline-block;

    margin-bottom: 6px;

    color: #482477;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.lab-page-heading h2 {
    margin: 0;

    color: #1e293b;

    font-size: 24px;

    line-height: 1.3;
}


.lab-page-heading p {
    margin: 7px 0 0;

    color: #64748b;

    font-size: 14px;
}


/* =====================================================
   YEAR / SEMESTER HEADER
===================================================== */

.lab-semester-section {
    max-width: 1100px;

    margin:
        0 auto 5px;
}


.semester-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;

    padding: 14px 18px;

    background: #ffffff;

    border-left:
        5px solid #482477;

    border-radius: 12px;

    box-shadow:
        0 5px 18px
        rgba(
            15,
            23,
            42,
            0.06
        );
}


/* =====================================================
   LEFT SIDE OF YEAR HEADER
===================================================== */

.semester-heading-left {
    display: flex;

    align-items: center;

    gap: 15px;
}


/* =====================================================
   YEAR NUMBER CIRCLE
===================================================== */

.semester-badge {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;

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

    background: #e68a00;

    color: #ffffff;

    border-radius: 50%;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 4px 10px
        rgba(
            72,
            36,
            119,
            0.18
        );
}


/* =====================================================
   YEAR / SEMESTER TITLE
===================================================== */

.semester-title {
    min-width: 0;
}


.semester-title h2 {
    margin: 0;

    color: #482477;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;
}


.semester-subtitle {
    display: block;

    margin-top: 5px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.3;
}


/* =====================================================
   LAB COUNT
===================================================== */

.semester-count {
    flex-shrink: 0;

    padding: 6px 11px;

    background: #f3effa;

    border:
        1px solid #ded2ed;

    border-radius: 20px;

    color: #482477;

    font-size: 11px;

    font-weight: 700;
}


/* =====================================================
   LAB CARDS GRID
===================================================== */

.lab-cards {
    display: grid;

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

    gap: 15px;
}


/* =====================================================
   COMPACT LAB CARD
===================================================== */

.lab-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    background: #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius: 12px;

    padding: 15px;

    box-shadow:
        0 3px 12px
        rgba(
            15,
            23,
            42,
            0.045
        );

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


.lab-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #b9a4d3;

    box-shadow:
        0 8px 22px
        rgba(
            15,
            23,
            42,
            0.09
        );
}


/* =====================================================
   CARD TOP
===================================================== */

.lab-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 11px;
}


/* =====================================================
   SUBJECT ICON
===================================================== */

.lab-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    background: #f3effa;

    border-radius: 10px;

    font-size: 21px;
}


/* =====================================================
   CARD NUMBER
===================================================== */

.lab-number {
    color: #cbd5e1;

    font-size: 11px;

    font-weight: 700;
}


/* =====================================================
   LAB TITLE
===================================================== */

.lab-card h3 {
    min-height: 55px;

    margin: 0;

    color: #1e293b;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;
}


/* =====================================================
   REGULATION ROW
===================================================== */

.lab-regulation-row {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 11px;

    margin-bottom: 12px;
}


.regulation-label {
    color: #94a3b8;

    font-size: 10px;

    font-weight: 600;
}


.lab-regulation {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.4px;
}


/* =====================================================
   R25
===================================================== */

.lab-regulation.r25 {
    background: #fff1c7;

    border:
        1px solid #edcf72;

    color: #8a6100;
}


/* =====================================================
   R22
===================================================== */

.lab-regulation.r22 {
    background: #eee7f8;

    border:
        1px solid #cbb8e4;

    color: #482477;
}


/* =====================================================
   R21
===================================================== */

.lab-regulation.r21 {
    background: #e8f5e9;

    border:
        1px solid #b7dbbe;

    color: #28743c;
}


/* =====================================================
   R18
===================================================== */

.lab-regulation.r18 {
    background: #e8f0f8;

    border:
        1px solid #b8cce0;

    color: #24527a;
}


/* =====================================================
   R16
===================================================== */

.lab-regulation.r16 {
    background: #f5e9e9;

    border:
        1px solid #dfbaba;

    color: #8a3333;
}


/* =====================================================
   VIEW BUTTON
===================================================== */

.lab-btn {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    box-sizing: border-box;

    padding: 8px 10px;

    background: #f7f4fb;

    border:
        1px solid #e2d8ef;

    border-radius: 7px;

    color: #482477;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition:
        all 0.2s ease;
}


.lab-btn:hover {
    background: #482477;

    border-color: #482477;

    color: #ffffff;
}


.lab-btn span:last-child {
    font-size: 14px;
}


/* =====================================================
   NO RESULTS
===================================================== */

.lab-no-results {
    max-width: 500px;

    margin:
        35px auto;

    padding:
        35px 20px;

    background: #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius: 14px;

    text-align: center;
}


.no-results-icon {
    margin-bottom: 8px;

    font-size: 30px;
}


.lab-no-results h3 {
    margin: 0;

    color: #1e293b;

    font-size: 17px;
}


.lab-no-results p {
    margin: 6px 0 0;

    color: #64748b;

    font-size: 13px;
}


/* =====================================================
   LAB PROGRAM DETAIL PAGE
===================================================== */


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

.lab-detail-hero {
    background: linear-gradient(
        135deg,
        #482477,
        #33206f
    );

    color: #ffffff;

    padding: 60px 20px;
}


.lab-detail-hero-content {
    display: flex;

    align-items: center;

    gap: 18px;

    max-width: 1100px;

    margin: 0 auto;
}


.lab-detail-hero-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

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

    background: rgba(
        255,
        255,
        255,
        0.12
    );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.20
        );

    border-radius: 14px;

    font-size: 31px;
}


.lab-detail-eyebrow {
    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.2px;

    opacity: 0.85;
}


.lab-detail-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: 31px;

    line-height: 1.2;

    font-weight: 800;
}


.lab-detail-hero p {
    margin: 7px 0 0;

    color: #ffffff;

    font-size: 15px;

    opacity: 0.88;
}


/* =====================================================
   INFORMATION CARDS
===================================================== */

.lab-detail-info {
    background: #ffffff;

    border-bottom:
        1px solid #e2e8f0;
}


.lab-detail-info-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.lab-detail-info-card {
    min-height: 78px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 18px;

    border-right:
        1px solid #e2e8f0;
}


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


.lab-detail-info-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    background: #f3effa;

    border-radius: 9px;

    font-size: 19px;
}


.lab-detail-info-label {
    display: block;

    margin-bottom: 2px;

    color: #94a3b8;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .4px;
}


.lab-detail-info-card strong {
    display: block;

    color: #1e293b;

    font-size: 13px;

    line-height: 1.3;
}


.lab-detail-info-card .detail-r25 {
    display: inline-block;

    padding: 3px 8px;

    background: #fff1c7;

    border:
        1px solid #edcf72;

    border-radius: 5px;

    color: #8a6100;

    font-size: 11px;
}


/* =====================================================
   SEARCH AREA
===================================================== */

.lab-detail-tools {
    padding:
        22px 20px 8px;

    background: #f1f2f6;
}


.lab-detail-search {
    position: relative;

    max-width: 720px;

    margin: 0 auto;
}


.lab-detail-search input {
    width: 100%;

    box-sizing: border-box;

    padding:
        13px 48px 13px 16px;

    background: #ffffff;

    border:
        2px solid #8aa2c8;

    border-radius: 10px;

    outline: none;

    color: #1e293b;

    font-size: 14px;

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


.lab-detail-search input:focus {
    border-color: #482477;

    box-shadow:
        0 0 0 3px
        rgba(
            72,
            36,
            119,
            .08
        );
}


.lab-detail-search input::placeholder {
    color: #94a3b8;
}


.lab-detail-search > span {
    position: absolute;

    right: 16px;

    top: 50%;

    transform:
        translateY(-50%);

    font-size: 17px;

    pointer-events: none;
}


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

.lab-detail-main {
    background: #f1f2f6;

    padding:
        18px 20px 55px;
}


/* =====================================================
   INTRODUCTION
===================================================== */

.lab-detail-intro {
    max-width: 900px;

    margin:
        0 auto 24px;

    padding:
        20px 22px;

    background: #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius: 13px;

    box-shadow:
        0 4px 16px
        rgba(
            15,
            23,
            42,
            .045
        );
}


.lab-detail-intro-label {
    display: inline-block;

    margin-bottom: 4px;

    color: #482477;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


.lab-detail-intro h2 {
    margin: 0;

    color: #1e293b;

    font-size: 20px;

    line-height: 1.35;
}


.lab-detail-intro p {
    margin:
        8px 0 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   PROGRAM SECTIONS
===================================================== */

.lab-program-sections {
    max-width: 1100px;

    margin: 0 auto;
}


.lab-program-section {
    margin-bottom: 14px;

    background: #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius: 12px;

    overflow: hidden;

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


/* =====================================================
   SECTION HEADER
===================================================== */

.lab-program-section-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        12px 15px;

    background: #ffffff;

    border-bottom:
        1px solid #edf0f5;
}


.lab-program-section-title {
    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 0;
}


.lab-program-section-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

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

    background: #f3effa;

    border-radius: 9px;

    font-size: 20px;
}


.lab-program-section-label {
    display: block;

    margin-bottom: 2px;

    color: #94a3b8;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .8px;
}


.lab-program-section-title h2 {
    margin: 0;

    color: #482477;

    font-size: 17px;

    line-height: 1.3;
}


.lab-program-count {
    flex-shrink: 0;

    padding:
        5px 9px;

    background: #f3effa;

    border:
        1px solid #ded2ed;

    border-radius: 15px;

    color: #482477;

    font-size: 10px;

    font-weight: 700;
}


/* =====================================================
   PROGRAM LIST
===================================================== */

.lab-program-list {
    display: flex;

    flex-direction: column;
}


/* =====================================================
   PROGRAM ITEM
===================================================== */

.lab-program-item {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        11px 15px;

    border-bottom:
        1px solid #edf0f5;

    transition:
        background .2s ease;
}


.lab-program-item:last-child {
    border-bottom: none;
}


.lab-program-item:hover {
    background: #faf9fd;
}


/* =====================================================
   PROGRAM NUMBER
===================================================== */

.lab-program-number {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;

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

    background: #f3effa;

    border-radius: 7px;

    color: #482477;

    font-size: 10px;

    font-weight: 800;
}


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

.lab-program-content {
    min-width: 0;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.lab-program-content p {
    margin: 0;

    color: #334155;

    font-size: 15px;

    line-height: 1.6;
}


/* =====================================================
   SOLUTION BUTTON
===================================================== */

.lab-solution-btn {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    min-width: 118px;

    padding:
        7px 10px;

    background: #f7f4fb;

    border:
        1px solid #e2d8ef;

    border-radius: 7px;

    color: #482477;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    transition:
        all .2s ease;
}


.lab-solution-btn:hover {
    background: #482477;

    border-color: #482477;

    color: #ffffff;
}


.solution-arrow {
    font-size: 14px;

    line-height: 1;
}


/* =====================================================
   NO RESULTS
===================================================== */

.lab-detail-no-results {
    max-width: 500px;

    margin:
        30px auto;

    padding:
        30px 20px;

    background: #ffffff;

    border:
        1px solid #e2e8f0;

    border-radius: 13px;

    text-align: center;
}


.lab-detail-no-results > div {
    margin-bottom: 7px;

    font-size: 28px;
}


.lab-detail-no-results h3 {
    margin: 0;

    color: #1e293b;

    font-size: 17px;
}


.lab-detail-no-results p {
    margin:
        5px 0 0;

    color: #64748b;

    font-size: 13px;
}


/* =====================================================
   BACK BUTTON
===================================================== */

.lab-detail-back {
    display: flex;

    justify-content: center;

    margin-top: 22px;
}


.lab-back-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 14px;

    background: #ffffff;

    border:
        1px solid #d9d0e5;

    border-radius: 8px;

    color: #482477;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        all .2s ease;
}


.lab-back-btn:hover {
    background: #482477;

    border-color: #482477;

    color: #ffffff;
}


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

@media (max-width: 900px) {

    .lab-detail-info-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .lab-detail-info-card:nth-child(2) {
        border-right: none;
    }


    .lab-detail-info-card:nth-child(-n+2) {
        border-bottom:
            1px solid #e2e8f0;
    }

}


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

@media (max-width: 700px) {

    .lab-detail-hero {
        padding:
            28px 18px;
    }


    .lab-detail-hero-content {
        gap: 13px;
    }


    .lab-detail-hero-icon {
        width: 50px;
        height: 50px;

        font-size: 25px;
    }


    .lab-detail-eyebrow {
        font-size: 10px;
    }


    .lab-detail-hero h1 {
        font-size: 23px;
    }


    .lab-detail-hero p {
        font-size: 12px;
    }


    .lab-detail-info-card {
        padding:
            11px 13px;
    }


    .lab-program-content {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }


    .lab-solution-btn {
        width: 100%;

        box-sizing: border-box;
    }

}


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

@media (max-width: 520px) {

    .lab-detail-info-grid {
        grid-template-columns: 1fr;
    }


    .lab-detail-info-card,
    .lab-detail-info-card:nth-child(2) {
        border-right: none;

        border-bottom:
            1px solid #e2e8f0;
    }


    .lab-detail-info-card:last-child {
        border-bottom: none;
    }


    .lab-detail-main {
        padding:
            15px 12px 40px;
    }


    .lab-detail-tools {
        padding:
            15px 12px 5px;
    }


    .lab-detail-intro {
        padding:
            16px;

        margin-bottom: 16px;
    }


    .lab-detail-intro h2 {
        font-size: 17px;
    }


    .lab-program-section-header {
        padding:
            10px 11px;
    }


    .lab-program-section-icon {
        width: 35px;
        height: 35px;

        font-size: 18px;
    }


    .lab-program-section-title h2 {
        font-size: 14px;
    }


    .lab-program-count {
        padding:
            4px 7px;

        font-size: 9px;
    }


    .lab-program-item {
        align-items: flex-start;

        padding:
            10px 11px;

        gap: 9px;
    }


    .lab-program-number {
        width: 27px;
        height: 27px;
    }


    .lab-program-content p {
         font-size: 13px;
		line-height: 1.55;
    }

}

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

@media (max-width: 1000px) {

    .lab-cards {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .lab-summary {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .lab-summary-item:nth-child(2) {
        border-right: none;
    }


    .lab-summary-item:nth-child(-n+2) {
        border-bottom:
            1px solid #e2e8f0;
    }

}


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

@media (max-width: 750px) {

    .lab-hero {
        padding:
            30px 18px;
    }


    .lab-hero-content {
        gap: 13px;
    }


    .lab-hero-icon {
        width: 50px;
        height: 50px;

        font-size: 25px;
    }


    .lab-hero h1 {
        font-size: 25px;
    }


    .lab-hero p {
        font-size: 13px;
    }


    .lab-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }


    .lab-card {
        padding: 13px;
    }


    .lab-card h3 {
        min-height: 50px;

        font-size: 13px;
    }


    .lab-icon {
        width: 36px;
        height: 36px;

        font-size: 19px;
    }


    .lab-summary-item {
        padding:
            13px 15px;
    }


    .semester-heading {
        padding:
            13px 15px;
    }


    .semester-title h2 {
        font-size: 17px;
    }

}


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

@media (max-width: 520px) {

    .lab-summary {
        grid-template-columns: 1fr;
    }


    .lab-summary-item,
    .lab-summary-item:nth-child(2) {
        border-right: none;

        border-bottom:
            1px solid #e2e8f0;
    }


    .lab-summary-item:last-child {
        border-bottom: none;
    }


    .lab-cards {
        grid-template-columns: 1fr;
    }


    .lab-card h3 {
        min-height: auto;
    }


    .lab-main {
        padding-left: 15px;

        padding-right: 15px;
    }


    .lab-page-heading h2 {
        font-size: 21px;
    }


    .semester-heading {
        padding:
            12px 13px;

        border-left-width: 4px;
    }


    .semester-heading-left {
        gap: 11px;
    }


    .semester-badge {
        width: 38px;
        height: 38px;

        font-size: 13px;
    }


    .semester-title h2 {
        font-size: 15px;

        line-height: 1.3;
    }


    .semester-subtitle {
        margin-top: 3px;

        font-size: 11px;
    }


    .semester-count {
        padding:
            5px 8px;

        font-size: 10px;
    }

}
/* =====================================================
   LAB SEMESTER SPACING - FINAL OVERRIDE
===================================================== */

.lab-semester-section {
    max-width: 1100px !important;
    margin: 0 auto 50px !important;
    padding: 0 !important;
}

.lab-semester-section + .lab-semester-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.semester-heading {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.lab-cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
/* =====================================================
   LAB PROGRAM DISPLAY PAGE
===================================================== */
/* =========================================================
   R25 PPS DISPLAY PAGE
   ========================================================= */

.lab-display-page {
    background:#f5f6fa;
    min-height:100vh;
}

/* Hero */

.lab-display-hero {
    background:linear-gradient(
        135deg,
        #482477,
        #33206f
    );

    color:#fff;
    padding:60px 20px;
}

.lab-display-hero-inner {
    max-width:1100px;
    margin:0 auto;

    display:flex;
    align-items:center;
    gap:18px;
}

.lab-display-icon {
    width:62px;
    height:62px;
    flex-shrink:0;

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

    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);

    border-radius:15px;

    font-size:30px;
}

.lab-display-eyebrow {
    margin:0 0 5px;

    color:#fff;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

    opacity:.86;
}

.lab-display-hero h1 {
    margin:0;

    color:#fff;

    font-size:30px;
    line-height:1.2;

    font-weight:800;
}

.lab-display-hero p {
    margin:7px 0 0;

    color:#fff;

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

    opacity:.88;
}


/* Information badges */

.lab-display-meta {
    max-width:1100px;
    margin:-18px auto 0;

    padding:0 20px;

    position:relative;
    z-index:2;
}

.lab-display-meta-inner {
    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:14px;

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

    padding:14px 18px;

    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.lab-meta-item {
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 11px;

    border-radius:8px;

    background:#f8fafc;

    color:#334155;

    font-size:13px;
    font-weight:600;
}

.lab-meta-r25 {
    background:#fff4df;
    color:#a85d00;
}


/* Main */

.lab-display-main {
    max-width:1100px;

    margin:26px auto 50px;

    padding:0 20px;
}


/* Program heading */

.lab-display-heading {
    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:14px;

    padding:22px 24px;

    margin-bottom:18px;

    box-shadow:0 4px 14px rgba(15,23,42,.04);
}

.lab-display-heading-label {
    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    margin-bottom:10px;

    border-radius:7px;

    background:#eee8f7;

    color:#482477;

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

    letter-spacing:.6px;

    text-transform:uppercase;
}

.lab-display-heading h2 {
    margin:0;

    color:#1e293b;

    font-size:22px;
    line-height:1.45;

    font-weight:750;
}


/* Action buttons */

.lab-display-actions {
    display:flex;
    flex-wrap:wrap;

    gap:9px;

    margin-bottom:20px;
}

.lab-display-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:9px 14px;

    border-radius:8px;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    border:1px solid #dbe3ee;

    background:#fff;

    color:#334155;
}

.lab-display-btn:hover {
    border-color:#482477;
    color:#482477;
}

.lab-display-btn-primary {
    background:#482477;
    border-color:#482477;
    color:#fff;
}

.lab-display-btn-primary:hover {
    background:#35185f;
    color:#fff;
}


/* =========================================================
   ORIGINAL PROGRAM CONTENT
   ========================================================= */

.lab-original-content {
    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:14px;

    padding:30px;

    box-shadow:0 4px 14px rgba(15,23,42,.04);

    overflow:hidden;
}


/* Question */

.lab-original-content > h1:first-child,
.lab-original-content > h2:first-child {
    margin-top:0;
}

.lab-original-content h1 {
    color:#482477;

    font-size:24px;
    line-height:1.45;

    margin:0 0 25px;
}

.lab-original-content h2 {
    color:#482477;

    font-size:20px;

    margin:28px 0 12px;

    padding-bottom:8px;

    border-bottom:2px solid #eee8f7;
}

.lab-original-content h3 {
    color:#35185f;

    font-size:18px;

    margin:24px 0 10px;
}

.lab-original-content p {
    color:#334155;

    font-size:15px;

    line-height:1.75;

    margin:9px 0;
}

.lab-original-content ul,
.lab-original-content ol {
    color:#334155;

    padding-left:25px;

    line-height:1.7;
}


/* Program code */

.lab-original-content pre {
    background:#101827;

    color:#e5edf7;

    border-radius:10px;

    padding:18px 20px;

    margin:12px 0 22px;

    overflow-x:auto;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:14px;

    line-height:1.65;

    border:1px solid #1e293b;

    white-space:pre-wrap;
}

.lab-original-content code {
    font-family:
        Consolas,
        "Courier New",
        monospace;
}


/* Flowchart / images */

.lab-original-content img {
    display:block;

    max-width:100%;
    height:auto;

    margin:15px auto;

    border-radius:10px;

    border:1px solid #e2e8f0;

    background:#fff;

    box-shadow:0 4px 15px rgba(15,23,42,.07);
}


/* Tables */

.lab-original-content table {
    width:100%;

    border-collapse:collapse;

    margin:18px 0;

    font-size:14px;
}

.lab-original-content th,
.lab-original-content td {
    border:1px solid #dbe3ee;

    padding:9px 11px;

    text-align:left;
}

.lab-original-content th {
    background:#f3eff8;

    color:#35185f;

    font-weight:700;
}


/* OUTPUT */

.lab-original-content strong {
    color:#334155;
}


/* Related Content */

.lab-related {
    margin-top:28px;
}

.lab-related-title {
    margin:0 0 15px;

    color:#1e293b;

    font-size:21px;

    font-weight:800;
}

.lab-related-group {
    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:12px;

    margin-bottom:12px;

    overflow:hidden;
}

.lab-related-group-head {
    display:flex;
    align-items:center;
    gap:10px;

    padding:13px 16px;

    background:#f8fafc;

    border-bottom:1px solid #e2e8f0;
}

.lab-related-group-icon {
    width:34px;
    height:34px;

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

    border-radius:8px;

    background:#eee8f7;

    font-size:17px;
}

.lab-related-group-head h3 {
    margin:0;

    color:#35185f;

    font-size:16px;
}

.lab-related-list {
    padding:4px 12px 8px;
}

.lab-related-item {
    display:flex;
    align-items:flex-start;
    gap:10px;

    padding:11px 7px;

    border-bottom:1px solid #eef2f7;
}

.lab-related-item:last-child {
    border-bottom:none;
}

.lab-related-number {
    min-width:25px;

    color:#64748b;

    font-size:13px;
    font-weight:700;
}

.lab-related-question {
    flex:1;

    color:#334155;

    font-size:14px;

    line-height:1.55;
}

.lab-related-link {
    flex-shrink:0;

    padding:6px 10px;

    border-radius:6px;

    background:#482477;

    color:#fff;

    text-decoration:none;

    font-size:11px;

    font-weight:700;
}

.lab-related-link:hover {
    background:#35185f;
}

.lab-related-item.active {
    background:#faf7ff;

    border-radius:8px;
}

.lab-related-item.active .lab-related-question {
    color:#482477;

    font-weight:700;
}


/* Bottom navigation */

.lab-display-bottom {
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #e2e8f0;
}


/* Mobile */

@media(max-width:700px) {

    .lab-display-hero {
        padding:28px 15px;
    }

    .lab-display-hero-inner {
        align-items:flex-start;
    }

    .lab-display-icon {
        width:48px;
        height:48px;

        font-size:23px;

        border-radius:12px;
    }

    .lab-display-hero h1 {
        font-size:23px;
    }

    .lab-display-hero p {
        font-size:13px;
    }

    .lab-display-meta {
        padding:0 12px;
    }

    .lab-display-meta-inner {
        padding:11px;

        gap:7px;
    }

    .lab-meta-item {
        font-size:12px;

        padding:6px 8px;
    }

    .lab-display-main {
        padding:0 12px;

        margin-top:20px;
    }

    .lab-display-heading {
        padding:18px;
    }

    .lab-display-heading h2 {
        font-size:19px;
    }

    .lab-original-content {
        padding:18px;
    }

    .lab-original-content h1 {
        font-size:21px;
    }

    .lab-original-content h2 {
        font-size:18px;
    }

    .lab-original-content p {
        font-size:14px;
    }

    .lab-original-content pre {
        font-size:12px;

        padding:14px;

        line-height:1.55;
    }

    .lab-related-item {
        flex-wrap:wrap;
    }

    .lab-related-link {
        margin-left:35px;
    }

    .lab-display-bottom {
        flex-direction:column;
        align-items:stretch;
    }

    .lab-display-btn {
        width:100%;
        box-sizing:border-box;
    }
}


/* Print */

@media print {

    header,
    nav,
    .lab-display-actions,
    .lab-display-meta,
    .lab-related,
    footer {
        display:none !important;
    }

    .lab-display-hero {
        background:#fff !important;

        color:#000;

        padding:10px 0;
    }

    .lab-display-hero h1,
    .lab-display-hero p,
    .lab-display-eyebrow {
        color:#000 !important;
    }

    .lab-display-main {
        max-width:none;

        margin:0;

        padding:0;
    }

    .lab-original-content {
        border:none;

        box-shadow:none;

        padding:0;
    }

}

/*----*/
/* =========================================================
   LAB ONLINE COMPILER
   Used by R25 DS / PPS / Java Lab Display Pages
========================================================= */

.lab-compiler {
    margin: 35px 0 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    padding-top: 1px;
}

.lab-compiler-head {
    padding: 18px 22px;
    background: linear-gradient(135deg, #482477, #33206f);
    color: #ffffff;
    border-radius: 16px;
}

.lab-compiler-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.lab-compiler-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
}

.lab-compiler-head p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    line-height: 1.5;
}

.lab-copy-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lab-copy-btn {
    border: 0;
    background: #ffffff;
    color: #482477;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.lab-copy-btn:hover {
    background: #f3eff8;
    transform: translateY(-1px);
}

.lab-copy-btn:active {
    transform: translateY(0);
}

.lab-copy-status {
    min-height: 18px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .9);
    font-size: 12px;
    font-weight: 600;
}

.lab-compiler-frame {
    padding: 18px;
    background: #f8fafc;
}

.lab-compiler-frame iframe {
    display: block;
    width: 100%;
    height: 620px;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #ffffff;
}

.lab-compiler-note {
    padding: 0 18px 16px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}


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

@media (max-width: 700px) {

    .lab-compiler {
        margin: 25px 0 30px;
        border-radius: 12px;
    }

    .lab-compiler-head {
        padding: 16px;
    }

    .lab-compiler-title-row {
        flex-direction: column;
        gap: 10px;
    }

    .lab-copy-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 4px;
    }

    .lab-copy-btn {
        width: 100%;
        text-align: center;
    }

    .lab-compiler-head h2 {
        font-size: 19px;
    }

    .lab-compiler-frame {
        padding: 10px;
    }

    .lab-compiler-frame iframe {
        height: 620px;
    }

    .lab-compiler-note {
        padding: 0 12px 14px;
    }
}





/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

    --primary: #482477;
    --primary-dark: #35185f;
    --primary-light: #f3effa;

    --orange: #e68a00;
    --orange-light: #fff4df;

    --text: #1e293b;
    --muted: #64748b;

    --bg: #f5f6fa;
    --white: #ffffff;

    --border: #e2e8f0;

    --radius: 16px;

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

    --shadow-hover:
        0 15px 35px rgba(72, 36, 119, 0.13);
}


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.6;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input {
    font-family: inherit;
}


/* =====================================================
   CONTAINER
===================================================== */

.container {

    width: min(1180px, 92%);

    margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.header {

    background: var(--white);

    border-bottom:
        1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 1000;
}


.nav {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* =====================================================
   BRAND
===================================================== */

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


.brand-logo {

    width: 43px;

    height: 43px;

    border-radius: 10px;

    overflow: hidden;

    position: relative;

    background: var(--primary);
}


.brand-logo img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.brand-name {

    color: var(--primary);

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -0.3px;
}


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

.nav-links {

    display: flex;

    align-items: center;

    gap: 5px;

    list-style: none;
}


.nav-links a {

    display: block;

    padding: 9px 13px;

    border-radius: 8px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    transition:
        all 0.2s ease;
}


.nav-links a:hover {

    background:
        var(--primary-light);
}


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

.menu-btn {

    display: none;

    border: 0;

    background:
        var(--primary-light);

    color: var(--primary);

    width: 42px;

    height: 42px;

    border-radius: 10px;

    cursor: pointer;

    font-size: 21px;
}


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



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



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

.questions-main {

    padding:
        20px 0 70px;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.page-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;

    padding: 14px 18px;

    background: #ffffff;

     border-top:
                5px solid #e68a00;

            border-left:
                4px solid #482477;
			border-radius:
                16px;
			border-bottom:
                1px solid #482477;
			border-right:
                2px solid #e68a00;

    box-shadow:
        0 5px 18px
        rgba(
            15,
            23,
            42,
            0.06
        );
}


.page-heading h2 {

    color:
        var(--primary);

    font-size: 22px;

    line-height: 1.2;

    margin-bottom: 6px;
}


.page-heading p {

    color:
        var(--muted);

    font-size: 14px;
}


.subject-count {

    color:
        var(--muted);

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}


/* =====================================================
   SUBJECT GRID
===================================================== */

.subject-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


/* =====================================================
   SUBJECT CARD
===================================================== */

.subject-card {

    background:
        var(--white);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    padding: 24px;

    box-shadow:
        var(--shadow);

    display: flex;

    flex-direction: column;

    min-height: 250px;

    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease,

        border-color 0.2s ease;
}


.subject-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-hover);

    border-color:
        #d7c8ea;
}


/* =====================================================
   CARD TOP
===================================================== */

.subject-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.subject-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--primary-light);

    border-radius: 14px;

    font-size: 27px;
}


.question-label {

    padding: 6px 9px;

    background:
        var(--orange-light);

    color:
        var(--orange);

    border-radius: 8px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}


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

.subject-card h3 {

    color:
        var(--primary);

    font-size: 19px;

    margin-bottom: 8px;
}


.subject-card p {

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.65;

    flex: 1;

    margin-bottom: 20px;
}


/* =====================================================
   CARD BUTTON / LINK
===================================================== */

.subject-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 10px;

    border-radius: 7px;

    background: #f7f4fb;

    border: 1px solid #e2d8ef;

    color: #482477;

    font-size: 11px;

    font-weight: 600;

    transition: .2s;
}


.subject-link span {

    transition:
        transform 0.2s ease;
}


.subject-card:hover
.subject-link:hover {

    background: #482477;

    border-color: #482477;

    color: #ffffff;
}


/* =====================================================
   NO RESULTS
===================================================== */

.no-results {

    display: none;

    background:
        var(--white);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    padding: 40px;

    text-align: center;

    color:
        var(--muted);

    margin-top: 20px;
}


.no-results strong {

    display: block;

    color:
        var(--primary);

    font-size: 18px;

    margin-bottom: 6px;
}


/* =====================================================
   PREPARATION TIP
===================================================== */

.tip {

    margin-top: 35px;

    padding: 20px 22px;

    border-radius:
        var(--radius);

    background:
        var(--primary-light);

    border:
        1px solid #ddd1ef;

    display: flex;

    align-items: flex-start;

    gap: 15px;
}


.tip-icon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--white);

    border-radius: 10px;

    font-size: 20px;
}


.tip h3 {

    color:
        var(--primary);

    font-size: 16px;

    margin-bottom: 3px;
}


.tip p {

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.6;
}


/* =====================================================
   PREPARE SMARTER
===================================================== */

.smart-section {

    padding:
        1px 0 20px;
}


.smart-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


.smart-card {

    background:
        var(--white);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    padding: 24px;

    text-align: center;

    box-shadow:
        var(--shadow);

    transition:
        all 0.2s ease;
}


.smart-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-hover);
}


.smart-icon {

    width: 58px;

    height: 58px;

    margin:
        0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--primary-light);

    border-radius: 15px;

    font-size: 27px;
}


.smart-card h3 {

    color:
        var(--primary);

    font-size: 18px;

    margin-bottom: 7px;
}


.smart-card p {

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 15px;
}


.smart-link {

    color:
        var(--orange);

    font-size: 13px;

    font-weight: 800;
}


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

.footer {

    background:
        var(--primary-dark);

    color:
        #ffffff;

    padding:
        55px 0 25px;
}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap: 35px;

    padding-bottom: 40px;
}


.footer h3 {

    color:
        #ffffff;

    font-size: 18px;

    margin-bottom: 13px;
}


.footer h4 {

    color:
        #ffffff;

    font-size: 15px;

    margin-bottom: 13px;
}


.footer p {

    color:
        #d8d2e5;

    font-size: 13px;

    line-height: 1.7;

    max-width: 330px;
}


.footer ul {

    list-style: none;
}


.footer li {

    margin-bottom: 8px;
}


.footer a {

    color:
        #d8d2e5;

    font-size: 13px;

    transition:
        color 0.2s ease;
}


.footer a:hover {

    color:
        #ffffff;
}


.footer-bottom {

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    padding-top: 20px;

    text-align: center;

    color:
        #c7bfd8;

    font-size: 12px;
}


/* =====================================================
   RESPONSIVE - 1000px
===================================================== */

@media (max-width: 1000px) {

    .nav-links a {

        padding:
            8px 9px;

        font-size: 13px;
    }


    .subject-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .smart-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .footer-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =====================================================
   RESPONSIVE - 760px
===================================================== */

@media (max-width: 760px) {

    .nav {

        min-height: 65px;
    }


    .menu-btn {

        display: block;
    }


    .nav-links {

        display: none;

        position: absolute;

        top: 65px;

        left: 0;

        right: 0;

        background:
            var(--white);

        border-bottom:
            1px solid var(--border);

        box-shadow:
            var(--shadow);

        padding: 12px;

        flex-direction: column;

        align-items: stretch;

        gap: 3px;
    }


    .nav-links.show {

        display: flex;
    }


    .nav-links a {

        padding:
            12px 14px;
    }


    .lab-hero-content {

        min-height: auto;

        padding:
            45px 0 70px;

        flex-direction: column;

        align-items: flex-start;
    }


    .lab-hero-icon {

        width: 50px;
				height: 50px;

				font-size: 25px;
    }


    .hero-text h1 {

        font-size: 38px;
    }


    .lab-tools {

        margin-top: 10px;
    }


    .lab-search {

        width: 100%;
    }


    .questions-main {

        padding-top: 50px;
    }


    .page-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }


    .subject-grid {

        grid-template-columns:
            1fr;
    }


    .smart-grid {

        grid-template-columns:
            1fr;
    }


    .footer-grid {

        grid-template-columns:
            1fr;
    }

}


/* =====================================================
   RESPONSIVE - 480px
===================================================== */

@media (max-width: 480px) {

    .container {

        width:
            min(92%, 1180px);
    }


    .brand-name {

        font-size: 18px;
    }


    .brand-logo {

        width: 39px;

        height: 39px;
    }


    .hero-text h1 {

        font-size: 32px;
    }


    .hero-description {

        font-size: 14px;
    }


    .lab-search {

        min-height: 56px;

        padding:
            7px 10px;

        border-radius: 14px;
    }


    .search-icon {

        width: 38px;

        height: 38px;

        border-radius: 10px;

        font-size: 15px;
    }


    .lab-search input {

        padding:
            10px 9px;

        font-size: 13px;
    }


    .search-clear {

        width: 31px;

        height: 31px;

        font-size: 19px;
    }


    .subject-card {

        padding: 20px;
    }


    .tip {

        padding: 17px;
    }

}
	.mcq-section-head {
            text-align: center;
			margin-top: 15px;
            margin-bottom: 15px;
        }


        .mcq-section-head h2 {
            margin: 0;

            color: #482477;

            font-size: 27px;
        }


        .mcq-section-head p {
            margin: 6px auto 0;

            max-width: 680px;

            color: #64748b;

            font-size: 13px;
        }



        /* =================================================
           LECTURE NOTES HERO
        ================================================= */

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

.mcq-hero {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--mcq-purple),
            var(--mcq-purple-dark)
        );

    color: #ffffff;

    overflow: hidden;

	padding-top:15px;

	padding-bottom:15px;
}


.mcq-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -130px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);
}


.mcq-hero-inner {
    position: relative;
    z-index: 1;

    max-width: 1180px;

    margin: 0 auto;

    padding: 0px 0px 0px;
}


.mcq-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 12px;

    padding: 7px 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.10);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.mcq-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: 36px;

    line-height: 1.2;

    font-weight: 800;
}


.mcq-hero h1 span {
    color: #ffb52e;
}


.mcq-hero-description {
    

    margin: 10px 0 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 15px;

    line-height: 1.65;
}


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

.mcq-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
}


.mcq-meta-item {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 13px;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.10);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;
}
        /* =================================================
           HERO VISUAL
        ================================================= */

        .mcq-visual {
            display: flex;

            justify-content: center;
        }


        .mcq-dashboard {
            width: 100%;

            max-width: 350px;

            padding: 18px;

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

            border:
                1px solid
                rgba(255,255,255,.15);

            border-radius: 20px;

            backdrop-filter: blur(10px);

            box-shadow:
                0 18px 50px
                rgba(0,0,0,.16);
        }


        .mcq-dashboard-top {
            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 15px;
        }


        .mcq-dashboard-title {
            font-size: 13px;

            font-weight: 700;
        }


        .mcq-live {
            font-size: 10px;

            padding: 4px 8px;

            border-radius: 20px;

            background:
                rgba(255,255,255,.1);
        }


        .mcq-question-box {
            background: #fff;

            color: #1e293b;

            border-radius: 12px;

            padding: 15px;
        }


        .mcq-question-number {
            color: #482477;

            font-size: 10px;

            font-weight: 800;

            margin-bottom: 6px;
        }


        .mcq-question {
            font-size: 13px;

            line-height: 1.5;

            font-weight: 700;

            margin-bottom: 11px;
        }


        .mcq-option {
            display: flex;

            gap: 8px;

            padding: 7px 8px;

            margin-top: 5px;

            background: #f6f7fa;

            border-radius: 6px;

            font-size: 10px;

            color: #64748b;
        }


        .mcq-option b {
            color: #482477;
        }


        /* =================================================
           STAT STRIP
        ================================================= */

        .mcq-stat-strip {
            width: min(1050px,92%);

            margin:
                -22px auto 0;

            position: relative;

            z-index: 5;

            display: grid;

            grid-template-columns:
                repeat(4,1fr);

            gap: 10px;
        }


        .mcq-stat {
            background: #fff;

            border:
                1px solid
                #e2e8f0;

            border-radius: 12px;

            padding: 15px;

            display: flex;

            align-items: center;

            gap: 11px;

            box-shadow:
                0 6px 20px
                rgba(15,23,42,.06);
        }


        .mcq-stat-icon {
            width: 38px;
            height: 38px;

            display: flex;

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

            border-radius: 9px;

            background: #f4eff9;

            font-size: 19px;
        }


        .mcq-stat strong {
            display: block;

            color: #482477;

            font-size: 18px;

            line-height: 1.1;
        }


        .mcq-stat small {
            color: #64748b;

            font-size: 10px;
        }


        /* =================================================
           LIBRARY
        ================================================= */

        .mcq-library {
            padding:
                30px 0 70px;

            background: #f1f2f6;
        }


        .mcq-library-inner {
            width: min(1100px,92%);

            margin: auto;
        }


        .mcq-section-head {
            text-align: center;

            margin-bottom: 25px;
        }


        .mcq-section-head h2 {
            margin: 0;

            color: #482477;

            font-size: 27px;
        }


        .mcq-section-head p {
            margin: 6px auto 0;

            max-width: 680px;

            color: #64748b;

            font-size: 13px;
        }


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

        .mcq-search-wrap {
            max-width: 750px;

            margin: 0 auto 22px;

            position: relative;
        }


        .mcq-search {
            width: 100%;

            box-sizing: border-box;

            padding:
                15px 52px 15px 18px;

            border:
                2px solid
                #d8dce5;

            border-radius: 12px;

            background: #fff;

            color: #1e293b;

            font-size: 14px;

            outline: none;

            box-shadow:
                0 4px 16px
                rgba(15,23,42,.04);

            transition: .2s;
        }


        .mcq-search:focus {
            border-color: #482477;

            box-shadow:
                0 0 0 4px
                rgba(72,36,119,.07);
        }


        .mcq-search-icon {
            position: absolute;

            right: 18px;

            top: 50%;

            transform:
                translateY(-50%);

            font-size: 18px;

            color: #482477;
        }


        /* =================================================
           FILTER CHIPS
        ================================================= */

        .mcq-filters {
            display: flex;

            justify-content: center;

            flex-wrap: wrap;

            gap: 7px;

            margin-bottom: 38px;
        }


        .mcq-filter {
            border:
                1px solid
                #d8dce5;

            background: #fff;

            color: #475569;

            border-radius: 30px;

            padding: 7px 13px;

            font-size: 11px;

            font-weight: 700;

            cursor: pointer;

            transition: .2s;
        }


        .mcq-filter:hover {
            border-color: #482477;

            color: #482477;
        }


        .mcq-filter.active {
            background: #482477;

            border-color: #482477;

            color: #fff;
        }


        /* =================================================
           SUBJECT BLOCK
        ================================================= */

        .mcq-subject {
			padding-top: 1px;

            margin-bottom: 25px;

            background: #fff;

            border:
                1px solid
                #e2e8f0;

            border-radius: 16px;

            overflow: hidden;

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

            
        }


        .mcq-subject-head {
            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 13px;

            padding: 14px 18px;

            background: #ffffff;

           border-top:
                5px solid #e68a00;

            border-left:
                4px solid #482477;
			border-radius:
                16px;
			border-bottom:
                1px solid #482477;
			border-right:
                2px solid #e68a00;

            box-shadow:
                0 5px 18px
                rgba(15,23,42,.06);
        }


        .mcq-subject-icon {
            width: 45px;
            height: 45px;

            flex-shrink: 0;

            display: flex;

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

            border-radius: 12px;

            background: #f4eff9;

            font-size: 22px;
        }


        .mcq-subject-info {
            flex: 1;

            min-width: 0;

            margin-left: 12px;
        }


        .mcq-subject-info h2 {
            margin: 0;

            color: #482477;

            font-size: 20px;

            line-height: 1.25;

            font-weight: 800;
        }


        .mcq-subject-info h3 {
            margin: 0;

            color: #1e293b;

            font-size: 16px;
        }


        .mcq-subject-info p {
            margin: 2px 0 0;

            color: #64748b;

            font-size: 11px;
        }


        .mcq-count {
            flex-shrink: 0;

            padding: 5px 9px;

            background: #f5f1fa;

            color: #482477;

            border-radius: 20px;

            font-size: 10px;

            font-weight: 800;
        }


        /* =================================================
           RESOURCE GRID
        ================================================= */

        .mcq-resource-grid {
            display: grid;

            grid-template-columns:
                repeat(3,1fr);

            gap: 10px;

            padding: 15px;
        }


        .mcq-resource {
            position: relative;

            display: flex;

            flex-direction: column;

            padding: 15px;

            border:
                1px solid
                #e5e8ee;

            border-radius: 11px;

            background: #fff;

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


        .mcq-resource:hover {
            transform:
                translateY(-3px);

            border-color:
                #cbb9dc;

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


        .mcq-resource-top {
            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 8px;

            margin-bottom: 12px;
        }


        .mcq-resource-icon {
            width: 32px;
            height: 32px;

            display: flex;

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

            border-radius: 8px;

            background: #f5f2f8;

            font-size: 15px;
        }


        .mcq-unit {
            color: #64748b;

            background: #f3f4f7;

            padding: 4px 7px;

            border-radius: 20px;

            font-size: 9px;

            font-weight: 800;
        }


        .mcq-resource h4 {
            margin: 0;

            min-height: 41px;

            color: #1e293b;

            font-size: 13px;

            line-height: 1.55;
        }


        .mcq-resource-bottom {
            margin-top: 14px;
        }


        .mcq-view {
            display: flex;

            align-items: center;

            justify-content: space-between;

            text-decoration: none;

            padding: 8px 10px;

            border-radius: 7px;

            background: #f7f4fb;

            border: 1px solid #d0c1e6;

            color: #482477;

            font-size: 11px;

            font-weight: 600;

            transition: .2s;
        }


        .mcq-view:hover {
            background: #482477;

            border-color: #482477;

            color: #ffffff;
        }


        .mcq-view-arrow {
            font-size: 14px;
        }


        /* =================================================
           EMPTY STATE
        ================================================= */

        .mcq-empty {
            display: none;

            text-align: center;

            padding: 45px 20px;

            background: #fff;

            border-radius: 15px;

            border:
                1px solid
                #e2e8f0;
        }


        .mcq-empty-icon {
            font-size: 35px;

            margin-bottom: 8px;
        }


        .mcq-empty h3 {
            margin: 0;

            color: #482477;

            font-size: 17px;
        }


        .mcq-empty p {
            margin: 5px 0 0;

            color: #64748b;

            font-size: 12px;
        }


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

        @media (max-width: 950px) {

            .mcq-hero-inner {
                grid-template-columns: 1fr;
            }

            .mcq-visual {
                display: none;
            }

            .mcq-resource-grid {
                grid-template-columns:
                    repeat(2,1fr);
            }

        }


        @media (max-width: 700px) {

            .mcq-hero-inner {
                padding:
                    42px 0 38px;
            }

            .mcq-stat-strip {
                grid-template-columns:
                    repeat(2,1fr);

                margin-top: -15px;
            }

            .mcq-resource-grid {
                grid-template-columns: 1fr;
            }

            .mcq-library {
                padding-top: 45px;
            }

            .mcq-section-head h2 {
                font-size: 23px;
            }

            .mcq-subject-head {
                padding: 14px;
            }

        }


        @media (max-width: 480px) {

            .mcq-hero h1 {
                font-size: 30px;
            }

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

            .mcq-stat-strip {
                grid-template-columns: 1fr 1fr;

                gap: 7px;
            }

            .mcq-stat {
                padding: 11px;
            }

            .mcq-stat-icon {
                width: 32px;
                height: 32px;

                font-size: 16px;
            }

            .mcq-stat strong {
                font-size: 15px;
            }

            .mcq-stat small {
                font-size: 9px;
            }

            .mcq-subject-info h3,
            .mcq-subject-info h2 {
                font-size: 14px;
            }

            .mcq-count {
                display: none;
            }

        }


        /* =================================================
           MOBILE MENU FIX
        ================================================= */

        @media (max-width: 760px) {

            .header .nav {
                position: relative;
            }

            .header .nav-links {
                display: none;
            }

            .header .nav-links.open {
                display: flex;

                position: absolute;

                top: calc(100% + 1px);

                left: 0;

                right: 0;

                width: 100%;

                box-sizing: border-box;

                flex-direction: column;

                align-items: stretch;

                gap: 0;

                padding: 8px;

                margin: 0;

                background: #fff;

                border:
                    1px solid #e2e8f0;

                border-top: 0;

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

                border-radius:
                    0 0 12px 12px;

                z-index: 9999;
            }

            .header .nav-links.open li {
                width: 100%;
            }

            .header .nav-links.open a {
                display: block;

                width: 100%;

                box-sizing: border-box;

                padding: 11px 13px;

                border-radius: 8px;
            }

            .header .nav-links.open a:hover {
                background: #f5f1fa;
            }

            .menu-btn {
                position: relative;

                z-index: 10000;

                cursor: pointer;
            }

        }



        /* =================================================
           BLOG
        ================================================= */

        .blog-library {

            padding:
                20px 0 70px;

            background:
                #f1f2f6;

        }


        .blog-container {

            width:
                min(1120px,92%);

            margin:
                auto;

        }


        /* =================================================
           STATISTICS
        ================================================= */

        .blog-stat-strip {

            width:
                min(1050px,92%);

            margin:
                -22px auto 0;

            position:
                relative;

            z-index:
                5;

            display:
                grid;

            grid-template-columns:
                repeat(3,1fr);

            gap:
                10px;

        }


        .blog-stat {

            background:
                #ffffff;

            border:
                1px solid #e2e8f0;

            border-radius:
                12px;

            padding:
                15px;

            display:
                flex;

            align-items:
                center;

            gap:
                11px;

            box-shadow:
                0 6px 20px
                rgba(15,23,42,.06);

        }


        .blog-stat-icon {

            width:
                40px;

            height:
                40px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                9px;

            background:
                #f4eff9;

            font-size:
                19px;

        }


        .blog-stat strong {

            display:
                block;

            color:
                #482477;

            font-size:
                18px;

            line-height:
                1.1;

        }


        .blog-stat small {

            color:
                #64748b;

            font-size:
                10px;

        }


        /* =================================================
           SECTION HEADER
        ================================================= */

        .blog-section-head {

            text-align:
                center;

            margin-bottom:
                25px;

        }


        .blog-section-head h2 {

            margin:
                0;

            color:
                #482477;

            font-size:
                28px;

        }


        .blog-section-head p {

            margin:
                7px auto 0;

            max-width:
                700px;

            color:
                #64748b;

            font-size:
                13px;

            line-height:
                1.6;

        }


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

        .blog-search-wrap {

            max-width:
                760px;

            margin:
                0 auto 25px;

            position:
                relative;

        }


        .blog-search {

            width:
                100%;

            box-sizing:
                border-box;

            padding:
                15px 52px 15px 18px;

            border:
                2px solid #d8dce5;

            border-radius:
                12px;

            background:
                #ffffff;

            color:
                #1e293b;

            font-size:
                14px;

            outline:
                none;

        }


        .blog-search:focus {

            border-color:
                #482477;

            box-shadow:
                0 0 0 4px
                rgba(72,36,119,.07);

        }


        .blog-search-icon {

            position:
                absolute;

            right:
                18px;

            top:
                50%;

            transform:
                translateY(-50%);

            color:
                #482477;

            font-size:
                18px;

        }


        /* =================================================
           FILTERS
        ================================================= */

        .blog-filters {

            display:
                flex;

            justify-content:
                center;

            flex-wrap:
                wrap;

            gap:
                7px;

            margin-bottom:
                30px;

        }


        .blog-filter {

            border:
                1px solid #d8dce5;

            background:
                #ffffff;

            color:
                #475569;

            border-radius:
                30px;

            padding:
                7px 14px;

            font-size:
                11px;

            font-weight:
                700;

            cursor:
                pointer;

        }


        .blog-filter.active {

            background:
                #482477;

            border-color:
                #482477;

            color:
                #ffffff;

        }


        /* =================================================
           BLOG GROUP
        ================================================= */

        .blog-group {
			
			padding-top: 1px;
            margin-bottom: 28px;

            background:
                #ffffff;

            border:
                1px solid #e2e8f0;

            border-radius:
                16px;

            overflow:
                hidden;

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

        }


        .blog-group-head {

            display:
                flex;

            align-items:
                center;

            gap:
                14px;
			
            padding:
                18px 20px;

            background:
                #ffffff;

            border-top:
                5px solid #e68a00;

            border-left:
                4px solid #482477;
			border-radius:
                16px;
			border-bottom:
                1px solid #482477;
			border-right:
                2px solid #e68a00;
			box-shadow:
                0 5px 18px
                rgba(15,23,42,.045);
        }


        .blog-group-icon {

            width:
                48px;

            height:
                48px;

            flex-shrink:
                0;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                12px;

            background:
                #f4eff9;

            font-size:
                23px;

        }


        .blog-group-info {

            flex:
                1;

            min-width:
                0;

        }


        .blog-group-info h2 {

            margin:
                0;

            color:
                #482477;

            font-size:
                20px;

            line-height:
                1.3;

        }


        .blog-group-info p {

            margin:
                4px 0 0;

            color:
                #64748b;

            font-size:
                11px;

        }


        .blog-group-count {

            flex-shrink:
                0;

            padding:
                6px 10px;

            border-radius:
                20px;

            background:
                #f5f1fa;

            color:
                #482477;

            font-size:
                11px;

            font-weight:
                600;

        }


        /* =================================================
           BLOG GRID
        ================================================= */

        .blog-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3,1fr);

            gap:
                11px;

            padding:
                16px;

        }


        .blog-card {

            display:
                flex;

            flex-direction:
                column;

            min-height:
                175px;

            padding:
                16px;

            background:
                #ffffff;

            border:
                1px solid #e5e8ee;

            border-radius:
                12px;

            transition:
                .2s;

        }


        .blog-card:hover {

            transform:
                translateY(-3px);

            border-color:
                #cbb9dc;

            box-shadow:
                0 8px 22px
                rgba(15,23,42,.07);

        }


        .blog-card-top {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                8px;

            margin-bottom:
                12px;

        }


        .blog-card-icon {

            width:
                32px;

            height:
                32px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                8px;

            background:
                #f5f2f8;

            font-size:
                15px;

        }


        .blog-label {

            color:
                #5e6c82;

            background:
                #fcf3c5;

            padding:
                4px 8px;

            border-radius:
                20px;

            font-size:
                10px;

            font-weight:
                600;

        }


        .blog-card h3 {

            margin:
                0;

            color:
                #1e293b;

            font-size:
                13px;

            line-height:
                1.55;

        }


        .blog-card-bottom {

            margin-top:
                auto;

            padding-top:
                14px;

        }


        .blog-view {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            padding:
                9px 11px;

            text-decoration:
                none;

            border-radius:
                7px;

            background:
                #f7f4fb;

            border:
                1px solid #e2d8ef;

            color:
                #482477;

            font-size:
                11px;

            font-weight:
                600;

            transition:
                .2s;

        }


        .blog-view:hover {

            background:
                #482477;

            border-color:
                #482477;

            color:
                #ffffff;

        }


        /* =================================================
           EMPTY
        ================================================= */

        .blog-empty {

            display:
                none;

            text-align:
                center;

            padding:
                45px 20px;

            background:
                #ffffff;

            border:
                1px solid #e2e8f0;

            border-radius:
                15px;

        }


        .blog-empty h3 {

            margin:
                0;

            color:
                #482477;

        }


        .blog-empty p {

            margin:
                5px 0 0;

            color:
                #64748b;

        }


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

        @media (max-width:950px) {

            .blog-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }

        }


        @media (max-width:700px) {

            .blog-stat-strip {

                grid-template-columns:
                    repeat(3,1fr);

                margin-top:
                    -15px;

            }

            .blog-grid {

                grid-template-columns:
                    1fr;

            }

        }


        @media (max-width:760px) {

            .header .nav {

                position:
                    relative;

            }


            .header .nav-links {

                display:
                    none;

            }


            .header .nav-links.open {

                display:
                    flex;

                position:
                    absolute;

                top:
                    calc(100% + 1px);

                left:
                    0;

                right:
                    0;

                width:
                    100%;

                flex-direction:
                    column;

                gap:
                    0;

                padding:
                    8px;

                margin:
                    0;

                background:
                    #ffffff;

                border:
                    1px solid #e2e8f0;

                border-top:
                    0;

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

                border-radius:
                    0 0 12px 12px;

                z-index:
                    9999;

            }


            .header .nav-links.open li {

                width:
                    100%;

            }


            .header .nav-links.open a {

                display:
                    block;

                width:
                    100%;

                padding:
                    11px 13px;

                border-radius:
                    8px;

            }


            .menu-btn {

                position:
                    relative;

                z-index:
                    10000;

            }

        }



        /*
        ============================================================
        Lecture Notes Display
        Existing display-page design preserved
        ============================================================
        */

        .notes-display-page {
            max-width: 1200px;
            margin: 0 auto;
            padding: 25px 20px 40px;
        }

        .notes-display-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .notes-display-header h1 {
            margin: 0 0 8px;
            color: #482477;
            font-size: 28px;
            font-weight: 700;
        }

        .notes-display-header p {
            margin: 0;
            color: #666;
            font-size: 14px;
        }

        .notes-viewer {
            width: 100%;
            height: 78vh;
            min-height: 600px;
            border: 1px solid #d7dfeb;
            border-radius: 12px;
            overflow: hidden;
            background: #f7f9fc;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        }

        .notes-viewer iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .notes-error {
            max-width: 700px;
            margin: 50px auto;
            padding: 25px;
            text-align: center;
            border-radius: 12px;
            background: #fff4f4;
            border: 1px solid #f0caca;
            color: #a33;
        }

        .notes-error h2 {
            margin-top: 0;
            color: #b42318;
        }

        .notes-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .notes-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 11px 18px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .notes-btn-primary {
            background: #482477;
            color: #fff;
        }

        .notes-btn-primary:hover {
            background: #35195d;
            color: #fff;
        }

        .notes-btn-secondary {
            background: #eef3fa;
            color: #482477;
            border: 1px solid #cbd6e6;
        }

        .notes-btn-secondary:hover {
            background: #e2e9f3;
        }

        @media (max-width: 768px) {

            .notes-display-page {
                padding: 20px 12px 30px;
            }

            .notes-display-header h1 {
                font-size: 22px;
            }

            .notes-viewer {
                height: 70vh;
                min-height: 450px;
            }

        }

  


/* =========================================================
   C DISPLAY PAGE
========================================================= */

.c-display-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 20px 50px;
}


/* =========================================================
   LAYOUT
========================================================= */

.c-display-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}


/* =========================================================
   SIDE MENU
========================================================= */

.c-display-sidebar {
    position: sticky;
    top: 85px;

    background: #ffffff;
    border: 1px solid #e1e6ef;
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 4px 15px rgba(0,0,0,.05);
}


.c-sidebar-heading {
    background: #482477;
    color: #ffffff;

    padding: 17px 18px;

    font-size: 18px;
    font-weight: 700;
}


.c-sidebar-subtitle {
    padding: 11px 17px;

    font-size: 13px;

    color: #777;

    border-bottom: 1px solid #eeeeee;
}


.c-display-menu {
    padding: 8px;
}


.c-display-menu a {
    display: flex;
    align-items: center;

    gap: 9px;

    text-decoration: none;

    color: #333333;

    padding: 10px 11px;

    margin: 2px 0;

    border-radius: 8px;

    font-size: 13px;

    line-height: 1.4;

    transition: .2s;
}


.c-display-menu a:hover {

    background: #f1eafb;

    color: #482477;
}


.c-display-menu a.active {

    background: #482477;

    color: #ffffff;

    font-weight: 600;
}


.c-menu-number {

    min-width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    background: #f1eafb;

    color: #482477;

    font-size: 11px;

    font-weight: 700;
}


.c-display-menu a.active .c-menu-number {

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

    color: #ffffff;
}


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

.c-display-main {
    min-width: 0;
}


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

.c-display-hero {

    background:
        linear-gradient(
            135deg,
            #482477,
            #68409b
        );

    color: #ffffff;

    border-radius: 16px;

    padding: 27px 30px;

    margin-bottom: 20px;

    position: relative;

    overflow: hidden;
}


.c-display-hero::after {

    content: "</>";

    position: absolute;

    right: 25px;

    bottom: -24px;

    font-size: 110px;

    font-weight: 800;

    opacity: .07;
}


.c-display-eyebrow {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    opacity: .85;

    margin-bottom: 7px;
}


.c-display-hero h1 {

    margin: 0;

    font-size: 30px;

    line-height: 1.25;

    position: relative;

    z-index: 1;
}


.c-display-hero h1 span {

    color: #f3b63f;
}


.c-display-hero p {

    margin: 8px 0 0;

    color: #f3eef9;

    font-size: 14px;

    position: relative;

    z-index: 1;
}


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

.c-content-card {

    background: #ffffff;

    border: 1px solid #e1e6ef;

    border-radius: 14px;

    padding: 28px 30px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.04);
}


/* =========================================================
   ARTICLE TYPOGRAPHY
========================================================= */

.c-article {

    color: #333333;

    font-size: 15px;

    line-height: 1.75;
}


.c-article h1 {

    color: #482477;

    font-size: 28px;

    margin: 0 0 18px;

    padding-bottom: 12px;

    border-bottom: 2px solid #eee;
}


.c-article h2 {

    color: #482477;

    font-size: 23px;

    margin-top: 28px;

    margin-bottom: 12px;
}


.c-article h3 {

    color: #5a3385;

    font-size: 19px;

    margin-top: 23px;

    margin-bottom: 9px;
}


.c-article h4 {

    color: #482477;

    font-size: 17px;

    margin-top: 20px;
}


.c-article p {

    margin: 10px 0;
}


.c-article ul,
.c-article ol {

    padding-left: 25px;

    margin: 12px 0;
}


.c-article li {

    margin-bottom: 6px;
}


/* =========================================================
   TABLES
========================================================= */

.c-article table {

    width: 100%;

    border-collapse: collapse;

    margin: 20px 0;

    font-size: 14px;

    overflow: hidden;
}


.c-article th {

    background: #482477;

    color: #ffffff;

    padding: 11px;

    text-align: left;
}


.c-article td {

    border: 1px solid #dfe3ea;

    padding: 10px;

    vertical-align: top;
}


.c-article tr:nth-child(even) td {

    background: #f8f6fb;
}


/* =========================================================
   CODE
========================================================= */

.c-article pre {

    background: #1e1e1e;

    color: #eeeeee;

    padding: 18px;

    border-radius: 10px;

    overflow-x: auto;

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size: 14px;

    line-height: 1.6;

    margin: 17px 0;
}


.c-article code {

    font-family:
        Consolas,
        Monaco,
        monospace;
}


.c-article p code,
.c-article li code {

    background: #f1eafb;

    color: #482477;

    padding: 2px 6px;

    border-radius: 4px;
}


/* =========================================================
   IMAGES
========================================================= */

.c-article img {

    max-width: 100%;

    height: auto;

    display: block;

    margin: 18px auto;

    border-radius: 8px;
}


.c-image-caption {

    text-align: center;

    color: #777;

    font-size: 13px;

    margin-top: -10px;
}


/* =========================================================
   NOTE / IMPORTANT
========================================================= */

.c-note {

    background: #fff8e8;

    border-left: 4px solid #e68a00;

    padding: 12px 15px;

    margin: 18px 0;

    border-radius: 6px;
}


.c-important {

    background: #f1eafb;

    border-left: 4px solid #482477;

    padding: 12px 15px;

    margin: 18px 0;

    border-radius: 6px;
}


/* =========================================================
   TOPIC NAVIGATION
========================================================= */

.c-topic-navigation {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 22px;
}


.c-nav-button {

    display: flex;

    flex-direction: column;

    text-decoration: none;

    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid #dfe3ea;

    border-radius: 10px;

    transition: .2s;
}


.c-nav-button:hover {

    border-color: #482477;

    background: #f8f5fb;

    transform: translateY(-2px);
}


.c-nav-label {

    color: #888;

    font-size: 12px;

    margin-bottom: 4px;
}


.c-nav-title {

    color: #482477;

    font-size: 14px;

    font-weight: 700;
}


.c-nav-next {

    text-align: right;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.c-display-menu-toggle {

    display: none;

    width: 100%;

    border: 0;

    background: #482477;

    color: #ffffff;

    padding: 13px 15px;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    margin-bottom: 12px;
}


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

.c-menu-search {

    padding: 10px 8px 8px;
}


.c-menu-search input {

    width: 100%;

    box-sizing: border-box;

    padding: 10px 11px;

    border: 1px solid #d7dce5;

    border-radius: 7px;

    font-size: 13px;

    outline: none;
}


.c-menu-search input:focus {

    border-color: #482477;
}


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

@media (max-width: 950px) {

    .c-display-layout {
        grid-template-columns: 1fr;
    }

    .c-display-menu-toggle {
        display: block;
    }

    .c-display-sidebar {
        position: static;
        width: 100%;
        display: none;
    }

    .c-display-sidebar.show-mobile {
        display: block;
    }

    .c-display-menu {
        display: block;
        max-height: 430px;
        overflow-y: auto;
    }

    .c-menu-search {
        display: block;
    }
}


@media (max-width: 650px) {

    .c-display-page {

        padding: 15px 10px 35px;
    }


    .c-display-hero {

        padding: 23px 19px;
    }


    .c-display-hero h1 {

        font-size: 25px;
    }


    .c-content-card {

        padding: 20px 17px;
    }


    .c-article {

        font-size: 14px;
    }


    .c-article h1 {

        font-size: 23px;
    }


    .c-article h2 {

        font-size: 20px;
    }


    .c-topic-navigation {

        grid-template-columns: 1fr;
    }


    .c-nav-next {

        text-align: left;
    }

}


 /* =====================================================
           ROOT
        ===================================================== */

        :root {

            --primary: #482477;
            --primary-dark: #35185f;
            --primary-light: #f3effa;

            --orange: #e68a00;
            --orange-light: #fff4df;

            --text: #1e293b;
            --muted: #64748b;

            --bg: #f5f6fa;
            --white: #ffffff;

            --border: #e2e8f0;

            --green: #15803d;
            --green-light: #ecfdf3;

            --radius: 16px;

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

            --shadow-hover:
                0 15px 35px rgba(72, 36, 119, 0.13);
        }


        /* =====================================================
           QUESTION MAIN
        ===================================================== */

        .questions-main {

            padding:
                30px 0 70px;
        }


        /* =====================================================
           COURSE INFO
        ===================================================== */

        .course-info {

            display:
                grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap:
                14px;

            margin-bottom:
                35px;
        }


        .info-box {

            background:
                var(--white);

            border:
                1px solid var(--border);

            border-radius:
                13px;

            padding:
                16px 18px;
        }


        .info-label {

            display:
                block;

            color:
                var(--muted);

            font-size:
                11px;

            font-weight:
                700;

            text-transform:
                uppercase;

            letter-spacing:
                .5px;

            margin-bottom:
                4px;
        }


        .info-value {

            color:
                var(--primary);

            font-size:
                15px;

            font-weight:
                800;
        }


        /* =====================================================
           PAGE HEADING
        ===================================================== */

        .page-heading {

            display:
                flex;

            align-items:
                flex-end;

            justify-content:
                space-between;

            gap:
                20px;

            margin-bottom:
                25px;
        }


        .page-heading h2 {

            color:
                var(--primary);

            font-size:
                27px;

            line-height:
                1.2;

            margin-bottom:
                6px;
        }


        .page-heading p {

            color:
                var(--muted);

            font-size:
                14px;
        }


        /* =====================================================
           UNIT NAVIGATION
        ===================================================== */

        .unit-nav {

            display:
                flex;

            gap:
                8px;

            flex-wrap:
                wrap;

            margin-bottom:
                32px;
        }


        .unit-nav a {

            padding:
                8px 13px;

            background:
                var(--white);

            border:
                1px solid var(--border);

            border-radius:
                9px;

            color:
                var(--primary);

            font-size:
                13px;

            font-weight:
                700;

            transition:
                all .2s ease;
        }


        .unit-nav a:hover {

            background:
                var(--primary);

            color:
                var(--white);

            border-color:
                var(--primary);
        }


        /* =====================================================
           UNIT SECTION
        ===================================================== */

        .unit-section {

            background:
                var(--white);

            border:
                1px solid var(--border);

            border-radius:
                var(--radius);

            margin-bottom:
                25px;

            overflow:
                hidden;

            box-shadow:
                var(--shadow);
			padding-top:1px;
        }


        .unit-header {

            display: flex;

            align-items: center;

            margin-bottom: 13px;

            padding: 14px 18px;

            background: #ffffff;

            border-top:
                5px solid #e68a00;
			border-left:
                4px solid #482477;
			border-bottom:
                1px solid #482477;
            border-radius: 15px;

            box-shadow:
                0 5px 18px
                rgba(
                    15,
                    23,
                    42,
                    0.06
                );
        }


        .unit-number {
			margin-right: 20px;
            width:
                100px;

            height:
                48px;

            flex-shrink:
                0;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                var(--primary);

            color:
                var(--white);

            border-radius:
                12px;

            font-size:
                16px;

            font-weight:
                800;
        }


        .unit-header h3 {

            color:
                var(--primary);

            font-size:
                19px;

            margin-bottom:
                2px;
        }


        .unit-header p {

            color:
                var(--muted);

            font-size:
                13px;
        }


        /* =====================================================
           QUESTION COLUMNS
        ===================================================== */

        .question-columns {

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                18px;

            padding:
                22px;
        }


        .question-block {

            border:
                1px solid var(--border);

            border-radius:
                13px;

            overflow:
                hidden;

            background:
                #ffffff;
        }


        .question-block-header {

            padding:
                13px 15px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            border-bottom:
                1px solid var(--border);
        }


        .question-block-header h4 {

            color:
                var(--primary);

            font-size:
                15px;
        }


        .question-count {

            min-width:
                28px;

            height:
                24px;

            padding:
                0 7px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                7px;

            background:
                var(--orange-light);

            color:
                var(--orange);

            font-size:
                11px;

            font-weight:
                800;
        }


        .question-list {

            list-style:
                none;

            padding:
                6px 0;
        }


        .question-list li {

            position:
                relative;

            padding:
                10px 13px 10px 38px;

            border-bottom:
                1px solid #f1f3f6;

            color:
                var(--text);

            font-size:
                13px;

            line-height:
                1.55;
        }


        .question-list li:last-child {

            border-bottom:
                0;
        }


        .question-list li::before {

            content:
                counter(question);

            counter-increment:
                question;

            position:
                absolute;

            left:
                13px;

            top:
                10px;

            width:
                20px;

            height:
                20px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                var(--primary-light);

            color:
                var(--primary);

            border-radius:
                6px;

            font-size:
                10px;

            font-weight:
                800;
        }


        .question-list {

            counter-reset:
                question;
        }


        /* =====================================================
           PREPARATION TIP
        ===================================================== */

        .tip {

            margin-top:
                35px;

            padding:
                20px 22px;

            border-radius:
                var(--radius);

            background:
                var(--primary-light);

            border:
                1px solid #ddd1ef;

            display:
                flex;

            align-items:
                flex-start;

            gap:
                15px;
        }


        .tip-icon {

            width:
                40px;

            height:
                40px;

            flex-shrink:
                0;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                var(--white);

            border-radius:
                10px;

            font-size:
                20px;
        }


        .tip h3 {

            color:
                var(--primary);

            font-size:
                16px;

            margin-bottom:
                3px;
        }


        .tip p {

            color:
                var(--muted);

            font-size:
                14px;

            line-height:
                1.6;
        }



        /* =====================================================
           NO SEARCH RESULTS
        ===================================================== */

        .no-results {

            display:
                none;

            background:
                var(--white);

            border:
                1px solid var(--border);

            border-radius:
                var(--radius);

            padding:
                40px;

            text-align:
                center;

            color:
                var(--muted);

            margin-bottom:
                25px;
        }


        .no-results strong {

            display:
                block;

            color:
                var(--primary);

            font-size:
                18px;

            margin-bottom:
                5px;
        }


        /* =====================================================
           RESPONSIVE - 1000px
        ===================================================== */

        @media (max-width: 1000px) {

            .nav-links a {

                padding:
                    8px 9px;

                font-size:
                    13px;
            }


            .course-info {

                grid-template-columns:
                    repeat(2, 1fr);
            }


            .question-columns {

                grid-template-columns:
                    1fr;
            }


            .footer-grid {

                grid-template-columns:
                    repeat(2, 1fr);
            }

        }


        /* =====================================================
           RESPONSIVE - 760px
        ===================================================== */

        @media (max-width: 760px) {

            .nav {

                min-height:
                    65px;
            }


            .menu-btn {

                display:
                    block;
            }


            .nav-links {

                display:
                    none;

                position:
                    absolute;

                top:
                    65px;

                left:
                    0;

                right:
                    0;

                background:
                    var(--white);

                border-bottom:
                    1px solid var(--border);

                box-shadow:
                    var(--shadow);

                padding:
                    12px;

                flex-direction:
                    column;

                align-items:
                    stretch;

                gap:
                    3px;
            }


            .nav-links.show {

                display:
                    flex;
            }


            .nav-links a {

                padding:
                    12px 14px;
            }


            .course-hero-content {

                min-height:
                    auto;

                padding:
                    45px 0 70px;

                flex-direction:
                    column;

                align-items:
                    flex-start;
            }


            .hero-icon {

                display:
                    none;
            }


            .hero-text h1 {

                font-size:
                    38px;
            }


            .tools {

                margin-top:
                    -30px;
            }


            .questions-main {

                padding-top:
                    50px;
            }


            .page-heading {

                align-items:
                    flex-start;

                flex-direction:
                    column;

                gap:
                    8px;
            }


            .course-info {

                grid-template-columns:
                    1fr 1fr;
            }


            .footer-grid {

                grid-template-columns:
                    1fr;
            }

        }


        /* =====================================================
           RESPONSIVE - 480px
        ===================================================== */

        @media (max-width: 480px) {

            .container {

                width:
                    92%;
            }


            .brand-name {

                font-size:
                    18px;
            }


            .brand-logo {

                width:
                    39px;

                height:
                    39px;
            }


            .hero-text h1 {

                font-size:
                    32px;
            }


            .hero-description {

                font-size:
                    14px;
            }


            .search-box {

                min-height:
                    56px;

                padding:
                    7px 10px;

                border-radius:
                    14px;
            }


            .search-icon {

                width:
                    38px;

                height:
                    38px;

                border-radius:
                    10px;

                font-size:
                    15px;
            }


            .search-box input {

                padding:
                    10px 9px;

                font-size:
                    13px;
            }


            .search-clear {

                width:
                    31px;

                height:
                    31px;

                font-size:
                    19px;
            }


            .course-info {

                grid-template-columns:
                    1fr;
            }


            .unit-header {

                padding:
                    17px;
            }


            .unit-header h3 {

                font-size:
                    17px;
            }


            .question-columns {

                padding:
                    15px;
            }


            .question-list li {

                font-size:
                    12.5px;
            }


            .tip {

                padding:
                    17px;
            }

        }