/* ───────────────────────────  about.css  ───────────────────────────
   Responsive styles for about.php (mobile‑first, no horizontal shift)
   ------------------------------------------------------------------ */

/* 0. Palette & helpers */
:root{
    --gold:        #d4af37;
    --gold-dark:   #b88700;
    --text:        #111;
    --muted:       #6f6f6f;
    --bg:          #fff;
    --card-bg:     #fafafa;
    --shadow:      0 8px 20px rgba(0,0,0,.06);
    --container:   1200px;
}

*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

body{background:var(--bg);color:var(--text);font-family:'Poppins',sans-serif;line-height:1.6;}

.container{max-width:var(--container);margin:auto;padding:0 1rem;}

.section-pad{padding:4rem 1rem;}
.section-title{
    font-size:clamp(2rem,5vw,2.8rem);
    text-align:center;margin-bottom:2.5rem;color:var(--text);
}

/* ─────────── 1. Banner – fixed band, image always covers ─────────── */
.banner{
    position:relative;overflow:hidden;
    height:clamp(450px,50vh,550px);          /* desktop ≤350px, mobile ≥200px */
}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center;}
.banner-overlay{
    position:absolute;inset:0;background:rgba(0,0,0,.55);
    display:flex;justify-content:center;align-items:center;text-align:center;padding:0 1rem;
}
.banner-overlay h1{
    font-size:clamp(1.8rem,5vw,2.6rem);
    font-weight:600;color:#fff;line-height:1.2;
}
@media(min-width:1400px){.banner{height:320px;}}
@media(max-width:480px){
    .banner-overlay h1{font-size:1.55rem;}
    .section-pad{padding:3rem 1rem;}
}

/* ─────────── 2. Company profile ─────────── */
.profile .content-grid{
    display:grid;gap:2.5rem;grid-template-columns:1fr;
}
@media(min-width:768px){
    .profile .content-grid{grid-template-columns:1fr 1fr;align-items:center;}
}
.profile .text p{margin-bottom:1.3rem;font-size:1.05rem;line-height:1.7;}
.profile .image img{border-radius:12px;box-shadow:var(--shadow);width:100%;height:auto;}

/* ─────────── 3. Vision • Mission • Values ─────────── */
.vmv-grid{
    display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.vmv-grid article{
    background:var(--card-bg);padding:2rem;border-radius:12px;box-shadow:var(--shadow);
}
.vmv-grid h3{color:var(--gold);margin-bottom:.8rem;font-size:1.2rem;}
.values{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;}
.values li{
    background:#eee;padding:.45rem 1rem;border-radius:20px;
    font-size:.9rem;font-weight:500;
}

/* ─────────── 4. Services summary ─────────── */
.service-grid{
    display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.service-card{
    background:var(--card-bg);padding:1.6rem;border-radius:12px;text-align:center;
    box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;
}
.service-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.08);}
.service-card img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:1rem;}
.service-card p{font-weight:600;font-size:.95rem;color:var(--text);line-height:1.4;}

/* ─────────── 5. Why choose us ─────────── */
.reason-grid{
    display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.reason{
    display:flex;gap:.8rem;align-items:flex-start;
    background:var(--card-bg);padding:1.2rem;border-radius:10px;box-shadow:var(--shadow);
}
.tick{color:var(--gold);font-size:1.4rem;line-height:1;}
.reason p{margin:0;font-weight:500;color:var(--text);}

/* ─────────── 6. Leadership team ─────────── */
.team-grid{
    display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.member{
    background:var(--card-bg);padding:1.8rem;border-radius:12px;text-align:center;
    box-shadow:var(--shadow);transition:transform .25s;
}
.member:hover{transform:translateY(-6px);}
.member img{
    width:120px;height:120px;object-fit:cover;border-radius:50%;margin-bottom:1rem;
}
.member h3{font-size:1.1rem;margin-bottom:.25rem;color:var(--text);}
.member p{color:var(--muted);font-size:.9rem;}

/* ─────────── 7. CTA – gold button, dark overlay ─────────── */
.cta{
    position:relative;background:url('/images/hero.jpg') center/cover fixed;
    color:#fff;text-align:center;isolation:isolate;
}
.cta::before{
    content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:-1;
}
.cta .container{padding:5rem 1rem;max-width:1000px;margin:auto;}
.cta h2{
    font-size:clamp(2rem,5vw,3rem);
    margin-bottom:1rem;font-weight:700;color:var(--gold-dark);
}
.cta p{
    font-size:1.1rem;max-width:650px;margin:0 auto 2rem;line-height:1.6;
}
.cta .btn{
    display:inline-flex;align-items:center;gap:.5rem;
    background:var(--gold);color:#000;font-weight:600;
    padding:1rem 2.6rem;border-radius:50px;
    box-shadow:0 0 0 0 rgba(212,175,55,.6);
    transition:box-shadow .3s,transform .2s;
}
.cta .btn::after{content:'→';font-size:1.1rem;transition:transform .3s;}
.cta .btn:hover{
    transform:translateY(-4px);
    box-shadow:0 0 18px 3px rgba(212,175,55,.45);
}
.cta .btn:hover::after{transform:translateX(4px);}
@media(max-width:480px){
    .cta h2{font-size:2rem;}
    .cta p{font-size:1rem;}
}

/* ─────────── 8. Super‑small phone tweaks (≤360 px) ─────────── */
@media(max-width:360px){
    .service-grid,
    .reason-grid,
    .team-grid{
        gap:1rem;
        grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    }
    .service-card img{height:120px;}
}