/* ==========================
   ABOUT PAGE
========================== */

.about-hero-section{
    padding:80px 0;
    background:linear-gradient(135deg,#f8fbff,#eef6ff);
}

.about-hero-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:60px;
    align-items:center;
}

.about-hero-content h1{
    font-size:48px;
    line-height:1.2;
    color:#0f172a;
    margin:15px 0 25px;
    font-weight:700;
}

.about-hero-content p{
    font-size:18px;
    line-height:1.8;
    color:#475569;
}

.about-hero-image img{
    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 20px 60px rgba(15,23,42,.12);
}

.section-tag{
    display:inline-block;
    background:#e0f2fe;
    color:#0284c7;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:8px 14px;
    border-radius:50px;
}

.section-header{
    text-align:center;
    max-width:800px;
    margin:0 auto 50px;
}

.section-header h2{
    font-size:38px;
    color:#0f172a;
    margin-top:15px;
    line-height:1.3;
}

/* ==========================
   CONTENT SECTIONS
========================== */

.about-clinic-overview,
.our-approach-section,
.doctor-section,
.conditions-section,
.why-us-section,
.faq-section{
    padding:90px 0;
}

.about-clinic-overview{
    background:#fff;
}

.our-approach-section{
    background:#f8fafc;
}

.why-us-section{
    background:#f8fafc;
}

.content-box{
    max-width:1000px;
    margin:0 auto;
}

.content-box p{
    font-size:17px;
    line-height:1.9;
    color:#475569;
    margin-bottom:20px;
}

/* ==========================
   APPROACH CARDS
========================== */

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

.approach-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 35px rgba(15,23,42,.06);
    transition:.3s ease;
}

.approach-card:hover{
    transform:translateY(-5px);
}

.approach-card h3{
    font-size:22px;
    margin-bottom:15px;
    color:#0f172a;
}

.approach-card p{
    color:#64748b;
    line-height:1.8;
}

/* ==========================
   DOCTOR SECTION
========================== */

.doctor-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:center;
}

.doctor-image img{
    width:100%;
    display:block;
    border-radius:25px;
    box-shadow:0 20px 60px rgba(15,23,42,.15);
}

.doctor-content h2{
    font-size:42px;
    margin:15px 0 25px;
    color:#0f172a;
}

.doctor-content p{
    font-size:17px;
    line-height:1.9;
    color:#475569;
    margin-bottom:20px;
}

/* ==========================
   CONDITIONS
========================== */

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

.condition-card{
    background:#fff;
    padding:20px;
    border-radius:15px;
    text-align:center;
    font-weight:600;
    color:#0f172a;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
    transition:.3s ease;
}

.condition-card:hover{
    background:#0284c7;
    color:#fff;
    transform:translateY(-4px);
}

/* ==========================
   FAQ
========================== */

.faq-list{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    background:#fff;
    padding:28px;
    margin-bottom:20px;
    border-radius:18px;
    box-shadow:0 10px 35px rgba(15,23,42,.06);
}

.faq-item h3{
    font-size:20px;
    color:#0f172a;
    margin-bottom:12px;
}

.faq-item p{
    color:#64748b;
    line-height:1.8;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:991px){

    .about-hero-grid,
    .doctor-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

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

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

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

    .section-header h2{
        font-size:30px;
    }

    .doctor-content h2{
        font-size:34px;
    }

    .doctor-image{
        max-width:450px;
        margin:auto;
    }
}

@media(max-width:576px){

    .about-hero-section,
    .about-clinic-overview,
    .our-approach-section,
    .doctor-section,
    .conditions-section,
    .why-us-section,
    .faq-section{
        padding:60px 0;
    }

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

    .section-header h2{
        font-size:26px;
    }

    .approach-grid,
    .conditions-grid{
        grid-template-columns:1fr;
    }

    .content-box p,
    .doctor-content p,
    .faq-item p{
        font-size:16px;
    }
}