:root {
    --blue: #4783AD;
    --blue-dark: #3a6f9c;
    --gold: #BB9D5C;
    --gold-light: #d8c48f;
    --grey: #4b4b4b;
    --grey-dark: #3d3d3d;
    --text: #222;
}

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



body {
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: #fff;
    overflow-x: hidden
}

img {
    max-width: 100%;
    display: block
}

a {
    text-decoration: none;
    color: inherit
}

ul {
    list-style: none
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px
}

/* Common */
.h-blue {
    color: var(--blue);
    font-weight: 600;
    font-size: 26px
}

.h-white {
    color: #fff;
    font-weight: 600;
    font-size: 27px;
    text-align: center
}

.underline {
    display: block;
    width: 125px;
    height: 4px;
    margin: 14px 0 0;
    background: linear-gradient(90deg, var(--gold) 50%, var(--blue) 50%)
}

.underline.gold-white {
    margin: 14px auto 0;
    background: linear-gradient(90deg, var(--gold) 50%, #fff 50%);
    height: 3px;
    width: 76px
}

.btn-blue,
.btn-gold {
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: .25s
}

.btn-blue {
    background: var(--blue);
    color: #fff;
    padding: 9px 20px;
    border-radius: 4px
}

.btn-blue:hover {
    background: var(--blue-dark)
}

.btn-gold {
    background: var(--gold);
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    box-shadow: 0 0 6px rgba(255, 255, 255, .7) inset, 0 3px 8px rgba(0, 0, 0, .25);
    font-size: 13.5px
}

.btn-gold:hover {
    background: #a58a4c
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px
}

/* ================= HEADER ================= */
:root {
    --header-h: 80px
}



/* AFTER */
.site-header {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    position: sticky;
    width: 100%;
    z-index: 1000;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h)
}

.logo {
    flex: 0 0 auto
}

.logo img {
    height: 70px;
    width: auto
}

.main-nav .menu {
    display: flex;
    align-items: center;
    gap: 26px
}

.main-nav .menu>li {
    position: relative;
    display: flex;
    align-items: center
}

.main-nav a {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #111;
    padding: 22px 0;
    display: block;
    transition: color .2s
}

.main-nav a:hover,
.main-nav a.active,
.main-nav li.active>a {
    color: var(--blue)
}

.main-nav .menu>li.active>a {
    box-shadow: inset 0 -3px 0 var(--blue)
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 26px;
    color: var(--blue);
    cursor: pointer;
    padding: 6px 8px
}

/* Dropdown arrow button */
.dd-toggle {
    background: none;
    border: 0;
    color: #111;
    font-size: 10px;
    cursor: pointer;
    padding: 6px 0 6px 5px;
    transition: transform .25s, color .2s
}

.has-dropdown.active>.dd-toggle,
.dd-toggle:hover {
    color: var(--blue)
}

/* ---------- Dropdown (desktop) ---------- */
.dropdown {
    position: absolute;
    top: 100%;
    left: -14px;
    min-width: 260px;
    max-width: 340px;
    background: #fff;
    border-top: 3px solid var(--blue);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
    border-radius: 0 0 5px 5px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .25s;
    z-index: 50;
}

.dropdown li {
    border-bottom: 1px solid #e3e3e3
}

.dropdown li:last-child {
    border-bottom: 0
}

.dropdown li a {
    display: block;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    white-space: normal;
}

.dropdown li a:hover,
.dropdown li a.active {
    background: #f1f6fb;
    color: var(--blue)
}

.has-dropdown:hover>.dropdown,
.has-dropdown:focus-within>.dropdown,
.has-dropdown.open>.dropdown {
    opacity: 1;
    visibility: visible;
    transform: none
}

.has-dropdown:hover>.dd-toggle {
    transform: rotate(180deg)
}

/* Desktop: menu fills the header height so the dropdown opens flush under it */
@media (min-width:992px) {

    .main-nav,
    .main-nav .menu {
        height: var(--header-h)
    }

    .main-nav .menu>li {
        height: 100%
    }
}

/* ================= SMALL LAPTOP (992px to 1100px) ================= */
@media (min-width:992px) and (max-width:1100px) {
    .main-nav .menu {
        gap: 16px
    }

    .main-nav a {
        font-size: 14px
    }

    .dropdown li a {
        font-size: 14px
    }

    .logo img {
        height: 56px
    }
}

/* ================= TABLET + MOBILE (991px and below) ================= */
@media (max-width:991px) {
    :root {
        --header-h: 68px
    }

    .logo img {
        height: 48px
    }

    .nav-toggle {
        display: block
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }

    .main-nav.open {
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        box-shadow: 0 8px 14px rgba(0, 0, 0, .14);
    }

    .main-nav .menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 20px 14px
    }

    .main-nav .menu>li {
        flex-wrap: wrap;
        border-bottom: 1px solid #eee
    }

    .main-nav .menu>li:last-child {
        border-bottom: 0
    }

    .main-nav .menu>li>a {
        padding: 14px 0;
        flex: 1
    }

    .main-nav .menu>li.active>a {
        box-shadow: none
    }

    .dd-toggle {
        width: 46px;
        height: 46px;
        font-size: 13px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .has-dropdown.open>.dd-toggle {
        transform: rotate(180deg);
        color: var(--blue)
    }

    .has-dropdown:hover>.dd-toggle {
        transform: none
    }

    .has-dropdown.open:hover>.dd-toggle {
        transform: rotate(180deg)
    }

    /* dropdown becomes an accordion */
    .dropdown {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        border-top: 0;
        border-radius: 0;
        background: #f6f9fc;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .has-dropdown:hover>.dropdown,
    .has-dropdown:focus-within>.dropdown {
        max-height: 0
    }

    .has-dropdown.open>.dropdown,
    .has-dropdown.open:hover>.dropdown {
        max-height: 900px
    }

    /* room for all 13 service links */

    .dropdown li {
        border-bottom: 1px solid #dfe7ef
    }

    .dropdown li:last-child {
        border-bottom: 0
    }

    .dropdown li a {
        padding: 12px 16px 12px 20px;
        font-size: 15px
    }
}

/* ================= SMALL PHONES ================= */
@media (max-width:480px) {
    :root {
        --header-h: 60px
    }

    .logo img {
        height: 42px
    }

    .main-nav .menu {
        padding: 4px 16px 12px
    }
}

/* Floating contact */
.float-contact {
    position: fixed;
    left: 0;
    top: 65%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.float-contact a {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: width .25s ease, background .25s ease, color .25s ease;
}

.float-contact .wa {
    background: #7cc142;
    color: #fff
}

.float-contact .ph {
    background: #fff;
    color: #222
}

/* Hover: button slides out slightly and changes colour */
.float-contact a:hover {
    width: 62px
}

.float-contact .wa:hover {
    background: #25d366
}

.float-contact .ph:hover {
    background: var(--blue);
    color: #fff
}

/* Hero slider */
.hero {
    position: relative;
    height: min(41vw, 500px);
    min-height: 230px;
    overflow: hidden;
    margin-top: 10px;
    background: #dfe9f3
}

.hero .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s
}

.hero .slide.active {
    opacity: 1
}

.hero .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #111;
    font-size: 20px;
    padding: 12px;
    cursor: pointer;
    z-index: 5
}

.arrow.prev {
    left: 8px
}

.arrow.next {
    right: 8px
}

.dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 5
}

.dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: #333;
    cursor: pointer;
    padding: 0
}

.dots button.active {
    background: #2f7bf5
}

/* Appointment bar */
.appointment {
    background: var(--blue);
    color: #fff;
    margin-top: 10px;
    padding: 34px 0 36px
}

.appt-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 5%
}

.appt-text {
    text-align: center;
    flex: 0 0 auto;
    min-width: 300px
}

.appt-text h2 {
    font-size: 29px;
    font-weight: 500;
    letter-spacing: .3px
}

.appt-text p {
    font-size: 19px;
    margin-top: 10px
}

.appointment .btn-gold {
    /*margin-right: 10%;*/
    font-size: 16px;

}

/* Welcome */
.welcome {
    padding: 34px 0 40px
}

.welcome-inner {
    display: flex;
    align-items: flex-start;
    gap: 60px;

}

.welcome-img {
    position: relative;
    flex: 0 0 46%;
    height: 395px
}

.frame {
    position: absolute;
    background: #fff;
    border: 7px solid #d8c796;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2)
}

.frame img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.frame-big {
    left: 0;
    top: 15px;
    /*width: 77%*/
    ;
    height: 305px
}

.frame-small {
    right: 0;
    bottom: 0;
    width: 52%;
    height: 170px
}

.welcome-text {
    flex: 1;
    padding-top: 6px
}

.welcome-text .h-blue {
    font-size: 26px
}

.welcome-text p {
    font-size: 15px;
    line-height: 26px;
    text-align: justify;
    margin: 26px 0 30px;
    color: #111
}

/* Services */
/* ================= SERVICES ================= */
.services {
    background: var(--grey);
    padding: 34px 0 46px;
    border-radius: 50% 50% 0 0 / 55px 55px 0 0;
    margin-top: 14px;
}

.service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
    padding: 0 2%;
}

.service-card {
    position: relative;
    /* needed for the overlay */
    display: block;
    flex: 0 0 calc(25% - 18px);
    /* 4 cards per row */
    max-width: calc(25% - 18px);
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    transition: transform .25s, box-shadow .25s;
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

/* Title overlay (hidden until hover) */
.service-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding: 0 14px 30px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    background: linear-gradient(to top, #000 0%, #000 38%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    transition: opacity .35s ease;
}

/* Hover + keyboard focus */
.service-card:hover,
.service-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
}

.service-card:hover img,
.service-card:focus-visible img {
    transform: scale(1.06)
}

.service-card:hover .service-title,
.service-card:focus-visible .service-title {
    opacity: 1
}

/* Touch devices have no hover, so always show the title */
@media (hover:none) {
    .service-title {
        transform: none;
        /* always visible */
        align-items: flex-end;
        padding-bottom: 12px;
        font-size: 15px;
        background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 80%);
    }
}

/* Team + Contact */
.team-contact {
    padding: 48px 0 30px
}

.tc-inner {
    display: flex;
    gap: 18px;
    align-items: stretch;

}

.team-box {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    padding: 12px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.team-box .underline {
    margin: 12px auto 0;
    width: 44px;
    height: 4px
}

.team-box .doctor {
    width: 75px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin: 36px auto 0
}

.team-box h3 {
    font-size: 19px;
    font-weight: 700;
    margin-top: 10px
}

.team-box .role {
    font-size: 15px;
    margin: 22px 0 14px
}

.team-box p {
    font-size: 15px;
    line-height: 26px;
    color: #222
}

.contact-box {
    flex: 0 0 45%;
    background: var(--gold);
    border-radius: 10px;
    padding: 12px 16px 22px
}

.contact-box h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1e1e1e;
    margin-bottom: 14px
}

.contact-box label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #5a4a1f;
    margin-top: 10px
}

.contact-box input,
.contact-box textarea {
    width: calc(100% - 16px);
    display: block;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    margin-top: 3px
}

.contact-box textarea {
    height: 78px;
    resize: vertical
}

.contact-box .btn-blue {
    margin-top: 12px;
    padding: 7px 14px;
    font-size: 16px;
    border-radius: 3px
}

/* Testimonials */
/* ================= TESTIMONIALS ================= */
.testimonials {
    padding: 70px 0 24px;
    text-align: center;
}

.testimonials .underline {
    margin: 14px auto 0;
    width: 68px;
    height: 4px;
}

.t-wrap {
    position: relative;
    max-width: 1000px;
    margin: 26px auto 0;
}

/* All cards share ONE grid cell, so the box is always as tall as the longest review */
.t-track {
    display: grid;
}

.t-card {
    grid-area: 1 / 1;
    background: var(--blue);
    color: #fff;
    border-radius: 10px;
    padding: 24px 28px 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s;
}

.t-card.active {
    opacity: 1;
    visibility: visible;
}

.t-card h3 {
    font-size: 20px;
    font-weight: 600;
}

.stars {
    color: #f5c518;
    font-size: 13px;
    margin: 10px 0 12px;
    letter-spacing: 3px;
}

.t-card p {
    font-size: 15px;
    line-height: 26px;
}

/* Arrows: outside the card on large screens */
.t-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    z-index: 3;
    transition: color .2s;
}

.t-arrow:hover {
    color: var(--blue)
}

.t-arrow.prev {
    left: -50px
}

.t-arrow.next {
    right: -50px
}

/* ---------- TABLET (arrows move onto the card edges) ---------- */
@media (max-width:1100px) {
    .t-arrow {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        color: var(--blue);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .t-arrow.prev {
        left: -12px
    }

    .t-arrow.next {
        right: -12px
    }

    .t-card {
        padding: 24px 34px 30px
    }
}

/* ---------- MOBILE (arrows below the card) ---------- */
@media (max-width:767px) {
    .testimonials {
        padding: 50px 0 10px
    }

    .t-wrap {
        margin-top: 22px;
        padding-bottom: 62px;
        /* room for the arrows */
    }

    .t-card {
        padding: 20px 16px 24px
    }

    .t-card h3 {
        font-size: 18px
    }

    .t-card p {
        font-size: 14px;
        line-height: 24px
    }

    .t-arrow {
        top: auto;
        bottom: 0;
        transform: none;
        width: 50px;
        height: 50px;
        background: var(--blue);
        color: #fff;
        box-shadow: none;
    }

    .t-arrow.prev {
        left: calc(50% - 50px);
        right: auto
    }

    .t-arrow.next {
        left: calc(50% + 8px);
        right: auto
    }
}

/* Footer */
.site-footer {
    background: var(--grey-dark);
    color: #fff;
    margin-top: 30px;
    border-radius: 50% 50% 0 0 / 110px 110px 0 0;
    padding-top: 34px
}

.footer-logo {
    width: 225px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 14px;
    text-align: center
}

.footer-logo img {
    margin: 0 auto;
    height: 55px;
    width: auto
}

.timings {
    text-align: center;
    margin-top: 12px
}

.timings span {
    display: inline-block;
    background: #fff;
    color: #111;
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 17px;
    font-weight: 500
}

.footer-cols {
    display: flex;
    gap: 5%;
    padding: 44px 0 0
}

.f-col h3 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .3px;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 22px
}

.f-col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 100%)
}

.f-col.about {
    flex: 0 0 31%
}

.f-col.about p {
    font-size: 16px;
    line-height: 26px;
    text-align: justify
}

.f-col.contact {
    flex: 0 0 33%
}

.f-col.contact li {
    display: flex;
    gap: 12px;
    font-size: 16px;
    line-height: 26px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gold)
}

.f-col.contact li:last-child {
    border-bottom: 0
}

.f-col.contact i {
    color: var(--gold);
    font-size: 25px;
    margin-top: 10px;
    flex: 0 0 18px
}

.f-col.contact a:hover {
    color: var(--gold-light)
}

.f-col.reach {
    flex: 1;
    max-width: 240px
}

.map {
    height: 250px;
    width: 335px;
    border-radius: 2px;
    overflow: hidden;
    background: #ddd
}

.map iframe {
    width: 100%;
    height: 100%;
    border: 0
}

.social-line {
    position: relative;
    margin: 50px 0 0;
    text-align: center;
    height: 50px;
    /* was 34px */
}

.social-line::before {
    content: "";
    position: absolute;
    left: 3%;
    right: 2%;
    top: 50%;
    height: 2px;
    background: var(--gold);
}

.social {
    position: relative;
    display: inline-flex;
    gap: 8px;
    background: #fff;
    border-radius: 50px;
    padding: 4px 8px;
    /* was 3px 7px */
}

.social a {
    width: 42px;
    /* was 30px */
    height: 42px;
    /* was 30px */
    border-radius: 50%;
    background: #2a4f8f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    /* was 15px */
    transition: background .25s, transform .25s;
}

.social a:hover {
    background: var(--gold);
    transform: scale(1.08);
}

.copyright {
    background: var(--gold);
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding: 11px 10px;
    margin-top: 22px
}

/* ---------- TABLET ---------- */
@media (max-width:991px) {
    .welcome-inner {
        gap: 30px;
        padding: 0
    }

    .welcome-img {
        flex-basis: 46%;
        height: 330px
    }

    .frame-big {
        height: 240px
    }

    .appt-inner {
        padding: 0
    }

    .appointment .btn-gold {
        margin-right: 0
    }

    .service-card {
        flex: 0 0 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px)
    }

    .tc-inner {
        padding: 0
    }

    .footer-cols {
        flex-wrap: wrap;
        gap: 30px;
        padding: 36px 15px 0
    }

    .f-col.about {
        flex: 0 0 100%
    }

    .f-col.contact {
        flex: 1 1 300px
    }

    .f-col.reach {
        flex: 1 1 240px;
        max-width: none
    }
}

/* ---------- MOBILE ---------- */
@media (max-width:767px) {
    .nav-toggle {
        display: block
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 6px 10px rgba(0, 0, 0, .12);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s
    }

    .main-nav.open {
        max-height: 360px
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 6px 20px 12px
    }

    .main-nav li a {
        display: block;
        padding: 11px 0;
        border-bottom: 1px solid #eee
    }

    .logo img {
        height: 46px
    }

    .hero {
        height: 52vw
    }

    .appt-inner {
        flex-direction: column;
        text-align: center
    }

    .appt-text {
        min-width: 0
    }

    .welcome-inner {
        flex-direction: column
    }

    .welcome-img {
        flex: none;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        height: 330px
    }

    .welcome-text {
        width: 100%
    }

    .services {
        border-radius: 50% 50% 0 0 / 30px 30px 0 0
    }

    .service-grid {
        gap: 14px;
        padding: 0
    }

    .service-card {
        flex: 0 0 calc(50% - 7px);
        max-width: calc(50% - 7px);
        height: 130px
    }

    .tc-inner {
        flex-direction: column;
        gap: 24px
    }

    .contact-box {
        flex: none
    }

    .t-wrap {
        padding: 0 6px
    }

    .t-track {
        min-height: 330px
    }

    .t-arrow {
        display: none
    }

    .site-footer {
        border-radius: 50% 50% 0 0 / 50px 50px 0 0
    }

    .timings span {
        display: block;
        margin: 0 12px;
        line-height: 1.5
    }

    .footer-cols {
        flex-direction: column
    }

    .f-col.reach {
        width: 100%
    }

    .map {
        height: 220px
    }

    .float-contact a {
        width: 36px;
        height: 36px;
        font-size: 15px
    }
}

@media (max-width:420px) {
    .h-blue {
        font-size: 21px
    }

    .welcome-img {
        height: 290px
    }

    .frame-big {
        height: 210px
    }

    .frame-small {
        height: 120px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}

/* =====================================================
   CONTACT US PAGE
   ===================================================== */

/* ---------- Page banner (reusable on every inner page) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Map ---------- */
.contact-map {
    padding-top: 10px
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
    background: #e5e5e5
}

/* ---------- Form + details layout ---------- */
.contact-page {
    padding: 50px 0 90px
}

.contact-wrap {
    display: flex;
    gap: 6%;
    align-items: flex-start
}

/* ---------- Form ---------- */
.contact-form {
    flex: 0 0 46%
}

.contact-form label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin: 0 0 6px
}

.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    color: #222;
    background: #fafafa;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    padding: 12px 14px;
    margin-bottom: 22px;
    transition: border-color .2s, box-shadow .2s;
}

.contact-form input {
    height: 52px
}

.contact-form textarea {
    height: 282px;
    resize: vertical
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 0;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(70, 130, 180, .18)
}

.btn-send {
    background: #376bd2;
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    padding: 10px 20px;
    transition: background .25s;
}

.btn-send:hover {
    background: #2552ad
}

.form-alert {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
    padding: 12px 14px;
    margin-bottom: 22px;
    font-size: 15px;
    border-radius: 3px;
}

/* ---------- Clinic details ---------- */
.contact-details {
    flex: 1;
    padding-top: 6px
}

.contact-details .h-blue {
    font-size: 26px;
    margin-bottom: 42px
}

.contact-details .time-heading {
    margin-top: 70px
}

/* icon + label on ONE line, text below */
.info-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    margin-bottom: 46px;
}

.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 17px;
    margin: 0;
}

.info-item strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    line-height: 1.4
}

.info-item p {
    grid-column: 1 / -1;
    font-size: 16px;
    line-height: 26px;
    color: #111
}

.info-item a:hover {
    color: var(--blue)
}

/* Clinic Time: icon + text on ONE line */
.info-item.inline {
    margin-bottom: 28px
}

.info-item.inline p {
    grid-column: 2;
    grid-row: 1
}

/* ---------- Tablet ---------- */
@media (max-width:991px) {
    .contact-wrap {
        gap: 40px
    }

    .contact-form {
        flex: 0 0 50%
    }

    .contact-map iframe {
        height: 380px
    }

    .contact-details .time-heading {
        margin-top: 40px
    }

    .info-item {
        margin-bottom: 32px
    }

    .info-item.inline {
        margin-bottom: 24px
    }
}

/* ---------- Mobile ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1 {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .contact-map iframe {
        height: 300px
    }

    .contact-page {
        padding: 36px 0 60px
    }

    .contact-wrap {
        flex-direction: column;
        gap: 36px
    }

    .contact-form {
        flex: none;
        width: 100%
    }

    .contact-form textarea {
        height: 200px
    }

    .btn-send {
        width: 100%;
        padding: 12px
    }

    .contact-details {
        width: 100%
    }

    .contact-details .h-blue {
        font-size: 22px;
        margin-bottom: 26px
    }

    .contact-details .time-heading {
        margin-top: 30px
    }

    .info-item {
        margin-bottom: 26px
    }

    .info-item.inline {
        margin-bottom: 20px
    }

    .info-item p {
        font-size: 15px;
        line-height: 24px;
        word-break: break-word
    }
}

@media (max-width:480px) {
    .contact-map iframe {
        height: 250px
    }
}

/* =====================================================
   GALLERY PAGE
   ===================================================== */
/* =====================================================
   GALLERY PAGE
   ===================================================== */

/* ---------- Page banner (shared with other inner pages) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Grid ---------- */
.gallery-page {
    padding: 50px 0 90px
}

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

.gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    /* 270 x 180 like the design */
    border-radius: 6px;
    background: #f1f1f1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.gallery-item::after {
    /* zoom icon on hover */
    content: "\f00e";
    /* Font Awesome magnifier */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    transition: opacity .3s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
    transform: scale(1.08)
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
    opacity: 1
}

/* ---------- Lightbox (large, clear image) ---------- */
.lb {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    background: rgba(0, 0, 0, .94);
}

.lb.open {
    display: block
}

/* stage fills almost the full screen */
.lb-stage {
    position: absolute;
    inset: 56px 20px 50px;
    /* top | sides | bottom */
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-stage img {
    width: auto;
    /* no forced stretching = clear image */
    height: auto;
    max-width: 100%;
    /* shrink only if bigger than screen */
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    /* white behind transparent images */
    image-rendering: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* buttons float on top of the image edges */
.lb button {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    transition: background .25s, transform .25s;
}

.lb button:hover {
    background: var(--gold);
    transform: scale(1.08)
}

.lb .lb-prev,
.lb .lb-next {
    top: 50%;
    margin-top: -29px
}

.lb .lb-prev {
    left: 24px
}

.lb .lb-next {
    right: 24px
}

.lb .lb-close {
    top: 10px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 18px
}

.lb-count {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 15px;
    letter-spacing: .5px;
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet ---------- */
@media (max-width:991px) {
    .gallery-page {
        padding: 40px 0 70px
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
    }

    /* 3 columns */

    .lb-stage {
        inset: 54px 12px 46px
    }

    .lb button {
        width: 50px;
        height: 50px;
        font-size: 19px
    }

    .lb .lb-prev,
    .lb .lb-next {
        margin-top: -25px
    }

    .lb .lb-prev {
        left: 16px
    }

    .lb .lb-next {
        right: 16px
    }
}

/* ---------- Mobile ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1 {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .gallery-page {
        padding: 30px 0 50px
    }

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

    /* 2 columns */
    .gallery-item {
        border-radius: 5px
    }

    /* lightbox: image takes the full width, buttons overlay the sides */
    .lb-stage {
        inset: 52px 0 44px
    }

    .lb-stage img {
        border-radius: 0
    }

    .lb button {
        width: 42px;
        height: 42px;
        font-size: 16px;
        background: rgba(0, 0, 0, .6)
    }

    .lb .lb-prev,
    .lb .lb-next {
        margin-top: -21px
    }

    .lb .lb-prev {
        left: 8px
    }

    .lb .lb-next {
        right: 8px
    }

    .lb .lb-close {
        top: 8px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 15px
    }

    .lb-count {
        bottom: 12px;
        font-size: 14px
    }
}

/* ---------- Touch screens: no hover zoom icon ---------- */
@media (hover:none) {
    .gallery-item::after {
        display: none
    }
}

/* =====================================================
   DR. SALIL NENE PAGE
   ===================================================== */
/* =====================================================
   DR. SALIL NENE PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Profile ---------- */
.doctor-page {
    padding: 62px 0 70px
}

.doctor-profile {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.doctor-photo {
    flex: 0 0 315px;
    border: 1px solid #e3e3e3;
    background: #fff;
}

.doctor-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.doctor-info {
    flex: 1;
    min-width: 0
}

.doctor-info h1 {
    font-size: 27px;
    font-weight: 600;
    line-height: 34px;
    color: #000;
    margin-top: -4px;
}

.doctor-info hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 34px 0 36px;
}

.doctor-text p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
    margin: 0;
}

/* ---------- Tabs (Member / Committee / Invisalign) ---------- */
.doctor-tabs {
    display: flex;
    width: fit-content;
    /* only as wide as the tabs */
    margin: 62px 0 0 auto;
    /* auto left margin pushes it to the RIGHT */
}

.doctor-tabs li {
    background: #f1f1f1;
    color: #222;
    font-size: 17px;
    font-weight: 500;
    padding: 17px 40px;
    border-left: 2px solid #fff;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.doctor-tabs li:first-child {
    border-left: 0
}

/* hover: blue background, white text */
.doctor-tabs li:hover {
    background: var(--blue);
    color: #fff;
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .doctor-page {
        padding: 46px 0 60px
    }

    .doctor-profile {
        gap: 26px
    }

    .doctor-photo {
        flex-basis: 260px
    }

    .doctor-info h1 {
        font-size: 24px;
        line-height: 31px
    }

    .doctor-info hr {
        margin: 22px 0 24px
    }

    .doctor-text p {
        font-size: 15px;
        line-height: 24px
    }

    .doctor-tabs {
        margin-top: 44px
    }

    /* stays on the right */
    .doctor-tabs li {
        font-size: 15px;
        padding: 15px 24px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .doctor-page {
        padding: 34px 0 50px
    }

    /* photo on top, text below */
    .doctor-profile {
        flex-direction: column;
        align-items: center;
        gap: 24px
    }

    .doctor-photo {
        flex: none;
        width: 100%;
        max-width: 300px
    }

    .doctor-info {
        width: 100%
    }

    .doctor-info h1 {
        font-size: 22px;
        line-height: 30px;
        margin-top: 0;
        text-align: center
    }

    .doctor-info hr {
        margin: 16px 0 18px
    }

    .doctor-text p {
        font-size: 15px;
        line-height: 24px;
        text-align: left
    }

    /* tabs stacked full width */
    .doctor-tabs {
        flex-direction: column;
        width: 100%;
        margin-top: 34px;
    }

    .doctor-tabs li {
        font-size: 15px;
        text-align: center;
        padding: 14px 16px;
        border-left: 0;
        border-top: 2px solid #fff;
    }

    .doctor-tabs li:first-child {
        border-top: 0
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .doctor-photo {
        max-width: 260px
    }

    .doctor-info h1 {
        font-size: 20px;
        line-height: 28px
    }
}

/* =====================================================
   DR. PURVAJA NENE PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* visually hidden text (still read by search engines and screen readers) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Profile ---------- */
.doctor-page {
    padding: 40px 0 60px
}

.doctor-profile {
    display: flex;
    align-items: flex-start;
    gap: 31px;
}

.doctor-photo {
    flex: 0 0 382px;
    margin-top: 70px;
    /* photo moved DOWN (change this number to adjust) */
}

.doctor-photo img {
    width: 100%;
    height: auto;
    display: block
}

.doctor-info {
    flex: 1;
    min-width: 0;
    padding-top: 25px
}

.doctor-info hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 0 0 36px;
}

.doctor-text p {
    font-size: 16px;
    line-height: 25.6px;
    color: #000;
    text-align: justify;
    margin: 0;
}

/* ---------- Our Team ---------- */
.team-section {
    padding: 0 10px;
    margin-top: 62px
}

.team-heading {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 22px;
}

.team-card {
    background: #4e9ae7;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    padding: 26px 30px 88px;
    color: #fff;
}

.team-card h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3
}

.team-card .team-role {
    font-size: 20px;
    font-weight: 400;
    margin: 24px 0 10px
}

.team-card .team-text {
    font-size: 15px;
    line-height: 25.6px;
    color: #fff
}

/* grey Member tab attached under the card (left) */
.team-tab {
    width: 353px;
    background: #f1f1f1;
    color: #222;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 17px 20px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.team-tab:hover {
    background: var(--blue);
    color: #fff
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .doctor-page {
        padding: 34px 0 50px
    }

    .doctor-profile {
        gap: 24px
    }

    .doctor-photo {
        flex-basis: 300px;
        margin-top: 10px
    }

    .doctor-info {
        padding-top: 10px
    }

    .doctor-info hr {
        margin-bottom: 24px
    }

    .doctor-text p {
        font-size: 15px;
        line-height: 24px
    }

    .team-section {
        margin-top: 46px;
        padding: 0
    }

    .team-heading {
        font-size: 25px
    }

    .team-card {
        padding: 24px 24px 60px
    }

    .team-tab {
        width: 280px;
        font-size: 16px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .doctor-page {
        padding: 28px 0 44px
    }

    /* photo on top, text below */
    .doctor-profile {
        flex-direction: column;
        gap: 20px
    }

    .doctor-photo {
        flex: none;
        width: 100%;
        margin-top: 0
    }

    .doctor-info {
        width: 100%;
        padding-top: 0
    }

    .doctor-info hr {
        margin-bottom: 18px
    }

    .doctor-text p {
        font-size: 15px;
        line-height: 24px;
        text-align: left
    }

    .team-section {
        margin-top: 36px
    }

    .team-heading {
        font-size: 23px;
        margin-bottom: 16px
    }

    .team-card {
        padding: 20px 18px 36px
    }

    .team-card h3,
    .team-card .team-role {
        font-size: 18px
    }

    .team-card .team-role {
        margin: 16px 0 8px
    }

    .team-card .team-text {
        font-size: 14px;
        line-height: 24px
    }

    .team-tab {
        width: 100%;
        font-size: 16px;
        padding: 14px 16px
    }
}

/* =====================================================
   SERVICE DETAIL PAGE (Ceramic Dental Braces)
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.service-page {
    padding: 50px 0 70px
}

.service-wrap {
    padding: 0 20px
}

.service-page p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
    margin: 0;
}

.service-page .gap-top {
    margin-top: 26px
}

/* Headings */
.svc-title {
    font-size: 27px;
    font-weight: 400;
    line-height: 34px;
    color: #0099e6;
    margin-bottom: 14px;
}

.svc-sub {
    font-size: 26px;
    font-weight: 600;
    line-height: 34px;
    color: #000;
    margin-bottom: 16px;
}

.svc-heading {
    font-size: 27px;
    font-weight: 400;
    line-height: 34px;
    color: #000;
    margin: 56px 0 22px;
}

/* ---------- Intro (text left, photo right) ---------- */
.svc-intro {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.svc-intro-text {
    flex: 1;
    min-width: 0
}

/* ---------- Photos ---------- */
.svc-photo {
    margin: 0
}

.svc-photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.svc-photo-right {
    flex: 0 0 300px
}

/* ---------- Pros and cons ---------- */
.pros-cons {
    display: flex;
    align-items: flex-start;
    gap: 23px;
    margin-top: 40px;
}

.pros {
    flex: 0 0 49%;
    min-width: 0
}

.cons {
    flex: 1;
    min-width: 0
}

.pros p+p {
    margin-top: 28px
}

.pros p:first-child {
    margin-bottom: 28px
}

.cons>p {
    margin-bottom: 24px
}

.cons ul {
    list-style: disc;
    padding-left: 28px
}

.cons li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.cons li+li {
    margin-top: 0
}

/* ---------- Split (photo left, text right) ---------- */
.svc-split {
    display: flex;
    align-items: flex-start;
    gap: 46px;
    margin-top: 30px;
    padding-left: 30px;
}

.svc-photo-left {
    flex: 0 0 300px;
    margin-top: 0
}

.svc-split-text {
    flex: 1;
    min-width: 0
}

.svc-split-text .svc-heading {
    margin-top: 0
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .service-page {
        padding: 40px 0 56px
    }

    .service-wrap {
        padding: 0 15px
    }

    .svc-title {
        font-size: 25px
    }

    .svc-sub {
        font-size: 23px
    }

    .svc-heading {
        font-size: 25px;
        margin: 44px 0 18px
    }

    .svc-intro {
        gap: 28px
    }

    .svc-photo-right {
        flex-basis: 220px
    }

    .pros-cons {
        gap: 24px;
        margin-top: 30px
    }

    .pros {
        flex-basis: 48%
    }

    .svc-split {
        gap: 26px;
        padding-left: 0
    }

    .svc-photo-left {
        flex-basis: 230px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .service-page {
        padding: 30px 0 44px
    }

    .service-wrap {
        padding: 0 15px
    }

    .service-page p,
    .cons li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .svc-title {
        font-size: 22px
    }

    .svc-sub {
        font-size: 20px;
        margin-bottom: 12px
    }

    .svc-heading {
        font-size: 21px;
        margin: 34px 0 14px
    }

    /* intro: text first, photo below, centred */
    .svc-intro {
        flex-direction: column;
        gap: 20px
    }

    .svc-photo-right {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }

    /* pros and cons stacked */
    .pros-cons {
        flex-direction: column;
        gap: 22px;
        margin-top: 24px
    }

    .pros,
    .cons {
        flex: none;
        width: 100%
    }

    .pros p+p {
        margin-top: 20px
    }

    .pros p:first-child {
        margin-bottom: 20px
    }

    .cons>p {
        margin-bottom: 14px
    }

    .cons ul {
        padding-left: 20px
    }

    .cons li+li {
        margin-top: 10px
    }

    /* stain section: photo on top, text below */
    .svc-split {
        flex-direction: column;
        gap: 20px;
        padding-left: 0;
        margin-top: 26px
    }

    .svc-photo-left {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .svc-title {
        font-size: 20px
    }

    .svc-sub {
        font-size: 18px
    }

    .svc-heading {
        font-size: 19px
    }
}

/* =====================================================
   DENTAL BRACES PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.db-page {
    padding: 50px 0 70px
}

.db-wrap {
    padding: 0 20px
}

.db-page p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
    margin: 0 0 26px;
}

/* Headings */
.db-title {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    margin-bottom: 22px;
}

.db-sub {
    font-size: 27px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    margin-bottom: 26px;
}

.db-heading {
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    margin-bottom: 22px;
}

/* ---------- Intro: text left, photo right ---------- */
.db-intro {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.db-intro-text {
    flex: 1;
    min-width: 0
}

.db-photo {
    flex: 0 0 350px;
    margin: 0
}

.db-photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* ---------- Two columns with a vertical divider ---------- */
.db-cols {
    display: flex;
    align-items: flex-start;
    margin-top: 52px;
}

.db-symptoms {
    flex: 0 0 50%;
    padding-right: 24px;
}

.db-symptoms .db-heading {
    font-size: 27px;
    line-height: 32px
}

.db-symptoms ul {
    list-style: disc;
    padding-left: 38px;
    margin-top: 40px;
}

.db-symptoms li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    padding-left: 4px;
}

.db-treatment {
    flex: 1;
    min-width: 0;
    border-left: 1px solid #e3e3e3;
    padding-left: 20px;
    padding-bottom: 20px;
}

.db-treatment img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 26px;
}

.db-treatment p {
    margin-bottom: 0
}

/* ---------- Residing with dental braces ---------- */
.db-living {
    margin-top: 32px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .db-page {
        padding: 40px 0 56px
    }

    .db-wrap {
        padding: 0 15px
    }

    .db-title {
        font-size: 26px
    }

    .db-sub {
        font-size: 23px;
        margin-bottom: 20px
    }

    .db-heading {
        font-size: 24px
    }

    .db-symptoms .db-heading {
        font-size: 24px
    }

    .db-intro {
        gap: 24px
    }

    .db-photo {
        flex-basis: 260px
    }

    .db-cols {
        margin-top: 40px
    }

    .db-symptoms {
        padding-right: 18px
    }

    .db-symptoms ul {
        margin-top: 26px;
        padding-left: 28px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .db-page {
        padding: 30px 0 44px
    }

    .db-wrap {
        padding: 0 15px
    }

    .db-page p,
    .db-symptoms li {
        font-size: 14px;
        line-height: 24px
    }

    .db-page p {
        text-align: left;
        margin-bottom: 18px
    }

    .db-title {
        font-size: 22px;
        margin-bottom: 14px
    }

    .db-sub {
        font-size: 20px;
        margin-bottom: 14px
    }

    .db-heading,
    .db-symptoms .db-heading {
        font-size: 21px;
        margin-bottom: 14px
    }

    /* intro: text first, photo centred below */
    .db-intro {
        flex-direction: column;
        gap: 6px
    }

    .db-photo {
        flex: none;
        width: 100%;
        max-width: 340px;
        margin: 0 auto
    }

    /* columns stacked, divider becomes a top line */
    .db-cols {
        flex-direction: column;
        margin-top: 30px
    }

    .db-symptoms {
        flex: none;
        width: 100%;
        padding-right: 0
    }

    .db-symptoms ul {
        margin-top: 12px;
        padding-left: 22px
    }

    .db-symptoms li+li {
        margin-top: 6px
    }

    .db-treatment {
        width: 100%;
        border-left: 0;
        border-top: 1px solid #e3e3e3;
        padding: 26px 0 0;
        margin-top: 28px;
    }

    .db-treatment img {
        margin-bottom: 18px
    }

    .db-living {
        margin-top: 26px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .db-title {
        font-size: 20px
    }

    .db-sub {
        font-size: 18px
    }

    .db-heading,
    .db-symptoms .db-heading {
        font-size: 19px
    }
}

/* =====================================================
   ROOT CANAL PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.rc-page {
    padding: 50px 0 70px
}

.rc-wrap {
    padding: 0 20px
}

.rc-page p,
.rc-page li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.rc-page p {
    margin: 0 0 26px
}

/* Headings */
.rc-title {
    font-size: 27px;
    font-weight: 400;
    line-height: 34px;
    color: #4d9be6;
    margin-bottom: 24px;
}

.rc-heading {
    font-size: 23px;
    font-weight: 400;
    line-height: 29px;
    color: #000;
    margin-bottom: 18px;
}

/* ---------- Intro: text left, photo right ---------- */
.rc-intro {
    display: flex;
    align-items: flex-start;
    gap: 56px;
}

.rc-intro-text {
    flex: 1;
    min-width: 0
}

.rc-photo {
    flex: 0 0 305px;
    margin: 0
}

.rc-photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* ---------- Text sections ---------- */
.rc-block {
    margin-top: 50px
}

.rc-intro+.rc-block {
    margin-top: 62px
}

.rc-block ul {
    list-style: disc;
    padding-left: 40px;
    margin-top: 26px;
}

.rc-block li {
    padding-left: 2px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .rc-page {
        padding: 40px 0 56px
    }

    .rc-wrap {
        padding: 0 15px
    }

    .rc-title {
        font-size: 25px
    }

    .rc-heading {
        font-size: 22px
    }

    .rc-intro {
        gap: 28px
    }

    .rc-photo {
        flex-basis: 240px
    }

    .rc-block {
        margin-top: 40px
    }

    .rc-intro+.rc-block {
        margin-top: 46px
    }

    .rc-block ul {
        padding-left: 30px;
        margin-top: 20px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .rc-page {
        padding: 30px 0 44px
    }

    .rc-wrap {
        padding: 0 15px
    }

    .rc-page p,
    .rc-page li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .rc-page p {
        margin-bottom: 18px
    }

    .rc-title {
        font-size: 22px;
        margin-bottom: 16px
    }

    .rc-heading {
        font-size: 19px;
        margin-bottom: 14px
    }

    /* intro: text first, photo centred below */
    .rc-intro {
        flex-direction: column;
        gap: 6px
    }

    .rc-photo {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }

    .rc-block {
        margin-top: 32px
    }

    .rc-intro+.rc-block {
        margin-top: 30px
    }

    .rc-block ul {
        padding-left: 20px;
        margin-top: 14px
    }

    .rc-block li+li {
        margin-top: 8px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .rc-title {
        font-size: 20px
    }

    .rc-heading {
        font-size: 17px
    }
}

/* =====================================================
   INVISIBLE BRACES PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.ib-page {
    padding: 50px 0 70px
}

.ib-wrap {
    padding: 0 20px
}

.ib-page p,
.ib-page li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.ib-page p {
    margin: 0
}

/* Headings */
.ib-title {
    font-size: 27px;
    font-weight: 400;
    line-height: 34px;
    color: #4d9be6;
    margin-bottom: 14px;
}

.ib-sub {
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    color: #000;
    margin-bottom: 22px;
}

.ib-heading {
    font-size: 27px;
    font-weight: 400;
    line-height: 34px;
    color: #000;
    margin-bottom: 24px;
}

/* ---------- Intro: text left, photo right ---------- */
.ib-intro {
    display: flex;
    align-items: flex-start;
    gap: 56px;
}

.ib-intro-text {
    flex: 1;
    min-width: 0
}

.ib-photo {
    flex: 0 0 305px;
    margin: 0
}

.ib-photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* ---------- Two columns with a vertical divider ---------- */
/* 2 x 2 grid so the second headings line up across both columns */
.ib-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 64px;
}

.ib-cell {
    padding-bottom: 30px
}

.ib-left {
    padding-right: 20px
}

.ib-right {
    padding-left: 20px;
    border-left: 1px solid #e3e3e3;
    /* vertical divider */
}

.ib-left ul {
    list-style: disc;
    padding-left: 40px;
    margin-top: 26px;
}

.ib-left li {
    padding-left: 2px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .ib-page {
        padding: 40px 0 56px
    }

    .ib-wrap {
        padding: 0 15px
    }

    .ib-title {
        font-size: 25px
    }

    .ib-sub {
        font-size: 22px
    }

    .ib-heading {
        font-size: 24px;
        margin-bottom: 18px
    }

    .ib-intro {
        gap: 28px
    }

    .ib-photo {
        flex-basis: 240px
    }

    .ib-grid {
        margin-top: 44px
    }

    .ib-left {
        padding-right: 14px
    }

    .ib-right {
        padding-left: 14px
    }

    .ib-left ul {
        padding-left: 28px;
        margin-top: 20px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .ib-page {
        padding: 30px 0 44px
    }

    .ib-wrap {
        padding: 0 15px
    }

    .ib-page p,
    .ib-page li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .ib-title {
        font-size: 22px;
        margin-bottom: 12px
    }

    .ib-sub {
        font-size: 19px;
        margin-bottom: 14px
    }

    .ib-heading {
        font-size: 21px;
        margin-bottom: 14px
    }

    /* intro: text first, photo centred below */
    .ib-intro {
        flex-direction: column;
        gap: 22px
    }

    .ib-photo {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }

    /* single column, divider removed */
    .ib-grid {
        display: block;
        margin-top: 34px
    }

    .ib-cell {
        padding: 0 0 28px
    }

    .ib-left,
    .ib-right {
        padding-left: 0;
        padding-right: 0;
        border-left: 0
    }

    .ib-left ul {
        padding-left: 20px;
        margin-top: 14px
    }

    .ib-left li+li {
        margin-top: 8px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .ib-title {
        font-size: 20px
    }

    .ib-sub {
        font-size: 17px
    }

    .ib-heading {
        font-size: 19px
    }
}

/* =====================================================
   IMPLANTOLOGIST PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.im-page {
    padding: 50px 0 70px
}

.im-wrap {
    padding: 0 20px
}

.im-page p,
.im-page li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.im-page p {
    margin: 0 0 26px
}

.im-page p:last-child {
    margin-bottom: 0
}

/* Headings */
.im-title {
    font-size: 27px;
    font-weight: 400;
    line-height: 34px;
    color: #4d9be6;
    margin-bottom: 18px;
}

.im-sub {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #000;
    margin-bottom: 22px;
}

.im-heading {
    font-size: 23px;
    font-weight: 400;
    line-height: 29px;
    color: #000;
    margin-bottom: 22px;
}

.im-page .im-strong {
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    margin-bottom: 22px;
}

/* ---------- Intro: text left, photo right ---------- */
.im-intro {
    display: flex;
    align-items: flex-start;
    gap: 56px;
}

.im-intro-text {
    flex: 1;
    min-width: 0
}

.im-photo {
    flex: 0 0 305px;
    margin: 0
}

.im-photo img,
.im-xray img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* ---------- Sections ---------- */
.im-block {
    margin-top: 44px
}

.im-intro+.im-block {
    margin-top: 66px
}

.im-block ul {
    list-style: disc;
    padding-left: 40px;
}

.im-block li {
    padding-left: 2px
}

.im-block .im-heading+ul {
    margin-top: 34px
}

/* ---------- Failure: text left, X-ray right ---------- */
.im-failure {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.im-failure-text {
    flex: 1;
    min-width: 0
}

.im-xray {
    flex: 0 0 545px;
    margin: 0
}

.im-xray img {
    padding: 10px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .im-page {
        padding: 40px 0 56px
    }

    .im-wrap {
        padding: 0 15px
    }

    .im-title {
        font-size: 25px
    }

    .im-sub {
        font-size: 19px
    }

    .im-heading {
        font-size: 22px;
        margin-bottom: 18px
    }

    .im-intro {
        gap: 28px
    }

    .im-photo {
        flex-basis: 240px
    }

    .im-block {
        margin-top: 36px
    }

    .im-intro+.im-block {
        margin-top: 46px
    }

    .im-block ul {
        padding-left: 30px
    }

    .im-block .im-heading+ul {
        margin-top: 22px
    }

    .im-failure {
        gap: 26px
    }

    .im-xray {
        flex-basis: 340px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .im-page {
        padding: 30px 0 44px
    }

    .im-wrap {
        padding: 0 15px
    }

    .im-page p,
    .im-page li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .im-page p {
        margin-bottom: 18px
    }

    .im-title {
        font-size: 22px;
        margin-bottom: 14px
    }

    .im-sub {
        font-size: 18px;
        margin-bottom: 14px
    }

    .im-heading {
        font-size: 19px;
        margin-bottom: 14px
    }

    .im-page .im-strong {
        font-size: 14px;
        margin-bottom: 14px
    }

    /* intro: text first, photo centred below */
    .im-intro {
        flex-direction: column;
        gap: 6px
    }

    .im-photo {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }

    .im-block {
        margin-top: 30px
    }

    .im-intro+.im-block {
        margin-top: 28px
    }

    .im-block ul {
        padding-left: 20px
    }

    .im-block li+li {
        margin-top: 8px
    }

    .im-block .im-heading+ul {
        margin-top: 12px
    }

    /* failure: text first, X-ray full width below */
    .im-failure {
        flex-direction: column;
        gap: 20px
    }

    .im-xray {
        flex: none;
        width: 100%
    }

    .im-xray img {
        padding: 6px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .im-title {
        font-size: 20px
    }

    .im-heading {
        font-size: 17px
    }
}

/* =====================================================
   INVISALIGN PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.iv-page {
    padding: 50px 0 70px
}

.iv-wrap {
    padding: 0 10px
}

.iv-page p,
.iv-page li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.iv-page p {
    margin: 0
}

/* Headings */
.iv-title {
    font-size: 25px;
    font-weight: 400;
    line-height: 32px;
    color: #000;
    margin-bottom: 22px;
}

.iv-heading {
    font-size: 25px;
    font-weight: 400;
    line-height: 31px;
    color: #000;
    margin-bottom: 22px;
}

.iv-heading.iv-gap {
    margin-bottom: 46px
}

/* extra space under the heading */
.iv-next {
    margin-top: 30px
}

.iv-pros-title {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 42px 0 24px;
}

/* ---------- Intro: text left, photo right ---------- */
.iv-intro {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    padding: 0 10px;
}

.iv-intro-text {
    flex: 1;
    min-width: 0
}

.iv-photo {
    flex: 0 0 354px;
    margin: 0
}

.iv-photo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* ---------- Two columns with a vertical divider ---------- */
.iv-cols {
    display: flex;
    align-items: stretch;
    margin-top: 40px;
}

.iv-left {
    flex: 0 0 50%;
    padding-right: 20px
}

.iv-right {
    flex: 1;
    min-width: 0;
    padding-left: 20px;
    border-left: 1px solid #e3e3e3;
    /* vertical divider */
}

.iv-page ul {
    list-style: disc;
    padding-left: 40px;
    margin-top: 28px;
}

.iv-page li {
    padding-left: 2px
}

.iv-right>p+ul {
    margin-top: 30px
}

.iv-pros-title+ul {
    margin-top: 0
}

.iv-cons {
    margin-top: 32px
}

/* ---------- Eligibility ---------- */
.iv-eligible {
    margin-top: 22px;
    padding-bottom: 20px
}

.iv-eligible .iv-heading {
    margin-bottom: 14px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .iv-page {
        padding: 40px 0 56px
    }

    .iv-wrap {
        padding: 0 5px
    }

    .iv-title {
        font-size: 25px
    }

    .iv-heading {
        font-size: 24px;
        margin-bottom: 18px
    }

    .iv-heading.iv-gap {
        margin-bottom: 28px
    }

    .iv-intro {
        gap: 24px
    }

    .iv-photo {
        flex-basis: 260px
    }

    .iv-cols {
        margin-top: 34px
    }

    .iv-left {
        padding-right: 14px
    }

    .iv-right {
        padding-left: 14px
    }

    .iv-page ul {
        padding-left: 28px;
        margin-top: 20px
    }

    .iv-pros-title {
        margin: 28px 0 16px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 24px
    }

    .breadcrumb {
        font-size: 14px
    }

    .iv-page {
        padding: 30px 0 44px
    }

    .iv-wrap {
        padding: 0 5px
    }

    .iv-page p,
    .iv-page li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .iv-title {
        font-size: 22px;
        margin-bottom: 14px
    }

    .iv-heading {
        font-size: 21px;
        margin-bottom: 14px
    }

    .iv-heading.iv-gap {
        margin-bottom: 14px
    }

    .iv-next {
        margin-top: 26px
    }

    .iv-pros-title {
        font-size: 14px;
        margin: 18px 0 12px
    }

    /* intro: text first, photo centred below */
    .iv-intro {
        flex-direction: column;
        gap: 22px;
        padding: 0 10px
    }

    .iv-photo {
        flex: none;
        width: 100%;
        max-width: 340px;
        margin: 0 auto
    }

    /* single column, divider removed */
    .iv-cols {
        display: block;
        margin-top: 30px;
        padding: 0 10px
    }

    .iv-left,
    .iv-right {
        padding-left: 0;
        padding-right: 0;
        border-left: 0
    }

    .iv-right {
        margin-top: 30px
    }

    .iv-page ul {
        padding-left: 20px;
        margin-top: 14px
    }

    .iv-page li+li {
        margin-top: 8px
    }

    .iv-right>p+ul,
    .iv-cons {
        margin-top: 14px
    }

    .iv-eligible {
        margin-top: 30px;
        padding: 0 10px 10px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .iv-title {
        font-size: 20px
    }

    .iv-heading {
        font-size: 19px
    }
}

/* =====================================================
   GUM THERAPY PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.gt-page {
    padding: 50px 0 70px
}

.gt-wrap {
    padding: 0 20px
}

.gt-title {
    font-size: 27px;
    font-weight: 600;
    line-height: 34px;
    color: #000;
    padding-left: 40px;
    margin-bottom: 46px;
}

/* image left, text right */
.gt-row {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    padding: 0 0 0 30px;
    margin-bottom: 62px;
}

.gt-row:last-child {
    margin-bottom: 0
}

.gt-img {
    flex: 0 0 300px;
    margin: 0
}

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

.gt-text {
    flex: 1;
    min-width: 0
}

.gt-text p,
.gt-text li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.gt-text p {
    margin: 0
}

.gt-sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    margin-bottom: 26px;
}

.gt-text ul {
    list-style: disc;
    padding-left: 40px;
    margin-top: 34px;
}

.gt-text li {
    text-align: left;
    padding-left: 2px
}

.gt-sub+ul {
    margin-top: 34px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .gt-page {
        padding: 40px 0 56px
    }

    .gt-wrap {
        padding: 0 15px
    }

    .gt-title {
        font-size: 25px;
        padding-left: 0;
        margin-bottom: 32px
    }

    .gt-row {
        gap: 28px;
        padding-left: 0;
        margin-bottom: 46px
    }

    .gt-img {
        flex-basis: 240px
    }

    .gt-text p,
    .gt-text li {
        font-size: 15px;
        line-height: 24px
    }

    .gt-text ul {
        padding-left: 28px;
        margin-top: 22px
    }

    .gt-sub {
        margin-bottom: 18px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .gt-page {
        padding: 30px 0 44px
    }

    .gt-wrap {
        padding: 0 15px
    }

    .gt-title {
        font-size: 22px;
        margin-bottom: 24px
    }

    /* image on top, text below */
    .gt-row {
        flex-direction: column;
        gap: 18px;
        margin-bottom: 36px
    }

    .gt-img {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }

    .gt-text p,
    .gt-text li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .gt-sub {
        font-size: 15px;
        margin-bottom: 12px
    }

    .gt-text ul {
        padding-left: 20px;
        margin-top: 12px
    }

    .gt-text li+li {
        margin-top: 6px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .gt-title {
        font-size: 20px
    }
}

/* =====================================================
   ORTHODONTIC TREATMENT PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.ot-page {
    padding: 40px 0 70px
}

.ot-wrap {
    padding: 0 10px
}

.ot-title {
    font-size: 21px;
    font-weight: 400;
    line-height: 26px;
    color: #4d9be6;
    margin-bottom: 50px;
}

/* image left, text right */
.ot-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-left: 10px;
    margin-bottom: 42px;
}

.ot-row:last-child {
    margin-bottom: 0
}

.ot-img {
    flex: 0 0 238px;
    margin: 0;
    padding-top: 0
}

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

.ot-text {
    flex: 1;
    min-width: 0
}

.ot-text p,
.ot-text li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.ot-text p {
    margin: 0
}

.ot-sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    margin-bottom: 22px;
}

.ot-text ul {
    list-style: disc;
    padding-left: 40px;
    margin-top: 28px;
}

.ot-text li {
    text-align: left;
    padding-left: 2px;
    line-height: 25.6px
}

.ot-sub+ul {
    margin-top: 30px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .ot-page {
        padding: 34px 0 56px
    }

    .ot-wrap {
        padding: 0 15px
    }

    .ot-title {
        font-size: 22px;
        margin-bottom: 34px
    }

    .ot-row {
        gap: 24px;
        padding-left: 0;
        margin-bottom: 36px
    }

    .ot-img {
        flex-basis: 200px
    }

    .ot-text ul {
        padding-left: 28px;
        margin-top: 20px
    }

    .ot-sub {
        margin-bottom: 16px
    }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .ot-page {
        padding: 28px 0 44px
    }

    .ot-wrap {
        padding: 0 15px
    }

    .ot-title {
        font-size: 20px;
        margin-bottom: 26px
    }

    /* image on top, text below */
    .ot-row {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 32px
    }

    .ot-img {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }

    .ot-text p,
    .ot-text li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .ot-sub {
        font-size: 15px;
        margin-bottom: 12px
    }

    .ot-text ul {
        padding-left: 20px;
        margin-top: 10px
    }

    .ot-text li+li {
        margin-top: 4px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .ot-title {
        font-size: 18px
    }
}

/* =====================================================
   CROWN AND BRIDGES PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.cb-page {
    padding: 40px 0 70px
}

.cb-wrap {
    padding: 0 10px
}

.cb-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 52px;
}

/* images left, text right */
.cb-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-left: 10px;
}

.cb-images {
    flex: 0 0 238px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cb-images figure {
    margin: 0
}

.cb-images img {
    display: block;
    width: 100%;
    height: auto
}

.cb-text {
    flex: 1;
    min-width: 0
}

.cb-text p,
.cb-text li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.cb-text p {
    margin: 0
}

.cb-sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    margin: 42px 0 22px;
}

.cb-text ol,
.cb-text ul {
    padding-left: 40px;
    margin-top: 28px;
}

.cb-text ol {
    list-style: decimal
}

.cb-text ul {
    list-style: disc;
    margin-top: 30px
}

.cb-text li {
    padding-left: 2px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .cb-page {
        padding: 34px 0 56px
    }

    .cb-wrap {
        padding: 0 15px
    }

    .cb-title {
        font-size: 26px;
        margin-bottom: 34px
    }

    .cb-layout {
        gap: 24px;
        padding-left: 0
    }

    .cb-images {
        flex-basis: 200px;
        gap: 16px
    }

    .cb-sub {
        margin: 32px 0 16px
    }

    .cb-text ol,
    .cb-text ul {
        padding-left: 28px;
        margin-top: 20px
    }
}

/* ---------- Mobile (767px and below): images FIRST, then text ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .cb-page {
        padding: 28px 0 44px
    }

    .cb-wrap {
        padding: 0 15px
    }

    .cb-title {
        font-size: 22px;
        margin-bottom: 22px
    }

    .cb-layout {
        flex-direction: column;
        gap: 26px
    }

    /* images on top, centred */
    .cb-images {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        gap: 16px;
    }

    /* text below */
    .cb-text {
        width: 100%
    }

    .cb-text p,
    .cb-text li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .cb-sub {
        font-size: 15px;
        margin: 26px 0 12px
    }

    .cb-text ol,
    .cb-text ul {
        padding-left: 22px;
        margin-top: 12px
    }

    .cb-text li+li {
        margin-top: 6px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .cb-title {
        font-size: 20px
    }
}

/* =====================================================
   WISDOM TEETH REMOVAL PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.ws-page {
    padding: 40px 0 70px
}

.ws-wrap {
    padding: 0 10px
}

.ws-title {
    font-size: 29px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 34px;
}

/* images left, text right */
.ws-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-left: 10px;
}

.ws-images {
    flex: 0 0 238px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ws-images figure {
    margin: 0
}

.ws-images img {
    display: block;
    width: 100%;
    height: auto
}

.ws-text {
    flex: 1;
    min-width: 0
}

.ws-text p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
    margin: 0;
}

.ws-sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    margin: 42px 0 22px;
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .ws-page {
        padding: 34px 0 56px
    }

    .ws-wrap {
        padding: 0 15px
    }

    .ws-title {
        font-size: 26px;
        margin-bottom: 26px
    }

    .ws-layout {
        gap: 24px;
        padding-left: 0
    }

    .ws-images {
        flex-basis: 200px;
        gap: 16px
    }

    .ws-sub {
        margin: 32px 0 16px
    }
}

/* ---------- Mobile (767px and below): images FIRST, then text ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .ws-page {
        padding: 28px 0 44px
    }

    .ws-wrap {
        padding: 0 15px
    }

    .ws-title {
        font-size: 22px;
        margin-bottom: 20px
    }

    .ws-layout {
        flex-direction: column;
        gap: 22px
    }

    /* two images side by side on top */
    .ws-images {
        flex: none;
        width: 100%;
        flex-direction: row;
        gap: 10px;
    }

    .ws-images figure {
        flex: 1;
        min-width: 0
    }

    /* text below */
    .ws-text {
        width: 100%
    }

    .ws-text p {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .ws-sub {
        font-size: 15px;
        margin: 26px 0 12px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .ws-title {
        font-size: 20px
    }
}

/* =====================================================
   SENSITIVE TEETH PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.st-page {
    padding: 40px 0 70px
}

.st-wrap {
    padding: 0 10px
}

.st-title {
    font-size: 29px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 34px;
}

/* images left, text right */
.st-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-left: 10px;
}

.st-images {
    flex: 0 0 238px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.st-images figure {
    margin: 0
}

.st-images img {
    display: block;
    width: 100%;
    height: auto
}

.st-text {
    flex: 1;
    min-width: 0
}

.st-text p,
.st-text li {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
}

.st-text p {
    margin: 0
}

.st-sub {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #000;
    margin: 42px 0 22px;
}

.st-sub.st-first {
    margin-top: 0
}

.st-text ul {
    list-style: disc;
    padding-left: 40px;
    margin-top: 30px;
}

.st-text li {
    padding-left: 2px
}

.st-sub+ul {
    margin-top: 30px
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .st-page {
        padding: 34px 0 56px
    }

    .st-wrap {
        padding: 0 15px
    }

    .st-title {
        font-size: 26px;
        margin-bottom: 26px
    }

    .st-layout {
        gap: 24px;
        padding-left: 0
    }

    .st-images {
        flex-basis: 200px;
        gap: 16px
    }

    .st-sub {
        margin: 32px 0 16px
    }

    .st-text ul {
        padding-left: 28px;
        margin-top: 20px
    }
}

/* ---------- Mobile (767px and below): images FIRST, then text ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .st-page {
        padding: 28px 0 44px
    }

    .st-wrap {
        padding: 0 15px
    }

    .st-title {
        font-size: 22px;
        margin-bottom: 20px
    }

    .st-layout {
        flex-direction: column;
        gap: 22px
    }

    /* three images side by side on top */
    .st-images {
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        gap: 8px;
    }

    /* text below */
    .st-text {
        width: 100%
    }

    .st-text p,
    .st-text li {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .st-sub {
        font-size: 15px;
        margin: 26px 0 12px
    }

    .st-sub.st-first {
        margin-top: 0
    }

    .st-text ul {
        padding-left: 22px;
        margin-top: 12px
    }

    .st-text li+li {
        margin-top: 6px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .st-title {
        font-size: 20px
    }
}

/* =====================================================
   FULL MOUTH REHABILITATION PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.fm-page {
    padding: 40px 0 70px
}

.fm-wrap {
    padding: 0 10px
}

.fm-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 52px;
}

/* image left, text right */
.fm-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-left: 10px;
}

.fm-image {
    flex: 0 0 238px;
    margin: 0
}

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

.fm-text {
    flex: 1;
    min-width: 0
}

.fm-text p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
    margin: 0;
}

.fm-sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    margin: 42px 0 22px;
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .fm-page {
        padding: 34px 0 56px
    }

    .fm-wrap {
        padding: 0 15px
    }

    .fm-title {
        font-size: 26px;
        margin-bottom: 34px
    }

    .fm-layout {
        gap: 24px;
        padding-left: 0
    }

    .fm-image {
        flex-basis: 200px
    }

    .fm-sub {
        margin: 32px 0 16px
    }
}

/* ---------- Mobile (767px and below): image FIRST, then text ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .fm-page {
        padding: 28px 0 44px
    }

    .fm-wrap {
        padding: 0 15px
    }

    .fm-title {
        font-size: 22px;
        margin-bottom: 22px
    }

    .fm-layout {
        flex-direction: column;
        gap: 22px
    }

    /* image on top, centred */
    .fm-image {
        flex: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto
    }

    /* text below */
    .fm-text {
        width: 100%
    }

    .fm-text p {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }

    .fm-sub {
        font-size: 15px;
        margin: 26px 0 12px
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .fm-title {
        font-size: 20px
    }
}

/* =====================================================
   KIDS CARE PAGE
   ===================================================== */

/* ---------- Page banner (shared; skip if already in your file) ---------- */
.page-banner {
    background: #000;
    color: #fff;
    padding: 38px 0
}

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px
}

.page-banner h1,
.page-banner .banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500
}

.breadcrumb a:hover {
    color: var(--gold-light)
}

/* ---------- Content ---------- */
.kc-page {
    padding: 40px 0 70px
}

.kc-wrap {
    padding: 0 10px
}

.kc-title {
    font-size: 29px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 52px;
}

/* image left, text right */
.kc-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-left: 10px;
}

.kc-image {
    flex: 0 0 238px;
    margin: 0
}

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

.kc-text {
    flex: 1;
    min-width: 0;
    padding-top: 0
}

.kc-text p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    text-align: justify;
    margin: 0;
}

/* =====================================================
   RESPONSIVE (keep these AFTER the rules above)
   ===================================================== */

/* ---------- Tablet (768px to 991px) ---------- */
@media (max-width:991px) {
    .kc-page {
        padding: 34px 0 56px
    }

    .kc-wrap {
        padding: 0 15px
    }

    .kc-title {
        font-size: 26px;
        margin-bottom: 34px
    }

    .kc-layout {
        gap: 24px;
        padding-left: 0
    }

    .kc-image {
        flex-basis: 200px
    }

    .kc-text p {
        font-size: 15px;
        line-height: 24px
    }
}

/* ---------- Mobile (767px and below): image FIRST, then text ---------- */
@media (max-width:767px) {
    .page-banner {
        padding: 28px 0
    }

    .banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
    }

    .page-banner h1,
    .page-banner .banner-title {
        font-size: 26px
    }

    .breadcrumb {
        font-size: 14px
    }

    .kc-page {
        padding: 28px 0 44px
    }

    .kc-wrap {
        padding: 0 15px
    }

    .kc-title {
        font-size: 22px;
        margin-bottom: 22px
    }

    .kc-layout {
        flex-direction: column;
        gap: 22px
    }

    /* image on top, centred */
    .kc-image {
        flex: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto
    }

    /* text below */
    .kc-text {
        width: 100%
    }

    .kc-text p {
        font-size: 14px;
        line-height: 24px;
        text-align: left
    }
}

/* ---------- Small phones ---------- */
@media (max-width:420px) {
    .kc-title {
        font-size: 20px
    }
}