@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
    --school-navy:#07366b;
    --school-dark:#022742;
    --school-green:#14a94e;
    --school-text:#536b82;
    --school-soft:#f0f5fb;
}

.school-container{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
}

.school-hero{
    padding:54px 0;
    color:#fff;
    background:linear-gradient(110deg,#073d6f,#0d5274);
}

.school-hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:54px;
    align-items:center;
}

.school-tag{
    display:inline-flex;
    padding:7px 13px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.12);
    font-size:12px;
    font-weight:700;
}

.school-hero h1{
    max-width:650px;
    margin:16px 0;
    font-size:clamp(38px,4vw,58px);
    line-height:1.03;
    letter-spacing:-2px;
}

.school-hero-copy>p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.94);
    font-size:16px;
    line-height:1.65;
}

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

.school-actions-center{justify-content:center}

.school-btn{
    display:inline-flex;
    min-height:46px;
    padding:0 22px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}

.school-btn:hover{transform:translateY(-4px)}

.school-btn-whatsapp{
    color:#fff;
    background:var(--school-green);
    box-shadow:0 10px 24px rgba(20,169,78,.25);
}

.school-btn-whatsapp:hover{
    color:#fff;
    background:#109943;
    box-shadow:0 16px 32px rgba(20,169,78,.34);
}

.school-btn-light{
    color:var(--school-dark);
    background:#fff;
    border:1px solid #d9e2eb;
}

.school-btn-light:hover{
    color:var(--school-dark);
    box-shadow:0 14px 30px rgba(2,39,66,.15);
}

.school-info-card{
    padding:28px;
    color:var(--school-dark);
    background:#fff;
    border-radius:20px;
    box-shadow:0 20px 48px rgba(2,39,66,.18);
    transition:transform .30s ease,box-shadow .30s ease;
}

.school-info-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 68px rgba(2,39,66,.23);
}

.school-info-card img{
    width:76px;
    height:76px;
    object-fit:contain;
}

.school-info-card h2{
    margin:14px 0 12px;
    font-size:21px;
}

.school-info-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

.school-info-card li{
    padding:11px 0;
    border-bottom:1px solid #e5ecf2;
    font-size:13px;
}

.school-video-section{
    padding:72px 0;
    background:#fff;
}

.school-heading{
    max-width:820px;
    margin:0 auto 38px;
    text-align:center;
}

.school-heading>span{
    color:var(--school-green);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.school-heading h2{
    margin:8px 0 12px;
    color:var(--school-dark);
    font-size:clamp(30px,3vw,40px);
    line-height:1.14;
}

.school-heading p{
    margin:0;
    color:var(--school-text);
    font-size:16px;
    line-height:1.6;
}

.school-video-frame{
    max-width:980px;
    margin:0 auto;
    padding:10px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 22px 52px rgba(2,39,66,.18);
    transition:transform .30s ease,box-shadow .30s ease;
}

.school-video-frame:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 68px rgba(2,39,66,.23);
}

.school-video-frame video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    border-radius:16px;
}

.school-section{
    padding:76px 0;
    background:#fff;
}

.school-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.school-feature-card{
    min-height:220px;
    padding:28px;
    background:#fff;
    border:1px solid #e4ebf2;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(2,39,66,.08);
    transition:transform .30s ease,box-shadow .30s ease,border-color .30s ease;
}

.school-feature-card:hover{
    transform:translateY(-9px);
    border-color:rgba(20,169,78,.35);
    box-shadow:0 26px 58px rgba(2,39,66,.16);
}

.school-feature-icon{
    font-size:34px;
    margin-bottom:14px;
    transition:transform .28s ease;
}

.school-feature-card:hover .school-feature-icon{
    transform:scale(1.10) rotate(-3deg);
}

.school-feature-card h3{
    margin:0 0 10px;
    color:var(--school-dark);
    font-size:21px;
}

.school-feature-card p{
    margin:0;
    color:var(--school-text);
    line-height:1.6;
}

.school-courses-section{
    padding:76px 0;
    background:var(--school-soft);
}

.school-course-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
}

.school-course-card{
    min-height:285px;
    padding:34px 30px;
    display:flex;
    flex-direction:column;
    color:var(--school-dark);
    background:#fff;
    border:1px solid #e5ebf2;
    border-radius:20px;
    text-decoration:none;
    box-shadow:0 12px 28px rgba(2,39,66,.07);
    transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}

.school-course-card:hover{
    transform:translateY(-10px);
    border-color:rgba(20,169,78,.35);
    box-shadow:0 28px 62px rgba(2,39,66,.17);
}

.school-course-card h3{
    margin:0 0 16px;
    font-size:25px;
    transition:color .25s ease;
}

.school-course-card:hover h3{color:var(--school-green)}

.school-course-card p{
    margin:0 0 24px;
    color:var(--school-text);
    font-size:16px;
    line-height:1.6;
}

.school-course-card span{
    margin-top:auto;
    color:var(--school-green);
    font-size:18px;
    font-weight:800;
    transition:transform .25s ease,color .25s ease;
}

.school-course-card:hover span{
    color:#0d913e;
    transform:translateX(5px);
}

.school-cta-section{
    padding:72px 0;
    background:#eef5fa;
}

.school-cta-box{
    padding:42px;
    text-align:center;
    background:#fff;
    border-radius:22px;
    box-shadow:0 14px 34px rgba(2,39,66,.09);
    transition:transform .30s ease,box-shadow .30s ease;
}

.school-cta-box:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 54px rgba(2,39,66,.14);
}

.school-cta-box h2{
    margin:0 0 12px;
    font-size:32px;
}

.school-cta-box p{
    max-width:760px;
    margin:0 auto;
    color:var(--school-text);
    font-size:16px;
    line-height:1.6;
}

.topbar .menu a:not(.btn-top){
    position:relative;
    transition:color .24s ease;
}

.topbar .menu a:not(.btn-top)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:2px;
    background:var(--school-green);
    transition:width .24s ease;
}

.topbar .menu a:not(.btn-top):hover{color:var(--school-green)}
.topbar .menu a:not(.btn-top):hover::after{width:100%}

@media(max-width:850px){
    .school-hero-grid,
    .school-feature-grid,
    .school-course-grid{
        grid-template-columns:1fr;
    }

    .school-hero h1{font-size:38px}
}

@media(max-width:560px){
    .school-container{width:min(100% - 28px,1180px)}
    .school-actions{flex-direction:column}
    .school-btn{width:100%}
    .school-cta-box{padding:30px 22px}
}