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

*{
box-sizing:border-box;
}

body{
background:#f5f8fc;
color:#0f172a;
}

/* PAGE */

.about-page{
padding:50px 6% 70px;
min-height:80vh;
}

/* HERO */

.about-hero{

max-width:1100px;
margin:auto;
text-align:center;

padding:60px 35px;

border-radius:28px;

background:
linear-gradient(135deg,#eef4ff,#ffffff);

box-shadow:
0 18px 40px rgba(0,0,0,.08);

margin-bottom:45px;

}

.about-chip{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:#dbeafe;

color:#2563eb;

font-weight:700;

margin-bottom:18px;

}

.about-hero h1{

font-size:50px;

margin-bottom:18px;

}

.about-hero p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:1.8;

color:#64748b;

}


/* SECTION */

.about-section{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:25px;

margin-bottom:50px;

}

.about-card{

background:#fff;

padding:28px;

border-radius:20px;

box-shadow:
0 12px 28px rgba(0,0,0,.08);

transition:.3s;

}

.about-card:hover{

transform:translateY(-5px);

}

.about-card h2{

margin-bottom:16px;

color:#1e40af;

}

.about-card p{

line-height:1.8;

color:#555;

}


/* IMPACT */

.impact-section{

max-width:1100px;

margin:auto;

margin-bottom:50px;

text-align:center;

}

.impact-section h2{

margin-bottom:35px;

font-size:34px;

}

.impact-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:22px;

}

.impact-box{

background:#fff;

padding:35px;

border-radius:18px;

box-shadow:
0 12px 25px rgba(0,0,0,.08);

}

.impact-box h3{

font-size:42px;

color:#2563eb;

margin-bottom:10px;

}

.impact-box p{

font-size:16px;

color:#64748b;

}


/* PROMISE */

.promise-section{

max-width:900px;

margin:auto;

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:
0 12px 28px rgba(0,0,0,.08);

margin-bottom:50px;

}

.promise-section h2{

text-align:center;

margin-bottom:25px;

}

.promise-section ul{

list-style:none;

padding:0;

}

.promise-section li{

padding:14px 0;

font-size:18px;

border-bottom:1px solid #eee;

}

.promise-section li:last-child{

border:none;

}


/* CTA */

.join-section{

max-width:1000px;

margin:auto;

text-align:center;

padding:50px;

border-radius:25px;

background:

linear-gradient(
135deg,
#3158f5,
#5b7cff);

color:white;

}

.join-section h2{

font-size:38px;

margin-bottom:18px;

}

.join-section p{

font-size:18px;

line-height:1.8;

margin-bottom:30px;

opacity:.95;

}

.join-section .btn{

padding:14px 30px;

font-size:17px;

background:white;

color:#3158f5;

border-radius:12px;

font-weight:700;

text-decoration:none;

display:inline-block;

transition:.3s;

}

.join-section .btn:hover{

transform:translateY(-3px);

}


/* MOBILE */

@media(max-width:768px){

.about-page{

padding:30px 20px 50px;

}

.about-hero{

padding:35px 22px;

}

.about-hero h1{

font-size:34px;

}

.about-section{

grid-template-columns:1fr;

}

.impact-grid{

grid-template-columns:1fr;

}

.join-section{

padding:35px 22px;

}

.join-section h2{

font-size:28px;

}

}