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



/* HERO */


.about-hero{

    background:var(--light);

    padding:120px 10%;

    text-align:center;

}



.about-hero h1{


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

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

    color:var(--primary);

    margin-bottom:25px;


}



.about-hero h1 span{


    color:var(--accent);


}



.about-hero p{


    max-width:800px;

    margin:auto;

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

    line-height:1.8;


}









/* WHO WE ARE */


.who-section{


    padding:var(--section-padding);

    display:flex;

    justify-content:center;

    text-align:center;


}



.who-content{


    max-width:850px;


}



.who-content h2{


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

    color:var(--primary);

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

    margin-bottom:30px;


}



.who-content p{


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

    line-height:1.9;


}









/* MISSION */


.mission-section{


    background:var(--light);

    padding:90px 10%;

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;


}



.mission-card{


    background:white;

    width:300px;

    padding:40px 30px;

    text-align:center;

    border-radius:25px;

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

    transition:.3s;


}



.mission-card:hover{


    transform:translateY(-10px);


}



.mission-card h3{


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

    color:var(--accent);

    margin-bottom:20px;


}









/* APPROACH */


.approach-section{


    padding:var(--section-padding);

    text-align:center;


}



.approach-section h2{


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

    color:var(--primary);

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

    margin-bottom:45px;


}




.approach-grid{


    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;


}



.approach-grid div{


    width:300px;

    padding:35px;

    background:white;

    border-radius:22px;

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

    transition:.3s;


}



.approach-grid div:hover{


    transform:translateY(-10px);


}




.approach-grid h3{


    color:var(--primary);

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

    margin:15px 0;


}









/* JOURNEY */


.journey-section{


    background:var(--light);

    padding:90px 10%;

    text-align:center;


}




.journey-section h2{


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

    color:var(--primary);

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

    margin-bottom:50px;


}




.timeline{


    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;


}



.timeline div{


    width:280px;

    background:white;

    padding:35px;

    border-radius:20px;

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



}




.timeline h3{


    font-size:40px;

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

    color:var(--accent);

    margin-bottom:15px;


}









/* TEAM */

.team-section{
    padding:var(--section-padding);
    text-align:center;
}

.team-section h2{
    font-family:var(--font-heading);
    font-size:var(--heading-lg);
    color:var(--primary);
    margin-bottom:45px;
}

.team-grid{
    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;
}

.team-card{
    width:300px;
    padding:35px;
    background:white;
    border-radius:25px;
    box-shadow:0 12px 35px rgba(0,7,68,.12);
    transition:.3s;
        background: 
        linear-gradient(#fff, #fff) padding-box, 
        linear-gradient(to top, var(--accent), transparent) border-box,
        linear-gradient(to bottom, var(--orange), transparent) border-box;
    border: 1px solid transparent;
}

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

.team-card img{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

.team-card h3{
    font-family:var(--font-heading);
    color:var(--primary);
}

.team-card span{
    color:var(--accent);
    font-weight:600;
}

.team-card p{
    margin:15px 0;
}

.team-card a{
    display: block;
    font-size:25px;
    color:var(--primary);
    transition: 0.3s;
}

.team-card a:hover{
    color:var(--accent);
}



/* IMPACT */


.impact-section{


    background:var(--primary);

    padding:80px 10%;

    display:flex;

    justify-content:center;

    gap:70px;

    flex-wrap:wrap;

    text-align:center;


}



.impact-section div{


    color:white;


}



.impact-section h3{


    font-size:50px;

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

    color:var(--accent);


}









/* CTA */


.about-cta{


    padding:90px 10%;

    text-align:center;


}




.about-cta h2{


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

    color:var(--primary);

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

    margin-bottom:30px;


}





.about-cta a{


    display:inline-block;

    padding:15px 35px;

    background:var(--orange);

    color:white;

    text-decoration:none;

    border-radius:30px;

    font-weight:600;
    transition: 0.3s;

}



.about-cta a:hover{


    background:var(--primary);


}

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


/* TABLET */

@media (max-width:1024px){



.about-hero{

padding:90px 7%;

}



.about-hero h1{

font-size:48px;

}



.about-hero p{

font-size:18px;

}




.who-section{

padding:70px 7%;

}



.who-content h2,
.approach-section h2,
.journey-section h2,
.team-section h2,
.about-cta h2{


font-size:38px;


}






.mission-section{


padding:70px 7%;


}



.mission-card{


width:280px;


}







.approach-section{


padding:70px 7%;


}




.approach-grid div{


width:280px;


}








.timeline div{


width:260px;


}






.team-card{


width:280px;


}




.impact-section{


gap:40px;

padding:70px 7%;


}



.impact-section h3{


font-size:42px;


}



}







/* MOBILE */

@media(max-width:600px){





.about-hero{


padding:70px 5%;


}



.about-hero h1{


font-size:36px;

line-height:1.3;


}



.about-hero p{


font-size:16px;

line-height:1.7;


}








.who-section{


padding:60px 5%;


}



.who-content h2,
.approach-section h2,
.journey-section h2,
.team-section h2,
.about-cta h2{


font-size:30px;

margin-bottom:25px;


}



.who-content p{


font-size:15px;

line-height:1.8;


}








.mission-section{


padding:60px 5%;

flex-direction:column;

align-items:center;


}



.mission-card{


width:100%;

max-width:330px;

padding:30px 20px;


}







.approach-section{


padding:60px 5%;


}




.approach-grid{


flex-direction:column;

align-items:center;


}



.approach-grid div{


width:100%;

max-width:330px;

padding:30px 20px;


}







.journey-section{


padding:60px 5%;


}



.timeline{


flex-direction:column;

align-items:center;


}



.timeline div{


width:100%;

max-width:330px;


}



.timeline h3{


font-size:35px;


}









.team-section{


padding:60px 5%;


}



.team-grid{


flex-direction:column;

align-items:center;


}



.team-card{


width:100%;

max-width:330px;

padding:30px 20px;


}



.team-card img{


width:130px;

height:130px;


}



.team-card a{


font-size:22px;


}








.impact-section{


padding:60px 5%;

flex-direction:column;

gap:35px;


}



.impact-section h3{


font-size:40px;


}






.about-cta{


padding:60px 5%;


}



.about-cta a{


padding:13px 30px;


}




}