/* =========================
   ABOUT PAGE
========================= */


/* HERO */

.about-hero{

    background:var(--light);

    padding:100px 10%;

    text-align:center;

}


.about-hero h1{

    font-family:var(--font-heading);

    font-size:var(--heading-xl);

    color:var(--primary);

    margin-bottom:20px;

}


.about-hero h1 span{

    color:var(--accent);

}



.about-hero p{

    max-width:750px;

    margin:auto;

    font-size:var(--text-lg);

    color:var(--text);

    line-height:1.7;

}





/* =========================
   STORY SECTION
========================= */


.section{

    padding:var(--section-padding);

}



.section h2{
    font-family:var(--font-heading);
    font-size:var(--heading-lg);
    text-align:center;
    color:var(--primary);
    margin-bottom:35px;
}



.section > p{

    max-width:850px;

    margin:auto;

    text-align:center;

    font-size:var(--text-md);

    line-height:1.8;

}





/* =========================
   MISSION VISION
========================= */


.impact{


    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    padding:80px 10%;

    background:var(--light);

}



.impact div{


    background:var(--white);

    width:300px;

    padding:35px;

    text-align:center;

    border-radius:22px;

    box-shadow:
    0 12px 35px rgba(0,7,68,.12);

    border-top:5px solid var(--accent);

    transition: 0.3s;

}




.impact div:hover{
    transform:translateY(-10px);
}



.impact h3{


    font-family:var(--font-heading);

    color:var(--primary);

    margin-bottom:15px;


}



.impact p{


    font-size:var(--text-sm);

    color:var(--text);


}







/* =========================
   DIFFERENT SECTION CARDS
========================= */


.cards{


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;


}




.card{


    width:290px;

    padding:35px;

    background:var(--white);

    border-radius:22px;

    box-shadow:
    0 12px 35px rgba(0,7,68,.12);

    transition: 0.3s;

}



.card:hover{
    transform:translateY(-10px);
}




.card h3{


    font-family:var(--font-heading);

    color:var(--accent);

    margin-bottom:15px;


}



.card p{


    font-size:var(--text-sm);

    line-height:1.7;

}





/* =========================
   DARK CTA SECTION
========================= */


.dark{


    background:var(--light);

    padding:80px 10%;

    text-align:center;

}



.dark h2{


    color: var(--accent);

    font-family: var(--font-heading);

    font-size:var(--heading-lg);

    margin-bottom:30px;


}



.center-btn{


    text-align:center;

}



.btn{


    display:inline-block;

    padding:15px 35px;

    border-radius:30px;

    background:var(--orange);

    color:white;

    text-decoration:none;

    font-weight:600;
    transition: 0.3s;

}



.btn:hover{
    background:var(--primary);
}







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


@media(max-width:800px){



.about-hero h1{


    font-size:38px;


}




.impact div,
.card{


    width:100%;


}


}