/* =====================================================
   DIAL4 INFRA - ABOUT PAGE CSS (Clean Version)
   ===================================================== */

.page-banner{
    width:100%;
    min-height:450px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    background:
    linear-gradient(rgba(15,23,42,.65),rgba(15,23,42,.65)),
    url("/assets/images/banner/about-banner.webp") center/cover no-repeat;
}
.page-banner .container{width:90%;max-width:1200px;margin:auto;}
.page-banner h1{font-size:58px;margin:15px 0;}
.page-banner p{max-width:700px;margin:auto;font-size:18px;line-height:1.8;}
.page-subtitle,.section-subtitle{color:#C9A227;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.breadcrumb{margin-top:25px}
.breadcrumb a{color:#C9A227;text-decoration:none}
.breadcrumb span{color:#fff}

.about{padding:100px 0}
.about .container,
.why-choose .container{
    width:90%;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
.about-image img,.why-image img{
    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.about-content h2,.why-content h2{
    font-size:44px;
    color:#0F172A;
    margin:15px 0 20px;
}
.about-content p,.why-content p{
    color:#555;
    line-height:1.8;
}
.about-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:30px 0;
}
.about-item{
    background:#f8fafc;
    padding:14px 18px;
    border-left:4px solid #C9A227;
    border-radius:8px;
}
.about-btn,.about-cta a{
    display:inline-block;
    padding:16px 36px;
    border-radius:40px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}
.about-btn{background:#0F172A;color:#fff}
.about-btn:hover{background:#C9A227}

.mission-vision{
    background:#f8fafc;
    padding:90px 0;
}
.mission-container{
    width:90%;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
}
.mission-card,.vision-card,.value-card,.stat-box{
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.mission-card i,.vision-card i{
    color:#C9A227;
    font-size:30px;
}
.mission-card h3,.vision-card h3{margin:15px 0}
.mission-card p,.vision-card p{line-height:1.8;color:#666}

.core-values{padding:100px 0;background:#fff}
.core-values .container,
.company-stats .container,
.about-cta .container{
    width:90%;
    max-width:1200px;
    margin:auto;
}
.section-title{text-align:center;margin-bottom:60px}
.section-title h2{font-size:42px;color:#0F172A;margin:10px 0}
.section-title p{max-width:650px;margin:auto;color:#666}
.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.value-card{text-align:center;transition:.3s}
.value-card:hover{transform:translateY(-8px)}
.value-card i{
    width:75px;height:75px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;
    background:#C9A227;color:#fff;font-size:28px;
}
.value-card h3{margin-bottom:15px;color:#0F172A}
.value-card p{color:#666;line-height:1.8}

.company-stats{
    background:#0F172A;
    padding:90px 0;
}
.company-stats .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}
.stat-box{
    background:#1E293B;
    color:#fff;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
}
.stat-box h2{font-size:46px;color:#C9A227;margin-bottom:10px}

.why-choose{padding:100px 0;background:#fff}
.why-list{list-style:none;padding:0;margin-top:25px}
.why-list li{margin-bottom:15px;font-weight:600}

.about-cta{
    background:linear-gradient(135deg,#0F172A,#1E293B);
    padding:100px 0;
    text-align:center;
}
.about-cta h2{color:#fff;font-size:46px}
.about-cta p{color:#d1d5db;max-width:700px;margin:20px auto 35px}
.about-cta a{background:#C9A227;color:#fff}
.about-cta a:hover{background:#fff;color:#0F172A}

@media(max-width:991px){
.about .container,.why-choose .container,.mission-container{grid-template-columns:1fr}
.values-grid{grid-template-columns:repeat(2,1fr)}
.company-stats .container{grid-template-columns:repeat(2,1fr)}
.about-list{grid-template-columns:1fr}
.page-banner h1{font-size:42px}
}
@media(max-width:576px){
.values-grid,.company-stats .container{grid-template-columns:1fr}
.page-banner{min-height:320px}
.page-banner h1{font-size:32px}
.about-content h2,.why-content h2,.section-title h2,.about-cta h2{font-size:30px}
.about-cta a{width:100%;text-align:center}
}