.about-hero{
padding:50px 20px 24px;
text-align:center;
background:linear-gradient(180deg,#ffffff,#f4f8ff);
}

.about-hero h1{
font-size:36px;
margin-bottom:10px;
}

.about-hero p{
color:#5f6b7a;
font-size:15px;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
padding:44px 0;
}

.about-image picture{
display:block;
}

.about-image img{
width:100%;
aspect-ratio:4/3;
height:auto;
max-height:440px;
object-fit:cover;
object-position:center;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.service-box{
background:#fff;
padding:25px;
border-radius:18px;
text-align:center;
border:1px solid #eef2ff;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:.25s;
}

.service-box:hover{
transform:translateY(-6px);
}

/* ================= GRID ================= */
.grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.about-services{
padding:38px 20px;
background:#fff;
}

.about-metrics{
padding:38px 20px;
background:#f4f8ff;
text-align:center;
}

.metric h2{
font-size:36px;
color:#1e78ff;
}

.about-mission{
padding:42px 20px;
text-align:center;
}

.about-cta{
display:inline-block;
margin-top:25px;
padding:14px 28px;
background:linear-gradient(90deg,#1e78ff,#00c8b4);
color:#fff;
border-radius:12px;
text-decoration:none;
}

/* ======================================================
   ✅ RESPONSIVE FIXES (SAFE ADDITIONS ONLY)
====================================================== */

/* TABLET */
@media(max-width:1024px){

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

.about-grid{
grid-template-columns:1fr;
text-align:center;
}

}

/* MOBILE */
@media(max-width:768px){

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

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

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

.service-box{
padding:20px;
}

.metric h2{
font-size:28px;
}

}

/* SMALL MOBILE */
@media(max-width:480px){

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

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

}

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

@media(max-width:900px){
    .about-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .grid-4{
        grid-template-columns:repeat(2,1fr); /* tablet */
    }
}

@media(max-width:600px){
    .grid-4{
        grid-template-columns:1fr; /* mobile full width */
    }

    .about-image img{
        aspect-ratio:16/11;
        max-height:320px;
    }
}