/* =========================
CONTAINER
========================= */

.sp-container{
max-width:1280px;
margin:auto;
padding:0 20px;
}

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

.sp-about-hero{

padding:80px 0;

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

}

.sp-about-grid{

display:grid;
grid-template-columns:1fr 420px;
gap:60px;
align-items:center;

}

.sp-breadcrumbs{

display:flex;
align-items:center;
gap:10px;

font-size:14px;

margin-bottom:24px;

color:#64748b;

}

.sp-breadcrumbs a{

color:#64748b;
text-decoration:none;

}

.sp-breadcrumbs a:hover{

color:#2563eb;

}

.sp-about-hero h1{

font-size:56px;
line-height:1.1;
font-weight:900;

margin-bottom:20px;

color:#0f172a;

}

.sp-about-hero p{

font-size:18px;
line-height:1.9;

color:#64748b;

margin-bottom:32px;

max-width:700px;

}

.sp-about-actions{

display:flex;
gap:16px;
flex-wrap:wrap;

}

.sp-btn-primary{

height:52px;

padding:0 28px;

border-radius:16px;

background:#2563eb;

display:inline-flex;
align-items:center;
justify-content:center;

text-decoration:none;

font-weight:800;

color:#fff;

transition:.25s;

}

.sp-btn-primary:hover{

transform:translateY(-2px);

background:#1d4ed8;

}

.sp-btn-outline{

height:52px;

padding:0 28px;

border-radius:16px;

border:1px solid #dbeafe;

background:#fff;

display:inline-flex;
align-items:center;
justify-content:center;

text-decoration:none;

font-weight:800;

color:#2563eb;

transition:.25s;

}

.sp-btn-outline:hover{

background:#eff6ff;

}

.sp-about-hero-card{

background:#fff;

padding:35px;

border-radius:32px;

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

box-shadow:
0 18px 50px rgba(0,0,0,.06);

}

.sp-stat{

background:#f8fafc;

padding:22px;

border-radius:20px;

text-align:center;

}

.sp-stat strong{

display:block;

font-size:26px;
font-weight:900;

color:#2563eb;

margin-bottom:8px;

}

.sp-stat span{

font-size:13px;
font-weight:600;

color:#64748b;

}

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

.sp-about-section{

padding:90px 0;

}

.sp-about-section.gray{

background:#f8fafc;

}

.sp-section-head{

max-width:900px;

margin:0 auto 50px;

text-align:center;

}

.sp-section-head h2{

font-size:40px;
font-weight:900;

margin-bottom:16px;

color:#0f172a;

}

.sp-section-head p{

font-size:18px;
line-height:1.9;

color:#64748b;

}

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

.sp-story-card{

background:#fff;

padding:50px;

border-radius:30px;

box-shadow:
0 12px 30px rgba(0,0,0,.05);

line-height:2;

font-size:17px;

color:#475569;

}

/* =========================
TIMELINE
========================= */

.sp-timeline{

max-width:900px;
margin:auto;

position:relative;

}

.sp-timeline:before{

content:'';

position:absolute;

left:110px;
top:0;
bottom:0;

width:4px;

background:#dbeafe;

}

.sp-timeline-item{

display:grid;
grid-template-columns:90px 1fr;

gap:50px;

position:relative;

margin-bottom:45px;

}

.sp-timeline-item .year{

font-size:20px;
font-weight:900;

color:#2563eb;

position:relative;

}

.sp-timeline-item .year:after{

content:'';

position:absolute;

right:-28px;
top:8px;

width:18px;
height:18px;

border-radius:50%;

background:#2563eb;

box-shadow:
0 0 0 6px #dbeafe;

}

.sp-timeline-item .content{

background:#fff;

padding:28px;

border-radius:24px;

box-shadow:
0 10px 25px rgba(0,0,0,.04);

}

.sp-timeline-item h3{

font-size:22px;
font-weight:800;

margin-bottom:10px;

}

.sp-timeline-item p{

line-height:1.8;

color:#64748b;

}

/* =========================
FEATURES
========================= */

.sp-feature-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;

}

.sp-feature-card{

background:#fff;

padding:30px;

border-radius:24px;

box-shadow:
0 10px 25px rgba(0,0,0,.04);

transition:.25s;

}

.sp-feature-card:hover{

transform:translateY(-4px);

}

.sp-feature-card h3{

font-size:20px;
font-weight:800;

margin-bottom:14px;

}

.sp-feature-card p{

line-height:1.8;

color:#64748b;

}

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

.sp-about-mission{

padding:90px 0;

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

color:#fff;

text-align:center;

}

.sp-about-mission h2{

font-size:42px;
font-weight:900;

margin-bottom:20px;

}

.sp-about-mission p{

max-width:850px;

margin:auto;

font-size:20px;
line-height:2;
color: #ffff;
opacity:.95;

}

/* =========================
FAQ
========================= */

.sp-faq{

max-width:900px;
margin:auto;

}

.sp-faq-item{

background:#fff;

padding:28px;

border-radius:24px;

margin-bottom:18px;

box-shadow:
0 8px 20px rgba(0,0,0,.04);

}

.sp-faq-item h3{

font-size:20px;
font-weight:800;

margin-bottom:12px;

}

.sp-faq-item p{

line-height:1.8;

color:#64748b;

}

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

.sp-about-cta{

padding:100px 0;

text-align:center;

background:#f8fafc;

}

.sp-about-cta h2{

font-size:48px;
font-weight:900;

margin-bottom:18px;

}

.sp-about-cta p{

font-size:18px;
line-height:1.8;

color:#64748b;

margin-bottom:30px;

}

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

@media(max-width:1100px){

.sp-about-grid{

grid-template-columns:1fr;

}

.sp-feature-grid{

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

}

}

@media(max-width:768px){

.sp-about-hero{

padding:40px 0;

}

.sp-about-hero h1{

font-size:36px;

}

.sp-about-hero p{

font-size:16px;

}

.sp-about-hero-card{

grid-template-columns:1fr;

}

.sp-section-head h2{

font-size:30px;

}

.sp-story-card{

padding:25px;

}

.sp-feature-grid{

grid-template-columns:1fr;

}

.sp-timeline:before{

left:18px;

}

.sp-timeline-item{

grid-template-columns:1fr;

padding-left:40px;

gap:10px;

}

.sp-timeline-item .year:after{

left:-30px;
right:auto;

}

.sp-about-mission h2{

font-size:30px;

}

.sp-about-mission p{

font-size:17px;

}

.sp-about-cta h2{

font-size:34px;

}

}