/* =========================================================
   BRUDER KLAUS SCHOOL
   WHY BRUDER KLAUS
   PREMIUM SECTION
   ========================================================= */


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

.bks-why {

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

    --bks-blue-soft: #F5F8FC;
    --bks-text: #566174;
    --bks-border: rgba(13, 11, 97, 0.09);

    position: relative;

    width: 100%;

    overflow: hidden;

    isolation: isolate;

    padding: 70px 0 80px;

    background: #FFFFFF;

    color: var(--bks-navy);

}


/* =========================================================
   AMBIENT BACKGROUND GLOW
   ========================================================= */

.bks-why__ambient {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -5;

    filter: blur(2px);

}


.bks-why__ambient--one {

    width: 650px;

    height: 650px;

    left: -370px;

    top: 170px;

    background:
        radial-gradient(
            circle,
            rgba(26, 98, 171, 0.08),
            transparent 68%
        );

}


.bks-why__ambient--two {

    width: 600px;

    height: 600px;

    right: -350px;

    bottom: 50px;

    background:
        radial-gradient(
            circle,
            rgba(244, 206, 20, 0.10),
            transparent 67%
        );

}


/* =========================================================
   DECORATIVE RINGS
   ========================================================= */

.bks-why__decor-ring {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -4;

}


.bks-why__decor-ring--one {

    width: 390px;

    height: 390px;

    left: -270px;

    top: 65px;

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

}


.bks-why__decor-ring--two {

    width: 260px;

    height: 260px;

    right: -155px;

    bottom: 270px;

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

}


/* =========================================================
   DOT PATTERN
   ========================================================= */

.bks-why__dot-pattern {

    position: absolute;

    width: 190px;

    height: 150px;

    opacity: 0.45;

    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(13,11,97,0.17) 1.5px,
            transparent 1.5px
        );

    background-size: 17px 17px;

    z-index: -3;

}


.bks-why__dot-pattern--top {

    right: 3%;

    top: 45px;

}


.bks-why__dot-pattern--bottom {

    left: 4%;

    bottom: 50px;

    opacity: 0.22;

}


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

.bks-why__container {

    width: min(
        1440px,
        calc(100% - 70px)
    );

    margin: 0 auto;

}


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

.bks-why__intro {

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(500px, 1.08fr);

    gap: 90px;

    align-items: center;

    margin-bottom: 85px;

}


/* =========================================================
   INTRO COPY
   ========================================================= */

.bks-why__intro-copy {

    max-width: 600px;

}


.bks-why__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 17px;

    margin-bottom: 21px;

    border-radius: 50px;

    color: var(--bks-navy);

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

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

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


.bks-why__eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--bks-gold);

    box-shadow:
        0 0 0 4px rgba(244,206,20,0.16),
        0 0 13px rgba(244,206,20,0.45);

}


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

.bks-why__title {

    margin: 0;

    color: var(--bks-navy);

    font-size:
        clamp(50px, 5.2vw, 78px);

    line-height: 0.99;

    font-weight: 900;

    letter-spacing: -3.5px;

}


.bks-why__title span {

    display: block;

    color: #155EA8;

}


.bks-why__title-line {

    width: 72px;

    height: 5px;

    margin-top: 25px;

    border-radius: 10px;

    background: var(--bks-gold);

}


.bks-why__intro-text {

    max-width: 560px;

    margin: 27px 0 0;

    color: var(--bks-text);

    font-size: 16px;

    line-height: 1.85;

}


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

.bks-why__hero-image-wrapper {

    position: relative;

    min-height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.bks-why__hero-orbit {

    position: absolute;

    width: 430px;

    height: 430px;

    right: 0;

    border-radius: 50%;

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

}


.bks-why__hero-orbit::before {

    content: "";

    position: absolute;

    width: 11px;

    height: 11px;

    right: 57px;

    top: 43px;

    border-radius: 50%;

    background: var(--bks-gold);

    box-shadow:
        0 0 0 8px rgba(244,206,20,0.13);

}


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

.bks-why__hero-image {

    position: relative;

    width: min(
        630px,
        100%
    );

    height: 440px;

    overflow: hidden;

    border-radius: 30px;

    background: var(--bks-navy);

    box-shadow:
        0 35px 70px rgba(13,11,97,0.18),
        0 10px 25px rgba(13,11,97,0.09);

    transform:
        rotate(1deg);

    transition:
        transform 0.6s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.6s ease;

}


.bks-why__hero-image:hover {

    transform:
        rotate(0deg)
        translateY(-7px);

    box-shadow:
        0 45px 90px rgba(13,11,97,0.23);

}


.bks-why__hero-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.9s ease;

}


.bks-why__hero-image:hover img {

    transform:
        scale(1.055);

}


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

.bks-why__hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to top,
            rgba(13,11,97,0.83),
            rgba(13,11,97,0.05) 65%
        );

}


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

.bks-why__hero-caption {

    position: absolute;

    z-index: 5;

    left: 32px;

    right: 32px;

    bottom: 30px;

    color: #FFFFFF;

}


.bks-why__caption-label {

    display: block;

    margin-bottom: 8px;

    color: var(--bks-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


.bks-why__hero-caption strong {

    display: block;

    max-width: 450px;

    font-size:
        clamp(21px, 2.2vw, 30px);

    line-height: 1.25;

    font-weight: 800;

}


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

.bks-why__hero-badge {

    position: absolute;

    z-index: 10;

    left: -24px;

    top: 42px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 15px;

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

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

    box-shadow:
        0 18px 40px rgba(13,11,97,0.14);

    backdrop-filter: blur(12px);

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

    animation:
        bksWhyFloat 4s ease-in-out infinite;

}


.bks-why__badge-icon {

    width: 37px;

    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--bks-navy);

    background: var(--bks-gold);

    font-size: 18px;

}


.bks-why__hero-badge strong {

    display: block;

    color: var(--bks-navy);

    font-size: 18px;

    line-height: 1;

}


.bks-why__hero-badge small {

    display: block;

    margin-top: 3px;

    color: #737987;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .4px;

}


@keyframes bksWhyFloat {

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

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

}


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

.bks-why__image-shine {

    position: absolute;

    z-index: 8;

    top: 0;

    left: -130%;

    width: 65%;

    height: 100%;

    pointer-events: none;

    transform: skewX(-22deg);

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

    transition:
        left 0.95s ease;

}


.bks-why__hero-image:hover
.bks-why__image-shine,

.bks-why__card:hover
.bks-why__image-shine {

    left: 150%;

}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.bks-why__features {

    display: grid;

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

    gap: 25px;

}


/* =========================================================
   FEATURE CARD
   ========================================================= */

.bks-why__card {

    position: relative;

    overflow: hidden;

    min-width: 0;

    border-radius: 23px;

    background: #FFFFFF;

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

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

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;

}


.bks-why__card:hover {

    transform:
        translateY(-9px);

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

    box-shadow:
        0 25px 55px rgba(13,11,97,0.12);

}


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

.bks-why__card-number {

    position: absolute;

    z-index: 10;

    top: 14px;

    right: 14px;

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--bks-navy);

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

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 7px 18px rgba(244,206,20,0.25);

}


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

.bks-why__card-image {

    position: relative;

    height: 225px;

    overflow: hidden;

    background: #EAF0F7;

}


.bks-why__card-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;

}


.bks-why__card:hover
.bks-why__card-image img {

    transform:
        scale(1.08);

}


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

.bks-why__card-image-overlay {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(13,11,97,0.28),
            transparent 65%
        );

}


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

.bks-why__card-content {

    padding: 25px 25px 27px;

}


.bks-why__card-mini {

    margin-bottom: 9px;

    color: #8A8F9A;

    font-size: 9px;

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.bks-why__card-content h3 {

    min-height: 59px;

    margin: 0;

    color: var(--bks-navy);

    font-size: 23px;

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -0.7px;

}


.bks-why__card-content h3 span {

    display: block;

    color: #155EA8;

}


.bks-why__card-content p {

    min-height: 92px;

    margin: 17px 0 19px;

    color: var(--bks-text);

    font-size: 12.5px;

    line-height: 1.72;

}


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

.bks-why__card-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--bks-navy);

    text-decoration: none;

    font-size: 11px;

    font-weight: 900;

    transition:
        gap 0.3s ease,
        color 0.3s ease;

}


.bks-why__card-link span {

    color: var(--bks-gold);

    font-size: 19px;

    line-height: 1;

}


.bks-why__card-link:hover {

    gap: 14px;

    color: #155EA8;

}


/* =========================================================
   CLOSING AREA
   ========================================================= */

.bks-why__closing {

    position: relative;

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 75px;

    padding: 0px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            110deg,
            #0D0B61,
            #121B76
        );

    box-shadow:
        0 25px 60px rgba(13,11,97,0.16);

}


.bks-why__closing::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    right: -100px;

    top: -140px;

    border-radius: 50%;

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

}


/* =========================================================
   CLOSING MARK
   ========================================================= */

.bks-why__closing-mark {

    flex: 0 0 auto;

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--bks-navy);

    background: var(--bks-gold);

    font-size: 23px;

}


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

.bks-why__closing-content {

    flex: 1;

}


.bks-why__closing-content h3 {

    margin: 0;

    color: #FFFFFF;

    font-size:
        clamp(20px, 2.2vw, 29px);

    line-height: 1.25;

    font-weight: 900;

}


.bks-why__closing-content h3 span {

    color: var(--bks-gold);

}


.bks-why__closing-content p {

    margin: 7px 0 0;

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

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================================
   CLOSING BUTTON
   ========================================================= */

.bks-why__closing-button {

    position: relative;

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-width: 175px;

    height: 52px;

    padding: 0 9px 0 21px;

    overflow: hidden;

    border-radius: 50px;

    color: var(--bks-navy);

    background: var(--bks-gold);

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;

    box-shadow:
        0 12px 25px rgba(244,206,20,0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.bks-why__closing-button:hover {

    color: var(--bks-navy);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 32px rgba(244,206,20,0.28);

}


.bks-why__closing-arrow {

    width: 35px;

    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    font-size: 19px;

}


.bks-why__button-shine {

    position: absolute;

    left: -120%;

    top: 0;

    width: 60%;

    height: 100%;

    pointer-events: none;

    transform: skewX(-22deg);

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

    animation:
        bksWhyButtonShine 4.5s ease-in-out infinite;

}


@keyframes bksWhyButtonShine {

    0% {
        left: -120%;
    }

    22% {
        left: 150%;
    }

    100% {
        left: 150%;
    }

}


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

[data-why-reveal],
[data-why-card] {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.2,.8,.2,1);

}


[data-why-reveal].bks-why-visible,
[data-why-card].bks-why-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   CARD STAGGER
   ========================================================= */

[data-why-card]:nth-child(1) {
    transition-delay: 0.05s;
}

[data-why-card]:nth-child(2) {
    transition-delay: 0.10s;
}

[data-why-card]:nth-child(3) {
    transition-delay: 0.15s;
}

[data-why-card]:nth-child(4) {
    transition-delay: 0.20s;
}

[data-why-card]:nth-child(5) {
    transition-delay: 0.25s;
}

[data-why-card]:nth-child(6) {
    transition-delay: 0.30s;
}

[data-why-card]:nth-child(7) {
    transition-delay: 0.35s;
}

[data-why-card]:nth-child(8) {
    transition-delay: 0.40s;
}

[data-why-card]:nth-child(9) {
    transition-delay: 0.45s;
}

[data-why-card]:nth-child(10) {
    transition-delay: 0.50s;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

    .bks-why__container {

        width: min(
            1540px,
            calc(100% - 100px)
        );

    }


    .bks-why__intro {

        gap: 110px;

    }


    .bks-why__hero-image {

        height: 475px;

    }


    .bks-why__card-image {

        height: 240px;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .bks-why {

        padding: 95px 0 105px;

    }


    .bks-why__container {

        width: calc(100% - 50px);

    }


    .bks-why__intro {

        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(420px, 1.15fr);

        gap: 55px;

    }


    .bks-why__hero-image {

        height: 390px;

    }


    .bks-why__hero-image-wrapper {

        min-height: 420px;

    }


    .bks-why__features {

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

        gap: 23px;

    }


    .bks-why__card-image {

        height: 235px;

    }

}


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

@media (max-width: 900px) {

    .bks-why {

        padding: 80px 0 90px;

    }


    .bks-why__container {

        width: min(
            720px,
            calc(100% - 40px)
        );

    }


    .bks-why__intro {

        grid-template-columns: 1fr;

        gap: 50px;

        margin-bottom: 65px;

    }


    .bks-why__intro-copy {

        max-width: 650px;

    }


    .bks-why__hero-image-wrapper {

        min-height: 420px;

    }


    .bks-why__hero-image {

        width: 100%;

        height: 420px;

    }


    .bks-why__features {

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

    }


    .bks-why__closing {

        align-items: flex-start;

    }

}


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

@media (max-width: 650px) {

    .bks-why {

        padding: 65px 0 75px;

    }


    .bks-why__container {

        width: calc(100% - 26px);

    }


    .bks-why__intro {

        gap: 30px;

        margin-bottom: 50px;

    }


    .bks-why__eyebrow {

        padding: 8px 13px;

        font-size: 8px;

        letter-spacing: 1.3px;

    }


    .bks-why__title {

        font-size: 47px;

        letter-spacing: -2.5px;

    }


    .bks-why__title-line {

        width: 58px;

        height: 4px;

        margin-top: 20px;

    }


    .bks-why__intro-text {

        margin-top: 21px;

        font-size: 13px;

        line-height: 1.75;

    }


    .bks-why__hero-image-wrapper {

        min-height: 320px;

    }


    .bks-why__hero-orbit {

        width: 290px;

        height: 290px;

        right: -30px;

    }


    .bks-why__hero-image {

        width: calc(100% - 12px);

        height: 320px;

        border-radius: 22px;

    }


    .bks-why__hero-badge {

        left: -5px;

        top: 20px;

        padding: 9px 12px;

        gap: 8px;

    }


    .bks-why__badge-icon {

        width: 31px;

        height: 31px;

        font-size: 15px;

    }


    .bks-why__hero-badge strong {

        font-size: 15px;

    }


    .bks-why__hero-badge small {

        font-size: 8px;

    }


    .bks-why__hero-caption {

        left: 20px;

        right: 20px;

        bottom: 21px;

    }


    .bks-why__hero-caption strong {

        font-size: 18px;

    }


    .bks-why__caption-label {

        font-size: 8px;

    }


    .bks-why__features {

        grid-template-columns: 1fr;

        gap: 19px;

    }


    .bks-why__card-image {

        height: 230px;

    }


    .bks-why__card-content {

        padding: 23px 21px 25px;

    }


    .bks-why__card-content h3 {

        min-height: auto;

        font-size: 24px;

    }


    .bks-why__card-content p {

        min-height: auto;

        font-size: 12.5px;

    }


    .bks-why__closing {

        flex-direction: column;

        gap: 17px;

        margin-top: 50px;

        padding: 25px 21px;

        border-radius: 21px;

    }


    .bks-why__closing-mark {

        width: 43px;

        height: 43px;

        font-size: 18px;

    }


    .bks-why__closing-content h3 {

        font-size: 22px;

    }


    .bks-why__closing-content p {

        font-size: 11px;

    }


    .bks-why__closing-button {

        width: 100%;

        min-width: 0;

    }

}


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

@media (max-width: 380px) {

    .bks-why__title {

        font-size: 41px;

    }


    .bks-why__hero-image {

        height: 290px;

    }


    .bks-why__hero-image-wrapper {

        min-height: 290px;

    }


    .bks-why__card-image {

        height: 210px;

    }


    .bks-why__card-number {

        width: 35px;

        height: 35px;

        top: 11px;

        right: 11px;

        font-size: 9px;

    }

}


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

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

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

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}