.school-hero-slider{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#063f68;
}

.school-hero-track{
    position:relative;
    min-height:570px;
}

.school-hero-slide{
    position:absolute;
    inset:0;
    min-height:570px;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    opacity:0;
    visibility:hidden;
    transform:scale(1.015);
    transition:
        opacity .7s ease,
        visibility .7s ease,
        transform 5.5s linear;
}

.school-hero-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    z-index:2;
}

.school-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(2,48,78,.92) 0%,
            rgba(3,64,97,.75) 38%,
            rgba(3,54,82,.27) 70%,
            rgba(0,0,0,.08) 100%
        );
}

.school-hero-container{
    position:relative;
    z-index:3;
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}

.school-hero-copy{
    max-width:620px;
    color:#fff;
    padding:72px 0;
}

.school-hero-eyebrow{
    display:block;
    margin-bottom:12px;
    color:#ffd053;
    font-family:Poppins,Arial,sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:2.7px;
}

.school-hero-copy h1{
    max-width:650px;
    margin:0;
    color:#fff;
    font-family:"Playfair Display",Poppins,serif;
    font-size:58px;
    line-height:1.02;
    font-weight:700;
    text-shadow:0 3px 18px rgba(0,0,0,.16);
}

.school-hero-copy p{
    max-width:590px;
    margin:18px 0 0;
    color:#eef7fb;
    font-family:Poppins,Arial,sans-serif;
    font-size:14px;
    line-height:1.75;
}

.school-hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
}

.school-hero-btn{
    min-height:45px;
    padding:11px 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    font-family:Poppins,Arial,sans-serif;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    transition:.2s ease;
}

.school-hero-btn:hover{
    transform:translateY(-2px);
}

.school-hero-btn.primary{
    background:#ffbe22;
    color:#16314d;
    box-shadow:0 9px 22px rgba(0,0,0,.14);
}

.school-hero-btn.secondary{
    border:1px solid rgba(255,255,255,.76);
    background:rgba(0,43,73,.15);
    color:#fff;
    backdrop-filter:blur(5px);
}

.school-hero-arrow{
    position:absolute;
    z-index:5;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:54px;
    border:0;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:rgba(4,40,66,.34);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    backdrop-filter:blur(7px);
}

.school-hero-arrow:hover{
    background:rgba(4,40,66,.58);
}

.school-hero-arrow.prev{left:18px}
.school-hero-arrow.next{right:18px}

.school-hero-dots{
    position:absolute;
    z-index:6;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
}

.school-hero-dots button{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.56);
    cursor:pointer;
    transition:.2s;
}

.school-hero-dots button.is-active{
    width:28px;
    border-radius:99px;
    background:#ffbe22;
}

@media(max-width:850px){
    .school-hero-track,
    .school-hero-slide{
        min-height:540px;
    }

    .school-hero-copy{
        padding:60px 38px;
    }

    .school-hero-copy h1{
        font-size:46px;
    }
}

@media(max-width:560px){
    .school-hero-track,
    .school-hero-slide{
        min-height:505px;
    }

    .school-hero-slide{
        background-position:center;
    }

    .school-hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(2,43,72,.91),
                rgba(3,59,91,.65)
            );
    }

    .school-hero-container{
        width:min(100% - 24px,1180px);
    }

    .school-hero-copy{
        padding:48px 18px;
    }

    .school-hero-eyebrow{
        font-size:9px;
        letter-spacing:1.7px;
    }

    .school-hero-copy h1{
        font-size:39px;
    }

    .school-hero-copy p{
        font-size:11px;
    }

    .school-hero-arrow{
        width:34px;
        height:44px;
        font-size:27px;
    }

    .school-hero-arrow.prev{left:7px}
    .school-hero-arrow.next{right:7px}
}