@import url(style.css);
:root{

--navy:#14264d;
--gold:#f7b733;
--bg:#faf8f5;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
overflow-x:hidden;
}

/* SAME NAVBAR */

.header{
position:fixed;
width:100%;
z-index:999;
}

.navbar{

height:90px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 40px;

border-bottom-right-radius:50px;
}

/* HERO */

.about-hero{

height:80vh;

background:
linear-gradient(
135deg,
#14264d,
#243f73);

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

padding:100px 20px;
}

.about-hero h1{

font-size:4rem;

margin:20px 0;
}

/* ABOUT */

.about-school{

padding:100px;

display:grid;

grid-template-columns:
1fr 1fr;

gap:80px;

align-items:center;
}

.about-image img{

width:100%;

border-radius:40px;
}

.stats{

display:flex;

gap:50px;

margin-top:40px;
}

.stats h3{

color:var(--gold);

font-size:2.5rem;
}

/* MISSION */

.mission{

padding:100px;

display:grid;

grid-template-columns:
1fr 1fr;

gap:40px;
}

.card{

background:white;

padding:50px;

border-radius:30px;

text-align:center;
}

/* TIMELINE */

.timeline{

padding:100px;

text-align:center;
}

.timeline-grid{

display:grid;

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

gap:30px;

margin-top:60px;
}

/* PRINCIPAL */

.principal{

padding:100px;

display:grid;

grid-template-columns:
400px 1fr;

gap:60px;
}

.principal-photo img{

width:100%;

border-radius:30px;
}

/* VALUES */

.values{

padding:100px;

text-align:center;
}

.values-grid{

display:grid;

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

gap:30px;

margin-top:60px;
}

.value{

background:white;

padding:50px;

border-radius:30px;
}

/* CTA */

.cta{

background:var(--navy);

padding:100px;

text-align:center;

color:white;
}

.cta a{

background:var(--gold);

padding:20px 40px;

border-radius:50px;

display:inline-block;

margin-top:30px;

text-decoration:none;
}

/* RESPONSIVE */

@media(max-width:992px){

.about-school,
.principal,
.mission{

grid-template-columns:1fr;
}

.timeline-grid,
.values-grid{

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

@media(max-width:768px){

.timeline-grid,
.values-grid{

grid-template-columns:1fr;
}

.about-hero h1{

font-size:2.5rem;
}

.stats{

flex-direction:column;
}
}

/* =====================================================
                RESPONSIVE SYSTEM
===================================================== */

img{
    max-width:100%;
    height:auto;
}

h1,h2,h3,p{
    word-wrap:break-word;
}

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

@media(max-width:1200px){

    .about-school,
    .principal{

        gap:40px;

        padding:80px 50px;
    }

    .mission,
    .timeline,
    .values{

        padding:80px 50px;
    }

    .timeline-grid,
    .values-grid{

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

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

@media(max-width:992px){

    .about-school{

        grid-template-columns:1fr;

        text-align:center;
    }

    .principal{

        grid-template-columns:1fr;

        text-align:center;
    }

    .mission{

        grid-template-columns:1fr;
    }

    .timeline-grid{

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

    .values-grid{

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

    .stats{

        justify-content:center;

        gap:30px;
    }

    .principal-photo img{

        max-width:350px;

        margin:auto;

        display:block;
    }
}

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

@media(max-width:768px){

    /* NAVBAR */

    .nav-links,
    .apply-btn{

        display:none;
    }

    .menu-btn{

        display:flex;
    }

    .navbar{

        height:75px;

        padding:0 20px;
    }

    .logo h1{

        font-size:2.5rem;
    }

    .logo span{

        font-size:.7rem;
    }

    /* HERO */

    .about-hero{

        min-height:60vh;

        height:auto;

        padding:
        120px
        20px
        60px;
    }

    .about-hero h1{

        font-size:2.3rem;

        line-height:1.2;
    }

    .about-hero p{

        line-height:1.8;
    }

    /* SECTION PADDING */

    .about-school,
    .mission,
    .timeline,
    .principal,
    .values,
    .cta{

        padding:50px 20px;
    }

    /* ABOUT */

    .about-school{

        display:flex;

        flex-direction:column;

        text-align:center;

        gap:30px;
    }

    .about-image img{

        border-radius:25px;
    }

    /* STATS */

    .stats{

        flex-direction:column;

        gap:20px;

        align-items:center;
    }

    /* MISSION */

    .mission{

        display:flex;

        flex-direction:column;

        gap:25px;
    }

    .card{

        padding:30px;
    }

    /* TIMELINE */

    .timeline-grid{

        grid-template-columns:1fr;

        gap:20px;
    }

    .year{

        background:white;

        padding:25px;

        border-radius:20px;

        box-shadow:
        0 5px 20px
        rgba(0,0,0,.05);
    }

    /* PRINCIPAL */

    .principal{

        display:flex;

        flex-direction:column;

        gap:30px;
    }

    .principal-photo{

        width:100%;
    }

    .principal-photo img{

        width:100%;

        max-width:300px;

        margin:auto;

        display:block;
    }

    .principal-text{

        text-align:center;
    }

    /* VALUES */

    .values-grid{

        grid-template-columns:1fr;

        gap:20px;
    }

    .value{

        padding:30px;
    }

    /* CTA */

    .cta{

        padding:60px 20px;
    }

    .cta h2{

        font-size:2rem;
    }

    .cta a{

        padding:16px 35px;
    }
}

/* ==========================================
            SMALL PHONES
========================================== */

@media(max-width:480px){

    .about-hero h1{

        font-size:1.9rem;
    }

    .about-hero p{

        font-size:.95rem;
    }

    .stats h3{

        font-size:2rem;
    }

    .card{

        padding:25px;
    }

    .value{

        padding:25px;
    }

    .timeline h2,
    .values h2{

        font-size:2rem;
    }

    .cta h2{

        font-size:1.7rem;
    }
}
/* FINAL RESPONSIVE FIXES */
body{width:100%;overflow-x:hidden}.header{left:0;right:0}@media(max-width:1200px){.about-school,.principal{grid-template-columns:1fr!important;text-align:center;padding:70px 40px!important}.mission{grid-template-columns:1fr!important;padding:70px 40px!important}.timeline,.values,.cta{padding:70px 40px!important}.principal-photo img{max-width:380px;margin:auto}}@media(max-width:768px){.menu-btn{display:flex!important}.nav-links,.apply-btn{display:none!important}.navbar{height:75px;padding:0 16px!important}.logo h1{font-size:2.2rem!important}.logo span{font-size:.65rem!important}.about-hero{padding:110px 18px 50px!important;min-height:55vh}.about-hero h1{font-size:2rem!important}.about-school,.mission,.timeline,.principal,.values,.cta{padding:45px 18px!important}.about-school,.mission,.principal{display:flex!important;flex-direction:column!important;gap:25px!important;text-align:center!important}.stats{flex-direction:column!important;align-items:center!important}.timeline-grid,.values-grid{grid-template-columns:1fr!important}.principal-photo img{max-width:260px!important;margin:auto}.card,.value,.year{padding:25px!important}}@media(max-width:430px){.navbar{height:68px}.logo h1{font-size:1.9rem!important}.logo span{font-size:.55rem!important}.about-hero h1{font-size:1.7rem!important}}