/* ==========================================================================
   Satvik Eye Care – site styles (Bootstrap 5.3 + brand layer)
   ========================================================================== */

/* Same font file the original site uses (Elementor custom font "mono") */
@font-face {
    font-family: "mono";
    src: url("../fonts/mona-sans-original.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Rubik";
    src: url("../fonts/rubik-600-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-italic-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
}

:root {
    --navy: #0f1e4c;
    --teal: #087073;
    --teal-dark: #065b5e;
    --teal-soft: #e1f7f8;
    --text: #444;
    --muted: #7a7f8a;
    --border: #e1e4e8;
    --bg-light: #f1f7f3;
    --link: #c2185b;
    --gold: #b07a1a;
    --radius: 12px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --shadow: 0 12px 34px rgba(15, 30, 76, .07);
    --font: "mono", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

    --bs-body-font-family: var(--font);
    --bs-body-color: var(--text);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.65;
    --bs-link-color-rgb: 8, 112, 115;
    --bs-link-hover-color-rgb: 6, 91, 94;
    --bs-primary: var(--teal);
    --bs-primary-rgb: 8, 112, 115;
}

html,
body {
    /* Never allow sideways scrolling (clip, unlike hidden, keeps the sticky header working) */
    overflow-x: clip;
}

body {
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--navy);
    font-family: var(--font);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 16px;
    background: var(--navy);
    color: #fff;
    border-radius: 6px;
}

.section {
    padding: 90px 0;
}

@media (max-width: 767.98px) {
    .section {
        padding: 60px 0;
    }
}

/* ---------- Buttons ---------- */
.btn-brand,
.btn-navy,
.btn-outline-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1.05rem;
    transition: background-color .2s, color .2s, transform .2s;
}

.btn-brand {
    background: var(--teal);
    color: #fff;
    border: 1px solid var(--teal);
}

.btn-brand:hover,
.btn-brand:focus-visible {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: #fff;
}

.btn-navy {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
}

.btn-navy:hover,
.btn-navy:focus-visible {
    background: #1b2f6b;
    color: #fff;
}

.btn-outline-brand {
    background: transparent;
    color: var(--teal);
    border: 1px solid var(--teal);
}

.btn-outline-brand:hover {
    background: var(--teal);
    color: #fff;
}

.btn-lg {
    font-size: 1.1rem;
    padding: 12px 24px;
}

.btn .fa-arrow-right {
    transition: transform .2s;
}

.btn:hover .fa-arrow-right {
    transform: translateX(3px);
}

/* ---------- Section headings ---------- */
.badge-pill {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
    padding: 4px 14px 4px 26px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--navy);
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0 inset, rgba(255, 255, 255, .5) -3px -3px 6px 1px inset;
}

.badge-pill::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: .5rem;
    height: .5rem;
    background: #ff3b3b;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: blink 1s ease infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

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

.section-title {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 400;
    line-height: 1.18;
    color: var(--navy);
    margin-bottom: 0;
}

.section-title em,
.guide-title em {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--teal);
}

.heading-xl .section-title {
    font-size: clamp(2.4rem, 4.6vw, 3.9rem);
    letter-spacing: -.045em;
    line-height: 1.15;
}

.heading-xl .section-title em {
    letter-spacing: -.02em;
}

.services .section-title em {
    display: block;
}

.section-heading.is-light .section-title,
.section-heading.is-light .section-title em {
    color: #fff;
}

.section-heading.is-light .badge-pill {
    color: #fff;
    box-shadow: rgba(0, 0, 0, .25) 3px 3px 6px 0 inset, rgba(255, 255, 255, .35) -3px -3px 6px 1px inset;
}

/* ---------- Top bar & header ---------- */
.topbar {
    background: var(--teal);
    color: #fff;
    font-size: .95rem;
    padding: 9px 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.topbar a {
    color: #fff;
}

.topbar a:hover {
    text-decoration: underline;
}

.topbar-info i {
    margin-right: 8px;
}

.social a {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: .8rem;
}

.social a:hover {
    background: var(--navy);
    color: #fff;
}

.site-header {
    background: #fff;
    transition: box-shadow .2s;
}

.site-header.is-scrolled {
    box-shadow: 0 6px 24px rgba(15, 30, 76, .08);
}

.site-header .navbar {
    padding: 12px 0;
}

.brand-logo {
    width: auto;
    height: 58px;
}

.navbar-nav .nav-link {
    color: var(--navy);
    font-size: 1.08rem;
    padding: 8px 14px !important;
    border-radius: 8px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
    color: var(--teal);
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
    background: var(--teal);
    color: #fff;
}

.dropdown-menu {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px;
    min-width: 290px;
}

.dropdown-item {
    border-radius: 8px;
    padding: 9px 14px;
    color: var(--navy);
}

.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--teal-soft);
    color: var(--teal);
}

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 12px;
        border-top: 1px solid var(--border);
        padding-top: 8px;
    }

    .brand-logo {
        height: 48px;
    }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 50px 0 0;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 110px 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, .15) 100%), var(--hero-bg, none) center / cover no-repeat, #eef3f7;
}

.hero-eyebrow {
    color: var(--teal);
    font-size: 1.1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.hero-title {
    font-size: clamp(2.6rem, 5.4vw, 4.6rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.01em;
    margin-bottom: 22px;
}

.hero-title strong {
    display: block;
    font-weight: 700;
}

.hero-subtitle {
    display: block;
    margin-top: 22px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #333;
}

.hero-text {
    max-width: 660px;
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 30px;
}

.hero-media img {
    width: 100%;
    aspect-ratio: 1 / 0.92;
    object-fit: cover;
    border-radius: 24px;
}

.hero-strip {
    position: relative;
    margin-top: 20px;
}

.feature-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    height: 100%;
    padding: 32px;
    background: #f7f7f7;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px rgba(15, 30, 76, .1);
}

.feature-box li {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 1.22rem;
    line-height: 1.25;
    color: var(--navy);
}

.feature-icon {
    width: 84px;
    height: 84px;
}

@media (max-width: 767.98px) {
    .hero {
        padding-top: 30px;
    }

    .hero::before {
        bottom: 55%;
    }

    .feature-box {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .feature-box li {
        flex-direction: row;
        align-items: center;
    }

    .feature-icon {
        width: 56px;
        height: 56px;
    }
}

/* ---------- Opening hours ---------- */
.hours-title {
    font-size: 1.55rem;
    margin-bottom: 18px;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    font-size: .98rem;
}

.hours-row + .hours-row {
    border-top: 1px solid rgba(255, 255, 255, .45);
}

.hours-card {
    height: 100%;
    padding: 28px 30px;
    border-radius: var(--radius-lg);
    background: var(--teal);
    color: #fff;
}

.hours-light {
    color: #fff;
}

.hours-footer {
    margin-top: 18px;
    color: #333;
}

.hours-footer .hours-row + .hours-row {
    border-top-color: #bbb;
}

/* ---------- About ---------- */
.about-text {
    font-size: 1.08rem;
}

.drop-cap::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    font-size: 4.2rem;
    line-height: .8;
    color: var(--teal);
}

.about-eye {
    width: 160px;
    height: auto;
}

.check-list li {
    padding: 4px 0;
    font-size: 1.05rem;
    color: #333;
}

.check-list i {
    margin-right: 8px;
    color: var(--teal);
}

.about-image {
    width: 100%;
}

/* ---------- Guide / long-form SEO content ---------- */
.guide-title {
    font-size: clamp(2rem, 4.1vw, 3.6rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.12;
    margin-bottom: 32px;
}

.guide-title em {
    display: block;
    letter-spacing: -.03em;
}

.rich-text p:last-child {
    margin-bottom: 0;
}

.rich-text a {
    color: var(--link);
}

.rich-text a:hover {
    text-decoration: underline;
}

.info-card {
    padding: 30px 30px 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    line-height: 1.85;
}

.info-card.is-wide {
    padding: 34px 36px 38px;
}

.info-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 14px;
    line-height: 1.25;
}

.info-card.is-wide h3 {
    font-size: 1.75rem;
}

.icon-list {
    margin: 22px 0;
}

.icon-list li {
    padding: 3px 0;
    color: #333;
}

.icon-list i {
    margin-right: 8px;
    color: var(--teal);
}

/* ---------- Sliders (CSS scroll-snap, no library) ---------- */
.slider {
    position: relative;
}

.slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    gap: 20px;
    margin: 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slide {
    scroll-snap-align: start;
    display: flex;
}

.testimonials .slider-track {
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    gap: 16px;
}

@media (max-width: 1199.98px) {
    .slider-track {
        grid-auto-columns: calc((100% - 2 * 20px) / 3);
    }
}

@media (max-width: 991.98px) {
    .slider-track,
    .testimonials .slider-track {
        grid-auto-columns: calc((100% - 20px) / 2);
    }
}

@media (max-width: 575.98px) {
    .slider-track,
    .testimonials .slider-track {
        grid-auto-columns: 86%;
    }
}

.slider-btn {
    position: absolute;
    top: 42%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    transition: opacity .2s;
}

.slider-btn.prev {
    left: -22px;
}

.slider-btn.next {
    right: -22px;
}

.slider-btn:disabled {
    opacity: .35;
}

.slider-btn[hidden] {
    display: none;
}

@media (max-width: 575.98px) {
    .slider-btn {
        display: none;
    }
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

.slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 30, 76, .2);
}

.slider-dots button[aria-current="true"] {
    background: var(--navy);
}

/* ---------- Services ---------- */
.services {
    background: var(--teal);
}

.services .slider-dots button {
    background: rgba(255, 255, 255, .35);
}

.services .slider-dots button[aria-current="true"] {
    background: #fff;
}

.service-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}

.service-media img {
    display: block;
    width: 100%;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    transition: transform .4s;
}

.service-card:hover .service-media img {
    transform: scale(1.04);
}

.service-media {
    display: block;
    overflow: hidden;
}

.service-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 30px 30px;
}

.service-body h3 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 14px;
}

.service-body h3 a {
    color: var(--navy);
}

.service-body h3 a:hover {
    color: var(--teal);
}

.service-body p {
    font-size: 1rem;
    margin-bottom: 18px;
}

.link-arrow {
    margin-top: auto;
    color: var(--teal);
    font-weight: 500;
    font-size: 1.05rem;
}

.link-arrow i {
    margin-left: 4px;
    transition: transform .2s;
}

.link-arrow:hover i {
    transform: translateX(3px);
}

/* ---------- Doctor ---------- */
.doctor .section-heading {
    margin-bottom: 26px;
}

.stat-outline {
    font-size: clamp(4.5rem, 8vw, 6.4rem);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: 1.5px #3a0d0d;
}

.stat-label {
    font-size: 1.35rem;
    color: var(--navy);
    margin-bottom: 18px;
}

.doctor-photo {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.doctor-bio {
    font-size: 1.02rem;
    line-height: 1.6;
}

.doctor-bio strong {
    color: #222;
}

/* ---------- Booking ---------- */
.booking {
    position: relative;
}

.booking-media {
    height: 400px;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: #dfe7ea;
}

.booking-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-panel {
    padding-bottom: 70px;
    background: var(--teal);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    color: #fff;
}

.booking-card {
    position: relative;
    margin-top: -225px;
    padding: 64px 72px 72px;
    background: #fff;
    border-radius: 36px;
    box-shadow: var(--shadow);
    color: var(--text);
}

.booking-card .section-title {
    margin-bottom: 30px;
}

.booking-info {
    padding-top: 60px;
}

.booking-decor {
    width: 180px;
}

@media (max-width: 991.98px) {
    .booking-media {
        height: 260px;
    }

    .booking-card {
        margin-top: -140px;
        padding: 40px 24px;
        border-radius: var(--radius-lg);
    }

    .booking-info {
        padding-top: 20px;
    }
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #1a8f93;
    color: #fff;
    font-size: 1.3rem;
}

.contact-label {
    margin-bottom: 2px;
    font-size: 1.05rem;
}

.contact-item a,
.contact-item address,
.contact-item p {
    color: inherit;
}

.contact-item a:hover {
    text-decoration: underline;
}

/* ---------- Forms ---------- */
.enquiry-form .form-control {
    padding: 13px 16px;
    border-color: #d7dbe0;
    border-radius: 8px;
}

.enquiry-form .form-control:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 .2rem rgba(8, 112, 115, .15);
}

.enquiry-form .form-check-input:checked {
    background-color: var(--teal);
    border-color: var(--teal);
}

.enquiry-form .form-check-label a {
    color: var(--teal);
    text-decoration: underline;
}

.form-status.is-error {
    color: #b42318;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.booking-modal {
    border: 0;
    border-radius: var(--radius-lg);
    padding: 12px;
}

/* ---------- Testimonials ---------- */
.testimonial-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 28px 24px 34px;
    background: var(--teal-soft);
    border-radius: var(--radius-lg);
    text-align: center;
}

.testimonial-card blockquote {
    margin: 0 0 22px;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #333;
}

.testimonial-card figcaption {
    margin-top: auto;
    font-size: 1.7rem;
    color: #333;
}

.disclaimer {
    margin: 20px 0 0;
    font-size: .85rem;
    color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq-accordion {
    --bs-accordion-border-color: #d9dde3;
    --bs-accordion-border-radius: 8px;
    --bs-accordion-inner-border-radius: 8px;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(8, 112, 115, .15);
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: var(--navy);
    --bs-accordion-btn-color: var(--navy);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f1e4c'%3e%3cpath d='M7 1h2v14H7z'/%3e%3cpath d='M1 7h14v2H1z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f1e4c'%3e%3cpath d='M1 7h14v2H1z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 14px;
    --bs-accordion-btn-icon-transform: none;
}

.faq-accordion .accordion-item {
    border: 1px solid var(--bs-accordion-border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    font-size: 1.2rem;
    padding: 16px 20px;
}

.faq-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-bottom: 1px solid var(--bs-accordion-border-color);
}

.faq-accordion .accordion-body {
    font-size: 1.02rem;
    padding: 16px 20px;
}

/* ---------- Blog ---------- */
.post-card .post-media {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

.post-card img {
    display: block;
    width: 100%;
    aspect-ratio: 20 / 9;
    object-fit: cover;
    transition: transform .4s;
}

.post-card:hover img {
    transform: scale(1.03);
}

.post-card h3 {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 10px;
}

.post-card h3 a {
    color: var(--teal);
}

.post-card h3 a:hover {
    color: var(--navy);
}

.post-card time {
    display: block;
    margin-bottom: 14px;
    font-size: .9rem;
    color: var(--muted);
}

.read-more {
    color: var(--navy);
    font-weight: 500;
}

/* ---------- Footer ---------- */
.site-footer {
    padding: 80px 0 28px;
    background: linear-gradient(105deg, #0a6166 0%, #06203f 30%, #040d25 58%, #3d3222 78%, var(--gold) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    color: rgba(255, 255, 255, .88);
}

.site-footer a {
    color: rgba(255, 255, 255, .88);
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-card {
    padding: 32px;
    background: #fff;
    border-radius: var(--radius-lg);
    color: #333;
}

.footer-card a {
    color: inherit;
}

.footer-logo {
    width: auto;
    height: 76px;
}

.footer-title {
    font-size: 1.55rem;
    color: #fff;
    margin-bottom: 16px;
}

.footer-links li {
    padding: 3px 0;
}

.footer-contact .contact-icon {
    background: var(--teal);
}

.footer-contact address {
    font-style: normal;
}

.footer-bottom {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .92rem;
}

/* ---------- Floating actions & cookie banner ---------- */
.floating-actions {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fab-btn {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    transition: transform .2s;
}

.fab-btn:hover {
    color: #fff;
    transform: scale(1.07);
}

.fab-call {
    background: var(--teal);
}

.fab-wa {
    background: #25d366;
    font-size: 1.6rem;
}

.cookie-banner {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 560px;
    padding: 16px 18px;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    font-size: .9rem;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner a {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .cookie-banner {
        left: 12px;
        right: 82px;
        bottom: 12px;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Placeholder / thank-you pages ---------- */
.page-placeholder {
    min-height: 50vh;
}

.thank-icon {
    font-size: 3.5rem;
    color: var(--teal);
    margin-bottom: 18px;
}

/* ---------- Scroll reveal (added by JS only, so no-JS still shows content) ---------- */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

    .js-reveal .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Footer fixes: keep social icon colour, stop phone number wrapping */
.site-footer .social a {
    color: var(--navy);
}

.site-footer .social a:hover {
    color: #fff;
    text-decoration: none;
}

.footer-contact .contact-icon {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
}

.contact-item a[href^="tel:"] {
    white-space: nowrap;
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* ---------- Page banner ---------- */
.page-banner {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: stretch;
    background: var(--navy);
    color: #fff;
}

.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 22, 38, .82) 0%, rgba(6, 60, 70, .55) 55%, rgba(6, 60, 70, .2) 100%);
}

.page-banner.is-plain {
    background: var(--teal);
    min-height: 300px;
}

.page-banner.is-plain::before {
    display: none;
}

.page-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-banner .container {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.page-banner-inner {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 50px 0 30px;
}

.page-banner-title {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    font-weight: 400;
    line-height: 1.12;
    max-width: 880px;
}

.page-banner.is-post .page-banner-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}

.page-banner-side {
    align-self: flex-end;
    width: auto;
    max-height: 330px;
    margin-bottom: -60px;
}

.page-breadcrumb {
    align-self: flex-start;
    max-width: 100%;
    padding: 12px 20px 10px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    font-size: .9rem;
}

.page-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    --bs-breadcrumb-divider-color: var(--teal);
    --bs-breadcrumb-item-active-color: var(--teal);
}

.page-breadcrumb .breadcrumb-item {
    white-space: nowrap;
}

.page-breadcrumb .breadcrumb-item.active {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "⁞";
}

.page-breadcrumb a {
    color: var(--teal);
}

.page-breadcrumb .fa-house {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 4px;
    border-radius: 6px;
    background: var(--teal);
    color: #fff;
    font-size: .7rem;
}

@media (max-width: 767.98px) {
    .page-banner {
        min-height: 240px;
    }

    .page-banner.is-plain {
        min-height: 220px;
    }
}

/* ---------- Article / rich content ---------- */
.page-body {
    padding-top: 50px;
}

.entry-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    overflow-wrap: break-word;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--teal);
    font-weight: 500;
    line-height: 1.25;
    margin: 1.6em 0 .6em;
}

.entry-content h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
}

.entry-content h3 {
    font-size: clamp(1.25rem, 2vw, 1.45rem);
}

.entry-content h4 {
    font-size: 1.15rem;
}

.entry-content > :first-child {
    margin-top: 0;
}

.entry-content a {
    color: var(--link);
}

.entry-content a:hover {
    text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.4rem;
    margin-bottom: 1.1rem;
}

.entry-content li {
    margin-bottom: .35rem;
}

.entry-content img {
    height: auto;
    border-radius: 10px;
    margin: 10px 0;
}

.entry-content table {
    width: 100%;
    margin: 1rem 0 1.5rem;
    border-collapse: collapse;
    font-size: .95rem;
    display: block;
    overflow-x: auto;
}

.entry-content th,
.entry-content td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    vertical-align: top;
}

.entry-content th,
.entry-content thead td {
    background: var(--teal-soft);
    color: var(--navy);
}

.entry-content blockquote {
    margin: 1.2rem 0;
    padding: 14px 20px;
    border-left: 4px solid var(--teal);
    background: var(--bg-light);
}

/* Highlight spans used in the About biography */
.soft {
    background: linear-gradient(transparent 68%, rgba(8, 112, 115, .12) 0);
    padding: 0 2px;
}

.soft.name {
    font-weight: 600;
    color: var(--teal);
    background: linear-gradient(transparent 65%, rgba(8, 112, 115, .18) 0);
}

.soft.strong {
    font-weight: 500;
}

/* ---------- Sidebar ---------- */
.sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 14px;
    background: #f4f5f7;
    border-radius: var(--radius);
}

.sidebar-card {
    padding: 18px 18px 20px;
    background: #fff;
    border-radius: var(--radius);
    border-top: 2px solid var(--teal);
    box-shadow: 0 6px 18px rgba(15, 30, 76, .06);
}

.sidebar-card .badge-pill {
    margin-bottom: 12px;
}

.doctor-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid var(--teal);
    border-top-width: 2px;
}

.doctor-card-img {
    width: 96px;
    height: auto;
    flex-shrink: 0;
}

.sidebar-links li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 4px 0;
    color: var(--teal);
}

.sidebar-links i {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--teal);
    color: #fff;
    font-size: .55rem;
}

.sidebar-links a {
    color: var(--teal);
}

.sidebar-posts li + li {
    margin-top: 14px;
}

.sidebar-posts a {
    display: block;
    color: var(--teal);
    font-size: .95rem;
    line-height: 1.35;
}

.sidebar-posts a:hover {
    color: var(--navy);
}

.sidebar-posts time {
    font-size: .8rem;
    color: var(--muted);
}

@media (max-width: 991.98px) {
    .sidebar {
        position: static;
    }
}

/* ---------- Service cards (shared) ---------- */
.service-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: -58px 0 16px;
    position: relative;
    border-radius: 12px;
    background: var(--teal);
    box-shadow: 0 0 0 5px #fff;
}

.service-icon img {
    width: 38px;
    height: 38px;
    filter: brightness(0) invert(1);
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.treatments-page .service-card {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* ---------- About page ---------- */
.about-eyebrow {
    color: var(--teal);
    text-transform: uppercase;
    font-size: .95rem;
    letter-spacing: .04em;
    margin-bottom: 0;
}

.about-stat {
    text-align: center;
}

.about-stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.about-stat-number {
    font-size: clamp(7rem, 16vw, 13rem);
    font-weight: 700;
    line-height: 1;
    color: var(--teal);
    letter-spacing: -.04em;
}

.about-stat-side {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--teal);
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .04em;
    max-height: 190px;
}

.about-stat-caption {
    color: var(--teal);
    text-transform: uppercase;
    font-size: .95rem;
}

.about-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius);
}

.about-bio {
    font-size: .98rem;
    line-height: 1.85;
}

/* ---------- Contact page ---------- */
.contact-heading {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 400;
    margin-bottom: 24px;
}

.contact-list .contact-item {
    align-items: flex-start;
    margin-bottom: 20px;
    color: var(--text);
}

.contact-list .contact-icon {
    width: 46px;
    height: 46px;
    font-size: 1.05rem;
    background: var(--teal);
}

.contact-list .contact-label {
    color: var(--navy);
    font-weight: 500;
}

.contact-list address {
    font-style: normal;
}

.hours-plain .hours-title {
    color: var(--navy);
    margin-top: 12px;
}

.hours-plain .hours-row + .hours-row {
    border-top-color: var(--border);
}

.contact-form-col {
    padding-left: clamp(0px, 3vw, 48px);
    border-left: 1px solid var(--border);
}

@media (max-width: 991.98px) {
    .contact-form-col {
        border-left: 0;
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* ---------- Blog ---------- */
.post-featured {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.post-meta {
    margin: 14px 0 22px;
    font-size: .92rem;
    color: var(--teal);
}

.post-meta a {
    color: var(--teal);
}

.pagination {
    --bs-pagination-color: var(--navy);
    --bs-pagination-hover-color: var(--teal);
    --bs-pagination-active-bg: var(--teal);
    --bs-pagination-active-border-color: var(--teal);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(8, 112, 115, .15);
}

.error-code {
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--teal-soft);
    -webkit-text-stroke: 2px var(--teal);
    margin-bottom: 10px;
}

.about-bio p {
    color: #2f2f2f;
    margin-bottom: 22px;
}

/* Blog pagination: numbers only, like the original */
.blog-list nav p.small {
    display: none;
}

.blog-list nav > div {
    justify-content: center !important;
}

/* Floating buttons: same set and colours as the original site */
.floating-actions {
    gap: 10px;
}

.fab-instagram,
.fab-call,
.fab-wa {
    background: var(--teal);
}

.fab-youtube {
    background: #d32f2f;
}

.fab-wa {
    font-size: 1.5rem;
}

/* Keep slider arrows inside the viewport when the container reaches the screen edge */
@media (max-width: 1399.98px) {
    .slider-btn.prev {
        left: 4px;
    }

    .slider-btn.next {
        right: 4px;
    }
}

/* ==========================================================================
   Match the original site (values measured from satvikeyecare.com)
   ========================================================================== */

:root {
    --bs-body-line-height: 1.5;
    --link: #cc3366;
}

/* ---------- Inner-page overlay header ---------- */
.site-header-overlay {
    position: relative;
    z-index: 20;
    height: 115px;
    padding: 0 10px;
}

.site-header-overlay .navbar {
    padding: 0;
    height: 100%;
}

.ho-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 10px;
}

.ho-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    padding: 10px;
}

.ho-logo img {
    width: 125px;
    height: auto;
    filter: brightness(90) contrast(90) saturate(0);
}

.ho-menu {
    padding: 3px 7px;
    background: rgba(155, 60, 95, .55);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    gap: 0;
}

.ho-menu .nav-link {
    padding: 8px 7px !important;
    margin: 0 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: .8px;
    text-transform: uppercase;
    border-radius: 6px;
}

.ho-menu .nav-link:hover,
.ho-menu .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .15);
}

.ho-menu .nav-link.active,
.ho-menu .show > .nav-link {
    color: var(--teal);
    background: #fff;
}

.ho-menu .dropdown-toggle::after {
    margin-left: 10px;
}

.ho-right {
    align-items: center;
    gap: 24px;
    padding: 10px;
}

.ho-phone {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.ho-phone:hover {
    color: #fff;
}

.ho-phone-label {
    display: block;
    font-size: 14px;
    line-height: 16.8px;
}

.ho-phone-number {
    display: block;
    font-size: 16px;
    line-height: 24px;
}

.ho-appointment {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    background: var(--teal);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: .1px;
    text-transform: uppercase;
}

.ho-appointment:hover {
    background: var(--teal-dark);
}

.site-header-overlay.is-plain .ho-appointment {
    background: transparent;
}

@media (max-width: 991.98px) {
    .site-header-overlay {
        height: auto;
        min-height: 90px;
    }

    .ho-left {
        flex-wrap: wrap;
    }

    .ho-menu {
        margin-top: 10px;
    }

    .site-header-overlay .navbar-toggler {
        border-color: rgba(255, 255, 255, .5);
    }
}

/* Banner sits under the overlay header (original: 460px, pulled up 100px) */
.page-banner {
    margin-top: -100px;
    min-height: 460px;
}

.page-banner::before {
    background: rgba(0, 0, 0, .5);
}

.page-banner.is-plain {
    min-height: 460px;
}

.page-banner .container {
    max-width: none;
    padding: 0 200px;
}

.page-banner-inner {
    padding: 100px 0 0;
}

.page-banner-title {
    font-size: 60px;
    line-height: 60px;
    max-width: none;
}

.page-banner.is-post .page-banner-title {
    font-size: 40px;
    line-height: 50px;
}

.page-breadcrumb {
    padding: 10px;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .page-banner .container {
        padding: 0 24px;
    }

    .page-banner-title {
        font-size: 40px;
        line-height: 1.15;
    }
}

/* ---------- Typography (home) ---------- */
.topbar,
.topbar a {
    font-size: 16px;
    line-height: 24px;
}

.navbar-nav .nav-link {
    font-size: 16px;
    line-height: 20px;
}

.site-header .navbar-nav .nav-link:not(.active) {
    color: #444;
}

.btn-brand,
.btn-navy,
.btn-outline-brand,
.btn-lg {
    font-size: 16px;
    line-height: 16px;
}

.hero-eyebrow {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
}

.hero-title {
    font-size: 63px;
    line-height: 63px;
    letter-spacing: normal;
}

.hero-subtitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #444;
}

.hero-text {
    font-size: 16px;
    line-height: 24px;
}

.feature-box li {
    font-size: 19px;
    line-height: 22.8px;
}

.hours-title {
    font-size: 22px;
    line-height: 22px;
}

.hours-row {
    font-size: 14px;
    line-height: 14px;
}

.hours-row .text-end {
    line-height: 19px;
}

.badge-pill {
    font-size: 16px;
    font-weight: 500;
    line-height: 23.2px;
    padding: 4.3px 12px 4.3px 25px;
}

.section-title,
.section-title em {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 1px;
}

.heading-xl .section-title,
.heading-xl .section-title em,
.guide-title,
.guide-title em {
    font-size: 60px;
    line-height: 72px;
    letter-spacing: -3.8px;
}

.about-text,
.check-list li,
.icon-list li {
    font-size: 16px;
    line-height: 24px;
    color: #444;
}

.rich-text a,
.entry-content a {
    color: var(--link);
}

.info-card {
    line-height: 28.8px;
}

.info-card h3 {
    font-size: 22px;
    line-height: 22px;
}

.info-card.is-wide h3 {
    font-size: 30px;
    line-height: 30px;
}

.service-body h3 {
    font-size: 25px;
    line-height: 25px;
}

.service-body p {
    font-size: 16px;
    line-height: 24px;
}

.link-arrow {
    font-size: 16px;
    line-height: 16px;
}

.stat-outline {
    font-family: "Rubik", sans-serif;
    font-size: 100px;
    font-weight: 600;
    line-height: 100px;
    -webkit-text-stroke: 1px #270000;
}

.stat-label {
    font-size: 20px;
    line-height: 20px;
}

.doctor-bio {
    font-size: 16px;
    line-height: 24px;
}

.contact-label {
    font-size: 16px;
    line-height: 19.2px;
}

.testimonial-card blockquote {
    font-size: 16px;
    line-height: 24px;
    color: #444;
}

.testimonial-card figcaption {
    font-size: 28px;
    line-height: 42px;
    color: #444;
}

.faq-accordion .accordion-button {
    font-size: 21px;
    line-height: 31.5px;
}

.faq-accordion .accordion-body {
    font-size: 16px;
    line-height: 24px;
    color: #444;
}

.post-card h3 {
    font-size: 18px;
    line-height: 21.6px;
}

.blog-list .post-card h3 {
    font-size: 17px;
    line-height: 20.4px;
}

.post-card time {
    font-size: 14px;
    line-height: 18.2px;
    color: #adadad;
}

.read-more {
    line-height: 24px;
}

/* ---------- Footer ---------- */
.site-footer,
.site-footer a {
    color: #fff;
}

.footer-card,
.footer-card p {
    font-size: 16px;
    line-height: 16px;
    color: #444;
}

.footer-title {
    font-size: 24px;
    line-height: 24px;
}

.footer-links li,
.footer-links a {
    font-size: 16px;
    line-height: 24px;
}

.hours-footer .hours-row {
    color: #444;
}

/* ---------- Inner pages: content + sidebar ---------- */
.entry-content,
.entry-content p,
.entry-content li {
    font-size: 16px;
    line-height: 24px;
}

.entry-content h2 {
    font-size: 32px;
    line-height: 38.4px;
}

.entry-content h3 {
    font-size: 24px;
    line-height: 28.8px;
}

.sidebar {
    padding: 20px 16px;
    background: #f6f6f6;
    border-radius: 10px;
    gap: 30px;
}

.sidebar-card {
    border-top: 0;
    box-shadow: none;
}

.doctor-card {
    padding: 0;
    border: 0;
    border-radius: 13px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.doctor-card-img {
    width: 96px;
    margin: 12px 0 0 4px;
}

.doctor-card > div {
    padding: 10px;
}

.doctor-card p.small {
    font-size: 13px;
    line-height: 19.5px;
}

.sidebar-card:not(.doctor-card) {
    padding: 19px 10px 10px 12px;
    border: 2px solid var(--teal);
    border-radius: 10px 10px 20px 20px;
}

.sidebar-links li,
.sidebar-links a {
    font-size: 15px;
    line-height: 22.5px;
}

.sidebar-posts a {
    font-size: 15px;
    line-height: 18px;
}

.sidebar-posts time {
    font-size: 13px;
    line-height: 16.9px;
    color: #adadad;
}

.post-meta {
    font-size: 16px;
    line-height: 24px;
}

/* ---------- About page ---------- */
.about-page .section-title.text-center {
    line-height: 40px;
    letter-spacing: normal;
}

.about-eyebrow,
.about-stat-side,
.about-stat-caption {
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: normal;
}

.about-stat-caption {
    line-height: 18px;
}

.about-bio,
.about-bio p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 29.6px;
}

/* ---------- Contact page ---------- */
.contact-heading {
    font-size: 35px;
    line-height: 35px;
}

.contact-list .contact-label {
    font-size: 18px;
    line-height: 21.6px;
}

.contact-list address a {
    color: #000;
}

.hours-plain .hours-title {
    font-size: 29px;
    line-height: 29px;
}

.hours-plain .hours-row {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
}

.hours-plain .hours-row .text-end {
    line-height: 25px;
}

.contact-form-col .section-title {
    font-size: 50px;
    line-height: 50px;
    letter-spacing: normal;
}

.contact-form-col p {
    font-size: 16px;
    line-height: 24px;
}

/* ---------- Second pass (measured) ---------- */
.topbar,
.topbar a {
    font-size: 14px;
    line-height: 21px;
}

.site-header-overlay .ho-menu .nav-link {
    font-size: 13px;
}

.hours-row .text-end {
    line-height: 14px;
}

.hours-row .text-end.is-multi {
    line-height: 19px;
}

.hours-plain .hours-row .text-end {
    line-height: 16px;
}

.hours-plain .hours-row .text-end.is-multi {
    line-height: 25px;
}

.service-body h3 {
    font-size: 28px;
    line-height: 28px;
}

.doctor-bio strong {
    color: #444;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: #1f2124;
}

/* ==========================================================================
   Layout (measured from the original at 1463px wide)
   ========================================================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1274px; /* 1250px content, as on the original */
    }

    .services .container,
    .faq .container,
    .blog .container {
        max-width: 1324px; /* 1300px sections */
    }
}

/* Home header: 41px topbar + 88px row */
.topbar {
    padding: 10px 10px;
    border-radius: 0 0 50px 50px;
}

.site-header .navbar {
    padding: 0 6px;
    min-height: 88px;
}

.site-header .brand-logo {
    width: 87px;
    height: auto;
}

.site-header .navbar-nav .nav-link {
    padding: 9px 13px !important;
    margin-right: 5px;
    border-radius: 6px;
}

.site-header .btn-brand {
    padding: 12px 24px;
    border-radius: 10px;
}

/* Hero: 700px, content column 688px, image 543x500 */
.hero {
    padding: 0;
    min-height: 700px;
}

.hero::before {
    inset: 0;
    height: 700px;
    background: var(--hero-bg, none) center / cover no-repeat, #eef3f7;
}

.hero > .container > .row:first-child {
    min-height: 600px;
    margin: 0;
    --bs-gutter-x: 20px;
}

.hero .col-lg-7 {
    flex: 0 0 auto;
    width: 688px;
    max-width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero .col-lg-7 > * {
    margin: 0;
}

.hero .col-lg-5 {
    flex: 0 0 auto;
    width: 543px;
    max-width: 100%;
    padding: 0;
    margin-left: 20px;
}

.hero-media img {
    width: 543px;
    height: 500px;
    aspect-ratio: auto;
    border-radius: 20px;
}

.hero-title {
    margin: 0;
}

.hero-text-block p {
    margin: 0 0 14.4px;
}

.hero .btn-brand {
    align-self: flex-start;
    padding: 12px 24px;
    border-radius: 10px;
}

.hero-strip {
    margin-top: -140px;
    padding: 10px;
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
}

.hero-strip > .col-lg-8 {
    width: 911px;
    flex: 0 0 auto;
    padding: 0;
}

.hero-strip > .col-lg-4 {
    width: 299px;
    flex: 0 0 auto;
    padding: 0;
    margin-left: 20px;
}

.feature-box {
    gap: 0;
    padding: 30px 0;
    background: #f7f7f7;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .29);
}

.feature-box li {
    gap: 8px;
    padding: 0 30px;
}

.feature-icon {
    width: 88px;
    height: 88px;
}

.hours-card {
    padding: 30px;
    border-radius: 30px;
}

/* About */
.section.about {
    padding: 100px 0 80px;
}

.about .row {
    --bs-gutter-x: 20px;
}

.about .col-lg-6:first-child {
    width: 615px;
    flex: 0 0 auto;
    padding: 10px;
}

.about .col-lg-6:last-child {
    width: 615px;
    flex: 0 0 auto;
    padding: 10px 10px 10px 30px;
}

.about .section-heading,
.doctor .section-heading {
    margin-bottom: 0;
}

.about .section-title {
    margin: 8px 0 16px;
}

.about-eye {
    width: 160px;
    height: 150px;
}

.check-list li {
    padding: 0 0 4px;
}

.check-list i,
.icon-list i {
    margin-right: 5px;
}

/* Guide */
.section.guide {
    padding: 0 0 15px;
}

.guide-title {
    margin: 18px 0 26px;
}

.guide .section-title.mt-5 {
    margin: 18px 0 26px !important;
}

.guide .rich-text p,
.guide p.mb-4 {
    margin: 0 0 14.4px !important;
}

.guide .row {
    --bs-gutter-x: 15px;
    --bs-gutter-y: 30px;
    margin-top: 0;
}

.info-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(15, 30, 76, .06);
}

.info-card > * {
    margin: 0 !important;
}

.info-card .rich-text p {
    margin: 0 0 14.4px;
}

.info-card.is-wide {
    padding: 35px;
    border-radius: 24px;
}

.guide .col-lg-10 {
    width: 1140px;
    max-width: 100%;
}

.icon-list {
    margin: 0;
}

.icon-list li {
    padding: 0 0 5px;
    margin-bottom: 5px;
}

/* Services */
.section.services {
    padding: 80px 0;
}

.services .section-heading {
    margin-bottom: 20px;
}

.services .section-title {
    max-width: 923px;
    margin: 8px auto 16px;
}

.slider-track {
    grid-auto-columns: 310px;
    gap: 20px;
}

.service-card {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

.service-media img {
    height: 258px;
    aspect-ratio: auto;
}

.service-body {
    padding: 60px 30px 30px;
    gap: 10px;
}

.service-body h3 {
    margin: 0 0 10px;
}

.service-body p {
    margin: 0 0 15px;
}

/* Doctor */
.section.doctor {
    padding: 100px 0;
}

.doctor .section-title {
    margin: 8px 0 16px;
}

.stat-outline {
    margin: 0 !important;
}

.stat-label {
    margin: 0 0 15px;
}

.doctor-bio p {
    margin: 0 0 14.4px;
}

/* Booking form card: 595px, padding 80/80/50 */
.booking-card {
    padding: 80px 80px 50px;
    border-radius: 30px;
}

.enquiry-form .form-control {
    height: 53px;
    padding: 14px 16px;
    border-radius: 8px;
}

.enquiry-form textarea.form-control {
    height: 140px;
}

.enquiry-form .row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 14px;
}

.enquiry-form button[type="submit"] {
    height: 52px;
    padding: 14px 30px !important;
    border-radius: 8px;
}

/* Testimonials */
.section.testimonials {
    padding: 80px 0;
}

.testimonials .slider-track {
    grid-auto-columns: calc((100% - 2 * 10px) / 3);
    gap: 10px;
}

.testimonial-card {
    padding: 20px;
    border-radius: 22px;
    background: #e2fcfd;
}

.testimonial-card figcaption {
    margin-top: 25px;
}

/* FAQ */
.section.faq {
    padding: 0 0 80px;
}

.faq-accordion .accordion-item {
    margin-bottom: 10px;
    border-radius: 10px;
    border-color: #dcdcdc;
}

.faq-accordion .accordion-button {
    padding: 10px;
}

.faq-accordion .accordion-body {
    padding: 10px;
}

/* Blog (home + listing): 3 columns, 30px column gap, 35px row gap */
.section.blog {
    padding: 0 0 80px;
}

.blog .row,
.blog-list .row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 35px;
}

.post-card h3 {
    margin: 0 0 10px;
}

.post-card time {
    margin-bottom: 13px;
}

/* Footer: gradient as on the original, no bottom bar */
.site-footer {
    padding: 10px 10px 40px;
    background: linear-gradient(120deg, #087073 0%, #07142f 40%, #040d23 65%, #b07a12 100%);
    border-radius: 20px 20px 0 0;
}

.site-footer > .container {
    padding-top: 50px;
}

.footer-card {
    padding: 30px;
    border-radius: 30px;
}

.footer-bottom {
    display: none !important;
}

.hero-subtitle {
    display: block;
    margin: 0 0 14.4px;
}

/* ---------- Inner pages: content 836px + sidebar 374px (measured) ---------- */
.page-body {
    padding: 60px 0 80px;
}

@media (min-width: 1200px) {
    .page-body > .container {
        max-width: 1264px; /* 1240px content */
    }

    .page-body > .container > .row {
        display: grid;
        grid-template-columns: minmax(0, 836fr) minmax(0, 374fr);
        column-gap: 30px;
        margin: 0;
    }

    .page-body > .container > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .page-body > .container > .row > .col-lg-8 {
        padding: 10px;
    }

    .page-body > .container > .row > .col-lg-10.mx-auto {
        grid-column: 1 / -1;
    }
}

/* WordPress / Hello Elementor default text spacing */
.entry-content p {
    margin: 0 0 .9rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin: .5rem 0 1rem;
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 1rem;
    padding-left: 40px;
}

.entry-content li {
    margin: 0;
}

/* Banner: title centred in the 460px banner, breadcrumb tab at the bottom */
.page-banner {
    align-items: stretch;
}

.page-banner .container {
    position: static;
    display: flex;
    align-items: center;
    min-height: 460px;
}

.page-banner-inner {
    flex: 1;
    padding: 0;
}

.page-breadcrumb {
    position: absolute;
    left: 200px;
    bottom: 0;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .page-breadcrumb {
        left: 24px;
    }
}

@media (min-width: 992px) {
    .hero > .container > .row:first-child,
    .hero-strip,
    .about .row {
        flex-wrap: nowrap;
    }

    .hero .col-lg-7,
    .hero-strip > .col-lg-8,
    .about .col-lg-6 {
        flex-shrink: 1;
        min-width: 0;
    }
}

/* Hero keeps 100px of space below its 600px content before the features strip pulls up 140px */
.hero > .container > .row:first-child {
    margin-bottom: 100px;
}

/* ---------- Third pass: compared against screenshots of the original ---------- */
/* Hero: white gradient overlay like the original (95% left -> 0 right) */
.hero::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .66) 35%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 96%),
        var(--hero-bg, none) center / cover no-repeat,
        #eef3f7;
}

/* No Bootstrap vertical gutters in the hero (they pushed content 24px down) */
.hero > .container > .row:first-child {
    --bs-gutter-y: 0;
}

.hero > .container > .row:first-child > * {
    margin-top: 0;
}

.hero-strip {
    margin-left: 0;
    margin-right: 0;
}

.hero-strip > * {
    margin-top: 0;
}

/* Topbar social icons: 22px, YouTube first */
.topbar-social a {
    width: 22px;
    height: 22px;
    font-size: .62rem;
}

/* "Treatments" caret: larger solid triangle with more space, as on the original */
.site-header .dropdown-toggle::after {
    margin-left: 16px;
    border-top-width: .4em;
    border-left-width: .33em;
    border-right-width: .33em;
    vertical-align: .12em;
}
/* Header spacing as on the original: 33px between menu and Appointment, 16px between topbar items */
@media (min-width: 992px) {
    .site-header .navbar-nav {
        margin-right: 14px !important;
    }
}

.topbar {
    padding: 9px 10px;
}

.topbar-info {
    gap: 16px !important;
}

/* Floating buttons: 50px, 34px from the right, 53px from the bottom */
.floating-actions {
    right: 34px;
    bottom: 53px;
}

.fab-btn {
    width: 50px;
    height: 50px;
}

/* Buttons: 40px tall (no border), 14px arrow, 10px gap — same box as the original */
.btn-brand,
.btn-navy {
    border: 0;
}

.btn-brand .fa-arrow-right,
.btn-navy .fa-arrow-right {
    font-size: 14px;
}

/* ---------- Fourth pass: full-page comparison with the original home page ---------- */
/* Guide intro spacing */
.guide .section-title.mt-5 {
    margin: 40px 0 38px !important;
}

/* Badge -> heading spacing */
.about .badge-pill,
.doctor .badge-pill {
    margin-bottom: 0;
}

.testimonials .section-title,
.faq .section-title,
.blog .section-title {
    margin-top: 8px;
}

/* Doctor section: 376px content row */
.doctor .row {
    min-height: 376px;
}

.doctor-photo {
    width: 286px;
    height: 348px;
    object-fit: cover;
}

/* Booking */
.booking-panel {
    padding-bottom: 100px;
}

.booking-info {
    padding-top: 80px;
}

.booking-decor {
    width: 270px;
    flex-shrink: 0;
}

.booking-info .hours-light {
    flex: 0 0 226px !important;
    max-width: 226px;
    margin-left: 25px;
}

/* Testimonials: 1188px slider, more space before the FAQ */
.testimonials .slider {
    max-width: 1188px;
    margin: 0 auto;
}

.section.testimonials {
    padding-bottom: 114px;
}

/* Blog grid 1280px */
@media (min-width: 1400px) {
    .blog .container {
        max-width: 1304px;
    }
}

/* Footer: card 411px + right column 819px; menus 264px; contact boxes 246px */
.site-footer {
    padding: 31px 10px;
}

.site-footer > .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (min-width: 1200px) {
    .site-footer > .container > .row {
        flex-wrap: nowrap;
        margin: 0;
        --bs-gutter-x: 20px;
        --bs-gutter-y: 0;
        align-items: center !important;
    }

    .site-footer > .container > .row > .col-lg-5 {
        flex: 0 0 411px;
        width: 411px;
        padding: 0;
        margin: 0;
    }

    .site-footer > .container > .row > .col-lg-7 {
        flex: 0 0 819px;
        width: 819px;
        padding: 10px;
        margin: 0 0 0 20px;
    }

    .site-footer .col-lg-7 > .row:first-child {
        margin: 0;
        min-height: 240px;
        gap: 20px;
        flex-wrap: nowrap;
    }

    .site-footer .col-lg-7 > .row:first-child > div {
        flex: 0 0 264px;
        width: 264px;
        padding: 10px;
        margin: 0;
    }

    .footer-contact {
        margin: 20px 0 0 !important;
        gap: 20px;
        flex-wrap: nowrap;
    }

    .footer-contact > div {
        flex: 0 0 246px !important;
        width: 246px !important;
        max-width: 246px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-contact > div:first-child {
        margin-left: 10px !important;
    }
}

.footer-contact .contact-item {
    align-items: flex-start;
    gap: 15px;
}

/* Hero photo is brightened on the original (Elementor CSS filter) */
.hero-media img {
    filter: brightness(1.3);
}

/* ---------- Fifth pass: inner pages vs screenshots of the original ---------- */
/* Banner: dark teal gradient overlay (≈93% left -> ≈10% right), title left-aligned at 200px */
.page-banner::before {
    background: linear-gradient(90deg, rgba(4, 24, 28, .93) 0%, rgba(4, 24, 28, .75) 20%, rgba(4, 24, 28, .45) 45%, rgba(4, 24, 28, .2) 70%, rgba(4, 24, 28, .1) 100%);
}

.page-banner .container {
    width: 100%;
    margin: 0;
}

.page-banner-inner {
    justify-content: flex-start;
}

/* Overlay header: 1300px container, logo at +10px, 15px between menu items, 20px before the button */
.ho-container {
    padding: 0;
}

.ho-menu .nav-link {
    margin: 0 !important;
}

.ho-menu .nav-item + .nav-item {
    margin-left: 15px;
}

.ho-right {
    gap: 20px;
}

/* Breadcrumb tab: 13px text, 25px rounded home icon, dashed divider, outward-curving bottom corners */
.page-breadcrumb {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 20px;
}

.page-breadcrumb .fa-house {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    font-size: .8rem;
    margin-right: 6px;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 12px;
    margin-left: 12px;
    border-left: 1px dashed var(--teal);
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

.page-breadcrumb .breadcrumb {
    align-items: center;
}

.page-breadcrumb::before,
.page-breadcrumb::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 16px;
    height: 16px;
    background: transparent;
    pointer-events: none;
}

.page-breadcrumb::before {
    left: -16px;
    border-bottom-right-radius: 16px;
    box-shadow: 6px 6px 0 6px #fff;
}

.page-breadcrumb::after {
    right: -16px;
    border-bottom-left-radius: 16px;
    box-shadow: -6px 6px 0 6px #fff;
}

.page-breadcrumb::before,
.page-breadcrumb::after {
    clip-path: inset(0);
}

/* Content + sidebar: container 1250px, columns 836px + 30px + 374px, no Bootstrap vertical gutter */
@media (min-width: 1280px) {
    .page-body > .container {
        max-width: 1274px;
    }

    .page-body > .container > .row {
        grid-template-columns: 836px 374px;
        justify-content: start;
    }
}

.page-body > .container > .row > * {
    margin-top: 0 !important;
}

/* Sidebar doctor card: teal stripe on the left edge */
.doctor-card {
    border-left: 4px solid var(--teal);
}

/* Banner container is a flex column: stretch items so the title stays left-aligned */
.page-banner .container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.page-banner-inner {
    text-align: left;
}

/* Booking photo: fixed background (parallax) like the original */
.booking-media {
    background-color: #dfe7ea;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* Touch devices don't support fixed backgrounds well */
@media (hover: none), (max-width: 991.98px) {
    .booking-media {
        background-attachment: scroll;
    }
}

/* ---------- Blog post pages (measured from the original) ---------- */
/* No breadcrumb; shorter banner */
.page-banner.is-post,
.page-banner.is-post .container {
    min-height: 408px;
}

/* Wide layout: 980px content + sidebar, starting 18px from the left */
.post-body {
    padding: 20px 0 80px;
}

@media (min-width: 1200px) {
    .post-body > .container {
        max-width: none;
        padding: 0 18px;
    }

    .post-body > .container > .row {
        grid-template-columns: minmax(0, 980px) minmax(0, 410px);
        column-gap: 30px;
    }

    .post-body > .container > .row > .col-lg-8 {
        padding: 0;
    }
}

/* ---------- About page body (measured from the original at 1449px) ---------- */
.section.about-page {
    padding: 0 0 50px;
}

@media (min-width: 1280px) {
    .about-page > .container {
        max-width: 1274px;
    }

    .about-page > .container > .row {
        display: grid;
        grid-template-columns: 625px 625px;
        margin: 0;
    }

    .about-page > .container > .row > .col-lg-6 {
        width: auto;
        max-width: none;
        padding: 10px;
        margin: 0;
    }
}

/* Heading: 800px wide, 40/40, 80px above and below */
.about-page .section-title.text-center {
    max-width: 800px;
    margin: 80px auto !important;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: normal;
}

/* Stat block: "Who are we?" left, huge 300px "15", vertical side label */
.about-stat {
    padding: 10px;
    text-align: center;
}

.about-eyebrow {
    margin: 0;
    text-align: left;
}

.about-stat-row {
    position: relative;
    display: block;
}

.about-stat-number {
    display: block;
    font-size: 300px;
    font-weight: 600;
    line-height: 300px;
    letter-spacing: normal;
}

.about-stat-side {
    position: absolute;
    left: 464px;
    top: 52px;
    width: 28px;
    height: 185px;
    max-height: none;
    line-height: 14px;
    text-align: center;
}

.about-stat-caption {
    margin: 0;
    padding: 10px 30px;
}

/* Photos: two 283x388 images, 20px apart */
.about-page .row.g-3 {
    display: grid;
    grid-template-columns: 283px 283px;
    gap: 20px;
    margin: 20px 0 0 !important;
    padding: 10px;
}

.about-page .row.g-3 > .col-6 {
    width: auto;
    padding: 0;
    margin: 0;
}

.about-photo {
    width: 283px;
    height: 388px;
    aspect-ratio: auto;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .about-stat-number {
        font-size: 180px;
        line-height: 180px;
    }

    .about-stat-side {
        left: auto;
        right: 0;
        top: 20px;
    }

    .about-page .row.g-3 {
        grid-template-columns: 1fr 1fr;
    }

    .about-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 283 / 388;
    }
}

.about-page > .container > .row {
    padding-top: 10px;
}

.about-bio p {
    margin: 0 0 22px !important;
}

.section.about-page {
    padding-bottom: 26px;
}

/* ==========================================================================
   Sixth pass: full-site comparison (Contact, Blogs, posts, Treatment)
   ========================================================================== */

/* ---------- Contact (measured) ---------- */
.section.contact-page {
    padding: 133px 0 0;
}

@media (min-width: 1280px) {
    .contact-page > .container {
        max-width: 1274px;
    }

    .contact-page > .container > .row {
        display: grid;
        grid-template-columns: 553px 1fr;
        column-gap: 41px;
        align-items: center;
        margin: 0;
    }

    .contact-page > .container > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        margin: 0;
    }

    .contact-page .contact-info {
        padding: 0;
    }

    .contact-page .contact-form-col {
        padding: 0 50px 0 60px;
    }
}

.contact-heading {
    margin: 0 0 30px;
}

.contact-list {
    margin: 0;
}

.contact-list .contact-item {
    margin-bottom: 20px;
}

.contact-page .hours-plain {
    padding: 9px 18px 0;
}

.hours-plain .hours-title {
    margin: 0 0 20px;
}

.contact-form-col .badge-pill {
    margin-bottom: 20px;
}

.contact-form-col .section-title {
    margin-bottom: 20px !important;
}

.contact-page .enquiry-form .form-control {
    font-size: 15px;
    line-height: 22.5px;
    border-color: #dcdcdc;
}

.contact-map {
    padding: 139px 0 10px;
}

.contact-map .container {
    max-width: 1274px;
}

.contact-map iframe {
    height: 300px;
}

/* ---------- Blog listing: 150px-tall images at natural width, plain number pagination ---------- */
.blog-list .post-card .post-media {
    display: flex;
    justify-content: center;
}

.blog-list .post-card img {
    width: auto;
    max-width: 100%;
    height: 150px;
    aspect-ratio: auto;
}

.blog-list .post-card:hover img {
    transform: none;
}

.blog-list nav {
    gap: 12px;
}

.page-num {
    display: inline-block;
    padding: 0 4px;
    font-size: 14px;
    color: #444;
}

.page-num.current {
    color: var(--navy);
    font-weight: 500;
}

/* ---------- Blog post: title 40/50 on one line, featured image at natural size ---------- */
.page-banner.is-post .container {
    padding: 0 143px;
}

.page-banner.is-post .page-banner-inner {
    justify-content: center;
    text-align: center;
}

.post-body .post-featured {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0;
}

.post-body .post-meta {
    margin: 20px 0 20px;
}

@media (min-width: 1200px) {
    .post-body > .container > .row > .col-lg-8 {
        padding: 0 0 0 2px;
    }
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 15px;
}

.entry-content h2,
.entry-content h3 {
    margin: 8px 0 16px;
}

.entry-content p {
    margin: 0 0 14.4px;
}

/* ---------- Plain pages (original /treatment): theme title on white ---------- */
.plain-page {
    padding: 0 0 0;
}

.plain-page .entry-title {
    max-width: 1140px;
    margin: 8px auto 16px;
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    color: #333;
}

.site-header-overlay.is-on-white + main .plain-page {
    padding-top: 0;
}

.plain-page-content {
    max-width: 1140px;
    margin: 0 auto 40px;
}

.section.blog-list {
    padding: 32px 0 46px;
}

.blog-list nav.mt-5 {
    margin-top: 18px !important;
}

/* Sidebar scrolls with the page, like the original (not sticky) */
.sidebar {
    position: static;
    top: auto;
}

/* Banner cut-out photo (About): 290x362, 200px from the right, resting on the banner's bottom edge */
.page-banner-side {
    position: absolute;
    right: 200px;
    bottom: 0;
    z-index: 1;
    width: 290px;
    height: 362px;
    max-height: none;
    margin: 0;
    object-fit: contain;
    object-position: bottom;
}

@media (max-width: 991.98px) {
    .page-banner-side {
        right: 24px;
        width: 180px;
        height: auto;
    }
}

/* ---------- Banner + breadcrumb, measured on the original (Contact) ---------- */
/* Banner photos are anchored top-left (background-position: 0 0) */
.page-banner-bg {
    object-position: 0 0;
}

/* Breadcrumb tab: 10px padding, 12px text, 26x22 icon box, 9px around the divider */
.page-breadcrumb {
    padding: 10px;
    bottom: -3px;
    font-size: 12px;
    line-height: 18px;
}

.page-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}

.page-breadcrumb .fa-house {
    width: 26px;
    height: 22px;
    margin-right: 5px;
    border-radius: 6px;
    font-size: 12px;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 9px;
    margin-left: 9px;
}

/* Contact: columns aligned to the top; left heading starts 50px below the badge */
@media (min-width: 1280px) {
    .contact-page > .container > .row {
        align-items: start;
    }

    .contact-page .contact-info {
        padding-top: 50px;
    }
}