.about-hero{
    position:relative;

    overflow:hidden;

    padding:70px 0 90px;

    background:
    linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#2563eb 100%);
}

.about-grid{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

    background-size:40px 40px;
}

.about-hero-content{
    position:relative;

    z-index:2;

    max-width:760px;
}

.about-badge{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(14px);

    color:white;

    font-weight:700;

    margin-bottom:26px;
}

.about-hero h1{
    font-size:72px;

    line-height:1.02;

    color:white;

    margin-bottom:24px;
}

.about-hero p{
    font-size:20px;

    line-height:1.7;

    color:rgba(255,255,255,0.82);
}

/* MAIN */

.about-main{
    background:#f8fafc;

    padding:80px 0;
}

.about-layout{
    display:grid;

    grid-template-columns:1.2fr 0.8fr;

    gap:34px;

    align-items:start;
}

.about-text{
    display:flex;

    flex-direction:column;

    gap:28px;
}

.about-card{
    background:white;

    border-radius:34px;

    padding:40px;

    box-shadow:
    0 10px 30px rgba(15,23,42,0.04);
}

.about-card h2{
    font-size:40px;

    margin-bottom:24px;
}

.about-card p{
    color:#475569;

    line-height:1.9;

    margin-bottom:18px;
}

.about-card ul{
    padding-left:22px;

    line-height:1.9;

    color:#475569;

    margin-bottom:20px;
}

/* AUDIENCE */

.audience-grid{
    display:flex;

    flex-direction:column;

    gap:20px;
}

.audience-item{
    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#f8fafc;

    border-radius:24px;

    padding:22px;
}

.audience-item span{
    font-size:32px;
}

.audience-item h3{
    font-size:24px;

    margin-bottom:8px;
}

.audience-item p{
    margin:0;
}

/* SIDEBAR */

.about-sidebar{
    display:flex;

    flex-direction:column;

    gap:28px;
}

.stats-card,
.mission-card{
    background:
    linear-gradient(135deg,#0f172a,#1e293b);

    color:white;

    border-radius:34px;

    padding:38px;
}

.stats-card h3{
    font-size:34px;

    margin-bottom:28px;
}

.stats-list{
    display:flex;

    flex-direction:column;

    gap:22px;
}

.stat-item{
    padding-bottom:18px;

    border-bottom:
    1px solid rgba(255,255,255,0.08);
}

.stat-item:last-child{
    border:none;

    padding-bottom:0;
}

.stat-item strong{
    display:block;

    font-size:22px;

    margin-bottom:8px;
}

.stat-item span{
    color:rgba(255,255,255,0.72);

    line-height:1.6;
}

/* MISSION */

.mission-icon{
    width:84px;
    height:84px;

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

    border-radius:28px;

    background:rgba(255,255,255,0.08);

    font-size:40px;

    margin-bottom:24px;
}

.mission-card h3{
    font-size:34px;

    margin-bottom:18px;
}

.mission-card p{
    color:rgba(255,255,255,0.78);

    line-height:1.8;
}

/* FEATURES */

.about-features{
    background:white;
}

.features-grid{
    display:grid;

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

    gap:24px;
}

.feature-card{
    background:#f8fafc;

    border-radius:30px;

    padding:34px;

    transition:0.3s;
    cursor:pointer;
}

.feature-card:hover{
    transform:translateY(-8px);
}

.feature-icon{
    width:78px;
    height:78px;

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

    border-radius:24px;

    background:#dbeafe;

    font-size:36px;

    margin-bottom:24px;
}

.feature-card h3{
    font-size:30px;

    margin-bottom:16px;
}

.feature-card p{
    color:#64748b;

    line-height:1.7;
}

/* CONTACT */

.about-contact{
    background:#f8fafc;

    padding-bottom:80px;
}

.contact-box{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

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

    color:white;

    border-radius:40px;

    padding:50px;
}

.contact-box h2{
    font-size:46px;

    margin-bottom:16px;
}

.contact-box p{
    line-height:1.8;

    color:rgba(255,255,255,0.82);

    max-width:620px;
}

/* MOBILE */

@media(max-width:980px){

    .about-layout{
        grid-template-columns:1fr;
    }

    .about-hero h1{
        font-size:56px;
    }

}

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .about-hero{
        padding:50px 0 70px;
    }

    .about-main{
        padding:50px 0;
    }

    .about-card,
    .stats-card,
    .mission-card{
        padding:28px;
    }

    .contact-box{
        flex-direction:column;

        align-items:flex-start;

        padding:36px 28px;
    }

}

@media(max-width:640px){

    .about-hero h1{
        font-size:40px;
    }

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

    .about-card h2{
        font-size:30px;
    }

    .contact-box h2{
        font-size:34px;
    }

}