/* =========================================
   GLOBAL HEALTH EXPLORERS
   EDUCATION FRAMEWORK V2.0
========================================= */


/* =========================================
   HERO
========================================= */


.education-hero {

    min-height:65vh;

    background:

    linear-gradient(
        rgba(15,76,129,0.70),
        rgba(15,76,129,0.70)
    ),

    url("images/homepage/hero-global-health.jpg");


    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}



.education-hero .hero-content {

    max-width:950px;

    padding:40px;

}



.education-hero h1 {

    font-size:3.2rem;

    line-height:1.3;

    margin-bottom:25px;

}



.education-hero p {

    font-size:1.2rem;

    line-height:1.8;

}





/* =========================================
   SECTIONS
========================================= */


.education-section {

    padding:70px 20px;

}



.light-background {

    background:#f4f9fc;

}



.education-card {

    max-width:1100px;

    margin:auto;

    background:white;

    padding:45px;

    border-radius:16px;

    box-shadow:

    0 8px 25px rgba(0,0,0,0.08);

}



.education-card h2 {

    color:#0f4c81;

    font-size:2.2rem;

    margin-bottom:25px;

}



.education-card p {

    font-size:1.08rem;

    line-height:1.8;

    margin-bottom:20px;

}





/* =========================================
   LEARNING PHILOSOPHY
========================================= */


.learning-philosophy-grid {

    display:grid;

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

    gap:20px;

    margin-top:35px;

}



.learning-philosophy-grid div {

    background:#eaf4f8;

    padding:25px;

    border-radius:12px;

    text-align:center;

    border-top:4px solid #17a2b8;

}



.learning-philosophy-grid h3 {

    color:#0f4c81;

    margin-bottom:12px;

}






/* =========================================
   MODULE GRID
========================================= */


.modules-grid {

    display:grid;

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

    gap:25px;

    margin-top:40px;

}



.module-card {

    background:#f8fbfd;

    padding:25px;

    border-radius:14px;

    border-left:5px solid #0f4c81;

    transition:0.3s;

}



.module-card:hover {

    transform:translateY(-5px);

}



.module-card h3 {

    color:#0f4c81;

    font-size:1.1rem;

    margin-bottom:15px;

}



.module-card p {

    font-size:0.95rem;

}





/* =========================================
   GHBDC FEATURE
========================================= */


.ghbdc-feature {

    background:#0f4c81;

    padding:70px 20px;

    color:white;

}



.ghbdc-box {

    max-width:950px;

    margin:auto;

    text-align:center;

}



.ghbdc-box h2 {

    font-size:2.4rem;

    margin-bottom:25px;

}



.ghbdc-box p {

    font-size:1.15rem;

    line-height:1.8;

}



.cta-button {

    display:inline-block;

    margin-top:30px;

    background:white;

    color:#0f4c81;

    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

}





/* =========================================
   LEADERSHIP PATHWAY
========================================= */


.pathway-container {

    margin-top:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}



.pathway-step {

    background:#eaf4f8;

    padding:25px;

    border-radius:12px;

    text-align:center;

    width:170px;

}



.pathway-step h3 {

    color:#0f4c81;

}



.pathway-arrow {

    font-size:2rem;

    color:#17a2b8;

}





/* =========================================
   SDG BOX
========================================= */


.sdg-box {

    margin-top:30px;

    background:#eaf4f8;

    padding:25px;

    border-radius:12px;

    text-align:center;

    color:#0f4c81;

    font-weight:bold;

}







/* =========================================
   FUTURE VISION
========================================= */


.education-future {

    background:#0f4c81;

    color:white;

    text-align:center;

    padding:70px 25px;

}



.education-future h2 {

    font-size:2.3rem;

    margin-bottom:30px;

}



.education-future p {

    max-width:850px;

    margin:20px auto;

    line-height:1.8;

    font-size:1.15rem;

}






/* =========================================
   SIGNATURE
========================================= */


.education-signature {

    background:#eaf4f8;

    text-align:center;

    padding:60px 20px;

}



.education-signature p {

    color:#0f4c81;

    font-size:1.8rem;

    font-style:italic;

}






/* =========================================
   RESPONSIVE DESIGN
========================================= */


@media(max-width:1100px){


.modules-grid {

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

}


.learning-philosophy-grid {

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

}


}



@media(max-width:700px){


.education-hero h1 {

    font-size:2rem;

}



.education-card {

    padding:25px;

}



.modules-grid,

.learning-philosophy-grid {

    grid-template-columns:1fr;

}



.pathway-arrow {

    transform:rotate(90deg);

}


}