/* ROOT VARIABLES */
:root {
    --primary: #0e5881;
    --secondary: #f9c422;
    --dark: #212529;
    --muted: #6c757d;
}

/* RESET & BASE */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; width:100%; overflow-x:hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--dark); }
body.about-page { min-height:100%; }

/* HEADER */
header { top:0; z-index:100; background: var(--primary); padding:15px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
header .container { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:0 20px; }
header .logo h1 { color:#fff; margin:0; }
nav ul { display:flex; list-style:none; margin:0; padding:0; }
nav ul li { margin-left:20px; }
nav ul li a { color:#fff; text-decoration:none; font-weight:600; padding:6px 10px; transition:0.2s; color: var(--primary); }
nav ul li a:hover { color: var(--secondary); }

/* HERO SECTION */
.about-hero { padding:48px 20px 36px; text-align:center; background: linear-gradient(180deg, rgba(249,196,34,0.06), rgba(248,249,250,0)); }
.about-hero h1 { font-size:36px; margin:10px 0 8px; }
.about-hero p.lead { font-weight:600; color:#556; margin-bottom:18px; }
.about-social { display:flex; gap:14px; justify-content:center; margin-top:16px; }
.about-social a { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; color:#fff; text-decoration:none; transition:0.15s; }
.about-social a i { font-size:16px; }
.about-social a.facebook { background:#1877f2; } 
.about-social a.whatsapp { background:#25D366; } 
.about-social a.twitter { background:#1DA1F2; } 
.about-social a.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.about-social a:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(14,88,129,0.08); }

/* CTA BUTTON */
.btn-cta { display:inline-block; padding:12px 22px; background:var(--secondary); color:#111; border-radius:28px; text-decoration:none; font-weight:700; box-shadow: 0 6px 18px rgba(249,196,34,0.16); margin-top:12px; }

/* TEAM SECTION */
.team-section { padding:44px 20px 70px; background:#f9f9f9; }
.team-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; align-items:start; }
.team-member { text-align:center; }
.team-member .avatar { width:180px; height:180px; border-radius:50%; overflow:hidden; margin:0 auto 18px; display:block; box-shadow:0 8px 30px rgba(16,24,40,0.06); }
.team-member .avatar img { width:100%; height:100%; object-fit:cover; }
.team-member h4 { margin:0 0 6px; font-size:18px; }
.team-member .location { color:#777; font-size:13px; }
.team-member .testimonial { margin-top:18px; color:#666; font-size:15px; line-height:1.7; max-width:420px; margin-left:auto; margin-right:auto; }

/* RESPONSIVE */
@media (max-width:900px) {
    .team-grid { grid-template-columns:repeat(2,1fr); gap:22px; }
    .team-member .avatar { width:150px; height:150px; }
}

@media (max-width:620px) {
    .team-grid { grid-template-columns:1fr; }
    .about-hero h1 { font-size:28px; }
    .team-member .avatar { width:140px; height:140px; }
}