/* ================= JANSEWA COLOR SYSTEM ================= */

:root{
    --primary:#35332F;
    --clay:#DB9558;
    --sage:#97A87A;
    --sage-light:#A8BBA3;
    --ivory:#FCF9EA;
    --offwhite:#FCFCFA;
    --white:#FFFFFF;
    --text:#666666;
}

/* ================= GENERAL ================= */

body{
    margin:0;
    background:var(--offwhite);
    font-family: "Inter", sans-serif;
    line-height:1.6;
    scroll-behavior: smooth;
}

/* ================= NAVIGATION ================= */

nav{
    position:fixed;
    top:20px;
    left:30px;
    right:30px;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 35px;

    background:var(--ivory);
    border:1px solid rgba(53,51,47,.14);
    border-radius:18px;

    box-shadow:0 8px 25px rgba(53,51,47,.10);

    transition:.35s;
}


nav.scrolled{

    background:var(--offwhite);

    box-shadow:0 10px 30px rgba(53,51,47,.14);

}

nav img{

    width:90px;

}

.menu{

    display:flex;

    gap:40px;

}
nav a{

    text-decoration:none;

    color:var(--primary);

    font-weight:600;

    font-size:20px;

    transition:.3s;

}

nav a:hover{
    color:var(--clay);
    transform:translateY(-1px);
}


nav button{

    background:var(--primary);

    color:white;

    border:none;

    padding:12px 24px;

    border-radius:30px;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(53,51,47,.16);

    transition:.3s;

}

nav button:hover{

    background:var(--clay);

    color:var(--primary);

    transform:translateY(-2px);

}
/* ================= HERO ================= */

header{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:100vh;

    padding:140px 80px 80px;

    overflow:hidden;

    background-size:cover;

    background-position:center;

}
.hero-slider{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;
    
    pointer-events:none;

}

.hero-slider img,

.hero-slider video{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity 2s ease;

}

.hero-slider .active-slide{

    opacity:1;

}
.overlay{

    position:absolute;

    inset:0;

    background:rgba(0, 0, 0, 0.45);
    
    z-index:1;

}

.hero-content{

    position:relative;

    z-index:2;

    color:white;

    width:55%;
}

.hero-badge {

    display:inline-block;

    background:rgba(255,255,255,.18);

    color:white;

    padding:8px 18px;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.25);

    margin-bottom:25px;

    font-size:14px;

    backdrop-filter:blur(8px);
}

.hero-content h1{

    font-size:64px;

    font-weight:700;

    line-height:1.1;

    margin-bottom:15px;

}

.hero-content h2{

    color:var(--sage);

    margin-bottom:20px;
}
.hero-content p{

    font-size:20px;

    line-height:1.8;

    max-width:650px;

    margin-bottom:30px;
}

.hero-content ul{

    margin-bottom:30px;

    line-height:2;
}

.hero-content button{

    background:var(--clay);

    color:white;

    border:none;

    padding:15px 30px;

    border-radius:30px;

    cursor:pointer;

    transition:.35s;
}

.hero-content button:hover{

    background:var(--sage-light);

    transform:translateY(-3px);

}

.hero-form{

    position:relative;

    z-index:2;

    background:white;

    padding:35px;

    width:340px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.hero-form h3{

    color:var(--primary);

    margin-bottom:20px;

}

.hero-form input{

    width:100%;

    padding:13px;

    margin-bottom:15px;

    border:1px solid rgba(53,51,47,.18);

    border-radius:8px;

    box-sizing:border-box;
}

.hero-form input:focus{

    outline:none;

    border-color:var(--clay);

    box-shadow:0 0 0 3px rgba(219,149,88,.15);

}

.hero-form button{

    width:100%;

    background:var(--clay);

    color:white;

    border:none;

    padding:14px;

    border-radius:8px;

    cursor:pointer;
}

/* ================= TREATMENTS ================= */

.treatments{

    padding:110px 80px;

    background:white;

}

.treatments h2{

    text-align:center;

    color:var(--primary);

    margin-bottom:40px;
}

.card-container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:50px;

}


.treatment-card{

    background:white;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.treatment-card:hover{

    transform:translateY(-12px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.treatment-icon{

    width:90px;
    height:90px;

    margin:0 auto 25px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:var(--sage-light);

    border-radius:50%;

    font-size:42px;

    color:var(--primary);

    transition:.35s;

}

.treatment-card:hover .treatment-icon{

    transform:scale(1.15);

}


.treatment-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:24px;

}

.treatment-card p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:25px;

}

.treatment-card a{

    text-decoration:none;

    color:var(--clay);

    font-weight:bold;

    transition:.3s;

}

.treatment-card:hover a{

    color:var(--clay);

}

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

.doctor{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    padding:110px 80px;

    background:var(--ivory);

}
.doctor-image{

    overflow:hidden;

    border-radius:20px;

}

.doctor-image img{

    width:100%;

    display:block;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.doctor-content h2{

    font-size:46px;

    color:var(--primary);

    margin:15px 0 5px;

}

.doctor-content button{

    background:var(--clay);

    color:white;

    border:none;

    padding:16px 34px;

    border-radius:30px;

    cursor:pointer;

    transition:.35s;

}

.doctor-content button:hover{

    background:var(--clay);

}

/* ================= PREMIUM DOCTOR ================= */

.doctor-content h4{

    color:var(--clay);

    font-size:22px;

    margin:10px 0;

}

.doctor-content h5{

    color:var(--primary);

    font-size:18px;

    font-weight:600;

    line-height:1.8;

    margin-bottom:30px;

}

.doctor-content blockquote{

    margin:30px 0;

    padding-left:25px;

    border-left:5px solid var(--clay);

    color:var(--primary);

    font-size:24px;

    font-style:italic;

    line-height:1.7;

}

.doctor-content p{

    color:var(--text);

    line-height:2;

    margin-bottom:35px;

}

.doctor-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:40px 0;

}

.stat-box{

    background:white;

    text-align:center;

    padding:25px;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-10px);

}

.stat-box h3{

    color:var(--clay);

    font-size:30px;

    margin-bottom:10px;

}

.stat-box span{

    color:var(--text);

    font-size:14px;

}

.doctor-quote{

    background:var(--ivory);

    padding:30px;

    border-radius:18px;

    margin:40px 0;

    line-height:1.8;

    color:var(--primary);

    font-style:italic;

}

.doctor-quote strong{

    display:block;

    margin-top:15px;

    color:var(--clay);
}

.doctor-points{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:40px 0;

    font-weight:600;

    color:var(--primary);

}

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

.about{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    padding:110px 80px;

    background:white;

}

.about-image{

    overflow:hidden;

    border-radius:20px;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    transition:.5s;

}
.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:var(--sage-light);

    color:var(--primary);

    border-radius:30px;

    font-size:14px;

    font-weight:bold;

    margin-bottom:20px;

}

.about-image:hover img{

    transform:scale(1.04);

}

.about-content h2{

    font-size:44px;

    color:var(--primary);

    margin-bottom:25px;

}

.about-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:35px;

}

.about-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:40px;

    font-weight:600;

    color:var(--primary);
}
.about-content button{

    background:var(--clay);

    color:white;

    border:none;

    padding:15px 32px;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

}

.about-content button:hover{

    background:var(--clay);

}

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

.why-choose{

    padding:110px 80px;

    background:var(--ivory);

}

.section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.section-heading h2{

    font-size:42px;

    color:var(--primary);

    margin:20px 0;

}

.section-heading p{

    color:var(--text);

    line-height:1.8;

}

.choose-container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.choose-card{

    background:white;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.choose-card:hover{

    transform:translateY(-10px);

}
.choose-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--sage-light);

    border-radius:50%;

    transition:.35s;

}

.choose-card:hover .choose-icon{

    transform:scale(1.08);

}

.choose-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.choose-card p{

    color:var(--text);

    line-height:1.7;

}

/* ================= TESTIMONIALS ================= */

.section-heading h2{

    font-size:48px;

    margin-bottom:20px;

    
}

.section-heading p{

    max-width:650px;

    margin:20px auto 0;

}

.google-rating{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    background:rgba(219,149,88,.12);

    border-radius:50px;

    border:1px solid rgba(219,149,88,.35);

    margin:25px auto;

}

.google-rating span{

    color:var(--primary);

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

}

.testimonials{

    padding:110px 80px;

    background:white;

}

.testimonial-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:60px;

}

.testimonial-card{

    background:var(--white);

    padding:35px;

    border-radius:20px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

    min-height:320px;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.testimonial-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:var(--clay);

}

.stars{

    font-size:24px;

    color:var(--clay);

    margin-bottom:20px;

    letter-spacing:3px;

}

.testimonial-card p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:30px;

    min-height:145px;

}

.testimonial-card span{

    display:inline-block;

    color:var(--clay);

    font-weight:bold;

    font-size:15px;

}

/* ================= CONTACT ================= */

.contact{

    padding:110px 80px;

    background:var(--ivory);

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:50px;

    margin-top:60px;

    align-items:start;

}

.contact-info{

    display:grid;

    gap:25px;

}

.contact-box{

    background:white;

    padding:30px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.contact-box:hover{

    transform:translateY(-8px);

}

.contact-box h3{

    color:var(--primary);

    margin-bottom:12px;

    font-size:22px;

}

.contact-box p{

    color:var(--text);

    line-height:1.8;

    margin:0;

}

.contact-map{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.contact-map iframe{

    width:100%;

    height:100%;

    min-height:600px;

    border:none;

}

.contact-box a{

    color:var(--clay);

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.contact-box a:hover{

    color:var(--clay);

}

/* ================= FOOTER ================= */

.footer{

    background:var(--primary);

    color:white;

    padding:80px 80px 30px;

}

.footer-container{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:50px;

}

.footer-about img{

    width:90px;

    margin-bottom:20px;

}

.footer-about h3{

    font-size:28px;

    margin-bottom:20px;

}

.footer-about p{

    color:rgba(255,255,255,.72);

    line-height:1.9;

}

.footer-links h4,
.footer-contact h4{

    margin-bottom:25px;

    font-size:22px;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    color:rgba(255,255,255,.72);

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--clay);

}

.footer-contact p{

    color:rgba(255,255,255,.72);

    line-height:1.9;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    margin-top:60px;

    padding-top:30px;

    text-align:center;

    color:rgba(255,255,255,.72);

}


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


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

.about-page-hero{

    position:relative;

    min-height:65vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:140px 80px 80px;

    background-image:url("images/Jansewa dental clinic.jpeg");

    background-size:cover;

    background-position:center;

    overflow:hidden;

}


.about-page-overlay{

    position:absolute;

    inset:0;

    background:rgba(53,51,47,.68)

}


.about-page-content{

    position:relative;

    z-index:2;

    max-width:850px;

    color:white;

}


.about-page-content .section-tag{

    background:rgba(255,255,255,.15);

    color:var(--clay);

    border:1px solid rgba(255,255,255,.25);

}


.about-page-content h1{

    font-size:58px;

    line-height:1.15;

    margin:20px 0;

}


.about-page-content p{

    max-width:750px;

    margin:0 auto;

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,.88);

}


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

.about-story{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    padding:110px 80px;

    background:white;

}


.about-story-image{

    overflow:hidden;

    border-radius:20px;

}


.about-story-image img{

    width:100%;

    display:block;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}


.about-story-content{

    max-width:650px;

}


.about-story-content h2{

    font-size:44px;

    line-height:1.2;

    color:var(--primary);

    margin:20px 0 25px;

}


.about-story-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:20px;

}

/* ================= OUR JOURNEY ================= */

.about-journey{

    padding:110px 80px;

    background:var(--ivory);

}


.journey-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    max-width:1100px;

    margin:0 auto;

}


.journey-card{

    background:white;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}


.journey-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.13);

}


.journey-year{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:10px 20px;

    margin-bottom:25px;

    border-radius:30px;

    background:var(--sage-light);

    color:var(--primary);

    font-size:20px;

    font-weight:700;

}


.journey-card h3{

    color:var(--primary);

    font-size:24px;

    margin-bottom:15px;

}


.journey-card p{

    color:var(--text);

    line-height:1.8;

    margin:0;

}


/* ================= OUR PHILOSOPHY ================= */

.about-philosophy{

    padding:110px 80px;

    background:white;

}


.philosophy-container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}


.philosophy-card{

    background:var(--white);

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}


.philosophy-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.13);

}


.philosophy-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--sage-light);

    border-radius:50%;

}


.philosophy-card h3{

    color:var(--primary);

    font-size:22px;

    margin-bottom:15px;

}


.philosophy-card p{

    color:var(--text);

    line-height:1.8;

    margin:0;

}


/* ================= ABOUT DOCTOR ================= */

.about-doctor{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:80px;

    align-items:center;

    padding:110px 80px;

    background:var(--ivory);

}


.about-doctor-image{

    overflow:hidden;

    border-radius:20px;

}


.about-doctor-image img{

    width:100%;

    max-width:550px;

    display:block;

    margin:auto;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}


.about-doctor-content h2{

    font-size:44px;

    color:var(--primary);

    margin:20px 0 10px;

}

.about-doctor-content h4{

    color:var(--clay);

    font-size:20px;

    margin-bottom:15px;

}


.about-doctor-content h5{

    color:var(--text);

    font-size:16px;

    line-height:1.7;

    margin-bottom:25px;

}


.about-doctor-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:20px;

}


.about-doctor-content button{

    background:var(--clay);

    color:white;

    border:none;

    padding:15px 32px;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

}


.about-doctor-content button:hover{

    background:var(--clay);

    transform:translateY(-2px);

}


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

.about-cta{

    padding:100px 80px;

    background:var(--primary);

    text-align:center;

}


.about-cta-content{

    max-width:800px;

    margin:0 auto;

}


.about-cta .section-tag{

    background:rgba(255,255,255,.12);

    color:var(--clay);

    border:1px solid rgba(255,255,255,.2);

}


.about-cta h2{

    color:white;

    font-size:44px;

    margin:20px 0;

}


.about-cta p{

    color:rgba(255,255,255,.88);

    font-size:18px;

    line-height:1.8;

    max-width:700px;

    margin:0 auto 35px;

}


.about-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}


.about-cta-buttons button{

    background:var(--clay);

    color:white;

    border:none;

    padding:15px 32px;

    border-radius:30px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.about-cta-buttons button:hover{

    background:white;

    color:var(--primary);

    transform:translateY(-2px);

}


.about-cta-buttons .cta-secondary{

    background:white;

    color:var(--primary);

}


.about-cta-buttons .cta-secondary:hover{

    background:var(--clay);

    color:white;

}
/* ================================================= */
/* ============== TREATMENTS PAGE ================== */
/* ================================================= */

/* TREATMENTS PAGE HERO */

.treatments-page-hero{

    position:relative;

    min-height:65vh;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:140px 80px 80px;

    background-image:url("images/dentist3.png");

    background-size:cover;
    background-position:center;

    overflow:hidden;

}


.treatments-page-overlay{

    position:absolute;

    inset:0;

    background:rgba(53,51,47,.76);

}


.treatments-page-content{

    position:relative;

    z-index:2;

    max-width:900px;

    color:white;

}

.treatments-page-content .section-tag{

    background:rgba(255,255,255,.15);

    color:var(--clay);

    border:1px solid rgba(255,255,255,.25);

}


.treatments-page-content h1{

    font-size:58px;

    line-height:1.15;

    margin:20px 0;

}


.treatments-page-content h1 span{

    color:var(--sage);

}


.treatments-page-content p{

    max-width:760px;

    margin:0 auto;

    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,.88);

}


.treatments-hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

}


.treatments-hero-buttons button{

    background:var(--clay);

    color:white;

    border:none;

    padding:15px 32px;

    border-radius:30px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}


.treatments-hero-buttons button:hover{

    background:white;

    color:var(--primary);

    transform:translateY(-2px);

}


.treatments-hero-buttons .hero-secondary{

    background:white;

    color:var(--primary);

}


.treatments-hero-buttons .hero-secondary:hover{

    background:var(--clay);

    color:white;

}

/* ================================================= */
/* ============ FEATURED ALIGNERS ================== */
/* ================================================= */

.aligners-featured{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:80px;

    align-items:center;

    padding:110px 80px;

    background:var(--ivory);

}

.aligners-image{

    display:flex;

    justify-content:center;

    align-items:center;

}


.aligners-visual{

    position:relative;

    width:100%;

    max-width:520px;

    min-height:500px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:var(--offwhite);

    border-radius:28px;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

    overflow:hidden;

}


.scan-frame{

    width:190px;

    height:190px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--white);

    border:1px solid rgba(53,51,47,.12);

    border-radius:50%;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.scan-label{

    margin-top:22px;

    padding:8px 18px;

    border-radius:30px;

    background:var(--sage-light);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}


.aligner-preview{

    position:relative;

    width:220px;

    height:100px;

    margin-top:45px;

}


.aligner-top,
.aligner-bottom{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:55px;

    border:2px solid rgba(151,168,122,.45);

    background:rgba(168,181,160,.12);

    border-radius:50% 50% 45% 45%;

}


.aligner-top{

    top:0;

}


.aligner-bottom{

    bottom:0;

    transform:translateX(-50%) rotate(180deg);

}


.aligners-content{

    max-width:680px;

}


.aligners-content h2{

    font-size:48px;

    line-height:1.15;

    color:var(--primary);

    margin:20px 0;

}


.aligners-content h2::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-top:18px;

    background:var(--clay);

    border-radius:10px;

}


.aligners-intro{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

    margin-bottom:35px;

}


.aligners-features{

    display:grid;

    gap:22px;

    margin-bottom:35px;

}


.aligners-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

}


.aligners-feature-icon{

    flex-shrink:0;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--white);

    border-radius:14px;

    box-shadow:0 6px 20px rgba(0,0,0,.06);

}


.aligners-feature h3{

    color:var(--primary);

    font-size:20px;

    margin:0 0 5px;

}

.aligners-feature p{

    color:var(--text);

    line-height:1.7;

    margin:0;

}

.aligners-button{

    background:var(--primary);

    color:var(--white);

    border:none;

    padding:15px 30px;

    border-radius:30px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}


.aligners-button:hover{

    background:var(--sage-light);

    color:var(--primary);

    transform:translateY(-2px);

}

/* ================================================= */
/* ============ DIGITAL DENTISTRY ================== */
/* ================================================= */

.digital-dentistry{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:80px;

    align-items:center;

    padding:110px 80px;

    background:var(--offwhite);

}


.digital-dentistry-content{

    max-width:700px;

}


.digital-dentistry-content h2{

    font-size:46px;

    line-height:1.2;

    color:var(--primary);

    margin:20px 0 25px;

}


.digital-intro{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

    margin-bottom:35px;

}


.digital-features{

    display:grid;

    gap:25px;

}


.digital-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

}


.digital-feature-icon{

    flex-shrink:0;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--ivory);

    border-radius:16px;

    border:1px solid rgba(53,51,47,.12);

}


.digital-feature h3{

    color:var(--primary);

    font-size:20px;

    margin:2px 0 6px;

}


.digital-feature p{

    color:var(--text);

    line-height:1.7;

    margin:0;

}


.digital-dentistry-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.digital-visual-card{

    position:relative;

    width:100%;

    max-width:500px;

    min-height:500px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:var(--ivory);

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.09);

}

.digital-circle{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(168,181,160,.45);

}


.large-circle{

    width:370px;

    height:370px;

}


.medium-circle{

    width:270px;

    height:270px;

}


.small-circle{

    width:175px;

    height:175px;

}


.digital-scan-icon{

    position:relative;

    z-index:2;

    width:170px;

    height:170px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--white);

    border-radius:50%;

    box-shadow:0 15px 35px rgba(0,0,0,.10);

}


.digital-visual-label{

    position:relative;

    z-index:2;

    margin-top:28px;

    padding:9px 20px;

    border-radius:30px;

    background:var(--sage-light);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:1.2px;

}


.digital-use-tags{

    position:relative;

    z-index:2;

    display:flex;

    gap:12px;

    margin-top:18px;

}


.digital-use-tags span{

    padding:7px 13px;

    background:var(--white);

    border:1px solid rgba(53,51,47,.12);

    border-radius:20px;

    color:var(--text);

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;

}

/* ================================================= */
/* ======== TRADITIONAL VS DIGITAL SCANNING ======== */
/* ================================================= */

.scan-comparison{

    padding:110px 80px;

    background:var(--ivory);

}


.scan-comparison .section-heading{

    margin-bottom:60px;

}


.scan-comparison .section-heading h2{

    color:var(--primary);

}


.scan-comparison .section-heading p{

    color:var(--text);

}


.comparison-container{

    position:relative;

    max-width:1150px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 70px 1fr;

    gap:25px;

    align-items:stretch;

}


.comparison-card{

    background:var(--white);

    border-radius:26px;

    padding:32px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}


.comparison-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 48px rgba(0,0,0,.12);

}


.comparison-badge{

    display:inline-block;

    padding:8px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}


.traditional-badge{

    background:var(--sage-light);

    color:var(--primary);

}


.digital-badge{

    background:var(--sage-light);

    color:var(--primary);

}


.comparison-visual{

    position:relative;

    height:240px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    margin-bottom:30px;

}


.traditional-visual{

    background:var(--ivory);

}


.digital-visual{

    background:var(--sage-light);

}


.comparison-card h3{

    font-size:25px;

    color:var(--primary);

    margin-bottom:15px;

}


.comparison-card > p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:25px;

}


.comparison-points{

    display:grid;

    gap:13px;

}


.comparison-points div{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text);

    font-size:15px;

}


.comparison-symbol{

    width:25px;

    height:25px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-weight:700;

}


.traditional-card .comparison-symbol{

    background:var(--sage-light);

    color:var(--primary);

}


.digital-card .comparison-symbol{

    background:var(--sage-light);

    color:var(--primary);

}


.comparison-vs{

    width:56px;

    height:56px;

    align-self:center;

    justify-self:center;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    z-index:2;
}


/* ================= TRADITIONAL TRAY VISUAL ================= */


.impression-tray{

    position:relative;

    width:180px;

    height:130px;

}


.tray-base{

    position:absolute;

    left:50%;

    top:38px;

    transform:translateX(-50%);

    width:155px;

    height:58px;

    background:var(--clay);

    border:2px solid rgba(53,51,47,.35);

    border-radius:50% 50% 45% 45%;

    box-shadow:0 12px 18px rgba(0,0,0,.10);

}


.tray-base::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    top:13px;

    height:30px;

    background:var(--ivory);

    border-radius:50%;

}


.impression-material{

    position:absolute;

    z-index:2;

    left:34px;

    right:34px;

    top:17px;

    height:22px;

    background:var(--ivory);

    border-radius:50%;

}


.tray-handle{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:48px;

    height:55px;

    background:var(--clay);

    border:2px solid rgba(53,51,47,.35);

    border-radius:12px 12px 18px 18px;

}

/* ================= DIGITAL SCANNER VISUAL ================= */


.scanner-device{

    position:relative;

    width:105px;

    height:190px;

    z-index:3;

}


.scanner-head{

    position:absolute;

    top:0;

    left:22px;

    width:61px;

    height:67px;

    background:var(--white);

    border:2px solid rgba(53,51,47,.18);

    border-radius:24px 24px 16px 16px;

    box-shadow:0 8px 15px rgba(0,0,0,.08);

}


.scanner-lens{

    position:absolute;

    left:50%;

    top:21px;

    transform:translateX(-50%);

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--sage-light);

    border:4px solid var(--ivory);

}


.scanner-neck{

    position:absolute;

    left:42px;

    top:62px;

    width:22px;

    height:45px;

    background:var(--sage-light);

    border-radius:8px;

}


.scanner-handle{

    position:absolute;

    left:25px;

    top:98px;

    width:56px;

    height:92px;

    background:var(--white);

    border:2px solid rgba(53,51,47,.18);

    border-radius:15px 15px 24px 24px;

    box-shadow:0 8px 15px rgba(0,0,0,.08);

}

.scanner-button{

    position:absolute;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:13px;

    height:13px;

    border-radius:50%;

    background:var(--clay);

}

.scan-waves{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:265px;

    height:150px;

}


.scan-waves span{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:80px;

    height:80px;

    border:1px solid rgba(168,181,160,.50);

    border-radius:50%;

}


.scan-waves span:nth-child(2){

    width:145px;

    height:145px;

}


.scan-waves span:nth-child(3){

    width:215px;

    height:215px;

}


.comparison-note{

    max-width:900px;

    margin:45px auto 0;

    padding:22px 28px;

    text-align:center;

    background:var(--white);

    border-radius:18px;

    color:var(--text);

    line-height:1.8;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.comparison-note strong{

    color:var(--primary);

}
/* ================= SMILE TRANSFORMATIONS ================= */

.smile-transformations{

    padding:110px 80px;

    background:var(--offwhite);

}

.smile-gallery{
    max-width:1150px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

.smile-case{
    background:var(--white);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.smile-case:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 48px rgba(0,0,0,.12);
}

.smile-image{
    width:100%;
    background:var(--ivory);
    overflow:hidden;
}

.smile-image img{
    width:100%;
    height:auto;
    display:block;
}

.smile-case-content{
    padding:30px;
}

.smile-case-tag{
    display:inline-block;
    padding:7px 14px;
    border-radius:30px;
    background:var(--sage-light);
    color:var(--primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:15px;
}

.smile-case-content h3{
    color:var(--primary);
    font-size:25px;
    line-height:1.3;
    margin:0 0 12px;
}

.smile-case-content p{
    color:var(--text);
    line-height:1.8;
    margin:0 0 20px;
}

.smile-case-content a{
    color:var(--clay);
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.smile-case-content a:hover{
    color:var(--primary);
}

.smile-disclaimer{
    max-width:900px;
    margin:40px auto 0;
    padding:18px 24px;
    text-align:center;
    background:var(--ivory);
    border:1px solid rgba(53,51,47,.12);
    border-radius:16px;
    color:var(--text);
    line-height:1.7;
}

.smile-disclaimer strong{
    color:var(--primary);
}

/* ================= ALL DENTAL TREATMENTS ================= */

.all-treatments{
    padding:110px 80px;
    background:var(--ivory);
}

.all-treatments .section-heading{
    max-width:800px;
    margin:0 auto 60px;
    text-align:center;
}

.all-treatments .section-heading h2{
    color:var(--primary);
    font-size:46px;
    line-height:1.2;
    margin:20px 0;
}

.all-treatments .section-heading p{
    color:var(--text);
    font-size:18px;
    line-height:1.8;
    margin:0 auto;
}

.treatment-categories{
    max-width:1150px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.treatment-category{
    position:relative;
    background:var(--white);
    padding:32px;
    border-radius:22px;
    border:1px solid rgba(53,51,47,.12);
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    transition:.35s;
}

.treatment-category:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 42px rgba(0,0,0,.10);
}

.treatment-category-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sage-light);
    border-radius:16px;
    margin-bottom:22px;
}

.treatment-category h3{
    color:var(--primary);
    font-size:24px;
    margin:0 0 18px;
}

.treatment-category ul{
    list-style:none;
    padding:0;
    margin:0;
}

.treatment-category li{
    position:relative;
    padding-left:22px;
    margin-bottom:11px;
    color:var(--text);
    line-height:1.6;
}

.treatment-category li::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--sage-light);
}
.treatment-category li:last-child{
    margin-bottom:0;
}

.featured-category{
    border:1px solid rgba(151,168,122,.35);
    background:linear-gradient(
        145deg,
        var(--white) 0%,
        var(--offwhite) 100%
    );
}

.category-highlight{
    display:inline-block;
    margin-top:22px;
    padding:7px 14px;
    border-radius:30px;
    background:var(--sage-light);
    color:var(--primary);
    font-size:11px;
    font-weight:700;
    letter-spacing:.9px;
}

/* ================= QUALITY & PATIENT CARE ================= */

.quality-care{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:80px;
    align-items:center;
    padding:110px 80px;
    background:var(--offwhite);
}

.quality-care-content{
    max-width:650px;
}

.quality-care-content h2{
    color:var(--primary);
    font-size:46px;
    line-height:1.2;
    margin:20px 0 25px;
}

.quality-care-content p{
    color:var(--text);
    font-size:18px;
    line-height:1.85;
    margin:0 0 18px;
}

.quality-care-button{
    display:inline-block;
    margin-top:18px;
    padding:15px 30px;
    background:var(--primary);
    color:var(--white);
    text-decoration:none;
    border-radius:30px;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}
.quality-care-button:hover{
    background:var(--sage-light);
    color:var(--primary);
    transform:translateY(-2px);
}

.quality-care-benefits{
    display:grid;
    gap:18px;
}

.quality-benefit{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:24px;
    background:var(--white);
    border:1px solid rgba(53,51,47,.12);
    border-radius:20px;
    box-shadow:0 10px 28px rgba(0,0,0,.05);
    transition:.3s;
}
.quality-benefit:hover{
    transform:translateX(5px);
    box-shadow:0 14px 32px rgba(0,0,0,.08);
}

.quality-benefit-icon{
    flex-shrink:0;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sage-light);
    border-radius:15px;
}

.quality-benefit h3{
    color:var(--primary);
    font-size:19px;
    margin:2px 0 7px;
}

.quality-benefit p{
    color:var(--text);
    line-height:1.65;
    margin:0;
}

/* ================= FINAL APPOINTMENT CTA ================= */

.treatments-cta{
    padding:100px 80px;
    background:var(--primary);
    text-align:center;
}

.treatments-cta-content{
    max-width:850px;
    margin:0 auto;
}

.treatments-cta .section-tag{
    background:rgba(151,168,122,.15);
    color:var(--sage-light);
    border:1px solid rgba(151,168,122,.25);
}

.treatments-cta h2{
    color:var(--white);
    font-size:46px;
    line-height:1.2;
    margin:20px 0;
}

.treatments-cta p{
    max-width:720px;
    margin:0 auto;
    color:rgba(255,255,255,.88);
    font-size:18px;
    line-height:1.8;
}

.treatments-cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:32px;
}

.treatments-cta-buttons a{
    display:inline-block;
    padding:15px 30px;
    border-radius:30px;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.cta-primary{
    background:var(--sage-light);
    color:var(--primary);
}

.cta-primary:hover{
    background:var(--white);
    color:var(--primary);
    transform:translateY(-2px);
}

.cta-secondary{
    background:transparent;
    color:var(--white);
    border:1px solid rgba(255,255,255,.35);
}

.cta-secondary:hover{
    background:var(--white);
    color:var(--primary);
    transform:translateY(-2px);
}

/* =========================================
   RESPONSIVE NAVIGATION - JANSEWA
========================================= */

/* Hide mobile-only controls on desktop */

nav.mobile-nav-enabled .menu-toggle,
nav.mobile-nav-enabled .mobile-call-link {
    display: none;
}


/* Tablet and mobile navigation */

@media (max-width: 900px) {

    nav.mobile-nav-enabled {
        top: 10px;
        left: 10px;
        right: 10px;
        padding: 8px 12px;
        border-radius: 14px;
    }

    nav.mobile-nav-enabled img {
        width: 64px;
    }

    /* Hamburger button */

    nav.mobile-nav-enabled .menu-toggle {
        display: flex;
        position: relative;
        z-index: 1002;

        width: 44px;
        height: 44px;
        padding: 0;

        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        background: transparent;
        color: var(--primary);
        border: none;
        border-radius: 8px;
        box-shadow: none;
        cursor: pointer;
    }

    nav.mobile-nav-enabled .menu-toggle:hover {
        background: rgba(53, 51, 47, 0.06);
        color: var(--primary);
        transform: none;
        box-shadow: none;
    }

    nav.mobile-nav-enabled .menu-toggle span {
        display: block;
        width: 23px;
        height: 2px;
        background: var(--primary);
        border-radius: 99px;
    }

    /* Hide desktop Call Now button */

    nav.mobile-nav-enabled > .desktop-call-button {
        display: none;
    }

    /* Dropdown menu: closed by default */

    nav.mobile-nav-enabled .menu {
        display: none;

        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 8px;

        background: var(--ivory);
        border: 1px solid rgba(53, 51, 47, 0.14);
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(53, 51, 47, 0.14);
    }

    /* Show menu when opened */

    nav.mobile-nav-enabled .menu.is-open {
        display: flex;
    }

    /* Individual menu links */

    nav.mobile-nav-enabled .menu a {
        display: block;
        padding: 12px 14px;

        font-size: 16px;
        color: var(--primary);
        border-radius: 8px;
        transform: none;
    }

    nav.mobile-nav-enabled .menu a:not(.mobile-call-link) {
        border-bottom: 1px solid rgba(53, 51, 47, 0.08);
    }

    /* Mobile Call Now link */

    nav.mobile-nav-enabled .menu .mobile-call-link {
        display: block;

        margin-top: 8px;
        padding: 12px 16px;

        background: var(--primary);
        color: white;
        text-align: center;
        font-size: 16px;
        font-weight: 600;

        border-radius: 30px;
    }

    nav.mobile-nav-enabled .menu .mobile-call-link:hover {
        background: var(--clay);
        color: var(--primary);
    }

}


/* ==============================================
   JANSEWA DENTAL CLINIC
   TABLET AND MOBILE RESPONSIVE LAYOUT
================================================ */

/* Prevent elements from exceeding their containers */

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

html,
body {
    width: 100%;
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}


/* ==============================================
   TABLETS AND SMALL LAPTOPS
   Up to 900px
================================================ */

@media (max-width: 900px) {

    /* HERO SECTION */

    header {
        min-height: auto;
        padding: 112px 24px 36px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    .hero-content {
        width: 100%;
        max-width: 760px;
        min-width: 0;
    }

    .hero-content h1 {
        font-size: clamp(34px, 5.5vw, 48px);
        line-height: 1.12;
        overflow-wrap: break-word;
    }

    .hero-content h2 {
        font-size: clamp(20px, 3vw, 26px);
        line-height: 1.4;
    }

    .hero-content p {
        font-size: 17px;
        line-height: 1.7;
    }

    .hero-content ul {
        padding-left: 22px;
    }

    .hero-form {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: 28px;
        box-sizing: border-box;
    }

    .hero-form input {
        width: 100%;
        box-sizing: border-box;
    }


    /* ABOUT AND DOCTOR */

    .about,
    .doctor {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        padding: 70px 28px;
    }

    .about-image,
    .doctor-image,
    .about-content,
    .doctor-content {
        min-width: 0;
        width: 100%;
    }

    .about-image img,
    .doctor-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .about-content h2,
    .doctor-content h2 {
        font-size: clamp(30px, 4.5vw, 40px);
        line-height: 1.2;
    }

    .doctor-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .doctor-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* SECTION SPACING */

    .why-choose,
    .treatments,
    .testimonials,
    .contact {
        padding: 70px 28px;
    }

    .section-heading {
        width: 100%;
        max-width: 700px;
    }

    .section-heading h2 {
        font-size: clamp(29px, 4.5vw, 38px);
        line-height: 1.25;
        overflow-wrap: break-word;
    }


    /* CARD GRIDS */

    .choose-container,
    .card-container,
    .testimonial-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .choose-card,
    .treatment-card,
    .testimonial-card {
        min-width: 0;
        padding: 25px 20px;
    }

    .testimonial-card {
        min-height: 0;
    }

    .testimonial-card p {
        min-height: 0;
    }

    .treatment-card h3 {
        font-size: 21px;
        overflow-wrap: break-word;
    }

    .choose-icon svg {
        width: 60px;
        height: 60px;
    }


    /* CONTACT SECTION */

    .contact-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .contact-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-box {
        min-width: 0;
    }

    .contact-map,
    .contact-map iframe {
        width: 100%;
        min-width: 0;
    }

    .contact-map iframe {
        display: block;
        min-height: 380px;
    }


    /* FOOTER */

    .footer {
        padding: 60px 28px 25px;
    }

    .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

    .footer-container > * {
        min-width: 0;
    }
}


/* ==============================================
   MOBILE PHONES
   Up to 600px
================================================ */

@media (max-width: 600px) {

    /* HERO */

    header {
        padding: 100px 18px 30px;
        gap: 24px;
    }

    .hero-content {
        width: 100%;
    }

    .hero-badge {
        max-width: 100%;
        padding: 7px 12px;
        margin-bottom: 18px;
        font-size: 12px;
        white-space: normal;
    }

    .hero-content h1 {
        font-size: clamp(32px, 10vw, 38px);
        line-height: 1.12;
        margin-top: 10px;
    }

    .hero-content h2 {
        font-size: 21px;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    .hero-content p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 22px;
    }

    .hero-content ul {
        padding-left: 20px;
        font-size: 15px;
        line-height: 1.8;
    }

    .hero-content button {
        max-width: 100%;
        white-space: normal;
    }

    .hero-form {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 22px 18px;
        border-radius: 16px;
    }

    .hero-form h3 {
        font-size: 22px;
    }

    .hero-form input {
        min-width: 0;
        font-size: 16px;
    }


    /* SECTIONS */

    .about,
    .doctor,
    .why-choose,
    .treatments,
    .testimonials,
    .contact {
        padding: 54px 18px;
    }

    .section-heading {
        margin-bottom: 36px;
    }

    .section-heading h2 {
        font-size: 28px;
        line-height: 1.25;
        margin: 16px 0;
    }

    .section-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .section-tag {
        max-width: 100%;
        font-size: 12px;
        padding: 7px 12px;
        white-space: normal;
    }


    /* ABOUT */

    .about {
        gap: 28px;
    }

    .about-content h2 {
        font-size: 29px;
        line-height: 1.25;
    }

    .about-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .about-features {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }


    /* WHY CHOOSE US AND TREATMENTS */

    .choose-container,
    .card-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .choose-card,
    .treatment-card {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .choose-icon {
        width: 72px;
        height: 72px;
    }

    .choose-icon svg {
        width: 48px;
        height: 48px;
    }

    .treatment-icon {
        width: 70px;
        height: 70px;
        font-size: 34px;
        margin-bottom: 18px;
    }

    .treatment-card h3 {
        font-size: 21px;
    }

    .treatment-card p,
    .choose-card p {
        font-size: 15px;
        line-height: 1.75;
    }


    /* DOCTOR */

    .doctor {
        gap: 30px;
    }

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

    .doctor-content h4 {
        font-size: 18px;
    }

    .doctor-content h5 {
        font-size: 15px;
        line-height: 1.7;
    }

    .doctor-content blockquote {
        margin: 24px 0;
        padding-left: 16px;
        font-size: 19px;
        line-height: 1.6;
    }

    .doctor-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .doctor-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .stat-box {
        padding: 18px 10px;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .stat-box h3 {
        font-size: 23px;
    }

    .stat-box span {
        font-size: 12px;
    }

    .doctor-quote {
        padding: 20px;
        margin: 25px 0;
        overflow-wrap: break-word;
    }

    .doctor-points {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        font-size: 14px;
    }

    .doctor-content button,
    .about-content button {
        max-width: 100%;
        white-space: normal;
    }


    /* TESTIMONIALS */

    .google-rating {
        display: inline-flex;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 10px 14px;
    }

    .google-rating span {
        font-size: 14px;
    }

    .testimonial-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 30px;
    }

    .testimonial-card {
        min-height: 0;
        padding: 24px 22px;
    }

    .testimonial-card p {
        min-height: 0;
        font-size: 15px;
        line-height: 1.8;
    }


    /* CONTACT */

    .contact-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
        margin-top: 35px;
    }

    .contact-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .contact-box {
        padding: 22px 18px;
        border-radius: 15px;
        overflow-wrap: anywhere;
    }

    .contact-box h3 {
        font-size: 19px;
    }

    .contact-box p {
        font-size: 14px;
    }

    .contact-map iframe {
        min-height: 320px;
    }


    /* FOOTER */

    .footer {
        padding: 45px 20px 22px;
    }

    .footer-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .footer-about img {
        width: 72px;
    }

    .footer-about h3 {
        font-size: 23px;
    }

    .footer-links h4,
    .footer-contact h4 {
        font-size: 19px;
        margin-bottom: 16px;
    }

    .footer-bottom {
        margin-top: 35px;
        padding-top: 20px;
        font-size: 12px;
        line-height: 1.6;
    }
}


/* Very narrow phones */

@media (max-width: 360px) {

    .about,
    .doctor,
    .why-choose,
    .treatments,
    .testimonials,
    .contact {
        padding-left: 14px;
        padding-right: 14px;
    }

    header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .doctor-stats {
        gap: 8px;
    }

    .stat-box h3 {
        font-size: 20px;
    }

    .hero-form {
        padding: 20px 15px;
    }
}