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

.about-hero{

padding:180px 20px 120px;

text-align:center;

background:
linear-gradient(rgba(15,23,42,.82),
rgba(15,23,42,.82)),
url("../images/about-hero.webp");

background-size:cover;

background-position:center;

color:#fff;

}

.about-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(8px);

border-radius:40px;

margin-bottom:30px;

}

.about-hero h1{

font-size:60px;

line-height:1.15;

max-width:900px;

margin:auto;

margin-bottom:30px;

}

.about-hero p{

font-size:20px;

line-height:1.9;

max-width:800px;

margin:auto;

}

.about-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}

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

.about-story{

padding:110px 20px;

background:#fff;

}

.about-story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.about-story-image img{

width:100%;

border-radius:22px;

display:block;

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

}

.about-section-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

border-radius:40px;

background:#EEF2FF;

color:#4338CA;

font-size:14px;

font-weight:600;

margin-bottom:25px;

}

.about-story-content h2{

font-size:46px;

line-height:1.2;

margin-bottom:25px;

color:#0F172A;

}

.about-story-content p{

font-size:18px;

line-height:1.9;

color:#64748B;

margin-bottom:20px;

}

.story-features{

display:grid;

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

gap:18px;

margin:40px 0;

}

.story-feature{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

color:#334155;

}

.story-feature i{

width:38px;

height:38px;

border-radius:50%;

background:#4338CA;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:15px;

}

.story-highlight{

background:#4338CA;

padding:30px;

border-radius:18px;

color:#fff;

margin-top:35px;

}

.story-highlight i{

font-size:28px;

margin-bottom:15px;

}

.story-highlight p{

color:#fff;

margin:0;

font-size:20px;

font-style:italic;

}

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

.about-mission{

padding:110px 20px;

background:#F8FAFC;

}

.mission-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.mission-card{

background:#fff;

padding:45px;

border-radius:20px;

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

transition:.35s;

border-top:5px solid #4338CA;

}

.mission-card:hover{

transform:translateY(-8px);

}

.mission-icon{

width:80px;

height:80px;

border-radius:50%;

background:linear-gradient(135deg,#4338CA,#2563EB);

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.mission-icon i{

font-size:32px;

color:#fff;

}

.mission-card h3{

font-size:30px;

margin-bottom:20px;

color:#0F172A;

}

.mission-card p{

font-size:17px;

line-height:1.9;

color:#64748B;

}

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

.about-values{

padding:110px 20px;

background:#fff;

}

.values-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.value-card{

background:#F8FAFC;

padding:35px;

text-align:center;

border-radius:18px;

transition:.35s;

}

.value-card:hover{

transform:translateY(-8px);

}

.value-card i{

font-size:48px;

color:#4338CA;

margin-bottom:20px;

}

.value-card h3{

margin-bottom:15px;

color:#0F172A;

}

.value-card p{

color:#64748B;

line-height:1.8;

}

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

.about-cta{

padding:110px 20px;

background:linear-gradient(135deg,#4338CA,#2563EB);

text-align:center;

color:#fff;

}

.about-cta h2{

font-size:46px;

margin-bottom:25px;

}

.about-cta p{

max-width:700px;

margin:auto auto 40px;

font-size:19px;

line-height:1.9;

}

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

@media (max-width:992px){

.about-grid{
    grid-template-columns:1fr;
    gap:60px;
}

.mission-grid{
    grid-template-columns:1fr;
}

.values-grid{
    grid-template-columns:repeat(2,1fr);
}

.about-story-content{
    text-align:center;
}

.story-features{
    justify-content:center;
}

.about-buttons{
    justify-content:center;
}

.about-hero h1{
    font-size:3rem;
}

.about-hero p{
    max-width:700px;
    margin:0 auto;
}

}

@media (max-width:768px){

.about-hero{
    padding:140px 20px 90px;
}

.about-hero h1{
    font-size:2.3rem;
    line-height:1.25;
}

.about-hero p{
    font-size:16px;
}

.about-buttons{
    flex-direction:column;
    align-items:center;
}

.about-buttons .btn{
    width:100%;
    justify-content:center;
}

.about-preview,
.about-mission,
.about-values,
.about-cta{
    padding:70px 0;
}

.about-grid{
    gap:45px;
}

.values-grid{
    grid-template-columns:1fr;
}

.story-features{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
}

.story-highlight{
    padding:25px;
}

.mission-card,
.value-card{
    padding:35px 25px;
}

.about-cta h2{
    font-size:2rem;
}

.about-cta p{
    font-size:16px;
}

}


@media(max-width:480px) {

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

.about-hero{

padding:140px 15px 90px;

}

.about-hero h1{

font-size:34px;

}

.about-hero p{

font-size:16px;

}

.about-buttons{

flex-direction:column;

}

.about-buttons a{

width:100%;

justify-content:center;

}

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

.about-story{

padding:80px 15px;

}

.about-story-grid{

grid-template-columns:1fr;

gap:40px;

}

.about-story-image{

width:100%;

max-width:100%;

}

.about-story-image img{

width:100%;

height:auto;

display:block;

}

.about-story-image img{

width:100%;

max-width:100%;

height:auto;

display:block;

border-radius:18px;

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

}

.about-story-content h2{

font-size:32px;

}

.about-story-content p{

font-size:16px;

}

.story-features{

display:grid;

grid-template-columns:1fr;

gap:15px;

margin:30px 0;

}

.story-highlight{

padding:25px;

}

.story-highlight p{

font-size:17px;

}

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

.about-mission{

padding:80px 15px;

}

.mission-grid{

grid-template-columns:1fr;

gap:25px;

margin-top:45px;

}

.mission-card{

padding:30px;

}

.mission-card h3{

font-size:24px;

}

.mission-card p{

font-size:16px;

}

.mission-icon{

width:65px;

height:65px;

}

.mission-icon i{

font-size:26px;

}

.about-values{

padding:80px 15px;

}

.values-grid{

grid-template-columns:1fr;

}

.about-cta{

padding:80px 15px;

}

.about-cta h2{

font-size:32px;

}

.about-cta p{

font-size:16px;

}
}