:root {

    --blue-950: #021128;
    --blue-900: #06245a;
    --blue-800: #07367f;
    --blue-700: #0757b9;
    --blue-600: #0876dc;
    --blue-500: #1295ee;

    --yellow: #ffd21c;
    --yellow-light: #ffe76a;

    --white: #ffffff;

    --font-heading: "Plus Jakarta Sans", sans-serif;
    --font-body: "DM Sans", sans-serif;

    --container: 1400px;
}




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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family: var(--font-body);

    color: var(--white);

    background: var(--blue-950);

    overflow-x: hidden;
}

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

button {
    font: inherit;
}




.school-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        backdrop-filter 0.4s ease;
}

.school-header.scrolled {

    background: rgba(2, 17, 40, 0.92);

    backdrop-filter: blur(18px);

    box-shadow:
        0 10px 45px rgba(0, 0, 0, 0.18);
}


.school-header-inner {

    width: min(
        var(--container),
        calc(100% - 50px)
    );

    height: 96px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}



.school-brand {

    width: 92px;
    height: 92px;

    position: relative;

    display: flex;

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

    z-index: 1002;
}

.school-brand img {

    width: 78px;
    height: 78px;

    object-fit: contain;

    position: relative;
    z-index: 3;

    filter:
        drop-shadow(
            0 8px 20px rgba(0, 0, 0, 0.22)
        );

    animation:
        schoolLogoPulse 3.5s ease-in-out infinite;
}


@keyframes schoolLogoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.055);
    }
}


.logo-pulse {

    position: absolute;

    width: 65px;
    height: 65px;

    border-radius: 50%;

    background: rgba(
        255,
        210,
        28,
        0.08
    );

    border:
        1px solid rgba(
            255,
            210,
            28,
            0.25
        );

    animation:
        logoRingPulse 3.5s ease-out infinite;
}


@keyframes logoRingPulse {

    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}




.school-nav {

    display: flex;

    align-items: center;

    gap: 5px;
}


.school-nav a {

    position: relative;

    padding: 12px 15px;

    border-radius: 100px;

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

    font-size: 0.82rem;

    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.school-nav a::after {

    content: "";

    position: absolute;

    left: 17px;
    right: 17px;

    bottom: 7px;

    height: 2px;

    background: var(--yellow);

    transform:
        scaleX(0);

    transform-origin: right;

    transition:
        transform 0.3s ease;
}


.school-nav a:hover {

    color: white;

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

    transform:
        translateY(-1px);
}


.school-nav a:hover::after,
.school-nav a.active::after {

    transform:
        scaleX(1);

    transform-origin: left;
}


.school-nav a.active {

    color: white;
}



.school-nav .staff-access {

    margin-left: 7px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--yellow);

    border:
        1px solid
        rgba(
            255,
            210,
            28,
            0.28
        );

    background:
        rgba(
            255,
            210,
            28,
            0.05
        );
}


.school-nav .staff-access::after {
    display: none;
}


.school-nav .staff-access:hover {

    color: var(--blue-950);

    background: var(--yellow);

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


.staff-access i {

    font-size: 0.7rem;
}




.school-menu-toggle {

    display: none;

    width: 46px;
    height: 46px;

    border: 0;

    border-radius: 50%;

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

    cursor: pointer;

    z-index: 1002;
}


.school-menu-toggle span {

    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    background: white;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


.school-menu-toggle.active span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.school-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}


.school-menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}




.school-hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--blue-950);

    border-bottom:
        7px solid
        var(--yellow);
}




.hero-background {

    position: absolute;

    inset: 0;

    background-image:
        url("../assets/sibanner.png");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    animation:
        heroBackgroundZoom 16s
        ease-in-out infinite alternate;
}


@keyframes heroBackgroundZoom {

    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.09);
    }
}



.school-hero-content {

    width: min(
        var(--container),
        calc(100% - 50px)
    );

    margin: auto;

    position: relative;

    z-index: 5;

    padding-top: 90px;

    animation:
        heroContentReveal
        1.1s
        0.2s
        both;
}


@keyframes heroContentReveal {

    from {

        opacity: 0;

        transform:
            translateY(35px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}




.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.hero-eyebrow span {

    width: 38px;
    height: 2px;

    background: var(--yellow);

    box-shadow:
        0 0 12px
        rgba(
            255,
            210,
            28,
            0.7
        );
}



.school-hero h1 {

    max-width: 800px;

    margin-top: 20px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            4rem,
            8vw,
            8rem
        );

    line-height: 0.93;

    letter-spacing:
        -0.075em;

    font-weight: 800;

    color: white;
}


.school-hero h1 span {

    display: block;

    color: var(--yellow);

    text-shadow:
        0 0 40px
        rgba(
            255,
            210,
            28,
            0.12
        );
}



.hero-motto {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 35px;
}


.motto-line {

    width: 55px;
    height: 3px;

    background:
        var(--yellow);

    box-shadow:
        0 0 15px
        rgba(
            255,
            210,
            28,
            0.45
        );
}


.hero-motto p {

    min-width: 330px;

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

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            0.9rem,
            1.3vw,
            1.15rem
        );

    font-weight: 600;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}



.hero-scroll {

    position: absolute;

    z-index: 6;

    right: 43px;

    bottom: 42px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

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

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.scroll-arrow {

    width: 34px;
    height: 34px;

    display: flex;

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

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

    border-radius: 50%;

    color: var(--yellow);

    animation:
        scrollBounce 2s
        ease-in-out
        infinite;
}


.scroll-arrow i {

    font-size: 0.7rem;
}


@keyframes scrollBounce {

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

    50% {
        transform:
            translateY(7px);
    }
}



@media (max-width: 1100px) {

    .school-nav {
        gap: 0;
    }

    .school-nav a {
        padding:
            10px 10px;

        font-size:
            0.74rem;
    }

    .school-nav .staff-access {
        margin-left: 4px;
    }
}


@media (max-width: 900px) {

    .school-header-inner {
        height: 82px;
    }

    .school-brand {
        width: 78px;
        height: 78px;
    }

    .school-brand img {
        width: 67px;
        height: 67px;
    }

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

    .school-nav {

        position: fixed;

        inset: 0;

        padding:
            120px 30px 40px;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 5px;

        background:
            linear-gradient(
                135deg,
                rgba(
                    2,
                    17,
                    40,
                    0.99
                ),
                rgba(
                    5,
                    46,
                    105,
                    0.98
                )
            );

        backdrop-filter:
            blur(20px);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-20px);

        transition:
            opacity 0.35s ease,
            visibility 0.35s ease,
            transform 0.35s ease;
    }

    .school-nav.open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }

    .school-nav a {

        padding:
            17px 20px;

        border-radius: 12px;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.07
            );

        font-size:
            1rem;
    }

    .school-nav a::after {
        display: none;
    }

    .school-nav .staff-access {
        margin:
            10px 0 0;
    }

    .school-hero-content {
        width:
            calc(100% - 40px);
    }

    .hero-scroll {
        right: 25px;
    }
}


@media (max-width: 600px) {

    .school-header-inner {
        width:
            calc(100% - 30px);
    }

    .school-hero {
        min-height:
            750px;
    }

    .school-hero::before {

        background:
            linear-gradient(
                90deg,
                rgba(
                    2,
                    17,
                    40,
                    0.95
                ),
                rgba(
                    2,
                    17,
                    40,
                    0.62
                )
            );
    }

    .school-hero-content {
        padding-top: 50px;
    }

    .hero-eyebrow {
        font-size:
            0.57rem;

        letter-spacing:
            0.15em;
    }

    .hero-eyebrow span {
        width: 28px;
    }

    .school-hero h1 {

        font-size:
            clamp(
                3.25rem,
                16vw,
                5rem
            );

        line-height:
            0.96;
    }

    .hero-motto {

        margin-top: 28px;

        gap: 11px;
    }

    .motto-line {
        width: 32px;
    }

    .hero-motto p {

        min-width: 0;

        white-space:
            normal;

        font-size:
            0.67rem;

        letter-spacing:
            0.12em;

        line-height:
            1.6;
    }

    .hero-scroll {
        display: none;
    }
}




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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}



.oasis-section {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #06204a;
}



.oasis-visual {
    position: relative;

    min-height: 760px;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 35px 50px 40px;

    display: grid;

    grid-template-columns:
        minmax(390px, 0.85fr)
        minmax(650px, 1.15fr);

    align-items: center;

    overflow: visible;
}




.oasis-background {
    position: absolute;
    inset: 0;

    background-image:
        url("../assets/caeli1.jpg");

    background-size: cover;
    background-position: center;

    opacity: 0.035;

    filter:
        grayscale(1)
        contrast(1.15);

    transform: scale(1.03);

    animation:
        oasisBackground 18s
        ease-in-out infinite alternate;
}


@keyframes oasisBackground {

    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.08);
    }
}


.oasis-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.98),
            rgba(255,255,255,0.94)
        );

    z-index: 1;
}


.oasis-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(10,110,210,0.075),
            transparent 35%
        );
}




.oasis-visual::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -220px;
    top: 40px;

    border-radius: 50%;

    background:
        rgba(9,117,220,0.035);

    border:
        1px solid
        rgba(9,117,220,0.07);

    z-index: 2;

    pointer-events: none;
}


.oasis-visual::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -90px;
    bottom: 40px;

    border-radius: 50%;

    background:
        rgba(255,210,28,0.055);

    z-index: 2;

    pointer-events: none;
}



.oasis-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 2;

    filter: blur(5px);
}


.oasis-glow-one {

    width: 280px;
    height: 280px;

    right: 18%;
    top: 20%;

    background:
        rgba(
            17,
            135,
            230,
            0.055
        );

    box-shadow:
        0 0 120px
        rgba(
            17,
            135,
            230,
            0.1
        );
}


.oasis-glow-two {

    width: 180px;
    height: 180px;

    right: 5%;
    bottom: 5%;

    background:
        rgba(
            255,
            210,
            28,
            0.05
        );
}



.oasis-intro {

    position: relative;

    z-index: 10;

    grid-column: 1;
    grid-row: 1;

    align-self: center;

    width: 100%;
    max-width: 560px;

    padding-right: 35px;

    text-align: left;
}


.section-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #1574c5;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.section-eyebrow span {

    width: 38px;
    height: 2px;

    background: #ffd21c;

    box-shadow:
        0 0 12px
        rgba(255,210,28,0.35);
}


.oasis-intro h2 {

    margin-top: 18px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3.2rem,
            5vw,
            5.5rem
        );

    line-height: 0.95;

    letter-spacing: -0.065em;

    font-weight: 850;

    color: #06204a;
}


.oasis-intro h2 span {

    display: block;

    margin-top: 8px;

    color: #0877d1;

    position: relative;
}


.oasis-intro h2 span::after {

    content: "";

    position: absolute;

    left: 2px;
    bottom: -8px;

    width: 70px;
    height: 5px;

    border-radius: 10px;

    background: #ffd21c;
}


.oasis-intro > p {

    max-width: 520px;

    margin-top: 35px;

    color: #52647b;

    font-size: 1.02rem;

    line-height: 1.9;

    font-weight: 400;
}

.oasis-description > p {

    max-width: 520px;

    margin-top: 55px;

    color: #52647b;

    font-size: 1.02rem;

    line-height: 1.9;

    font-weight: 400;
}




.oasis-orbit-system {

    position: relative;

    width: 700px;
    height: 700px;

    grid-column: 2;
    grid-row: 1;

    justify-self: center;
    align-self: center;

    z-index: 8;

    flex-shrink: 0;

    transition:
        margin 0.25s ease-out;
}




.orbit-ring {

    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    animation:
        orbitFloat
        12s
        ease-in-out
        infinite;
}


.orbit-ring-one {

    width: 260px;
    height: 260px;

    border:
        1px solid
        rgba(
            255,
            194,
            0,
            0.32
        );

    box-shadow:
        0 0 35px
        rgba(
            255,
            210,
            28,
            0.07
        );
}


.orbit-ring-two {

    width: 430px;
    height: 430px;

    border:
        1px solid
        rgba(
            8,
            108,
            197,
            0.15
        );

    animation-duration:
        16s;

    animation-direction:
        reverse;
}


.orbit-ring-three {

    width: 610px;
    height: 610px;

    border:
        1px solid
        rgba(
            8,
            108,
            197,
            0.09
        );

    animation-duration:
        21s;
}


@keyframes orbitFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.015);
    }
}



.orbit-connections {

    position: absolute;

    inset: 0;

    width: 700px;
    height: 700px;

    z-index: 1;

    overflow: visible;
}


.orbit-connections line {

    stroke:
        rgba(
            9,
            105,
            192,
            0.22
        );

    stroke-width: 1.2;

    vector-effect:
        non-scaling-stroke;

    stroke-dasharray:
        4 6;

    animation:
        connectionFlow
        4s
        linear
        infinite;
}


@keyframes connectionFlow {

    to {
        stroke-dashoffset: -20;
    }
}




.oasis-core {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 190px;
    height: 190px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    z-index: 10;

    background:
        linear-gradient(
            145deg,
            #0b82dc,
            #064b9b 62%,
            #06275d
        );

    border:
        3px solid
        rgba(
            255,
            210,
            28,
            0.9
        );

    box-shadow:

        0 0 0 9px
        rgba(
            255,
            210,
            28,
            0.07
        ),

        0 0 0 22px
        rgba(
            8,
            112,
            204,
            0.035
        ),

        0 25px 65px
        rgba(
            4,
            43,
            91,
            0.2
        ),

        0 0 60px
        rgba(
            8,
            122,
            218,
            0.18
        );

    animation:
        corePulse
        5s
        ease-in-out
        infinite;
}


@keyframes corePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 9px
            rgba(255,210,28,0.07),
            0 0 0 22px
            rgba(8,112,204,0.035),
            0 25px 65px
            rgba(4,43,91,0.2),
            0 0 60px
            rgba(8,122,218,0.18);
    }

    50% {
        box-shadow:
            0 0 0 13px
            rgba(255,210,28,0.10),
            0 0 0 28px
            rgba(8,112,204,0.045),
            0 28px 75px
            rgba(4,43,91,0.24),
            0 0 80px
            rgba(8,122,218,0.25);
    }
}


.core-glow {

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.12),
            transparent 65%
        );

    pointer-events: none;
}


.core-icon {

    position: relative;
    z-index: 2;

    color:
        var(--yellow);

    font-size:
        1.5rem;

    margin-bottom:
        8px;
}


.oasis-core strong {

    position: relative;
    z-index: 2;

    color: white;

    font-family:
        var(--font-heading);

    font-size:
        0.75rem;

    letter-spacing:
        0.16em;
}


.oasis-core > span {

    position: relative;
    z-index: 2;

    color:
        var(--yellow);

    font-family:
        var(--font-heading);

    font-size:
        1.25rem;

    font-weight: 800;

    letter-spacing:
        0.12em;
}


.oasis-core small {

    position: relative;
    z-index: 2;

    margin-top:
        7px;

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

    font-size:
        0.53rem;

    letter-spacing:
        0.04em;
}



.orbit-node {

    position: absolute;

    z-index: 12;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color:
        #425772;

    font-size:
        0.65rem;

    font-weight: 700;

    text-align: center;

    white-space: nowrap;

    transform:
        translate(-50%, -50%);

    transition:
        transform 0.35s ease;
}


.node-laptop {
    left: 50%;
    top: 12.85%;
}

.node-drama {
    left: 82.15%;
    top: 24.3%;
}

.node-science {
    left: 88.57%;
    top: 50%;
}

.node-media {
    left: 81.43%;
    top: 75.7%;
}

.node-files {
    left: 50%;
    top: 87.15%;
}

.node-code {
    left: 18.57%;
    top: 75.7%;
}

.node-finance {
    left: 11.43%;
    top: 50%;
}

.node-globe {
    left: 18.57%;
    top: 24.3%;
}



.node-icon {

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 50%;

    color:
        #0877d1;

    background: #ffd21c;

    border:
        1px solid
        rgba(
            7,
            107,
            195,
            0.18
        );

    box-shadow:

        0 12px 28px
        rgba(
            4,
            45,
            93,
            0.11
        ),

        0 0 0 5px
        rgba(
            8,
            112,
            204,
            0.035
        );

    backdrop-filter:
        blur(8px);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.node-icon i {
    font-size:
        1rem;
}


.orbit-node:hover .node-icon {

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

    border-color:
        rgba(
            7,
            107,
            195,
            0.25
        );

    transform:
        scale(1.12);

    box-shadow:
        0 12px 35px
        rgba(
            255,
            196,
            0,
            0.2
        );
}


.orbit-node span {

    text-shadow:
        none;

    font-weight:
        700;
}




.oasis-description {

    position: absolute;

    left: 50px;

    bottom: 25px;

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

    z-index: 10;

    text-align: left;
}




.oasis-stats {

    position: relative;

    z-index: 20;

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

    margin:
        45px auto 0;

    padding:
        0;

    display:
        grid;

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

    gap:
        14px;
}


.stat-card {

    position:
        relative;

    min-height:
        62px;

    padding:
        12px 13px;

    display:
        grid;

    grid-template-columns:
        30px 1fr;

    grid-template-rows:
        auto auto;

    column-gap:
        9px;

    align-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            6,
            56,
            111,
            0.09
        );

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #0b82dc,
            #064b9b 62%,
            #06275d
        );

    box-shadow:
        0 8px 24px
        rgba(
            5,
            42,
            83,
            0.07
        );

    opacity:
        0;

    transform:
        translateY(20px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}



.stat-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #0877d1,
            #ffd21c
        );
}




.stat-card::after {

    content:
        "";

    position:
        absolute;

    width:
        70px;

    height:
        70px;

    right:
        -35px;

    bottom:
        -35px;

    border-radius:
        50%;

    background:
        rgba(
            8,
            119,
            209,
            0.035
        );

    pointer-events:
        none;

    transition:
        transform 0.4s ease;
}


.stat-card.visible {

    opacity:
        1;

    transform:
        translateY(0);
}


.stat-card:hover {

    border-color:
        rgba(
            8,
            119,
            209,
            0.2
        );

    box-shadow:
        0 14px 32px
        rgba(
            5,
            42,
            83,
            0.11
        );

    transform:
        translateY(-3px);
}


.stat-card:hover::after {

    transform:
        scale(1.35);
}




.stat-icon {

    grid-row:
        1 / span 2;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    border-radius:
        9px;

    color:
        var(--yellow);

    background:
        linear-gradient(
            145deg,
            rgba(
                8,
                119,
                209,
                0.09
            ),
            rgba(
                255,
                210,
                28,
                0.11
            )
        );

    border:
        1px solid
        rgba(
            8,
            119,
            209,
            0.08
        );
}


.stat-icon i {

    font-size:
        1rem;
}




.stat-number {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        baseline;

    margin:
        0;

    font-family:
        var(--font-heading);

    font-size:
        1.35rem;

    line-height:
        0.9;

    font-weight:
        850;

    letter-spacing:
        -0.06em;

    color:
        #31f50a;
}


.stat-number b {

    margin-left:
        2px;

    color:
        #31f50a;

    font-size:
        0.9rem;
}



.stat-label {

    position:
        relative;

    z-index:
        2;

    margin:
        4px 0 0;

    color:
        var(--yellow);

    font-size:
        0.68rem;

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;
}


.stat-label small {

    display:
        block;

    margin-top:
        2px;

    color:
        #fff;

    font-size:
        0.64rem;

    font-weight:
        500;

    letter-spacing:
        0;

    text-transform:
        none;
}



@media (max-width: 1200px) {

    .oasis-visual {

        grid-template-columns:
            minmax(330px, 0.75fr)
            minmax(580px, 1.25fr);

        padding-left: 30px;
        padding-right: 30px;
    }

    .oasis-orbit-system {

        transform:
            scale(0.88);

        transform-origin:
            center center;

        margin-left:
            -20px;
    }

    /* Stats only */

    .oasis-stats {

        right:
            30px;

        width:
            560px;

        gap:
            8px;
    }

    .stat-card {

        padding:
            10px 11px;
    }
}


@media (max-width: 950px) {

    .oasis-visual {

        min-height:
            1120px;

        display:
            flex;

        flex-direction:
            column;

        padding:
            80px 25px 40px;
    }

    .oasis-intro {

        max-width:
            650px;

        padding:
            0;

        text-align:
            center;
    }

    .section-eyebrow {

        justify-content:
            center;
    }

    .oasis-intro h2 span::after {

        left:
            50%;

        transform:
            translateX(-50%);
    }

    .oasis-intro > p {

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .oasis-orbit-system {

        width:
            700px;

        height:
            700px;

        transform:
            scale(0.78);

        margin:
            -30px 0 -40px;
    }

    .oasis-description {

        left:
            50%;

        bottom:
            20px;

        transform:
            translateX(-50%);

        width:
            calc(100% - 50px);

        text-align:
            center;
    }

  

    .oasis-stats {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        width:
            calc(100% - 40px);

        margin:
            0 auto;

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

        gap:
            10px;
    }
}


@media (max-width: 600px) {

    .oasis-visual {

        min-height:
            950px;

        padding:
            65px 15px 30px;
    }

    .oasis-intro h2 {

        font-size:
            3rem;
    }

    .oasis-intro > p {

        font-size:
            0.88rem;

        line-height:
            1.75;
    }

    .oasis-orbit-system {

        width:
            700px;

        height:
            700px;

        transform:
            scale(0.58);

        margin:
            -90px 0 -110px;
    }

    .oasis-description {

        width:
            calc(100% - 30px);
    }

    .oasis-stats {

        position:
            relative;

        width:
            calc(100% - 30px);

        grid-template-columns:
            1fr;

        padding-bottom:
            65px;
    }

    .stat-card {

        min-height:
            75px;

        padding:
            13px;
    }
}


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

    .orbit-ring,
    .oasis-core,
    .orbit-connections line {

        animation:
            none !important;
    }
}



.oasis-orbit-system {

    --orbit-cycle:
        16s;

    --orbit-ease:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}



.oasis-core {

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.35);

    animation:
        oasisCoreSequence
        var(--orbit-cycle)
        var(--orbit-ease)
        infinite;

}


@keyframes oasisCoreSequence {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.35);
    }

    7% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    12%,
    70% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    78% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    92% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.85);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.35);
    }
}




.oasis-core {

    animation:
        oasisCoreSequence var(--orbit-cycle)
        var(--orbit-ease)
        infinite,
        oasisCorePulse var(--orbit-cycle)
        ease-in-out
        infinite;
}


@keyframes oasisCorePulse {

    0%,
    10% {

        box-shadow:

            0 0 0 5px
            rgba(255,210,28,0),

            0 0 0 12px
            rgba(8,112,204,0),

            0 25px 65px
            rgba(4,43,91,0.12),

            0 0 35px
            rgba(8,122,218,0.05);
    }

    18%,
    32% {

        box-shadow:

            0 0 0 10px
            rgba(255,210,28,0.14),

            0 0 0 24px
            rgba(8,112,204,0.055),

            0 25px 65px
            rgba(4,43,91,0.20),

            0 0 65px
            rgba(8,122,218,0.20);
    }

    42%,
    55%,
    68% {

        box-shadow:

            0 0 0 7px
            rgba(255,210,28,0.08),

            0 0 0 19px
            rgba(8,112,204,0.035),

            0 25px 65px
            rgba(4,43,91,0.20),

            0 0 55px
            rgba(8,122,218,0.16);
    }

    75% {

        box-shadow:

            0 0 0 13px
            rgba(255,210,28,0.16),

            0 0 0 30px
            rgba(8,112,204,0.06),

            0 28px 75px
            rgba(4,43,91,0.24),

            0 0 85px
            rgba(8,122,218,0.25);
    }

    90%,
    100% {

        box-shadow:

            0 0 0 5px
            rgba(255,210,28,0),

            0 0 0 12px
            rgba(8,112,204,0),

            0 25px 65px
            rgba(4,43,91,0.05),

            0 0 25px
            rgba(8,122,218,0);
    }
}




.oasis-core .core-icon,
.oasis-core strong,
.oasis-core > span,
.oasis-core small {

    opacity: 0;

    animation:
        oasisCoreContent
        var(--orbit-cycle)
        ease
        infinite;
}


@keyframes oasisCoreContent {

    0%,
    5% {

        opacity: 0;

        transform:
            translateY(8px);
    }

    10% {

        opacity: 1;

        transform:
            translateY(0);
    }

    72% {

        opacity: 1;

        transform:
            translateY(0);
    }

    91%,
    100% {

        opacity: 0;

        transform:
            translateY(-5px);
    }
}



.orbit-connections {

    opacity: 0;

    animation:
        oasisConnectionsSequence
        var(--orbit-cycle)
        ease
        infinite;
}


@keyframes oasisConnectionsSequence {

    0%,
    15% {

        opacity: 0;
    }

    25% {

        opacity: 0.35;
    }

    65% {

        opacity: 0.65;
    }

    73% {

        opacity: 0.8;
    }

    90% {

        opacity: 0;
    }

    100% {

        opacity: 0;
    }
}



.orbit-ring {

    opacity: 0;

    animation:
        oasisRingSequence
        var(--orbit-cycle)
        ease
        infinite;
}


@keyframes oasisRingSequence {

    0%,
    14% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.65);
    }

    25% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    70% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    78% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.06);
    }

    90% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.9);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.65);
    }
}



.orbit-node {

    opacity: 0;



    --start-x: -50%;
    --start-y: -50%;

    animation:
        oasisNodeSequence
        var(--orbit-cycle)
        var(--orbit-ease)
        infinite;

}




.node-laptop {

    --node-delay: 16%;
    --node-arrive: 25%;
}




.node-drama {

    --node-delay: 20%;
    --node-arrive: 30%;
}




.node-science {

    --node-delay: 24%;
    --node-arrive: 35%;
}




.node-media {

    --node-delay: 28%;
    --node-arrive: 40%;
}



.node-files {

    --node-delay: 32%;
    --node-arrive: 45%;
}



.node-code {

    --node-delay: 36%;
    --node-arrive: 50%;
}



.node-finance {

    --node-delay: 40%;
    --node-arrive: 55%;
}



.node-globe {

    --node-delay: 44%;
    --node-arrive: 60%;
}



@keyframes oasisNodeSequence {

    0%,
    12% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }

    16% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(0.35);
    }

    25% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(0.7);
    }

    32% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    68% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    73% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.18);
    }

    78% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    88% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    94% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.55);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.15);
    }
}




.orbit-node .node-icon {

    transform:
        scale(0.7);

    transition:
        box-shadow 0.3s ease;
}




.orbit-node span {

    opacity: 0;

    transform:
        translateY(-6px);

    animation:
        oasisNodeLabel
        var(--orbit-cycle)
        ease
        infinite;
}


@keyframes oasisNodeLabel {

    0%,
    28% {

        opacity: 0;

        transform:
            translateY(-6px);
    }

    34% {

        opacity: 1;

        transform:
            translateY(0);
    }

    70% {

        opacity: 1;

        transform:
            translateY(0);
    }

    78% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1.08);
    }

    88% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    94% {

        opacity: 0;

        transform:
            translateY(4px)
            scale(0.8);
    }

    100% {

        opacity: 0;
    }
}



.node-laptop {
    animation-delay: 0s;
}

.node-drama {
    animation-delay: -0.55s;
}

.node-science {
    animation-delay: -1.1s;
}

.node-media {
    animation-delay: -1.65s;
}

.node-files {
    animation-delay: -2.2s;
}

.node-code {
    animation-delay: -2.75s;
}

.node-finance {
    animation-delay: -3.3s;
}

.node-globe {
    animation-delay: -3.85s;
}




.oasis-orbit-system {

    animation:
        oasisFinalOrbit
        var(--orbit-cycle)
        linear
        infinite;
}


@keyframes oasisFinalOrbit {

    0%,
    72% {

        transform:
            rotate(0deg);
    }

    76% {

        transform:
            rotate(0deg);
    }

    88% {

        transform:
            rotate(360deg);
    }

    100% {

        transform:
            rotate(360deg);
    }
}



.education-model {

    position: relative;

    overflow: hidden;

    background:
        #ffd21c;

    color:
        #06204a;

    padding:
        0 0 130px;
}




.education-model-strip {

    position: relative;

    width: 100%;

    min-height: 230px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        #ffd21c;

    transform:
        translateX(-100%);

    opacity: 0;

    transition:
        transform 1.15s
        cubic-bezier(.77,0,.18,1),
        opacity 0.4s ease;
}


.education-model.is-visible
.education-model-strip {

    transform:
        translateX(0);

    opacity:
        1;
}


.education-model-strip::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -220px;

    border-radius: 50%;

    border:
        1px solid
        rgba(6,32,74,0.08);

    pointer-events:
        none;
}


.education-model-strip::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -100px;
    bottom: -150px;

    border-radius: 50%;

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

    pointer-events:
        none;
}


.education-model-strip-inner {

    width:
        min(
            var(--container),
            calc(100% - 50px)
        );

    margin:
        0 auto;

    position:
        relative;

    z-index:
        2;
}


.education-model-strip span {

    display:
        block;

    max-width:
        900px;

    color:
        #06204a;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3rem,
            6vw,
            6.5rem
        );

    line-height:
        0.9;

    letter-spacing:
        -0.075em;

    font-weight:
        850;
}



.education-model-content {

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

    margin:
        0 auto;

    padding:
        70px 0 0;
}




.education-story {

    display:
        grid;

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

    align-items:
        center;

    gap:
        100px;

    margin-bottom:
        120px;

    opacity:
        0;

    transform:
        translateY(45px);

    transition:
        opacity 0.9s ease,
        transform 0.9s
        cubic-bezier(.2,.7,.2,1);
}


.education-model.is-visible
.education-story {

    opacity:
        1;

    transform:
        translateY(0);
}


.education-model.is-visible
.education-story-one {

    transition-delay:
        0.25s;
}


.education-model.is-visible
.education-story-two {

    transition-delay:
        0.45s;
}


.education-story:last-child {

    margin-bottom:
        0;
}




.education-story-one
.education-story-image {

    order:
        1;
}


.education-story-one
.education-story-text {

    order:
        2;
}


.education-story-two
.education-story-text {

    order:
        1;
}


.education-story-two
.education-story-image {

    order:
        2;
}




.education-story-image {

    position:
        relative;

    min-width:
        0;
}


.education-image-frame {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    aspect-ratio:
        1.15 / 1;

    border-radius:
        28px;

    background:
        #f7c800;

    border:
        1px solid
        rgba(6,32,74,0.10);

    box-shadow:
        0 25px 60px
        rgba(
            6,
            32,
            74,
            0.14
        );
}


.education-image-frame::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(6,32,74,0.04),
            transparent 55%,
            rgba(255,255,255,0.13)
        );

    pointer-events:
        none;
}


.education-image-frame img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform 0.8s
        cubic-bezier(.2,.7,.2,1);
}


.education-story-image:hover
.education-image-frame img {

    transform:
        scale(1.045);
}



.education-image-accent {

    position:
        absolute;

    width:
        90px;

    height:
        90px;

    right:
        -25px;

    bottom:
        -25px;

    border-radius:
        50%;

    background:
        #06204a;

    box-shadow:
        0 15px 35px
        rgba(
            6,
            32,
            74,
            0.18
        );

    z-index:
        2;
}


.education-story-two
.education-image-accent {

    right:
        auto;

    left:
        -25px;

    background:
        #0877d1;
}



.education-story-text {

    max-width:
        540px;
}


.education-story-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #06204a;

    font-size:
        0.68rem;

    font-weight:
        850;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;
}


.education-story-eyebrow i {

    color:
        #0877d1;

    font-size:
        0.8rem;
}


.education-story-text h2 {

    margin-top:
        18px;

    color:
        #06204a;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2.7rem,
            4vw,
            4.7rem
        );

    line-height:
        0.97;

    letter-spacing:
        -0.065em;

    font-weight:
        850;
}


.education-story-text h2 span {

    display:
        block;

    color:
        #0877d1;
}


.education-story-text p {

    margin-top:
        25px;

    color:
        rgba(
            6,
            32,
            74,
            0.72
        );

    font-size:
        1rem;

    line-height:
        1.9;

    font-weight:
        400;
}


.education-story-text p strong {

    color:
        #06204a;

    font-weight:
        800;
}



.education-result {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        30px;

    padding:
        18px 22px;

    border-left:
        4px solid
        #0877d1;

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

    border-radius:
        0 14px 14px 0;
}


.education-result strong {

    color:
        #0877d1;

    font-family:
        var(--font-heading);

    font-size:
        2.5rem;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        -0.07em;
}


.education-result span {

    max-width:
        190px;

    color:
        #06204a;

    font-size:
        0.67rem;

    line-height:
        1.4;

    font-weight:
        850;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}



.education-action {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        30px;

    padding:
        14px 21px;

    border:
        1px solid
        #06204a;

    border-radius:
        100px;

    color:
        #ffffff;

    background:
        #06204a;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    box-shadow:
        0 10px 25px
        rgba(
            6,
            32,
            74,
            0.16
        );

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.education-action i {

    transition:
        transform 0.3s ease;
}


.education-action:hover {

    color:
        #06204a;

    background:
        #ffffff;

    border-color:
        #ffffff;

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(
            6,
            32,
            74,
            0.14
        );
}


.education-action:hover i {

    transform:
        translateX(4px);
}


.education-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;
}


.education-actions .education-action {

    margin-top:
        25px;
}


.education-actions
.education-action-secondary {

    color:
        #06204a;

    background:
        transparent;

    border-color:
        rgba(
            6,
            32,
            74,
            0.3
        );

    box-shadow:
        none;
}


.education-actions
.education-action-secondary:hover {

    color:
        #06204a;

    background:
        #ffffff;

    border-color:
        #ffffff;
}



@media (max-width: 950px) {

    .education-model-strip {

        min-height:
            180px;
    }


    .education-model-strip-inner {

        width:
            calc(100% - 40px);
    }


    .education-model-content {

        width:
            calc(100% - 40px);

        padding:
            60px 0 0;
    }


    .education-story {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            90px;
    }


    .education-story-one
    .education-story-image,
    .education-story-two
    .education-story-image {

        order:
            1;
    }


    .education-story-one
    .education-story-text,
    .education-story-two
    .education-story-text {

        order:
            2;
    }


    .education-story-text {

        max-width:
            680px;
    }


    .education-image-frame {

        aspect-ratio:
            1.5 / 1;
    }
}


@media (max-width: 600px) {

    .education-model {

        padding-bottom:
            80px;
    }


    .education-model-strip {

        min-height:
            145px;
    }


    .education-model-strip-inner {

        width:
            calc(100% - 30px);
    }


    .education-model-strip span {

        font-size:
            2.6rem;
    }


    .education-model-content {

        width:
            calc(100% - 30px);

        padding-top:
            50px;
    }


    .education-story {

        gap:
            35px;

        margin-bottom:
            75px;
    }


    .education-story-text h2 {

        font-size:
            2.8rem;
    }


    .education-story-text p {

        font-size:
            0.9rem;

        line-height:
            1.8;
    }


    .education-image-frame {

        aspect-ratio:
            1 / 0.82;

        border-radius:
            21px;
    }


    .education-image-accent {

        width:
            65px;

        height:
            65px;

        right:
            -12px;

        bottom:
            -15px;
    }


    .education-story-two
    .education-image-accent {

        left:
            -12px;
    }


    .education-result {

        padding:
            16px 18px;
    }


    .education-result strong {

        font-size:
            2rem;
    }


    .education-actions {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .education-actions
    .education-action {

        width:
            100%;
    }
}



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

    .education-model-strip,
    .education-story {

        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }

    .education-image-frame img,
    .education-action i {

        transition:
            none;
    }
}



.schools-offer {

    position: relative;

    padding: 120px 30px 130px;

    overflow: hidden;

    color: #06204a;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}


.schools-offer::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: 80px;

    border-radius: 50%;

    background:
        rgba(8,119,209,0.045);

    border:
        1px solid
        rgba(8,119,209,0.07);

    pointer-events: none;
}


.schools-offer::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -130px;
    bottom: 50px;

    border-radius: 50%;

    background:
        rgba(255,210,28,0.07);

    pointer-events: none;
}


.schools-offer-inner {

    position: relative;

    z-index: 5;

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

    margin: auto;
}



.schools-offer-heading {

    max-width: 780px;

    margin:
        0 auto 70px;

    text-align: center;
}


.schools-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #0877d1;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.schools-eyebrow span {

    width: 38px;
    height: 2px;

    background: #ffd21c;

    box-shadow:
        0 0 12px
        rgba(255,210,28,0.45);
}


.schools-offer-heading h2 {

    margin-top: 20px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3rem,
            6vw,
            5.5rem
        );

    line-height: 0.95;

    letter-spacing: -0.065em;

    font-weight: 850;

    color: #06204a;
}


.schools-offer-heading h2 span {

    display: block;

    color: #0877d1;
}


.schools-offer-heading p {

    max-width: 730px;

    margin:
        30px auto 0;

    color: #52647b;

    font-size: 1rem;

    line-height: 1.85;
}




.school-cards-grid {

    display: grid;

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

    gap: 22px;
}




.school-offer-card {

    position: relative;

    min-height: 430px;

    padding: 0;

    overflow: hidden;

    border: 1px solid
        rgba(6,56,111,0.09);

    border-radius: 28px;

    background: #06204a;

    box-shadow:
        0 20px 55px
        rgba(5,42,83,0.09);

    cursor: pointer;

    text-align: left;

    color: #06204a;

    appearance: none;

    -webkit-appearance: none;

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


.school-offer-card:hover {

    transform:
        translateY(-12px);

    border-color:
        rgba(8,119,209,0.25);

    box-shadow:
        0 35px 75px
        rgba(5,42,83,0.15);
}


.school-offer-card:focus-visible {

    outline:
        3px solid
        rgba(8,119,209,0.35);

    outline-offset: 5px;
}



.school-card-glow {

    position: absolute;

    width: 220px;
    height: 220px;

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

    border-radius: 50%;

    background:
        rgba(8,119,209,0.08);

    transition:
        transform 0.6s ease;
}


.school-offer-card:hover
.school-card-glow {

    transform:
        scale(1.5);
}




.school-card-logo {

    position: relative;

    z-index: 2;

    height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 35px;

    background:#0877d1;

    border-bottom:
        1px solid
        rgba(6,56,111,0.07);
}


.school-card-logo img {

    display: block;

    width: 100%;
    height: auto;

    border-radius:18px;

    object-fit: cover;

    opacity: 1;

    visibility: visible;

    filter:
        drop-shadow(
            0 15px 25px
            rgba(5,42,83,0.13)
        );

    transition:
        transform 0.5s
        cubic-bezier(.2,.8,.2,1),
        filter 0.5s ease;
}


.school-offer-card:hover
.school-card-logo img {

    transform:
        scale(1.08)
        translateY(-5px);

    filter:
        drop-shadow(
            0 22px 35px
            rgba(5,42,83,0.18)
        );
}



.school-card-content {

    position: relative;

    z-index: 3;

    padding:
        25px 27px 28px;
}


.school-card-number {

    display: block;

    margin-bottom: 7px;

    color:
        #0877d1;

    font-family:
        var(--font-heading);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.school-card-content h3 {

    margin: 0;

    font-family:
        var(--font-heading);

    font-size:
        1.25rem;

    font-weight:
        800;

    letter-spacing:
        -0.035em;

    color:
        var(--yellow);
}


.school-card-age {

    display: block;

    margin-top: 7px;

    color:
        #718197;

    font-size:
        0.72rem;

    font-weight:
        600;
}


.school-card-action {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 19px;

    color:
        #0877d1;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.school-card-action i {

    transition:
        transform 0.3s ease;
}


.school-offer-card:hover
.school-card-action i {

    transform:
        translateX(6px);
}



.school-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


.school-modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.school-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(
            2,
            17,
            40,
            0.72
        );

    backdrop-filter:
        blur(12px);
}



.school-modal-window {

    position: relative;

    z-index: 2;

    width:
        min(
            900px,
            100%
        );

    max-height:
        calc(100vh - 50px);

    overflow-y: auto;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        );

    box-shadow:
        0 40px 100px
        rgba(0,0,0,0.3);

    transform:
        translateY(30px)
        scale(0.97);

    transition:
        transform 0.4s
        cubic-bezier(.2,.8,.2,1);
}


.school-modal.active
.school-modal-window {

    transform:
        translateY(0)
        scale(1);
}



.school-modal-close {

    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 10;

    width: 42px;
    height: 42px;

    border: 1px solid
        rgba(6,56,111,0.1);

    border-radius: 50%;

    background: white;

    color: #52647b;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.school-modal-close:hover {

    background:
        #0877d1;

    color: white;

    transform:
        rotate(90deg);
}



.school-modal-top {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    padding:
        45px 55px 35px;

    border-bottom:
        1px solid
        rgba(6,56,111,0.08);
}


.school-modal-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    border-radius: 16px;

    background:
        #ffd21c;

    color:
        #06204a;

    font-family:
        var(--font-heading);

    font-weight:
        850;

    font-size:
        0.85rem;
}


.school-modal-eyebrow {

    color:
        #0877d1;

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}


.school-modal-top h2 {

    margin-top: 5px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    line-height:
        1;

    letter-spacing:
        -0.055em;

    color:
        #06204a;
}


.school-modal-age {

    margin-top:
        10px;

    color:
        #718197;

    font-size:
        0.8rem;

    font-weight:
        700;
}



.school-modal-body {

    padding:
        35px 55px 45px;
}


.school-modal-section-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
        20px;
}


.school-modal-section-title span {

    width: 28px;
    height: 3px;

    border-radius: 10px;

    background:
        #ffd21c;
}


.school-modal-section-title h3 {

    font-family:
        var(--font-heading);

    font-size:
        0.8rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}



#modalObjectives {

    display: grid;

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

    gap:
        10px 30px;

    list-style: none;

    margin: 0 0 35px;

    padding: 0;
}


#modalObjectives li {

    position: relative;

    padding-left: 22px;

    color:
        #52647b;

    font-size:
        0.82rem;

    line-height:
        1.55;
}


#modalObjectives li::before {

    content:
        "\f00c";

    position: absolute;

    left: 0;
    top: 2px;

    font-family:
        "Font Awesome 6 Free";

    font-weight:
        900;

    color:
        #0877d1;

    font-size:
        0.65rem;
}



.subjects-toggle {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        18px 22px;

    border: 1px solid
        rgba(8,119,209,0.12);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(8,119,209,0.055),
            rgba(255,210,28,0.08)
        );

    color:
        #06204a;

    cursor: pointer;

    font-family:
        var(--font-heading);

    font-size:
        0.76rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


.subjects-toggle:hover {

    border-color:
        rgba(8,119,209,0.25);

    background:
        rgba(8,119,209,0.08);
}


.subjects-toggle span {

    display: flex;

    align-items: center;

    gap: 10px;
}


.subjects-toggle span i {

    color:
        #0877d1;
}


#subjectsChevron {

    transition:
        transform 0.3s ease;
}


.subjects-toggle.open
#subjectsChevron {

    transform:
        rotate(180deg);
}



.subjects-tray {

    display: grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows
        0.4s ease;
}


.subjects-tray.open {

    grid-template-rows:
        1fr;
}


.subjects-grid {

    overflow: hidden;

    display: grid;

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

    gap: 9px;

    padding-top: 0;

    transition:
        padding-top 0.4s ease;
}


.subjects-tray.open
.subjects-grid {

    padding-top:
        18px;
}


.subject-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 45px;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(6,56,111,0.07);

    border-radius:
        11px;

    background:
        white;

    color:
        #52647b;

    font-size:
        0.72rem;

    font-weight:
        650;

    box-shadow:
        0 5px 15px
        rgba(5,42,83,0.035);
}


.subject-item i {

    width: 25px;

    color:
        #0877d1;

    text-align:
        center;

    font-size:
        0.78rem;
}




@media (max-width: 1050px) {

    .school-cards-grid {

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

}


@media (max-width: 700px) {

    .schools-offer {

        padding:
            80px 18px 90px;
    }

    .schools-offer-heading {

        margin-bottom:
            45px;
    }

    .school-cards-grid {

        grid-template-columns:
            1fr;

        max-width:
            450px;

        margin:
            0 auto;
    }

    .school-offer-card {

        min-height:
            400px;
    }

    .school-card-logo {

        height:
            230px;
    }

    .school-modal {

        padding:
            12px;
    }

    .school-modal-top {

        padding:
            35px 25px 25px;

        gap:
            15px;
    }

    .school-modal-body {

        padding:
            28px 25px 35px;
    }

    #modalObjectives {

        grid-template-columns:
            1fr;
    }

    .subjects-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 450px) {

    .school-card-logo img {

        width:
            145px;

        height:
            145px;
    }

    .school-modal-number {

        width:
            45px;

        height:
            45px;
    }

}


.school-extras {

    position: relative;

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

    margin: 80px auto 0;

    min-height: 360px;

    display: flex;

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

    overflow: hidden;

    border-radius: 34px;

    background:
        var(--yellow);

    border:
        1px solid
        rgba(
            6,
            56,
            111,
            0.08
        );

    box-shadow:
        0 25px 80px
        rgba(
            5,
            42,
            83,
            0.09
        );
}




.school-extras::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    left: -120px;

    border-radius: 50%;

    background:
        rgba(
            8,
            119,
            209,
            0.055
        );

    filter:
        blur(20px);

    pointer-events: none;
}


.school-extras::after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -150px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(
            255,
            210,
            28,
            0.08
        );

    filter:
        blur(15px);

    pointer-events: none;
}



.club-pills {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    overflow: hidden;
}


.club-pill {

    position: absolute;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 15px;

    border-radius: 100px;

    font-family:
        var(--font-body);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.01em;

    white-space:
        nowrap;

    box-shadow:
        0 8px 24px
        rgba(
            5,
            42,
            83,
            0.08
        );

    opacity:
        0.72;

    animation:
        clubFloat
        var(--club-duration)
        ease-in-out
        infinite alternate;

    animation-delay:
        var(--club-delay);

    transform:
        translate3d(0, 0, 0);

    will-change:
        transform;
}


.club-pill i {

    font-size:
        0.65rem;
}



.club-pill:nth-child(1) {

    left: 4%;
    top: 13%;

    --club-duration: 7s;
    --club-delay: -2s;
}


.club-pill:nth-child(2) {

    left: 70%;
    top: 8%;

    --club-duration: 9s;
    --club-delay: -5s;
}


.club-pill:nth-child(3) {

    left: 82%;
    top: 34%;

    --club-duration: 8s;
    --club-delay: -3s;
}


.club-pill:nth-child(4) {

    left: 5%;
    top: 68%;

    --club-duration: 10s;
    --club-delay: -6s;
}


.club-pill:nth-child(5) {

    left: 77%;
    top: 73%;

    --club-duration: 8s;
    --club-delay: -1s;
}


.club-pill:nth-child(6) {

    left: 18%;
    top: 84%;

    --club-duration: 11s;
    --club-delay: -7s;
}


.club-pill:nth-child(7) {

    left: 88%;
    top: 16%;

    --club-duration: 9s;
    --club-delay: -4s;
}


.club-pill:nth-child(8) {

    left: 30%;
    top: 8%;

    --club-duration: 8s;
    --club-delay: -3s;
}



.club-blue {

    color: #075ca8;

    background:
        rgba(
            8,
            119,
            209,
            0.10
        );

    border:
        1px solid
        rgba(
            8,
            119,
            209,
            0.16
        );
}


.club-purple {

    color: #6941a5;

    background:
        rgba(
            126,
            87,
            194,
            0.10
        );

    border:
        1px solid
        rgba(
            126,
            87,
            194,
            0.16
        );
}


.club-green {

    color: #287a4b;

    background:
        rgba(
            52,
            168,
            83,
            0.10
        );

    border:
        1px solid
        rgba(
            52,
            168,
            83,
            0.16
        );
}


.club-gold {

    color: #967000;

    background:
        rgba(
            255,
            210,
            28,
            0.16
        );

    border:
        1px solid
        rgba(
            255,
            210,
            28,
            0.25
        );
}


.club-red {

    color: #b13c47;

    background:
        rgba(
            215,
            66,
            81,
            0.09
        );

    border:
        1px solid
        rgba(
            215,
            66,
            81,
            0.15
        );
}


.club-indigo {

    color: #4255a5;

    background:
        rgba(
            74,
            88,
            180,
            0.10
        );

    border:
        1px solid
        rgba(
            74,
            88,
            180,
            0.16
        );
}


.club-pink {

    color: #a44776;

    background:
        rgba(
            205,
            76,
            139,
            0.09
        );

    border:
        1px solid
        rgba(
            205,
            76,
            139,
            0.15
        );
}


.club-orange {

    color: #b96528;

    background:
        rgba(
            234,
            126,
            52,
            0.10
        );

    border:
        1px solid
        rgba(
            234,
            126,
            52,
            0.16
        );
}


@keyframes clubFloat {

    0% {

        transform:
            translate3d(
                -5px,
                4px,
                0
            )
            rotate(-1deg);
    }

    50% {

        transform:
            translate3d(
                8px,
                -10px,
                0
            )
            rotate(1deg);
    }

    100% {

        transform:
            translate3d(
                -4px,
                -18px,
                0
            )
            rotate(-1deg);
    }
}




.school-extras-content {

    position:
        relative;

    z-index:
        5;

    
    padding:
        60px 30px;

    

   width: min(900px, calc(100% - 40px));
    margin: 50px auto 0;
    text-align: center;
}




.school-extras-eyebrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    color:
        #0877d1;

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}


.school-extras-eyebrow span {

    width:
        28px;

    height:
        2px;

    background:
        var(--yellow);
}



.school-extras-content h3 {

    margin-top:
        15px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    font-weight:
        850;

    color:
        #06204a;
}


.school-extras-content h3 span {

    display:
        block;

    color:
        #0877d1;
}




.school-extras-content p {

    max-width:
        570px;

    margin:
        22px auto 0;

    color:
        #52647b;

    font-size:
        0.95rem;

    line-height:
        1.8;
}


.school-extras-content strong {

    color:
        #06204a;

    font-weight:
        850;
}



.school-extras-button {

    margin-top:
        25px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 20px;

    border-radius:
        100px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            #0877d1,
            #064b9b
        );

    font-size:
        0.72rem;

    font-weight:
        800;

    box-shadow:
        0 10px 25px
        rgba(
            8,
            119,
            209,
            0.20
        );

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


.school-extras-button i {

    color:
        var(--yellow);

    transition:
        transform 0.3s ease;
}


.school-extras-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 32px
        rgba(
            8,
            119,
            209,
            0.28
        );
}


.school-extras-button:hover i {

    transform:
        translateX(4px);
}



@media (max-width: 700px) {

    .school-extras {

        width:
            calc(100% - 30px);

        min-height:
            430px;

        margin-top:
            55px;

        border-radius:
            25px;
    }

    .school-extras-content {

        width:
            calc(100% - 30px);

        padding:
            55px 10px;
    }

    .school-extras-content h3 {

        font-size:
            2.2rem;
    }

    .school-extras-content p {

        font-size:
            0.86rem;

        line-height:
            1.75;
    }

    .club-pill {

        font-size:
            0.53rem;

        padding:
            7px 10px;

        opacity:
            0.5;
    }



    .club-pill:nth-child(2),
    .club-pill:nth-child(5),
    .club-pill:nth-child(7) {

        display:
            none;
    }

    .club-pill:nth-child(1) {
        left: 3%;
        top: 8%;
    }

    .club-pill:nth-child(3) {
        left: 65%;
        top: 12%;
    }

    .club-pill:nth-child(4) {
        left: 2%;
        bottom: 10%;
        top: auto;
    }

    .club-pill:nth-child(6) {
        left: 65%;
        bottom: 8%;
        top: auto;
    }

    .club-pill:nth-child(8) {
        left: 25%;
        top: 86%;
    }
}




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

    .club-pill {

        animation:
            none !important;
    }

    .school-extras-button {

        transition:
            none !important;
    }
}




.schools-offer-section {

    position: relative;

    overflow: hidden;

    isolation: isolate;
}



.schools-club-field {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;
}




.school-club-pill {

    position: absolute;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        10px 16px;

    border-radius: 100px;

    font-family:
        var(--font-body);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.01em;

    white-space:
        nowrap;

    opacity:
        0.62;

    box-shadow:
        0 8px 25px
        rgba(
            5,
            42,
            83,
            0.07
        );

    animation:
        schoolClubDrift
        var(--club-speed)
        ease-in-out
        var(--club-delay)
        infinite
        alternate;

    will-change:
        transform;

    user-select:
        none;
}


.school-club-pill i {

    font-size:
        0.65rem;
}



.school-club-pill:nth-child(1) {

    left:
        3%;

    top:
        9%;

    --club-speed:
        8s;

    --club-delay:
        -2s;
}


.school-club-pill:nth-child(2) {

    right:
        5%;

    top:
        13%;

    --club-speed:
        10s;

    --club-delay:
        -6s;
}


.school-club-pill:nth-child(3) {

    left:
        2%;

    top:
        42%;

    --club-speed:
        9s;

    --club-delay:
        -4s;
}


.school-club-pill:nth-child(4) {

    right:
        2%;

    top:
        43%;

    --club-speed:
        11s;

    --club-delay:
        -7s;
}


.school-club-pill:nth-child(5) {

    left:
        6%;

    bottom:
        15%;

    --club-speed:
        8s;

    --club-delay:
        -3s;
}


.school-club-pill:nth-child(6) {

    right:
        7%;

    bottom:
        17%;

    --club-speed:
        12s;

    --club-delay:
        -8s;
}


.school-club-pill:nth-child(7) {

    left:
        25%;

    bottom:
        4%;

    --club-speed:
        9s;

    --club-delay:
        -5s;
}


.school-club-pill:nth-child(8) {

    right:
        26%;

    bottom:
        5%;

    --club-speed:
        10s;

    --club-delay:
        -1s;
}



.club-blue {

    color:
        #075ca8;

    background:
        rgba(
            8,
            119,
            209,
            0.10
        );

    border:
        1px solid
        rgba(
            8,
            119,
            209,
            0.16
        );
}


.club-purple {

    color:
        #6941a5;

    background:
        rgba(
            126,
            87,
            194,
            0.10
        );

    border:
        1px solid
        rgba(
            126,
            87,
            194,
            0.16
        );
}


.club-green {

    color:
        #287a4b;

    background:
        rgba(
            52,
            168,
            83,
            0.10
        );

    border:
        1px solid
        rgba(
            52,
            168,
            83,
            0.16
        );
}


.club-gold {

    color:
        #927000;

    background:
        rgba(
            255,
            210,
            28,
            0.16
        );

    border:
        1px solid
        rgba(
            255,
            210,
            28,
            0.25
        );
}


.club-red {

    color:
        #ae3d48;

    background:
        rgba(
            215,
            66,
            81,
            0.09
        );

    border:
        1px solid
        rgba(
            215,
            66,
            81,
            0.15
        );
}


.club-indigo {

    color:
        #4255a5;

    background:
        rgba(
            74,
            88,
            180,
            0.10
        );

    border:
        1px solid
        rgba(
            74,
            88,
            180,
            0.16
        );
}


.club-pink {

    color:
        #a44776;

    background:
        rgba(
            205,
            76,
            139,
            0.09
        );

    border:
        1px solid
        rgba(
            205,
            76,
            139,
            0.15
        );
}


.club-orange {

    color:
        #b96528;

    background:
        rgba(
            234,
            126,
            52,
            0.10
        );

    border:
        1px solid
        rgba(
            234,
            126,
            52,
            0.16
        );
}




@keyframes schoolClubDrift {

    0% {

        transform:
            translate3d(
                -8px,
                5px,
                0
            )
            rotate(-1deg);
    }

    50% {

        transform:
            translate3d(
                7px,
                -9px,
                0
            )
            rotate(1deg);
    }

    100% {

        transform:
            translate3d(
                -4px,
                -18px,
                0
            )
            rotate(-1deg);
    }
}




.schools-offer-section
> *:not(.schools-club-field) {

    position:
        relative;

    z-index:
        2;
}



@media (max-width: 900px) {

    .school-club-pill {

        font-size:
            0.54rem;

        padding:
            8px 12px;

        opacity:
            0.42;
    }

    .school-club-pill:nth-child(1) {
        left: 1%;
    }

    .school-club-pill:nth-child(2) {
        right: 1%;
    }

    .school-club-pill:nth-child(3) {
        left: 1%;
    }

    .school-club-pill:nth-child(4) {
        right: 1%;
    }

    .school-club-pill:nth-child(5) {
        left: 2%;
    }

    .school-club-pill:nth-child(6) {
        right: 2%;
    }

    .school-club-pill:nth-child(7),
    .school-club-pill:nth-child(8) {

        display:
            none;
    }
}




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

    .school-club-pill {

        animation:
            none !important;
    }
}



.schools-faq {

    position: relative;

    padding: 120px 25px 140px;

    overflow: hidden;

    background:
        #021128;

    color: white;
}



.schools-faq::before {

    content: "";

    position: absolute;

    inset: -100%;

    z-index: 0;

    background:

        linear-gradient(
            115deg,
            transparent 0%,
            transparent 42%,
            rgba(255,210,28,0.10) 43%,
            rgba(255,210,28,0.10) 43.15%,
            transparent 44%
        ),

        linear-gradient(
            65deg,
            transparent 0%,
            transparent 28%,
            rgba(255,210,28,0.07) 29%,
            rgba(255,210,28,0.07) 29.12%,
            transparent 30%
        ),

        linear-gradient(
            145deg,
            transparent 0%,
            transparent 62%,
            rgba(255,210,28,0.06) 63%,
            rgba(255,210,28,0.06) 63.12%,
            transparent 64%
        );

    background-size:
        900px 900px,
        700px 700px,
        1100px 1100px;

    animation:
        faqGoldenLines 18s linear infinite;

    pointer-events: none;
}


@keyframes faqGoldenLines {

    from {
        transform:
            translate3d(
                -120px,
                -80px,
                0
            );
    }

    50% {
        transform:
            translate3d(
                80px,
                60px,
                0
            );
    }

    to {
        transform:
            translate3d(
                -120px,
                -80px,
                0
            );
    }
}




.schools-faq::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 180px,
            rgba(255,210,28,0.035) 181px,
            rgba(255,210,28,0.035) 182px,
            transparent 183px,
            transparent 360px
        );

    animation:
        faqLineDrift 28s linear infinite;

    pointer-events: none;
}


@keyframes faqLineDrift {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            720px 420px;
    }
}



.schools-faq-inner {

    position: relative;

    z-index: 5;

    width:
        min(
            1000px,
            100%
        );

    margin:
        0 auto;
}



.schools-faq-heading {

    max-width:
        700px;

    margin:
        0 auto 65px;

    text-align:
        center;
}


.schools-faq-heading .section-eyebrow {

    justify-content:
        center;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );
}


.schools-faq-heading .section-eyebrow span {

    background:
        #ffd21c;

    box-shadow:
        0 0 15px
        rgba(
            255,
            210,
            28,
            0.55
        );
}


.schools-faq-heading h2 {

    margin-top:
        18px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3rem,
            6vw,
            5.5rem
        );

    line-height:
        0.95;

    letter-spacing:
        -0.065em;

    font-weight:
        850;

    color:
        white;
}


.schools-faq-heading h2 span {

    display:
        block;

    color:
        #ffd21c;

    text-shadow:
        0 0 35px
        rgba(
            255,
            210,
            28,
            0.14
        );
}


.schools-faq-heading p {

    max-width:
        580px;

    margin:
        25px auto 0;

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

    font-size:
        0.98rem;

    line-height:
        1.8;
}



.faq-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}



.faq-item {

    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        18px;

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

    box-shadow:
        0 15px 45px
        rgba(
            0,
            0,
            0,
            0.18
        );

    backdrop-filter:
        blur(12px);

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


.faq-item:hover {

    border-color:
        rgba(
            255,
            210,
            28,
            0.28
        );

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

    box-shadow:
        0 18px 50px
        rgba(
            0,
            0,
            0,
            0.24
        );

    transform:
        translateY(-2px);
}



.faq-question {

    width:
        100%;

    min-height:
        78px;

    padding:
        17px 22px;

    display:
        grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items:
        center;

    gap:
        15px;

    border:
        0;

    background:
        transparent;

    color:
        white;

    text-align:
        left;

    cursor:
        pointer;
}



.faq-number {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

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

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

    color:
        #ffd21c;

    font-family:
        var(--font-heading);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;
}



.faq-question-text {

    font-family:
        var(--font-heading);

    font-size:
        0.95rem;

    font-weight:
        750;

    line-height:
        1.45;

    color:
        rgba(
            255,
            255,
            255,
            0.92
        );
}



.faq-toggle {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            255,
            210,
            28,
            0.09
        );

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

    color:
        #ffd21c;

    transition:
        transform 0.4s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.faq-toggle i {

    font-size:
        0.72rem;

    transition:
        transform 0.4s ease;
}



.faq-item.active {

    border-color:
        rgba(
            255,
            210,
            28,
            0.30
        );

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

    box-shadow:
        0 20px 55px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


.faq-item.active
.faq-toggle {

    background:
        #ffd21c;

    color:
        #021128;

    transform:
        rotate(90deg);
}



.faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows 0.45s ease;
}


.faq-item.active
.faq-answer {

    grid-template-rows:
        1fr;
}


.faq-answer-inner {

    overflow:
        hidden;

    padding:
        0 82px 0 99px;

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

    font-size:
        0.91rem;

    line-height:
        1.85;

    transition:
        padding 0.45s ease;
}


.faq-item.active
.faq-answer-inner {

    padding:
        0 82px 27px 99px;
}


.faq-answer-inner p {

    margin:
        0 0 12px;
}


.faq-answer-inner p:last-child {

    margin-bottom:
        0;
}


.faq-answer-inner strong {

    color:
        #ffd21c;

    font-weight:
        750;
}




.faq-item.active::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        4px;

    height:
        100%;

    background:
        linear-gradient(
            180deg,
            #ffd21c,
            #ffed77
        );

    box-shadow:
        0 0 18px
        rgba(
            255,
            210,
            28,
            0.45
        );

    border-radius:
        4px;
}



@media (max-width: 600px) {

    .schools-faq {

        padding:
            85px 15px 100px;
    }


    .schools-faq-heading {

        margin-bottom:
            40px;
    }


    .schools-faq-heading h2 {

        font-size:
            3rem;
    }


    .faq-question {

        min-height:
            70px;

        padding:
            14px;

        grid-template-columns:
            34px
            1fr
            34px;

        gap:
            10px;
    }


    .faq-number {

        width:
            32px;

        height:
            32px;

        border-radius:
            10px;

        font-size:
            0.57rem;
    }


    .faq-question-text {

        font-size:
            0.82rem;
    }


    .faq-toggle {

        width:
            32px;

        height:
            32px;
    }


    .faq-answer-inner {

        padding:
            0 18px 0 58px;

        font-size:
            0.83rem;

        line-height:
            1.75;
    }


    .faq-item.active
    .faq-answer-inner {

        padding:
            0 18px 22px 58px;
    }

}



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

    .schools-faq::before,
    .schools-faq::after {

        animation:
            none !important;
    }

}


.school-footer {

    position: relative;

    background:
        linear-gradient(
            145deg,
            #021128 0%,
            #031a38 55%,
            #021128 100%
        );

    color: white;

    border-top:
        5px solid
        var(--yellow);

    overflow: hidden;
}




.school-footer::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -200px;

    border-radius: 50%;

    background:
        rgba(
            8,
            118,
            220,
            0.08
        );

    filter:
        blur(5px);

    pointer-events: none;
}


.school-footer::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(
            255,
            210,
            28,
            0.035
        );

    pointer-events: none;
}




.school-footer-inner {

    position: relative;

    z-index: 2;

    width:
        min(
            var(--container),
            calc(100% - 80px)
        );

    margin:
        0 auto;

    padding:
        70px 0 55px;

    display:
        grid;

    grid-template-columns:
        1fr 1.15fr 0.8fr;

    column-gap:
        80px;

    align-items:
        start;
}



.footer-label {

    display:
        block;

    margin-bottom:
        22px;

    color:
        var(--yellow);

    font-family:
        var(--font-heading);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}




.footer-brand {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-school-logo {

    width:
        105px;

    height:
        105px;

    object-fit:
        contain;

    margin-bottom:
        25px;

    filter:
        drop-shadow(
            0 10px 25px
            rgba(
                0,
                0,
                0,
                0.25
            )
        );

    transition:
        transform 0.35s ease;
}


.footer-school-logo:hover {

    transform:
        scale(1.05);
}


.footer-address {

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

    font-size:
        0.78rem;

    line-height:
        1.8;
}


.footer-address p {

    margin:
        0;
}


.footer-copyright {

    margin-top:
        18px !important;

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

    font-size:
        0.68rem;
}



.footer-contact {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-contact > a:not(.footer-reggaepixel) {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        10px;

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

    font-size:
        0.82rem;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.footer-contact > a:not(.footer-reggaepixel):hover {

    color:
        var(--yellow);

    transform:
        translateX(4px);
}



.footer-socials {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        24px;
}


.footer-socials a {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

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

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.footer-socials a:hover {

    color:
        var(--blue-950);

    background:
        var(--yellow);

    border-color:
        var(--yellow);

    transform:
        translateY(-4px);
}


.footer-socials i {

    font-size:
        0.85rem;
}



.footer-reggaepixel {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        28px;

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

    font-size:
        0.64rem;

    line-height:
        1.5;

    transition:
        color 0.25s ease;
}


.footer-reggaepixel img {

    width:
        38px;

    height:
        38px;

    object-fit:
        contain;

    opacity:
        0.82;

    transition:
        opacity 0.25s ease,
        transform 0.3s ease;
}


.footer-reggaepixel:hover {

    color:
        white;
}


.footer-reggaepixel:hover img {

    opacity:
        1;

    transform:
        scale(1.08);
}


.footer-reggaepixel strong {

    color:
        var(--yellow);

    font-weight:
        700;
}



.footer-links {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-links a {

    position:
        relative;

    display:
        inline-block;

    margin-bottom:
        13px;

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

    font-size:
        0.78rem;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.footer-links a::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -3px;

    width:
        0;

    height:
        1px;

    background:
        var(--yellow);

    transition:
        width 0.3s ease;
}


.footer-links a:hover {

    color:
        white;

    transform:
        translateX(4px);
}


.footer-links a:hover::before {

    width:
        100%;
}



.school-footer-inner::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                210,
                28,
                0.25
            ),
            transparent
        );
}




@media (max-width: 950px) {

    .school-footer-inner {

        width:
            calc(100% - 50px);

        grid-template-columns:
            1fr 1fr;

        gap:
            55px 45px;

        padding:
            60px 0 45px;
    }

    .footer-contact {

        grid-column:
            2;

        grid-row:
            1;
    }

    .footer-links {

        grid-column:
            1 / -1;

        grid-row:
            2;

        padding-top:
            10px;

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

        display:
            grid;

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

        column-gap:
            30px;
    }

    .footer-links .footer-label {

        grid-column:
            1 / -1;
    }
}




@media (max-width: 600px) {

    .school-footer-inner {

        width:
            calc(100% - 40px);

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        gap:
            45px;

        padding:
            55px 0 40px;

        text-align:
            center;
    }


    .footer-brand,
    .footer-contact,
    .footer-links {

        width:
            100%;

        align-items:
            center;
    }


    .footer-school-logo {

        width:
            90px;

        height:
            90px;
    }


    .footer-contact {

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

        padding-top:
            40px;
    }


    .footer-contact > a:not(.footer-reggaepixel) {

        margin-bottom:
            12px;
    }


    .footer-socials {

        justify-content:
            center;
    }


    .footer-links {

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

        padding-top:
            40px;

        display:
            flex;

        flex-direction:
            column;
    }


    .footer-reggaepixel {

        justify-content:
            center;

        text-align:
            left;
    }
}




.student-life-section {

    --sl-navy: #021128;
    --sl-navy-light: #06245a;
    --sl-blue: #0877d1;
    --sl-blue-light: #1295ee;
    --sl-gold: #ffd21c;
    --sl-gold-light: #ffe76a;
    --sl-text: #40556f;
    --sl-muted: #718198;

    position: relative;

    overflow: hidden;

    padding: 125px 0 120px;

    color: var(--sl-navy);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 50%,
            #ffffff 100%
        );
}




.student-life-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(8,119,209,0.055),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 35%,
            rgba(255,210,28,0.065),
            transparent 25%
        ),

        radial-gradient(
            circle at 15% 78%,
            rgba(8,119,209,0.035),
            transparent 24%
        );
}


.student-life-section::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--sl-blue),
            var(--sl-gold),
            var(--sl-blue)
        );

    background-size: 200% 100%;

    animation:
        studentLifeLine 7s linear infinite;
}


@keyframes studentLifeLine {

    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}



.student-life-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.5;
}


.student-life-orb-one {

    width: 500px;
    height: 500px;

    left: -320px;
    top: 700px;

    border:
        1px solid
        rgba(8,119,209,0.09);

    box-shadow:
        inset 0 0 70px
        rgba(8,119,209,0.025);
}


.student-life-orb-two {

    width: 380px;
    height: 380px;

    right: -250px;
    bottom: 500px;

    border:
        1px solid
        rgba(255,210,28,0.13);

    box-shadow:
        inset 0 0 70px
        rgba(255,210,28,0.025);
}




.student-life-container {

    position: relative;

    z-index: 2;

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

    margin:
        0 auto;
}



.student-life-header {

    max-width: 900px;

    margin:
        0 auto 110px;

    text-align: center;
}


.student-life-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    color: var(--sl-blue);

    font-size: 0.65rem;

    font-weight: 850;

    letter-spacing: 0.2em;
}


.student-life-eyebrow span {

    width: 34px;
    height: 2px;

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


.student-life-header h2 {

    margin-top: 20px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3rem,
            5vw,
            5.5rem
        );

    line-height: 0.95;

    letter-spacing: -0.07em;

    font-weight: 850;

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


.student-life-header h2 span {

    display: block;

    color: var(--sl-blue);
}


.student-life-header > p {

    max-width: 670px;

    margin: 28px auto 0;

    color: var(--sl-text);

    font-size: 1rem;

    line-height: 1.8;
}



.student-life-feature {

    position: relative;

    display: grid;

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

    gap: 90px;

    align-items: center;

    margin-bottom: 135px;
}


.student-life-feature-reverse {

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1fr);
}




.student-life-feature-copy {

    position: relative;

    z-index: 3;
}


.student-life-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--sl-blue);

    font-size: 0.62rem;

    font-weight: 850;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.student-life-label i {

    color: var(--sl-gold);

    font-size: 0.8rem;
}


.student-life-feature-copy h3 {

    margin-top: 17px;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2.4rem,
            4vw,
            4rem
        );

    line-height: 1;

    letter-spacing: -0.06em;

    font-weight: 850;

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


.student-life-feature-copy h3 span {

    color: var(--sl-blue);
}


.student-life-feature-copy p {

    max-width: 650px;

    margin-top: 22px;

    color: var(--sl-text);

    font-size: 0.93rem;

    line-height: 1.9;
}


.student-life-feature-copy strong {

    color: var(--sl-navy);

    font-weight: 750;
}




.student-life-visual {

    position: relative;

    min-height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.student-life-visual-pattern {

    border-radius: 35px;

    background:
        radial-gradient(
            circle,
            rgba(8,119,209,0.08),
            transparent 55%
        );
}


.student-life-visual-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px dashed
        rgba(8,119,209,0.22);
}


.ring-one {

    width: 300px;
    height: 300px;

    animation:
        studentLifeRotate
        18s
        linear
        infinite;
}


.ring-two {

    width: 430px;
    height: 430px;

    border-color:
        rgba(255,210,28,0.2);

    animation:
        studentLifeRotateReverse
        25s
        linear
        infinite;
}


@keyframes studentLifeRotate {

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes studentLifeRotateReverse {

    to {
        transform:
            rotate(-360deg);
    }
}


.student-life-visual-core {

    position: relative;

    z-index: 3;

    width: 180px;
    height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--sl-navy),
            var(--sl-blue)
        );

    box-shadow:
        0 25px 70px
        rgba(2,17,40,0.22),

        0 0 0 12px
        rgba(255,210,28,0.08);
}


.student-life-visual-core i {

    margin-bottom: 10px;

    color: var(--sl-gold);

    font-size: 2rem;
}


.student-life-visual-core strong {

    font-family:
        var(--font-heading);

    font-size: 1.25rem;

    letter-spacing: 0.13em;
}


.student-life-visual-core span {

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

    font-size: 0.55rem;

    letter-spacing: 0.22em;
}


.student-life-floating-icon {

    position: absolute;

    z-index: 4;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 18px;

    color: var(--sl-blue);

    background: white;

    border:
        1px solid
        rgba(8,119,209,0.1);

    box-shadow:
        0 15px 35px
        rgba(2,17,40,0.1);

    animation:
        studentLifeFloat
        4s
        ease-in-out
        infinite;
}


.icon-one {
    top: 70px;
    left: 18%;
}


.icon-two {
    top: 150px;
    right: 10%;

    animation-delay: -1s;
}


.icon-three {
    bottom: 95px;
    left: 12%;

    animation-delay: -2s;
}


.icon-four {
    bottom: 55px;
    right: 23%;

    animation-delay: -3s;
}


@keyframes studentLifeFloat {

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

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



.student-life-highlight {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    padding: 13px 17px;

    border:
        1px solid
        rgba(255,210,28,0.25);

    border-radius: 14px;

    background:
        rgba(255,210,28,0.08);

    color: var(--sl-text);

    font-size: 0.68rem;

    font-weight: 750;
}


.student-life-highlight i {

    color: #b18b00;
}



.student-life-image-card {

    position: relative;

    min-height: 510px;

    overflow: hidden;

    border-radius: 32px;

    background: var(--sl-navy);

    box-shadow:
        0 30px 75px
        rgba(2,17,40,0.16);
}


.student-life-image-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(2,17,40,0.86)
        );

    pointer-events: none;
}


.student-life-image-card img {

    width: 100%;
    height: 100%;

    min-height: 510px;

    display: block;

    object-fit: cover;

    transition:
        transform 0.9s ease;
}


.student-life-image-card:hover img {

    transform:
        scale(1.045);
}


.student-life-image-glow {

    position: absolute;

    z-index: 2;

    width: 190px;
    height: 190px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background:
        rgba(255,210,28,0.22);

    filter: blur(30px);
}


.student-life-image-caption {

    position: absolute;

    z-index: 4;

    left: 25px;
    right: 25px;
    bottom: 24px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px 18px;

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

    border-radius: 16px;

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

    backdrop-filter:
        blur(15px);

    color: white;
}


.student-life-image-caption > span {

    width: 42px;
    height: 42px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 12px;

    color: var(--sl-navy);

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


.student-life-image-caption strong {

    display: block;

    font-size: 0.78rem;
}


.student-life-image-caption small {

    display: block;

    margin-top: 3px;

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

    font-size: 0.62rem;
}



.student-life-security-stats {

    display: grid;

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

    gap: 10px;

    margin-top: 28px;
}


.student-life-security-stats > div {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 15px;

    border:
        1px solid
        rgba(8,119,209,0.09);

    border-radius: 15px;

    background: white;

    box-shadow:
        0 10px 30px
        rgba(2,17,40,0.045);
}


.student-life-security-stats strong {

    color: var(--sl-blue);

    font-size: 1rem;
}


.student-life-security-stats span {

    color: var(--sl-navy);

    font-size: 0.65rem;

    font-weight: 800;
}


.student-life-security-stats small {

    display: block;

    margin-top: 3px;

    color: var(--sl-muted);

    font-size: 0.55rem;

    font-weight: 600;
}



.student-life-credit-visual {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 35px;

    background:
        radial-gradient(
            circle at center,
            rgba(8,119,209,0.08),
            transparent 58%
        );
}


.credit-orbit {

    position: absolute;

    border-radius: 50%;

    border: 1px dashed
        rgba(8,119,209,0.2);
}


.credit-orbit.orbit-one {

    width: 310px;
    height: 310px;

    animation:
        studentLifeRotate
        20s
        linear
        infinite;
}


.credit-orbit.orbit-two {

    width: 420px;
    height: 420px;

    border-color:
        rgba(255,210,28,0.2);

    animation:
        studentLifeRotateReverse
        28s
        linear
        infinite;
}


.credit-core {

    position: relative;

    z-index: 4;

    width: 165px;
    height: 165px;

    display: flex;

    flex-direction: column;

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

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--sl-navy),
            var(--sl-blue)
        );

    box-shadow:
        0 25px 60px
        rgba(2,17,40,0.2),

        0 0 0 10px
        rgba(255,210,28,0.07);

    animation:
        creditPulse
        3.5s
        ease-in-out
        infinite;
}


@keyframes creditPulse {

    0%,
    100% {
        transform:
            scale(0.98);
    }

    50% {
        transform:
            scale(1.035);
    }
}


.credit-core span {

    color: var(--sl-gold);

    font-size: 0.5rem;

    font-weight: 850;

    letter-spacing: 0.18em;
}


.credit-core strong {

    margin: 4px 0;

    font-family:
        var(--font-heading);

    font-size: 2.25rem;

    line-height: 1;
}


.credit-core small {

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

    font-size: 0.5rem;

    letter-spacing: 0.15em;
}


.credit-badge {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 10px 13px;

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

    border-radius: 100px;

    color: var(--sl-navy);

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

    box-shadow:
        0 12px 30px
        rgba(2,17,40,0.1);

    font-size: 0.58rem;

    font-weight: 800;

    animation:
        studentLifeFloat
        4s
        ease-in-out
        infinite;
}


.credit-badge i {

    color: var(--sl-blue);
}


.credit-badge-one {
    top: 70px;
    left: 9%;
}


.credit-badge-two {
    top: 125px;
    right: 6%;

    animation-delay: -1s;
}


.credit-badge-three {
    bottom: 100px;
    left: 7%;

    animation-delay: -2s;
}


.credit-badge-four {
    bottom: 60px;
    right: 14%;

    animation-delay: -3s;
}



.student-life-credit-grid {

    display: grid;

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

    gap: 12px;

    margin-top: 28px;
}


.student-life-credit-grid > div {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px;

    border:
        1px solid
        rgba(8,119,209,0.08);

    border-radius: 15px;

    background: white;

    box-shadow:
        0 10px 30px
        rgba(2,17,40,0.04);
}


.student-life-credit-grid i {

    color: var(--sl-blue);

    font-size: 0.85rem;
}


.student-life-credit-grid span {

    color: var(--sl-text);

    font-size: 0.6rem;

    line-height: 1.4;
}


.student-life-credit-grid strong {

    display: block;

    color: var(--sl-navy);

    font-size: 0.67rem;
}


.student-life-impact-card {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 28px;

    padding: 17px;

    border:
        1px solid
        rgba(255,210,28,0.3);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,210,28,0.09),
            rgba(255,255,255,0.9)
        );
}


.impact-icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 14px;

    color: var(--sl-navy);

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


.student-life-impact-card strong {

    display: block;

    color: var(--sl-navy);

    font-size: 0.67rem;

    letter-spacing: 0.1em;
}


.student-life-impact-card span {

    display: block;

    margin-top: 4px;

    color: var(--sl-muted);

    font-size: 0.62rem;
}


.student-life-star-visual {

    position: relative;

    min-height: 470px;

    display: flex;

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


.star-visual-ring {

    width: 330px;
    height: 330px;

    position: absolute;

    border-radius: 50%;

    border:
        1px dashed
        rgba(255,210,28,0.5);

    animation:
        studentLifeRotate
        18s
        linear
        infinite;
}


.star-visual-center {

    position: relative;

    z-index: 3;

    width: 190px;
    height: 190px;

    display: flex;

    flex-direction: column;

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

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--sl-navy),
            #0a5da0
        );

    box-shadow:
        0 30px 70px
        rgba(2,17,40,0.2),

        0 0 0 12px
        rgba(255,210,28,0.07);
}


.star-visual-center i {

    margin-bottom: 9px;

    color: var(--sl-gold);

    font-size: 2.2rem;
}


.star-visual-center strong {

    font-family:
        var(--font-heading);

    font-size: 1.35rem;

    letter-spacing: 0.12em;
}


.star-visual-center span {

    margin-top: 4px;

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

    font-size: 0.5rem;

    letter-spacing: 0.2em;
}


.star-particle {

    position: absolute;

    z-index: 4;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 18px;

    color: var(--sl-blue);

    background: white;

    box-shadow:
        0 15px 35px
        rgba(2,17,40,0.1);

    animation:
        studentLifeFloat
        4s
        ease-in-out
        infinite;
}


.particle-one {
    top: 65px;
    left: 15%;
}


.particle-two {
    top: 100px;
    right: 12%;

    animation-delay: -1.3s;
}


.particle-three {
    bottom: 65px;
    left: 35%;

    animation-delay: -2.3s;
}



.student-life-safety-visual {

    position: relative;

    min-height: 470px;

    display: flex;

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


.safety-shield {

    position: relative;

    z-index: 3;

    width: 220px;
    height: 260px;

    display: flex;

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

    clip-path:
        polygon(
            50% 0%,
            92% 16%,
            85% 66%,
            50% 100%,
            15% 66%,
            8% 16%
        );

    background:
        linear-gradient(
            145deg,
            var(--sl-navy),
            var(--sl-blue)
        );

    box-shadow:
        0 30px 70px
        rgba(2,17,40,0.18);
}


.safety-shield-inner {

    width: 125px;
    height: 150px;

    display: flex;

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

    clip-path:
        polygon(
            50% 0%,
            92% 16%,
            85% 66%,
            50% 100%,
            15% 66%,
            8% 16%
        );

    color: var(--sl-gold);

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

    font-size: 3rem;
}


.safety-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px dashed
        rgba(8,119,209,0.2);
}


.safety-orbit-one {

    width: 330px;
    height: 330px;

    animation:
        studentLifeRotate
        20s
        linear
        infinite;
}


.safety-orbit-two {

    width: 440px;
    height: 440px;

    border-color:
        rgba(255,210,28,0.18);

    animation:
        studentLifeRotateReverse
        26s
        linear
        infinite;
}


.safety-pill {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 11px 15px;

    border-radius: 100px;

    color: var(--sl-navy);

    background: white;

    box-shadow:
        0 15px 35px
        rgba(2,17,40,0.1);

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.1em;
}


.safety-pill i {

    color: var(--sl-blue);
}


.safety-pill-one {

    top: 85px;
    left: 9%;
}


.safety-pill-two {

    bottom: 90px;
    right: 8%;
}



.student-life-safety-points {

    display: grid;

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

    gap: 11px;

    margin-top: 28px;
}


.student-life-safety-points > div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--sl-text);

    font-size: 0.67rem;

    font-weight: 700;
}


.student-life-safety-points i {

    color: var(--sl-blue);
}




.student-life-wallet-visual {

    position: relative;

    min-height: 480px;

    display: flex;

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


.wallet-glow {

    position: absolute;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8,119,209,0.1),
            transparent 68%
        );
}


.wallet-card {

    position: relative;

    z-index: 3;

    width: min(400px, 80%);

    min-height: 245px;

    padding: 27px;

    border-radius: 25px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--sl-navy),
            #084d91 60%,
            var(--sl-blue)
        );

    box-shadow:
        0 30px 70px
        rgba(2,17,40,0.25);

    transform:
        rotate(-4deg);

    transition:
        transform 0.5s ease;
}


.wallet-card:hover {

    transform:
        rotate(0deg)
        translateY(-8px);
}


.wallet-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: var(--sl-gold);

    font-size: 0.65rem;

    font-weight: 850;

    letter-spacing: 0.18em;
}


.wallet-card > small {

    display: block;

    margin-top: 30px;

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

    font-size: 0.5rem;

    letter-spacing: 0.15em;
}


.wallet-card > strong {

    display: block;

    margin-top: 8px;

    font-family:
        var(--font-heading);

    font-size: 2.2rem;

    letter-spacing: -0.04em;
}


.wallet-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 30px;

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

    font-size: 0.48rem;

    letter-spacing: 0.12em;
}


.wallet-floating {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    border-radius: 100px;

    color: var(--sl-navy);

    background: white;

    box-shadow:
        0 15px 35px
        rgba(2,17,40,0.1);

    font-size: 0.57rem;

    font-weight: 800;

    animation:
        studentLifeFloat
        4s
        ease-in-out
        infinite;
}


.wallet-floating i {

    color: var(--sl-blue);
}


.wallet-floating-one {

    top: 75px;
    left: 7%;
}


.wallet-floating-two {

    top: 140px;
    right: 2%;

    animation-delay: -1.5s;
}


.wallet-floating-three {

    bottom: 75px;
    left: 16%;

    animation-delay: -2.5s;
}




.student-life-wallet-features {

    display: grid;

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

    gap: 9px;

    margin-top: 28px;
}


.student-life-wallet-features > div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding: 13px 7px;

    border:
        1px solid
        rgba(8,119,209,0.08);

    border-radius: 14px;

    color: var(--sl-text);

    background: white;

    font-size: 0.6rem;

    font-weight: 750;
}


.student-life-wallet-features i {

    color: var(--sl-blue);

    font-size: 0.9rem;
}


.student-life-parent-note {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 15px;

    border-radius: 14px;

    background:
        rgba(2,17,40,0.035);

    font-size: 0.68rem !important;
}


.student-life-parent-note i {

    color: var(--sl-blue);
}



.student-life-closing {

    max-width: 850px;

    margin: 0 auto;

    padding-top: 15px;

    text-align: center;
}


.closing-line {

    width: 90px;
    height: 2px;

    margin: 0 auto 25px;

    background:
        linear-gradient(
            90deg,
            var(--sl-blue),
            var(--sl-gold)
        );
}


.student-life-closing > i {

    color: var(--sl-gold);

    font-size: 1.4rem;
}


.student-life-closing p {

    margin-top: 17px;

    color: var(--sl-text);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.55rem
        );

    line-height: 1.5;

    letter-spacing: -0.025em;
}


.student-life-closing strong {

    color: var(--sl-blue);
}




.student-life-feature,
.student-life-closing {

    opacity: 0;

    transform:
        translateY(55px);

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


.student-life-feature:nth-of-type(even) {

    transform:
        translateY(55px)
        translateX(-20px);
}


.student-life-feature.is-visible,
.student-life-closing.is-visible {

    opacity: 1;

    transform:
        translateY(0)
        translateX(0);
}



.student-life-feature .student-life-image-card,
.student-life-feature .student-life-visual,
.student-life-feature .student-life-credit-visual,
.student-life-feature .student-life-star-visual,
.student-life-feature .student-life-safety-visual,
.student-life-feature .student-life-wallet-visual {

    transition:
        transform 1.1s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.student-life-feature:not(.is-visible)
.student-life-image-card,
.student-life-feature:not(.is-visible)
.student-life-visual,
.student-life-feature:not(.is-visible)
.student-life-credit-visual,
.student-life-feature:not(.is-visible)
.student-life-star-visual,
.student-life-feature:not(.is-visible)
.student-life-safety-visual,
.student-life-feature:not(.is-visible)
.student-life-wallet-visual {

    transform:
        scale(0.94)
        translateY(25px);
}


.student-life-feature.is-visible
.student-life-image-card,
.student-life-feature.is-visible
.student-life-visual,
.student-life-feature.is-visible
.student-life-credit-visual,
.student-life-feature.is-visible
.student-life-star-visual,
.student-life-feature.is-visible
.student-life-safety-visual,
.student-life-feature.is-visible
.student-life-wallet-visual {

    transform:
        scale(1)
        translateY(0);
}



@media (max-width: 1050px) {

    .student-life-feature,
    .student-life-feature-reverse {

        gap: 55px;
    }

    .student-life-feature-copy h3 {

        font-size: 3rem;
    }

    .student-life-security-stats {

        grid-template-columns: 1fr;
    }

    .student-life-wallet-features {

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


@media (max-width: 800px) {

    .student-life-section {

        padding:
            90px 0 100px;
    }

    .student-life-container {

        width:
            calc(100% - 35px);
    }

    .student-life-header {

        margin-bottom: 75px;
    }

    .student-life-feature,
    .student-life-feature-reverse {

        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 90px;
    }

    .student-life-feature-reverse
    .student-life-feature-copy {

        order: 1;
    }

    .student-life-feature-reverse
    .student-life-image-card,
    .student-life-feature-reverse
    .student-life-star-visual,
    .student-life-feature-reverse
    .student-life-wallet-visual {

        order: 2;
    }

    .student-life-visual,
    .student-life-credit-visual,
    .student-life-star-visual,
    .student-life-safety-visual,
    .student-life-wallet-visual {

        min-height: 390px;
    }

    .student-life-image-card {

        min-height: 390px;
    }

    .student-life-image-card img {

        min-height: 390px;
    }

    .student-life-security-stats {

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


@media (max-width: 550px) {

    .student-life-header h2 {

        font-size: 2.8rem;
    }

    .student-life-feature-copy h3 {

        font-size: 2.35rem;
    }

    .student-life-feature-copy p {

        font-size: 0.88rem;
    }

    .student-life-security-stats {

        grid-template-columns: 1fr;
    }

    .student-life-credit-grid {

        grid-template-columns: 1fr;
    }

    .student-life-wallet-features {

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

    .student-life-visual-core,
    .credit-core {

        width: 145px;
        height: 145px;
    }

    .ring-one,
    .credit-orbit.orbit-one {

        width: 250px;
        height: 250px;
    }

    .ring-two,
    .credit-orbit.orbit-two {

        width: 330px;
        height: 330px;
    }

    .student-life-floating-icon {

        width: 48px;
        height: 48px;

        border-radius: 14px;
    }

    .credit-badge {

        font-size: 0.5rem;

        padding: 8px 10px;
    }

    .student-life-safety-points {

        grid-template-columns: 1fr;
    }

    .safety-shield {

        width: 175px;
        height: 210px;
    }

    .safety-shield-inner {

        width: 100px;
        height: 125px;

        font-size: 2.3rem;
    }

    .safety-orbit-one {

        width: 270px;
        height: 270px;
    }

    .safety-orbit-two {

        width: 340px;
        height: 340px;
    }

    .wallet-card {

        width: 88%;

        min-height: 220px;

        padding: 22px;
    }

    .wallet-card > strong {

        font-size: 1.8rem;
    }

    .wallet-floating {

        font-size: 0.5rem;
    }

    .wallet-floating-two {

        right: -5px;
    }
}



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

    .student-life-section *,
    .student-life-section *::before,
    .student-life-section *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }

    .student-life-feature,
    .student-life-closing {

        opacity: 1;

        transform: none !important;
    }
}