/* =========================================================
   FR. AGNEL SCHOOL - OUR ACADEMICS
========================================================= */


.academics-page {

    min-height:100vh;

    background:#f7f9fc;

    font-family:'Inter',sans-serif;

}



.academics-container {

    width:90%;

    max-width:1150px;

    margin:auto;

}



/* HERO */


.academics-hero {

    padding:180px 0 80px;

    background:linear-gradient(
        135deg,
        #0f3d91,
        #174fae
    );

    color:white;

    text-align:center;

}


.page-tag {

    display:inline-block;

    padding:6px 15px;

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

    border-radius:20px;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

}



.academics-hero h1 {

    max-width:850px;

    margin:20px auto 0;

    font-size:42px;

    line-height:1.2;

    font-weight:800;

}



.academics-hero p {

    max-width:650px;

    margin:20px auto 0;

    font-size:16px;

    line-height:1.7;

}





/* CARDS */


.academics-section {

    padding:90px 0;

}



.academic-grid {

    display:grid;

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

    gap:30px;

}



.academic-card {

    background:white;

    padding:40px 35px;

    border-radius:18px;

    text-align:center;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.08);

}



.academic-icon {

    width:70px;

    height:70px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f2f6ff;

    border-radius:50%;

    font-size:32px;

}



.academic-card h2 {

    margin-top:25px;

    color:#0f3d91;

    font-size:24px;

}



.gold-line {

    width:55px;

    height:3px;

    margin:15px auto 25px;

    background:#d6a63a;

    border-radius:10px;

}



.academic-card p {

    color:#555;

    font-size:15px;

    line-height:1.8;

}





/* MESSAGE */


.academic-message {

    padding:0 0 100px;

}



.message-box {

    background:white;

    padding:50px;

    border-radius:18px;

    text-align:center;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.08);

}



.message-box h2 {

    color:#0f3d91;

    font-size:30px;

}






/* MOBILE */


@media(max-width:700px){


.academics-hero {

    padding:100px 0 60px;

}


.academics-hero h1 {

    font-size:32px;

}


.academic-grid {

    grid-template-columns:1fr;

}


.academics-section {

    padding:60px 0;

}


.message-box {

    padding:35px 25px;

}

}



@media(max-width:390px){


.academics-hero h1 {

    font-size:28px;

}


.academic-card h2 {

    font-size:21px;

}


.academic-card p {

    font-size:13px;

}

}