/* =========================
   GLOBAL
========================= */

section{
    overflow:hidden;
}

.section-label{
    color:var(--gold);
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.section-header{
    text-align:center;
    margin-bottom:50px;
}

.section-header h2{
    font-size:42px;
    font-weight:700;
    color:#1d293f;
}

.section-divider{
    width:60px;
    height:3px;
    background:var(--gold);
    margin:15px auto 0;
    border-radius:10px;
}

/* =========================
   ABOUT HERO
========================= */

.about-hero{
    padding:60px 0;
    background:#fff;
}

.about-hero-content{
    display:flex;
    align-items:center;
    gap:60px;
}

.about-text{
    flex:1;
}

.about-image{
    flex:1;
}

.about-image img{
    width:100%;
    max-height:450px;
    object-fit:cover;
    border-radius:20px;
}

.about-tag{
    color:var(--gold);
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.about-text h1{
    font-size:52px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
    color:#1d293f;
}

.about-text h1 span{
    color:var(--primary);
}

.about-text p{
    font-size:18px;
    line-height:1.8;
    color:#555;
    margin-bottom:30px;
}

.about-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn-primary-custom,
.btn-secondary-custom{
    display:inline-block;
}

.btn-primary-custom{
    background:var(--primary);
    color:#fff;
    padding:14px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

.btn-primary-custom:hover{
    color:#fff;
}

.btn-secondary-custom{
    border:2px solid var(--primary);
    color:var(--primary);
    padding:14px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

/* =========================
   METRICS SECTION
========================= */

.about-metrics{
    padding:60px 0;
    background:#f8fbff;
}

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

.metric-card{
    background:#fff;
    padding:30px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.metric-card i{
    font-size:36px;
    color:var(--gold);
    margin-bottom:15px;
}

.metric-card h3{
    font-size:38px;
    font-weight:700;
    color:#1d293f;
    margin-bottom:10px;
}

.metric-card p{
    color:#666;
    margin:0;
}

/* =========================
   WHO WE ARE
========================= */

.who-we-are{
    padding:40px 0;
    background:#fff;
}

.who-we-are-content{
    display:flex;
    align-items:center;
    gap:40px;
}

.who-image{
    flex:1;
}

.who-text{
    flex:1;
}

.who-image img{
    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:18px;
}

.who-text h2{
    font-size:36px;
    font-weight:700;
    color:#1d293f;
    margin-bottom:20px;
}

.who-text p{
    color:#555;
    font-size:18px;
    line-height:1.8;
    margin-bottom:20px;
}

/* =========================
   MISSION & VISION
========================= */

.mission-vision{
    padding:80px 0;
    background:#f8fbff;
}

.mission-vision-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.mv-card{
    background:#fff;
    padding:30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.mv-icon{
    width:70px;
    height:70px;
    margin:auto auto 20px;
    border-radius:50%;
    background:#eef5ff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mv-icon i{
    font-size:30px;
    color:var(--primary);
}

.mv-card h3{
    font-size:28px;
    margin-bottom:15px;
    color:#1d293f;
}

.mv-card p{
    color:#555;
    line-height:1.8;
}

.mv-card:first-child{
    background:#eef5ff;
    border:1px solid #dbeafe;
}

.mv-card:last-child{
    background:#fff8e8;
    border:1px solid #fde7a8;
}

/* =========================
   WHY CHOOSE US
========================= */

.about-why-choose{
    padding:80px 0;
    background:#fff;
}

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

.why-card{
    background:#fff;
    border-radius:18px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.3s ease;
}

.why-card:hover{
    transform:translateY(-8px);
}

.why-card i{
    font-size:40px;
    color:var(--primary);
    margin-bottom:20px;
}

.why-card h3{
    font-size:22px;
    margin-bottom:15px;
}

.why-card p{
    color:#555;
    line-height:1.7;
}

/* =========================
   TEACHING PHILOSOPHY
========================= */

.teaching-philosophy{
    padding:80px 0;
    background:#f8fbff;
}

.philosophy-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
}

.philosophy-card{
    flex:1;
    max-width:320px;
    background:#fff;
    padding:35px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.philosophy-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#eef5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}

.philosophy-icon i{
    font-size:36px;
    color:var(--primary);
}

.philosophy-card h3{
    margin-bottom:15px;
    font-size:24px;
}

.philosophy-card p{
    color:#555;
    line-height:1.7;
}

.philosophy-arrow{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.philosophy-arrow i{
    color:var(--gold);
    font-size:24px;
}

/* =========================
   TRUST & SAFETY
========================= */

.trust-safety{
    padding:90px 0;
    background:#fff;
}

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

.trust-card{
    background:#f8fbff;
    padding:35px 25px;
    border-radius:18px;
    text-align:center;
    transition:.3s ease;
}

.trust-card:hover{
    transform:translateY(-8px);
}

.trust-card i{
    font-size:40px;
    color:var(--primary);
    margin-bottom:20px;
}

.trust-card h3{
    font-size:22px;
    margin-bottom:15px;
    color:#1d293f;
}

.trust-card p{
    color:#555;
    line-height:1.7;
}

/* =========================
   FAMILY COMMITMENT
========================= */
.family-commitment{
    padding:100px 0;
    background:var(--primary);
}

.commitment-content{
    max-width:700px;
    margin:auto;
    text-align:center;
}

.commitment-content .section-label{
    color:#f4b400 !important;
}

.commitment-content h2{
    color:#ffffff !important;
    font-size:48px;
    font-weight:700;
    margin-bottom:25px;
}

.commitment-content p{
    color:#ffffff !important;
    opacity:0.9;
    font-size:18px;
    line-height:1.9;
    margin-bottom:20px;
}

/* =========================
   ABOUT CTA
========================= */

.about-cta{
    padding:110px 0;
    background:#f8fbff;
}

.cta-content{
    text-align:center;
    max-width:750px;
    margin:auto;
}

.cta-content h2{
    font-size:48px;
    margin-bottom:20px;
    color:#1d293f;
}

.cta-content p{
    font-size:18px;
    color:#555;
    line-height:1.8;
    margin-bottom:30px;
}

.about-cta .btn-primary-custom{
    display:inline-block;
    background:#1e4ba5 !important;
    color:#ffffff !important;
    padding:14px 30px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    border:none;
}

.about-cta .btn-primary-custom:hover{
    background:#163a82 !important;
    color:#ffffff !important;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,300px);
    justify-content:center;
    gap:30px;
}

.team-card{
    display:block;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.team-image img{
    width:100%;
    height:380px;
    object-fit:cover;
    display:block;
}

.team-content{
    padding:4px;
}

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

@media(max-width:991px){

    .about-hero-content,
    .who-we-are-content{
        flex-direction:column;
    }

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

    .mission-vision-grid{
        grid-template-columns:1fr;
    }

    .philosophy-grid{
        flex-direction:column;
    }

    .philosophy-arrow{
        transform:rotate(90deg);
    }

}

@media(max-width:768px){

    /* Hero */

    .about-hero{
        padding:25px 0;
    }

    .about-hero-content{
        gap:25px;
    }

    .about-text h1{
        font-size:2.2rem;
        line-height:1.15;
        margin-bottom:15px;
    }

    .about-text p{
        font-size:1rem;
        line-height:1.7;
        margin-bottom:20px;
    }

    .about-buttons{
        flex-direction:column;
        gap:10px;
    }

    .btn-primary-custom,
    .btn-secondary-custom{
        width:100%;
        text-align:center;
    }

    .about-image img{
        max-height:240px;
    }

}

@media(max-width:576px){

    /* Metrics */

    .metrics-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .metric-card{
        padding:20px;
    }

    .metric-card h3{
        font-size:2rem;
    }

    /* Why Choose Us */

    .why-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .why-card{
        padding:20px 15px;
    }

    .why-card h3{
        font-size:18px;
    }

    /* Trust & Safety */

    .trust-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .trust-card{
        padding:20px 15px;
    }

    .trust-card h3{
        font-size:18px;
    }

    /* Headings */

    .about-text h1{
        font-size:2.2rem;
    }

    .who-text h2,
    .section-header h2,
    .cta-content h2,
    .commitment-content h2{
        font-size:2rem;
        line-height:1.2;
    }

}
/* =========================
   TEAM MOBILE
========================= */

@media(max-width:768px){

    .team-section{
        padding:60px 0;
    }

    .team-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
    }

    .team-card{
        display:flex;
        gap:15px;
        align-items:flex-start;
    }

    .team-image{
        flex:0 0 110px;
    }

    .team-image img{
        width:110px;
        height:140px;
        object-fit:cover;
        border-radius:12px;
    }

    .team-content{
        flex:1;
        padding:0;
    }

    .team-content h3{
        font-size:1.1rem;
        margin-bottom:4px;
    }

    .team-content h4{
        font-size:0.85rem;
        margin-bottom:6px;
    }

    .qualification{
        font-size:0.8rem;
        margin-bottom:8px;
    }

    .team-content p{
        font-size:0.85rem;
        line-height:1.5;
    }

}