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


.about-hero{

padding:10rem 0 6rem;

background:
linear-gradient(
rgba(0,34,68,.85),
rgba(0,34,68,.85)
),
url("../assets/images/hero.jpg");

background-size:cover;

background-position:center;

text-align:center;

color:white;

}



.about-hero h1{

color:white;

font-size:clamp(2.5rem,5vw,4rem);

max-width:900px;

margin:1rem auto;

line-height:1.2;

}



.about-hero p{

max-width:650px;

margin:auto;

font-size:1.15rem;

color:rgba(255,255,255,.85);

}





/* =====================================
OUR STORY
===================================== */


.story-section{

padding:6rem 0;

background:white;

}



.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:4rem;

align-items:center;

}



.story-image{

height:520px;

border-radius:25px;

overflow:hidden;

box-shadow:
0 20px 50px rgba(0,0,0,.15);

}



.story-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s ease;

}



.story-image:hover img{

transform:scale(1.05);

}



.story-content h2{

font-size:2.7rem;

margin:1rem 0;

}



.story-content p{

line-height:1.9;

margin-bottom:1.2rem;

}







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


.mission-section{

padding:5rem 0;

background:#f7f9fc;

}



.mission-grid{

display:grid;

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

gap:2rem;

}



.mission-card{

background:white;

padding:3rem 2rem;

border-radius:25px;

text-align:center;

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

transition:.35s ease;

}



.mission-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 45px rgba(0,0,0,.15);

}



.mission-card i{

width:80px;

height:80px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 1.5rem;

background:rgba(0,34,68,.1);

color:var(--clr-primary);

font-size:2rem;

}



.mission-card h3{

font-size:1.7rem;

margin-bottom:1rem;

}



.mission-card p{

line-height:1.8;

}





/* =====================================
VALUES
===================================== */


.values-section{

padding:6rem 0;

background:white;

}



.values-grid{

display:grid;

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

gap:2rem;

margin-top:3rem;

}



.value-card{

background:#f7f9fc;

padding:2.5rem 1.5rem;

border-radius:20px;

text-align:center;

transition:.35s ease;

}



.value-card:hover{

transform:translateY(-8px);

box-shadow:
0 15px 40px rgba(0,0,0,.12);

}



.value-card i{

font-size:2rem;

color:var(--clr-secondary);

margin-bottom:1rem;

}



.value-card h3{

margin-bottom:.8rem;

font-size:1.3rem;

}



.value-card p{

font-size:.95rem;

line-height:1.7;

}







/* =====================================
ABOUT CTA
===================================== */


.about-cta{

padding:5rem 0 7rem;

background:#f7f9fc;

}



.cta-box{

background:
linear-gradient(
135deg,
#002244,
#003b72
);

border-radius:30px;

padding:4rem 2rem;

text-align:center;

color:white;

}



.cta-box h2{

color:white;

font-size:2.8rem;

margin-bottom:1rem;

}



.cta-box p{

color:white;

font-size:1.1rem;

margin-bottom:2rem;

}





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


@media(max-width:1100px){


.values-grid{

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

}


}



@media(max-width:900px){


.story-grid{

grid-template-columns:1fr;

}



.story-image{

height:420px;

}



.mission-grid{

grid-template-columns:1fr;

}


}





@media(max-width:600px){


.about-hero{

padding:8rem 0 4rem;

}



.story-content h2{

font-size:2rem;

}



.values-grid{

grid-template-columns:1fr;

}



.cta-box{

padding:3rem 1.5rem;

}



.cta-box h2{

font-size:2rem;

}


}