/* =========================================
   GLOBAL HEALTH EXPLORERS
   CONSTITUTION PAGE V2.0
========================================= */


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

.constitution-hero {

    min-height: 55vh;

    background:
    linear-gradient(
        rgba(15,76,129,0.85),
        rgba(15,76,129,0.75)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}



.hero-content {

    max-width:900px;

    padding:40px;

}



.constitution-hero h1 {

    font-size:3rem;

    line-height:1.3;

    margin-bottom:20px;

}



.constitution-hero h2 {

    font-size:1.6rem;

    font-weight:400;

    margin-bottom:20px;

}



.constitution-hero p {

    font-style:italic;

    font-size:1.1rem;

}





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


.constitution-section {

    padding:70px 20px;

}



.light-background {

    background:#f4f9fc;

}



.constitution-container {

    max-width:1000px;

    margin:auto;

}






/* =========================================
   ARTICLE CARDS
========================================= */


.article-card {

    background:white;

    padding:40px;

    border-radius:16px;

    box-shadow:

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

    margin-bottom:30px;

}



.article-card h2 {

    color:#0f4c81;

    font-size:2rem;

    margin-bottom:25px;

}



.article-card p {

    font-size:1.08rem;

    line-height:1.85;

    margin-bottom:20px;

}





/* =========================================
   GUIDING PRINCIPLES
========================================= */


.principles-list {

    display:grid;

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

    gap:15px;

    margin:30px 0;

    padding:0;

    list-style:none;

}



.principles-list li {

    background:#eaf4f8;

    border-left:5px solid #17a2b8;

    padding:16px 20px;

    border-radius:8px;

    font-weight:500;

}






/* =========================================
   FIVE PILLARS
========================================= */


.pillar-grid {

    display:grid;

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

    gap:25px;

    margin:35px 0;

}



.pillar-card {

    background:#f8fbfd;

    padding:30px;

    border-radius:14px;

    border-top:5px solid #0f4c81;

    transition:0.3s;

}



.pillar-card:hover {

    transform:translateY(-5px);

}



.pillar-card h3 {

    color:#0f4c81;

    margin-bottom:15px;

}



.pillar-card p {

    font-size:0.95rem;

}





/* =========================================
   CONSTITUTIONAL COMMITMENT
========================================= */


.constitutional-commitment {

    background:#0f4c81;

    color:white;

    text-align:center;

    padding:75px 25px;

}



.constitutional-commitment h2 {

   color:white;
    font-size:2.3rem;

    margin-bottom:30px;

}



.constitutional-commitment p {

    max-width:850px;

    margin:20px auto;

    font-size:1.15rem;

    line-height:1.8;

}






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


.constitution-signature {

    background:#eaf4f8;

    text-align:center;

    padding:65px 20px;

}



.constitution-signature p {

    color:#0f4c81;

    font-size:1.8rem;

    line-height:1.8;

    font-style:italic;

}







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


@media(max-width:900px){


.constitution-hero h1 {

    font-size:2.4rem;

}



.pillar-grid {

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

}


}




@media(max-width:600px){


.constitution-hero {

    min-height:45vh;

}



.constitution-hero h1 {

    font-size:1.9rem;

}



.constitution-hero h2 {

    font-size:1.2rem;

}



.constitution-section {

    padding:45px 15px;

}



.article-card {

    padding:25px;

}



.principles-list,

.pillar-grid {

    grid-template-columns:1fr;

}



.constitution-signature p {

    font-size:1.3rem;

}


}