/* ==========================================
   OneToolBox About Page CSS
========================================== */


/* About Hero */

.about-hero{

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

    color:#ffffff;

    padding:35px 20px;

    text-align:center;

}


.about-hero h1{

    font-size:36px;

    font-weight:700;

    margin-bottom:8px;

}


.about-hero p{

    font-size:16px;

    margin:0;

    opacity:.9;

}



/* About Card */

.about-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:25px;

    margin-bottom:30px;

    box-shadow:
    0 6px 20px rgba(0,0,0,.06);

}



.about-card h2{

    font-size:24px;

    margin-bottom:10px;

    color:#111827;

}



.about-card p{

    color:#6b7280;

    line-height:1.6;

}



/* Feature */

.about-feature{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:22px;

    text-align:center;

}



.about-feature i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 15px;

    border-radius:50%;

    background:#dbeafe;

    color:#2563eb;

    font-size:26px;

}



.about-feature h3{

    font-size:20px;

    margin-bottom:8px;

}



.about-feature p{

    color:#6b7280;

    font-size:15px;

}



/* Mission */

.mission-box{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:25px;

    text-align:center;

}



.mission-box h2{

    font-size:24px;

    margin-bottom:10px;

}



.mission-box p{

    color:#6b7280;

    line-height:1.6;

}



/* Mobile */

@media(max-width:768px){


.about-hero{

    padding:25px 15px;

}


.about-hero h1{

    font-size:28px;

}


.about-card,

.about-feature,

.mission-box{

    padding:18px;

}


}