/* =========================================================
   BRUDER KLAUS SCHOOL
   CURRICULUM & COURSE OF STUDIES
   PREMIUM DESIGN SYSTEM
   ========================================================= */

.bks-curriculum {

    --bks-navy: #0D0B61;
    --bks-white: #ffffff;
    --bks-gold: #F4CE14;

    --bks-text: #30304a;
    --bks-muted: #707086;

    position: relative;

    overflow: hidden;

    padding: 70px 20px 80px;

    color: var(--bks-text);

    background-color: #ffffff;

    /* Same premium background language */
    background-size: 32px 32px;

    font-family:
        "Poppins",
        "Segoe UI",
        Arial,
        sans-serif;
}


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

.bks-curriculum-container {

    position: relative;

    z-index: 2;

    width: min(1180px, 100%);

    margin: 0 auto;
}


/* =========================================================
   BACKGROUND ORBS
   ========================================================= */

.bks-curriculum-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;
}

.bks-curriculum-orb-one {

    width: 430px;
    height: 430px;

    top: 120px;
    left: -230px;

    background:
        radial-gradient(
            circle,
            rgba(244,206,20,0.16),
            rgba(244,206,20,0.035) 48%,
            transparent 72%
        );
}

.bks-curriculum-orb-two {

    width: 500px;
    height: 500px;

    right: -280px;
    bottom: 200px;

    background:
        radial-gradient(
            circle,
            rgba(13,11,97,0.12),
            rgba(13,11,97,0.025) 50%,
            transparent 72%
        );
}


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

.bks-curriculum-heading {

    max-width: 850px;

    margin: 0 auto 75px;

    text-align: center;
}

.bks-curriculum-eyebrow {

    display: inline-flex;

    padding: 7px 16px;

    margin-bottom: 15px;

    border-radius: 50px;

    border: 1px solid rgba(244,206,20,0.55);

    background:
        rgba(244,206,20,0.10);

    color: var(--bks-navy);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.bks-curriculum-heading h2 {

    margin: 0;

    color: var(--bks-navy);

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.bks-curriculum-heading h2 span {

    color: var(--bks-gold);
}

.bks-curriculum-heading-line {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin: 21px auto;
}

.bks-curriculum-heading-line span {

    width: 45px;

    height: 1px;

    background:
        rgba(13,11,97,0.25);
}

.bks-curriculum-heading-line i {

    display: block;

    width: 9px;
    height: 9px;

    background:
        var(--bks-gold);

    transform: rotate(45deg);
}

.bks-curriculum-heading p {

    max-width: 730px;

    margin: 0 auto;

    color: var(--bks-muted);

    font-size: 15px;

    line-height: 1.85;
}


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

.bks-curriculum-intro {

    display: grid;

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

    align-items: center;

    gap: 75px;

    margin-bottom: 125px;
}


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

.bks-curriculum-image-area {

    position: relative;

    padding: 17px;
}

.bks-curriculum-image-card {

    position: relative;

    height: 510px;

    overflow: hidden;

    border-radius: 28px;

    background: var(--bks-navy);

    box-shadow:
        0 28px 75px rgba(13,11,97,0.18);

    transform:
        perspective(1000px)
        rotateX(0)
        rotateY(0);

    transition:
        transform 0.3s ease;
}

.bks-curriculum-image-card img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.bks-curriculum-image-card:hover img {

    transform: scale(1.07);

    filter:
        saturate(1.08)
        contrast(1.04);
}


/* Image overlay */

.bks-curriculum-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(13,11,97,0.20) 55%,
            rgba(13,11,97,0.94) 100%
        );

    z-index: 1;
}


/* =========================================================
   SHINE
   ========================================================= */

.bks-curriculum-image-shine {

    position: absolute;

    top: -80%;
    left: -130%;

    width: 70%;
    height: 220%;

    z-index: 4;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.40),
            transparent
        );

    transform: rotate(20deg);

    animation:
        bksCurriculumShine 5s ease-in-out infinite;

    pointer-events: none;
}

@keyframes bksCurriculumShine {

    0% {
        left: -130%;
    }

    45%,
    100% {
        left: 155%;
    }
}


/* Image content */

.bks-curriculum-image-content {

    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    z-index: 5;

    color: #ffffff;
}

.bks-curriculum-image-content span {

    display: block;

    margin-bottom: 8px;

    color: var(--bks-gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.bks-curriculum-image-content strong {

    display: block;

    font-size: 27px;

    line-height: 1.25;
}


/* Gold frame */

.bks-curriculum-image-frame {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 85%;
    height: 85%;

    border-right:
        2px solid rgba(244,206,20,0.75);

    border-bottom:
        2px solid rgba(244,206,20,0.75);

    border-radius:
        0 25px 25px 0;

    pointer-events: none;
}


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

.bks-curriculum-small-label {

    display: inline-flex;

    margin-bottom: 15px;

    padding: 7px 14px;

    border-radius: 50px;

    background:
        rgba(13,11,97,0.055);

    color: var(--bks-navy);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.bks-curriculum-intro-content h3 {

    margin: 0 0 22px;

    color: var(--bks-navy);

    font-size: clamp(29px,3vw,43px);

    line-height: 1.2;

    font-weight: 700;
}

.bks-curriculum-intro-content h3 strong {

    color: var(--bks-gold);
}

.bks-curriculum-intro-content p {

    margin: 0 0 17px;

    color: var(--bks-muted);

    font-size: 14px;

    line-height: 1.85;
}

.bks-curriculum-intro-content p strong {

    color: var(--bks-navy);
}


/* Academic standard */

.bks-curriculum-standard-box {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 27px;

    padding: 18px 20px;

    border-left:
        4px solid var(--bks-gold);

    border-radius:
        0 16px 16px 0;

    background:
        linear-gradient(
            135deg,
            rgba(244,206,20,0.13),
            rgba(255,255,255,0.9)
        );

    box-shadow:
        0 12px 35px rgba(13,11,97,0.055);
}

.bks-curriculum-standard-icon {

    width: 47px;
    height: 47px;

    flex: 0 0 47px;

    display: flex;

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

    border-radius: 13px;

    background: var(--bks-navy);

    color: var(--bks-gold);

    font-size: 20px;
}

.bks-curriculum-standard-box span {

    display: block;

    margin-bottom: 4px;

    color: var(--bks-navy);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;
}

.bks-curriculum-standard-box strong {

    color: #3c3c4e;

    font-size: 13px;
}


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

.bks-curriculum-stage {

    margin-bottom: 120px;
}


/* Stage heading */

.bks-curriculum-stage-heading {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-bottom: 35px;
}

.bks-curriculum-stage-number {

    width: 70px;
    height: 70px;

    flex: 0 0 70px;

    display: flex;

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

    border-radius: 20px;

    background: var(--bks-navy);

    color: var(--bks-gold);

    font-size: 20px;

    font-weight: 800;

    box-shadow:
        0 12px 30px rgba(13,11,97,0.15);
}

.bks-curriculum-stage-heading span {

    color: var(--bks-gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.bks-curriculum-stage-heading h3 {

    margin: 4px 0;

    color: var(--bks-navy);

    font-size: clamp(28px,3vw,42px);

    line-height: 1.2;
}

.bks-curriculum-stage-heading p {

    margin: 0;

    color: var(--bks-muted);

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   PUBLICATION
   ========================================================= */

.bks-curriculum-stage-description {

    margin-bottom: 35px;
}

.bks-curriculum-publication {

    padding: 27px 30px;

    border-radius: 20px;

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

    border:
        1px solid rgba(13,11,97,0.09);

    box-shadow:
        0 15px 40px rgba(13,11,97,0.055);
}

.bks-curriculum-publication span {

    display: block;

    margin-bottom: 7px;

    color: var(--bks-gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.bks-curriculum-publication strong {

    display: block;

    margin-bottom: 8px;

    color: var(--bks-navy);

    font-size: 19px;
}

.bks-curriculum-publication p {

    max-width: 850px;

    margin: 0;

    color: var(--bks-muted);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   PRE-PRIMARY SUBJECT GRID
   ========================================================= */

.bks-curriculum-subject-grid {

    display: grid;

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

    gap: 17px;
}

.bks-curriculum-subject {

    position: relative;

    min-height: 175px;

    padding: 25px;

    overflow: hidden;

    border-radius: 18px;

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

    border:
        1px solid rgba(13,11,97,0.08);

    box-shadow:
        0 10px 30px rgba(13,11,97,0.045);

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

.bks-curriculum-subject::after {

    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    right: -35px;
    bottom: -35px;

    border-radius: 50%;

    background:
        rgba(244,206,20,0.12);
}

.bks-curriculum-subject:hover {

    transform: translateY(-7px);

    border-color:
        rgba(244,206,20,0.55);

    box-shadow:
        0 20px 45px rgba(13,11,97,0.10);
}

.bks-curriculum-subject > span {

    display: block;

    margin-bottom: 20px;

    color: var(--bks-gold);

    font-size: 10px;

    font-weight: 800;
}

.bks-curriculum-subject h4 {

    margin: 0 0 9px;

    color: var(--bks-navy);

    font-size: 16px;
}

.bks-curriculum-subject p {

    margin: 0;

    color: var(--bks-muted);

    font-size: 12px;

    line-height: 1.65;
}


/* =========================================================
   PRIMARY SCHOOL INTRO
   ========================================================= */

.bks-curriculum-primary-intro {

    display: grid;

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

    gap: 20px;

    align-items: stretch;

    margin-bottom: 30px;
}

.bks-curriculum-grade-badge {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

    background:
        var(--bks-navy);

    color: #ffffff;

    box-shadow:
        0 15px 35px rgba(13,11,97,0.14);
}

.bks-curriculum-grade-badge strong {

    color: var(--bks-gold);

    font-size: 30px;

    line-height: 1;
}

.bks-curriculum-grade-badge span {

    margin-top: 8px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


/* =========================================================
   PRIMARY CURRICULUM GRID
   ========================================================= */

.bks-curriculum-primary-grid {

    display: grid;

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

    gap: 18px;
}

.bks-curriculum-large-card {

    position: relative;

    min-height: 225px;

    padding: 28px;

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    border:
        1px solid rgba(13,11,97,0.08);

    box-shadow:
        0 12px 32px rgba(13,11,97,0.045);

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

.bks-curriculum-large-card::before {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -50px;
    bottom: -50px;

    border-radius: 50%;

    background:
        rgba(244,206,20,0.11);
}

.bks-curriculum-large-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(244,206,20,0.55);

    box-shadow:
        0 22px 50px rgba(13,11,97,0.10);
}

.bks-curriculum-card-number {

    margin-bottom: 20px;

    color: var(--bks-gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}

.bks-curriculum-large-card h4 {

    margin: 0 0 12px;

    color: var(--bks-navy);

    font-size: 19px;
}

.bks-curriculum-large-card p {

    margin: 0;

    color: var(--bks-muted);

    font-size: 12px;

    line-height: 1.75;
}

.bks-curriculum-large-card ul {

    margin: 0;

    padding: 0;

    list-style: none;
}

.bks-curriculum-large-card li {

    position: relative;

    padding-left: 17px;

    margin-bottom: 7px;

    color: var(--bks-muted);

    font-size: 11px;

    line-height: 1.45;
}

.bks-curriculum-large-card li::before {

    content: "";

    position: absolute;

    left: 0;
    top: 7px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--bks-gold);
}


/* =========================================================
   ACADEMIC PHILOSOPHY
   ========================================================= */

.bks-curriculum-philosophy {

    position: relative;

    display: flex;

    align-items: center;

    gap: 25px;

    margin: 20px 0 85px;

    padding: 55px 60px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #0D0B61,
            #171575,
            #0D0B61
        );

    box-shadow:
        0 28px 75px rgba(13,11,97,0.18);
}

.bks-curriculum-philosophy::after {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -140px;
    top: -160px;

    border-radius: 50%;

    border:
        1px solid rgba(244,206,20,0.18);

    box-shadow:
        0 0 0 70px rgba(244,206,20,0.025),
        0 0 0 140px rgba(244,206,20,0.018);
}

.bks-curriculum-philosophy-icon {

    position: relative;

    z-index: 2;

    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: flex;

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

    border-radius: 18px;

    background: rgba(244,206,20,0.12);

    border:
        1px solid rgba(244,206,20,0.35);

    color: var(--bks-gold);

    font-size: 25px;
}

.bks-curriculum-philosophy-content {

    position: relative;

    z-index: 2;
}

.bks-curriculum-philosophy-content > span {

    display: block;

    margin-bottom: 7px;

    color: var(--bks-gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.bks-curriculum-philosophy-content h3 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(27px,3vw,39px);
}

.bks-curriculum-philosophy-content h3 strong {

    color: var(--bks-gold);
}

.bks-curriculum-philosophy-content p {

    max-width: 850px;

    margin: 0;

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

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   FINAL
   ========================================================= */

.bks-curriculum-final {

    max-width: 900px;

    margin: 0 auto;

    padding: 55px 40px;

    text-align: center;

    border-radius: 28px;

    border:
        1px solid rgba(244,206,20,0.35);

    background:
        linear-gradient(
            135deg,
            rgba(244,206,20,0.12),
            rgba(255,255,255,0.9)
        );

    box-shadow:
        0 20px 60px rgba(13,11,97,0.055);
}

.bks-curriculum-final-symbol {

    width: 52px;
    height: 52px;

    display: flex;

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

    margin: 0 auto 20px;

    border-radius: 15px;

    background: var(--bks-navy);

    color: var(--bks-gold);

    font-size: 21px;
}

.bks-curriculum-final h3 {

    margin: 0 0 15px;

    color: var(--bks-navy);

    font-size: clamp(25px,3vw,38px);

    line-height: 1.3;
}

.bks-curriculum-final h3 span {

    color: var(--bks-gold);
}

.bks-curriculum-final p {

    max-width: 700px;

    margin: 0 auto;

    color: var(--bks-muted);

    font-size: 13px;

    line-height: 1.8;
}


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

.bks-curriculum-reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.bks-curriculum-reveal.bks-curriculum-visible {

    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 1000px) {

    .bks-curriculum {

        padding: 80px 20px 90px;
    }

    .bks-curriculum-intro {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .bks-curriculum-image-area {

        max-width: 650px;

        width: 100%;

        margin: 0 auto;
    }

    .bks-curriculum-intro-content {

        max-width: 760px;

        margin: 0 auto;
    }

    .bks-curriculum-subject-grid {

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

    .bks-curriculum-primary-grid {

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

}


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

@media (max-width: 700px) {

    .bks-curriculum {

        padding:
            65px 16px 75px;

        background-size:
            25px 25px;
    }

    .bks-curriculum-heading {

        margin-bottom: 50px;
    }

    .bks-curriculum-heading h2 {

        font-size: 39px;
    }

    .bks-curriculum-heading p {

        font-size: 13px;
    }

    .bks-curriculum-intro {

        margin-bottom: 85px;
    }

    .bks-curriculum-image-area {

        padding: 8px;
    }

    .bks-curriculum-image-card {

        height: 390px;

        border-radius: 22px;
    }

    .bks-curriculum-image-content {

        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .bks-curriculum-image-content strong {

        font-size: 21px;
    }

    .bks-curriculum-intro-content h3 {

        font-size: 29px;
    }

    .bks-curriculum-intro-content p {

        font-size: 13px;
    }


    /* Stage */

    .bks-curriculum-stage {

        margin-bottom: 85px;
    }

    .bks-curriculum-stage-heading {

        gap: 16px;
    }

    .bks-curriculum-stage-number {

        width: 55px;
        height: 55px;

        flex: 0 0 55px;

        border-radius: 16px;

        font-size: 16px;
    }

    .bks-curriculum-stage-heading h3 {

        font-size: 28px;
    }


    /* Pre-primary */

    .bks-curriculum-subject-grid {

        grid-template-columns: 1fr;

        gap: 13px;
    }

    .bks-curriculum-subject {

        min-height: auto;
    }


    /* Primary */

    .bks-curriculum-primary-intro {

        grid-template-columns: 1fr;
    }

    .bks-curriculum-grade-badge {

        min-height: 120px;
    }

    .bks-curriculum-primary-grid {

        grid-template-columns: 1fr;

        gap: 13px;
    }

    .bks-curriculum-large-card {

        min-height: auto;
    }


    /* Philosophy */

    .bks-curriculum-philosophy {

        flex-direction: column;

        align-items: flex-start;

        padding: 40px 25px;

        margin-bottom: 70px;

        border-radius: 24px;
    }

    .bks-curriculum-philosophy-content h3 {

        font-size: 29px;
    }


    /* Final */

    .bks-curriculum-final {

        padding: 40px 22px;

        border-radius: 22px;
    }

    .bks-curriculum-final h3 {

        font-size: 26px;
    }

    .bks-curriculum-final p {

        font-size: 12px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bks-curriculum *,
    .bks-curriculum *::before,
    .bks-curriculum *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .bks-curriculum-reveal {

        opacity: 1;

        transform: none;
    }
}