/* ===========================================================
   Dr. Gumber Dental Care & Implant Centre — Theme Override
   Palette: Medical Teal + Deep Navy (distinct from reference gold)
   Loaded AFTER custom.css so it wins the cascade.
   =========================================================== */

:root{
    --primary-color    : #11365f; /* deep navy — dark sections, headings */
    --secondary-color  : #f3f8fd; /* light teal wash — section bg */
    --text-color       : #21333f; /* slate body text */
    --accent-color     : #2f74bf; /* teal — buttons, links, accents */
    --accent-dark      : #245d9c;
    --accent-soft      : #e6f0fb;
    --white-color      : #ffffff;
}

html{ scroll-behavior: smooth; }
/* offset anchor jumps for the sticky header */
section[id], div[id]{ scroll-margin-top: 110px; }

body{ color: var(--text-color); }

/* --- soft brand wash on the former "cream" sections --- */
.cta-contact-box,
.our-testimonials{ background-color: var(--secondary-color) !important; }

/* ===========================================================
   BUTTONS — teal, with a smooth lift + sheen on hover
   =========================================================== */
.btn-default{
    background: var(--accent-color);
    color:#fff;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease;
}
.btn-default:hover{
    background: var(--primary-color); color:#fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(11,46,79,.22);
}
.btn-highlighted{ background: var(--primary-color); }
.btn-highlighted:hover{ background: var(--accent-color); }
.redmore-btn:hover{ color: var(--accent-dark); }

/* --- hero overlay: cool navy tint instead of warm --- */
.hero.bg-image::before{
    background: linear-gradient(180deg, rgba(11,46,79,.55) 0%, rgba(11,46,79,.80) 100%);
}

.provide-item-no h3,
.our-process-item .icon-box{ color: var(--accent-color); }
.footer-copyright-text a{ color: var(--accent-color) !important; }
.happy-patients-counter-box{ background: var(--primary-color); }

/* ===========================================================
   DENTAL ACCENT — one clean, small tooth before sub-headings
   =========================================================== */
.section-title h3{
    position: relative;
    display:inline-flex; align-items:center; gap:9px;
    line-height:1;
}
.section-title h3::before{
    content:"\f5c9"; /* fa tooth */
    font-family:"Font Awesome 6 Free"; font-weight:900;
    color: var(--accent-color);
    font-size:.82em;
    opacity:.9;
}

/* ===========================================================
   CURSOR — recolour the magic cursor + dental states
   =========================================================== */
.cb-cursor:before{ background: var(--accent-color); }
.cb-cursor.-opaque:before,
.cb-cursor.-exclusion:before{ background: var(--primary-color); }
.cb-cursor.-pointer:before{ background: var(--accent-color); }
.cb-cursor-text{ font-family:"Onest",sans-serif; font-weight:700; }
/* the "smile/tooth" label cursor */
.cb-cursor.-tooth:before{ background: var(--accent-color); }

/* ===========================================================
   HOVER MICRO-INTERACTIONS — smooth, professional
   =========================================================== */
/* service cards: lift + animated icon + border glow */
.service-item{
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    border:1px solid #e6eef1;
}
.service-item:hover{
    transform: translateY(-8px);
    box-shadow:0 18px 40px rgba(11,46,79,.12);
    border-color: var(--accent-soft);
}
.service-item .icon-box{ transition: transform .4s ease; }
.service-item:hover .icon-box{ transform: scale(1.12) rotate(-4deg); }

/* "why choose us" numbered cards */
.we-provide-item{ transition: transform .35s ease, box-shadow .35s ease; }
.we-provide-item:hover{ transform: translateY(-6px); box-shadow:0 16px 34px rgba(11,46,79,.10); }

/* process steps slide + accent on hover */
.our-process-item{ transition: transform .3s ease; }
.our-process-item:hover{ transform: translateX(8px); }
.our-process-item:hover .process-item-content h3{ color: var(--accent-color); }

/* stat cards */
.cta-contact-item{ transition: transform .3s ease; }
.cta-contact-item:hover{ transform: translateY(-5px); }

/* contact info cards */
.contact-info-item{ transition: transform .3s ease, box-shadow .3s ease; }
.contact-info-item:hover{ transform: translateY(-5px); box-shadow:0 14px 30px rgba(11,46,79,.12); }

/* nav links smooth underline */
.main-menu .nav-link{ position:relative; transition:color .3s ease; }
.main-menu .nav-link::after{
    content:""; position:absolute; left:0; bottom:2px; height:2px; width:0;
    background:var(--accent-color); transition:width .3s ease;
}
.main-menu .nav-link:hover::after{ width:100%; }

/* generic image zoom inside figures */
.about-img img, .we-provide-image img{ transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.about-img:hover img, .we-provide-image:hover img{ transform: scale(1.06); }

/* social icons pop */
.footer-social-links ul li a{ transition: transform .3s ease, background .3s ease; }
.footer-social-links ul li a:hover{ transform: translateY(-4px); }

/* ===========================================================
   TEAM / DOCTOR CARDS
   =========================================================== */
.team-section{ padding: 110px 0; position:relative; }
.doctor-card{
    background:#fff; border:1px solid #e3eef1; border-radius:18px; overflow:hidden;
    text-align:center; height:100%; display:flex;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.doctor-card:hover{ box-shadow:0 22px 48px rgba(11,46,79,.15); transform:translateY(-8px); border-color:var(--accent-soft); }
.doctor-card .doctor-photo{
    flex:0 0 210px; width:210px; align-self:stretch;
    display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
}
.doctor-card .doctor-photo--dark{ background:linear-gradient(160deg,#11365f,#11365f); }
.doctor-card .doctor-photo--light{ background:#eef3f6; }
.doctor-card .doctor-photo img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    transition: transform .5s ease;
}
.doctor-card:hover .doctor-photo img{ transform: scale(1.05); }
.doctor-card .doctor-info{ padding:34px 32px; text-align:left; align-self:center; }
.doctor-card .doctor-info h3{ font-size:25px; margin-bottom:4px; color:var(--primary-color); }
.doctor-card .doctor-info span{ color:var(--accent-color); font-weight:600; font-size:15px; display:block; margin-bottom:14px; }
.doctor-card .doctor-info p{ font-size:15.5px; line-height:1.7; color:#5a6b75; margin:0; }
@media (max-width:575px){
    .doctor-card{ display:block; }
    .doctor-card .doctor-photo{ width:100%; height:180px; }
    .doctor-card .doctor-info{ text-align:center; }
}

/* ===========================================================
   BOOKING FORM
   =========================================================== */
.booking-wrap{
    background:#fff; border:1px solid #e3eef1; border-radius:20px;
    padding:42px 38px; box-shadow:0 18px 50px rgba(11,46,79,.08); margin-top:10px;
}
.booking-wrap h3{ color:var(--primary-color); margin-bottom:6px; }
.booking-wrap p.lead{ color:#5a6b75; margin-bottom:26px; }
.booking-form .form-group{ margin-bottom:18px; }
.booking-form label{ font-weight:600; font-size:14px; color:var(--primary-color); margin-bottom:6px; display:block; }
.booking-form .form-control{
    width:100%; padding:13px 16px; border:1.5px solid #dde7ea; border-radius:10px;
    font-family:"Onest",sans-serif; font-size:15px; background:#fbfdfe;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.booking-form .form-control:focus{
    outline:none; border-color:var(--accent-color);
    box-shadow:0 0 0 4px rgba(10,166,184,.14); background:#fff;
}
.booking-form textarea.form-control{ min-height:96px; resize:vertical; }
.booking-form .btn-default{ width:100%; border:0; cursor:pointer; padding:15px; font-size:16px; }
.booking-note{ font-size:13px; color:#7a8b94; margin-top:14px; text-align:center; }
.booking-note i{ color:#25d366; }

/* ===========================================================
   FLOATING ACTION BUTTONS (call + whatsapp)
   =========================================================== */
.float, .float2{
    position:fixed; width:56px; height:56px; right:24px; border-radius:50%;
    text-align:center; font-size:26px; line-height:56px; color:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:999;
    transition: transform .25s ease, box-shadow .25s ease;
}
.float{ background:var(--accent-color); bottom:156px; animation: floatPulse 2.6s infinite; }
.float2{ background:#25d366; bottom:90px; }
.float:hover, .float2:hover{ transform: scale(1.12); color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.32); }
@keyframes floatPulse{
    0%{ box-shadow:0 0 0 0 rgba(10,166,184,.5); }
    70%{ box-shadow:0 0 0 16px rgba(10,166,184,0); }
    100%{ box-shadow:0 0 0 0 rgba(10,166,184,0); }
}

/* a tasteful entrance for elements we tag with .reveal-up (handled by WOW too) */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .section-title h3::before, .float{ animation:none; }
}

/* ===========================================================
   REVIEW-LED / TRUST COMPONENTS (multi-page)
   =========================================================== */

/* "Top rated" ribbon badge used in hero */
.trust-badge{
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
    color:#fff; padding:10px 18px; border-radius:50px; backdrop-filter:blur(4px);
    font-weight:600; font-size:14px; margin-bottom:22px;
}
.trust-badge .stars{ color:#ffd24a; letter-spacing:1px; }
.trust-badge strong{ color:#fff; }

/* trust logos bar */
.trust-bar{ background:var(--primary-color); padding:26px 0; }
.trust-bar .tb-item{ color:#cfe6ec; text-align:center; font-weight:600; font-size:15px; }
.trust-bar .tb-item span{ display:block; color:#fff; font-size:30px; font-weight:800; line-height:1.1; }
.trust-bar .tb-item .stars{ color:#ffd24a; font-size:18px; }

/* big rating panel (reviews page hero) */
.rating-panel{
    background:linear-gradient(135deg,#2f74bf,#11365f); color:#fff;
    border-radius:24px; padding:48px 40px; text-align:center;
    box-shadow:0 24px 60px rgba(11,46,79,.22);
}
.rating-panel .big-score{ font-size:84px; font-weight:800; line-height:1; }
.rating-panel .big-stars{ color:#ffd24a; font-size:30px; letter-spacing:3px; margin:10px 0 6px; }
.rating-panel p{ color:#e6f6f9; margin:0; font-size:17px; }
.rating-panel .src-row{ margin-top:22px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.rating-panel .src-row div{ font-size:14px; color:#cfe6ec; }
.rating-panel .src-row div b{ display:block; color:#fff; font-size:22px; }

/* "what patients love" chips */
.love-chips{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.love-chip{
    background:#fff; border:1px solid #e6f0fb; border-radius:50px;
    padding:12px 22px; font-weight:600; color:var(--primary-color);
    display:inline-flex; align-items:center; gap:10px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.love-chip i{ color:var(--accent-color); }
.love-chip:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(11,46,79,.10); border-color:var(--accent-color); }

/* review wall cards */
.review-grid{ margin-top:10px; }
.review-card{
    background:#fff; border:1px solid #e6eef1; border-radius:18px; padding:28px 26px;
    height:100%; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    position:relative;
}
.review-card:hover{ transform:translateY(-8px); box-shadow:0 20px 44px rgba(11,46,79,.12); border-color:var(--accent-soft); }
.review-card .rc-stars{ color:#ffd24a; font-size:16px; letter-spacing:1px; margin-bottom:14px; }
.review-card .rc-text{ color:#3a4a54; font-size:15px; line-height:1.7; margin-bottom:20px; }
.review-card .rc-foot{ display:flex; align-items:center; gap:14px; }
.review-card .rc-avatar{
    width:48px; height:48px; border-radius:50%; flex:0 0 48px;
    background:linear-gradient(135deg,#2f74bf,#11365f); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px;
}
.review-card .rc-name{ font-weight:700; color:var(--primary-color); font-size:15px; }
.review-card .rc-tag{ font-size:13px; color:#8294 9c; }
.review-card .rc-tag{ font-size:13px; color:#82949c; }
.review-card .rc-quote{ position:absolute; top:18px; right:22px; font-size:40px; color:var(--accent-soft); font-family:Georgia,serif; line-height:1; }

/* page hero (inner pages) */
.page-hero{
    background:linear-gradient(180deg, rgba(11,46,79,.80), rgba(11,46,79,.88)), url('../images/clinic-smile-wall.jpg') center 30%/cover no-repeat;
    padding:150px 0 90px; text-align:center; color:#fff; position:relative;
}
.page-hero h1{ color:#fff; font-size:52px; font-weight:800; margin-bottom:14px; }
.page-hero p{ color:#dcecf0; max-width:680px; margin:0 auto; font-size:17px; }
.page-hero .crumb{ color:#9fd6df; font-weight:600; margin-bottom:14px; letter-spacing:.5px; }
.page-hero .crumb a{ color:#9fd6df; }

/* doctor profile (about page) */
.doc-profile{ background:#fff; border:1px solid #e3eef1; border-radius:20px; overflow:hidden; box-shadow:0 18px 44px rgba(11,46,79,.07); }
.doc-profile .doc-banner{ background:linear-gradient(160deg,#11365f,#11365f); height:420px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.doc-profile .doc-banner i{ font-size:120px; color:rgba(255,255,255,.9); }
.doc-profile .doc-banner img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.doc-profile .doc-body{ padding:30px 32px 36px; }
.doc-profile h3{ color:var(--primary-color); margin-bottom:4px; }
.doc-profile .doc-role{ color:var(--accent-color); font-weight:600; margin-bottom:16px; display:block; }

/* section paddings for simple content blocks */
.simple-section{ padding:100px 0; }
.bg-soft{ background:var(--secondary-color); }

/* ===========================================================
   v2 — cleaner badges, bigger cards, Jaipur/Google polish
   =========================================================== */

/* --- bigger, bolder service cards --- */
.our-service .service-item{
    padding:46px 26px 40px;
    border-radius:18px;
    min-height:330px;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.our-service .service-item .icon-box{
    width:96px; height:96px; margin:0 auto 22px;
    display:flex; align-items:center; justify-content:center;
}
.our-service .service-item .icon-box img{ max-width:72px; height:auto; padding-left:0 !important; }
.our-service .service-item .service-content h3{ font-size:21px; margin-bottom:12px; }
.our-service .service-item .service-content p{ font-size:15px; line-height:1.65; }
.our-service .service-item .service-btn{ margin-top:auto; padding-top:16px; }

/* --- clean experience badge over the clinic photo --- */
.happy-patients-counter-box{
    background:#fff !important;
    border:1px solid #e3eef1;
    border-radius:16px;
    box-shadow:0 16px 40px rgba(11,46,79,.16);
    padding:20px 24px;
    display:flex; align-items:center; gap:16px;
}
.happy-patients-counter-box .icon-box{
    width:54px; height:54px; flex:0 0 54px; border-radius:50%;
    background:linear-gradient(135deg,#2f74bf,#11365f);
    display:flex; align-items:center; justify-content:center;
}
.happy-patients-counter-box .icon-box i{ color:#fff; font-size:24px; }
.happy-patients-counter-content h3{ color:var(--primary-color); font-size:30px; line-height:1; margin:0; }
.happy-patients-counter-content p{ color:#5a6b75; font-size:14px; margin:4px 0 0; }

/* --- hero: clean tag + Google rating chip --- */
.hero-tag{
    display:inline-block; background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.3); color:#fff;
    padding:8px 18px; border-radius:50px; font-size:14px; font-weight:600;
    letter-spacing:.3px; margin-bottom:24px; backdrop-filter:blur(4px);
}
.hero-google{
    display:inline-flex; align-items:center; gap:10px;
    background:#fff; border-radius:50px; padding:10px 20px; margin-top:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.18); text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease;
}
.hero-google:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.26); }
.hero-google img{ width:26px; height:26px; }
.hero-google .hg-score{ font-weight:800; color:#11365f; font-size:19px; }
.hero-google .hg-stars{ color:#fbbc04; letter-spacing:1px; font-size:16px; }
.hero-google .hg-sub{ color:#5a6b75; font-size:14px; font-weight:600; border-left:1px solid #e3eef1; padding-left:12px; }
@media (max-width:480px){ .hero-google .hg-sub{ display:none; } }

/* --- google logo placements --- */
.footer-social-links ul li a.g-social{ padding:0; background:#fff; display:flex; align-items:center; justify-content:center; }
.footer-social-links ul li a.g-social img{ width:18px; height:18px; }
.rating-panel .rp-google{ width:46px; height:46px; margin-bottom:14px; background:#fff; border-radius:50%; padding:8px; }
.review-card{ padding-top:30px; }
.review-card .rc-google{ position:absolute; top:22px; right:24px; width:26px; height:26px; opacity:.95; }

/* --- home location section --- */
.our-location{ padding:110px 0; }
.location-info{
    background:#fff; border:1px solid #e3eef1; border-radius:20px;
    padding:34px 32px; box-shadow:0 16px 44px rgba(11,46,79,.08);
    height:100%; display:flex; flex-direction:column; gap:18px;
}
.location-info .loc-item{ display:flex; align-items:flex-start; gap:16px; text-decoration:none; transition:transform .25s ease; }
.location-info .loc-item:hover{ transform:translateX(5px); }
.location-info .loc-ic{
    width:48px; height:48px; flex:0 0 48px; border-radius:12px;
    background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
}
.location-info .loc-ic i{ color:var(--accent-dark); font-size:19px; }
.location-info .loc-ic img{ width:22px; height:22px; }
.location-info .loc-item span{ display:flex; flex-direction:column; color:#3a4a54; font-size:14.5px; line-height:1.5; }
.location-info .loc-item span b{ color:var(--primary-color); font-size:16px; margin-bottom:2px; }
.location-map{ height:100%; border-radius:20px; overflow:hidden; box-shadow:0 16px 44px rgba(11,46,79,.10); min-height:440px; }
.location-map iframe{ display:block; height:100%; }

/* ===========================================================
   v3 — visibility fix, FA icon badges, typography, polish
   =========================================================== */

/* no cursor word pop-ups (kept the cursor dot + hover states) */
.cb-cursor-text{ display:none !important; }

/* ---- TYPOGRAPHY: stronger, more legible ---- */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.section-title h2{ color:var(--primary-color); font-weight:800; letter-spacing:-.5px; }
.section-title h3{ font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:14px; }
.about-us-content p, .our-process-content p, .we-provide-content p,
.section-title > p, .booking-wrap p.lead{ color:#46565f; font-size:16.5px; line-height:1.8; }
.service-content p{ color:#5a6b75 !important; }

/* ---- FIX: invisible white checklist text + clean teal ticks ---- */
.about-content-list ul li{ color:#33454f !important; font-weight:600; }
.about-content-list ul li::before{
    content:"\f058" !important;          /* fa circle-check */
    font-family:"Font Awesome 6 Free" !important; font-weight:900 !important;
    background:none !important; box-shadow:none !important;
    color:var(--accent-color) !important;
    width:auto !important; height:auto !important;
    top:2px !important; left:0 !important; font-size:20px;
}
/* two-column checklist on the about page */
.about-content-list--grid ul{ display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; }
@media (max-width:575px){ .about-content-list--grid ul{ grid-template-columns:1fr; } }

/* ---- SERVICE CARDS: clean teal icon badges (FA) ---- */
.our-service .service-item .icon-box{
    width:94px; height:94px; border-radius:24px; margin:0 auto 24px;
    background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
    transition:background .35s ease;
}
.our-service .service-item .icon-box i{ font-size:40px; color:var(--accent-dark); transition:color .35s ease; }
.our-service .service-item:hover .icon-box{ background:var(--accent-color); transform:none; }
.our-service .service-item:hover .icon-box i{ color:#fff; }
.our-service .service-item .service-content h3{ font-size:21px; }
.redmore-btn{ font-weight:700; letter-spacing:.3px; }
.redmore-btn i{ font-size:12px; margin-left:6px; transition:transform .3s ease; }
.service-item:hover .redmore-btn i{ transform:translateX(5px); }

/* ---- STAT ROW: FA icon chips ---- */
.cta-contact-item{ display:flex; align-items:center; gap:16px; justify-content:center; }
.cta-ic{
    width:62px; height:62px; flex:0 0 62px; border-radius:50%;
    background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
}
.cta-ic i{ font-size:26px; color:var(--accent-dark); }
.cta-contact-content h3{ color:var(--primary-color) !important; font-size:30px; line-height:1; margin:0; }
.cta-contact-content p{ color:#5a6b75; font-size:14px; margin:4px 0 0; line-height:1.3; }

/* ---- PROCESS STEPS: FA icon badges ---- */
.our-process-item .icon-box{
    width:66px !important; height:66px !important; min-width:66px; border-radius:18px;
    background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
}
.our-process-item .icon-box i{ font-size:27px; color:var(--accent-dark); }
.our-process-item:hover .icon-box{ background:var(--accent-color); }
.our-process-item:hover .icon-box i{ color:#fff; }

/* ---- doctor profile banners (about): bg per shade ---- */
.doc-profile .doc-banner--light{ background:#eef3f6; }
.doc-profile .doc-banner--dark{ background:linear-gradient(160deg,#11365f,#11365f); }

/* ---- BOOK / CONTACT section ---- */
.contact-book{ padding:110px 0; }
.loc-hours{ display:flex; align-items:center; gap:10px; color:#5a6b75; font-size:14px; font-weight:600; padding-top:14px; margin-top:auto; border-top:1px dashed #dde7ea; }
.loc-hours i{ color:var(--accent-color); }
.contact-book .location-map{ min-height:240px; }
.contact-book .location-map iframe{ min-height:240px; border-radius:14px; }

/* ===========================================================
   v4 — board-blue palette: fix clipping experience badge
   (template locked it to a fixed 175x170 box → text overflowed)
   =========================================================== */
.happy-patients-counter{
    position:absolute; bottom:26px; left:26px;
    width:auto !important; height:auto !important; padding:0 !important;
    background:transparent !important; border:0 !important;
    border-radius:18px !important; overflow:visible !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.happy-patients-counter-box{
    background:#fff !important; border:1px solid #e3eef1 !important;
    border-radius:16px; box-shadow:0 16px 40px rgba(17,54,95,.18);
    padding:16px 22px; display:flex; align-items:center; gap:14px; white-space:nowrap;
}
.happy-patients-counter-box .icon-box{
    width:50px; height:50px; flex:0 0 50px; border-radius:50%;
    background:linear-gradient(135deg,#2f74bf,#11365f);
    display:flex; align-items:center; justify-content:center;
}
.happy-patients-counter-box .icon-box i{ color:#fff; font-size:22px; }
.happy-patients-counter-content h3{ color:var(--primary-color) !important; font-size:26px; line-height:1; margin:0; }
.happy-patients-counter-content p{ color:#5a6b75; font-size:13px; margin:3px 0 0; white-space:nowrap; }
@media (max-width:575px){
    .happy-patients-counter{ bottom:14px; left:14px; }
    .happy-patients-counter-box{ padding:12px 16px; }
    .happy-patients-counter-content h3{ font-size:22px; }
}

/* hospital-clean header: crisp white, subtle divider */
.header-sticky{ box-shadow:0 2px 18px rgba(17,54,95,.06); }

/* ===========================================================
   v5 — premium: pro icons (mask), liquid glass, review marquee,
   redesigned aligned doctor cards, clinic name in hero
   =========================================================== */

/* ---- masked Phosphor icons (inherit brand colour, hover-able) ---- */
.ico{ display:inline-block; background:var(--accent-dark); vertical-align:middle; transition:background .35s ease; }
.our-service .service-item .icon-box .ico{ background:var(--accent-dark); }
.our-service .service-item:hover .icon-box .ico{ background:#fff; }
.cta-ic .ico{ background:var(--accent-dark); }
.our-process-item .icon-box .ico{ background:var(--accent-dark); }
.our-process-item:hover .icon-box .ico{ background:#fff; }
.happy-patients-counter-box .icon-box .ico{ background:#fff; }
.location-info .loc-ic .ico{ background:var(--accent-dark); }
.loc-hours .ico{ background:var(--accent-color); }

/* ---- LIQUID GLASS: frosted header ---- */
.header-sticky{
    background:rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    box-shadow:0 2px 24px rgba(17,54,95,.07);
}

/* ---- HERO: clinic name pill (glass) ---- */
.hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:#fff; padding:9px 18px 9px 10px; border-radius:50px;
    font-size:14px; font-weight:600; letter-spacing:.2px; margin-bottom:24px;
}
.hero-tag-mark{ width:26px; height:26px; border-radius:8px; }

/* ---- SERVICES: gradient bg + glass cards ---- */
.our-service{ background:linear-gradient(180deg,#eaf2fb 0%, #ffffff 55%); }
.our-service .service-item{
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:0 14px 38px rgba(17,54,95,.08);
    border-radius:22px;
}
.our-service .service-item .icon-box{
    background:rgba(47,116,191,.12); border-radius:20px;
    width:88px; height:88px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.our-service .service-item:hover .icon-box{ background:var(--accent-color); }

/* ---- BOOKING + CONTACT: gentle gradient + glass ---- */
.contact-book{ background:linear-gradient(180deg,#ffffff 0%, #eaf2fb 100%); }
.booking-wrap, .location-info{
    background:rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(255,255,255,.85) !important;
    box-shadow:0 18px 50px rgba(17,54,95,.10) !important;
}

/* ===========================================================
   REVIEW MARQUEE — glass cards drifting left → right
   =========================================================== */
.review-marquee{
    overflow:hidden; padding:24px 0 8px; margin-top:46px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.review-track{ display:flex; gap:24px; width:max-content; animation:revscroll 60s linear infinite; will-change:transform; }
.review-marquee:hover .review-track{ animation-play-state:paused; }
@keyframes revscroll{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.rev-card{
    flex:0 0 360px; width:360px; height:auto;
    background:rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
    border:1px solid rgba(255,255,255,.85);
    border-radius:22px; padding:28px 28px 24px;
    box-shadow:0 16px 44px rgba(17,54,95,.10);
}
@media (prefers-reduced-motion: reduce){ .review-track{ animation:none; } }

/* ===========================================================
   DOCTOR CARDS — uniform, aligned, premium (photo top + tags)
   =========================================================== */
.team-section .doctor-card{
    display:flex; flex-direction:column; height:100%;
    background:#fff; border:1px solid #e6eef4; border-radius:24px; overflow:hidden;
    box-shadow:0 12px 34px rgba(17,54,95,.07);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.team-section .doctor-card:hover{ transform:translateY(-8px); box-shadow:0 26px 56px rgba(17,54,95,.15); }
.team-section .doctor-card .doctor-photo{
    width:100% !important; height:380px !important; flex:0 0 380px;
    background:#11365f; display:block; overflow:hidden; position:relative;
}
.team-section .doctor-card .doctor-photo img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    transition:transform .6s ease;
}
.team-section .doctor-card:hover .doctor-photo img{ transform:scale(1.04); }
.team-section .doctor-card .doctor-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 62%, rgba(17,54,95,.22));
}
.team-section .doctor-card .doctor-info{
    padding:30px 32px 32px; text-align:left; flex:1; display:flex; flex-direction:column; align-self:auto;
}
.team-section .doctor-card .doctor-info h3{ font-size:24px; color:var(--primary-color); margin:0 0 3px; }
.team-section .doctor-card .doctor-info .doc-role{ color:var(--accent-color); font-weight:600; font-size:14.5px; display:block; margin-bottom:15px; }
.team-section .doctor-card .doctor-info p{ color:#56666f; font-size:15px; line-height:1.72; margin:0 0 20px; }
.doc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.doc-tag{ background:var(--accent-soft); color:var(--accent-dark); font-size:12.5px; font-weight:700; letter-spacing:.2px; padding:7px 13px; border-radius:50px; }

/* loc icon image (google) sizing */
.location-info .loc-ic--img img{ width:22px; height:22px; }

/* ===========================================================
   v6 — doctor photos far more visible (match portrait ratio)
   source photos are ~3:4 portraits; give the frame a portrait
   aspect so faces show large with almost no crop
   =========================================================== */
.team-section .doctor-card .doctor-photo{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4/5;
    flex:0 0 auto;
    background:#dfe9f2;
}
.team-section .doctor-card .doctor-photo img{
    width:100%; height:100%;
    object-fit:cover; object-position:50% 18%;   /* keep faces in frame */
}
/* lighten the scrim so it doesn't dim the portrait */
.team-section .doctor-card .doctor-photo::after{
    background:linear-gradient(180deg,transparent 75%, rgba(17,54,95,.14));
}
@media (max-width:991px){
    .team-section .doctor-card .doctor-photo{ aspect-ratio:1/1; }
}

/* ===========================================================
   v7 — premium refinement + full mobile optimisation
   =========================================================== */

/* fluid, premium type scale (also handles small screens) */
.hero-content .section-title h1{ font-size:clamp(34px,5.4vw,60px) !important; line-height:1.08; letter-spacing:-1px; }
.page-hero h1{ font-size:clamp(30px,4.6vw,50px); letter-spacing:-.5px; }
.section-title h2{ font-size:clamp(26px,3.1vw,40px) !important; line-height:1.18; }
.hero-content .section-title p{ font-size:clamp(15px,1.5vw,18px); line-height:1.7; }

/* refined buttons */
.btn-default{ padding:15px 32px; border-radius:50px; font-weight:600; letter-spacing:.2px; }

/* richer, premium hero overlay (soft light + deep base) */
.hero.bg-image::before{
    background:
      radial-gradient(110% 80% at 18% 12%, rgba(58,134,212,.30), transparent 55%),
      linear-gradient(180deg, rgba(11,46,79,.55) 0%, rgba(11,46,79,.86) 100%);
}

/* premium trust bar: subtle dividers between items (desktop) */
@media (min-width:768px){
    .trust-bar .tb-item{ position:relative; }
    .trust-bar [class*="col-"]:not(:first-child) .tb-item::before{
        content:""; position:absolute; left:-1px; top:12%; height:76%; width:1px;
        background:rgba(255,255,255,.16);
    }
}

/* consistent generous section rhythm */
.our-service, .we-provide, .our-process, .team-section, .contact-book, .simple-section{ padding-top:104px; padding-bottom:104px; }

/* =======================  MOBILE  ======================= */
@media (max-width:991px){
    .our-service, .we-provide, .our-process, .team-section, .contact-book, .simple-section{ padding-top:70px; padding-bottom:70px; }
    .doctor-card .doctor-info{ padding:26px 24px 28px; }
}
@media (max-width:767px){
    .our-service, .we-provide, .our-process, .team-section, .contact-book, .simple-section, .cta-contact-box{ padding-top:54px; padding-bottom:54px; }
    /* hero CTAs stack full-width */
    .hero-content-body{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
    .hero-content-body .btn-default{ margin-left:0 !important; width:100%; text-align:center; }
    /* stat chips: left-aligned rows, tighter */
    .cta-contact-box .row > [class*="col-"]{ margin-bottom:18px; }
    .cta-contact-item{ justify-content:flex-start; }
    /* trust bar items spacing */
    .trust-bar .tb-item{ margin-bottom:18px; }
    /* services keep 2-up on small tablets, 1-up on phone handled by grid */
    .booking-wrap{ padding:30px 22px; }
    .booking-wrap h3{ font-size:24px; }
    /* review marquee cards fit the screen */
    .rev-card{ flex-basis:82vw; width:82vw; max-width:360px; padding:24px 22px; }
    .review-track{ gap:16px; }
    /* doctor photos square on phones for a tidy crop */
    .team-section .doctor-card .doctor-photo{ aspect-ratio:1/1; }
    /* section sub-headings + spacing */
    .section-row{ margin-bottom:14px; }
    /* contact/book map height */
    .contact-book .location-map iframe{ min-height:220px; }
    /* footer tidy */
    .footer-booking-box .footer-booking-title h2{ font-size:26px; }
    .footer-booking-btn{ text-align:left; margin-top:16px; }
}
@media (max-width:480px){
    .hero-tag{ font-size:12px; padding:8px 14px 8px 8px; }
    .hero-tag-mark{ width:22px; height:22px; }
    .review-track{ animation-duration:42s; }
    .rev-card{ flex-basis:86vw; width:86vw; }
    .our-service .service-item{ padding:34px 22px 30px; min-height:0; }
    .doc-tags{ gap:6px; }
    .trust-bar .tb-item span:first-child{ font-size:26px; }
    .happy-patients-counter{ bottom:12px; left:12px; }
}

/* prevent any horizontal overflow on phones */
html, body{ overflow-x:hidden; }
img, iframe{ max-width:100%; }

/* ===========================================================
   v8 — Book Appointment popup (modal)
   =========================================================== */
.bk-modal{ position:fixed; inset:0; z-index:3000; display:none; }
.bk-modal.is-open{ display:block; }
.bk-modal__overlay{
    position:absolute; inset:0;
    background:rgba(11,30,55,.55);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    animation:bkFade .25s ease;
}
.bk-modal__card{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(560px,92vw); max-height:92vh; overflow:auto;
    background:#fff; border-radius:24px;
    box-shadow:0 30px 90px rgba(11,30,55,.45);
    animation:bkPop .28s cubic-bezier(.2,.8,.2,1);
}
.bk-modal__x{
    position:absolute; top:16px; right:18px; z-index:3;
    width:38px; height:38px; border:0; border-radius:50%;
    background:#eef3f8; color:var(--primary-color); font-size:24px; line-height:1;
    cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.bk-modal__x:hover{ background:var(--accent-soft); transform:rotate(90deg); }
/* the form sits flush inside the modal (neutralise the glass card styling) */
.bk-modal .booking-wrap{
    margin:0 !important; border:0 !important; box-shadow:none !important;
    background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-radius:24px; padding:40px 36px;
}
@keyframes bkFade{ from{opacity:0} to{opacity:1} }
@keyframes bkPop{ from{opacity:0; transform:translate(-50%,-46%) scale(.96)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
@media (max-width:575px){ .bk-modal__card{ width:94vw; } .bk-modal .booking-wrap{ padding:30px 22px; } }
@media (prefers-reduced-motion: reduce){ .bk-modal__overlay,.bk-modal__card{ animation:none; } }

/* ============================ v8 — real clinic media ============================ */
/* hero background video */
.hero.bg-image.hero-video .hero-bg-video{ z-index:0; pointer-events:none; }
/* bias the crop toward the top so the upper part of the walkthrough stays in view */
.hero.bg-image.hero-video .hero-bg-video video{ object-fit:cover; object-position:center top; }
/* lighter, brand-tinted overlay so the clinic shows through but text stays readable */
.hero.bg-image.hero-video::before{
    background:linear-gradient(180deg, rgba(11,46,79,.42) 0%, rgba(11,46,79,.58) 55%, rgba(11,46,79,.78) 100%);
    opacity:1;
}
.hero.bg-image.hero-video .container{ position:relative; z-index:2; }

/* "inside the clinic" gallery */
.clinic-gallery .cg-item{
    position:relative; margin:0 0 26px; border-radius:20px; overflow:hidden;
    box-shadow:0 18px 44px rgba(11,46,79,.12); background:#dfe9ed;
}
.clinic-gallery .cg-item img{
    width:100%; height:320px; object-fit:cover; object-position:center 38%; display:block;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.clinic-gallery .cg-item:hover img{ transform:scale(1.07); }
.clinic-gallery .cg-cap{
    position:absolute; left:0; right:0; bottom:0; margin:0; padding:34px 18px 15px;
    color:#fff; font-weight:700; font-size:14px; letter-spacing:.3px;
    background:linear-gradient(180deg, transparent, rgba(11,46,79,.85));
}
@media (max-width:991px){ .clinic-gallery .cg-item img{ height:300px; } }
@media (max-width:575px){ .clinic-gallery .cg-item img{ height:260px; } }

/* ── Case Study cards ── */
.cs-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(11,46,79,.10);
    margin-bottom: 28px;
    cursor: pointer;
    transition: transform .32s ease, box-shadow .32s ease;
}
.cs-card:hover { transform: translateY(-7px); box-shadow: 0 28px 56px rgba(11,46,79,.18); }
.cs-img { aspect-ratio: 1/1; overflow: hidden; }
.cs-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.cs-card:hover .cs-img img { transform: scale(1.06); }
.cs-body { padding: 18px 20px 20px; }
.cs-type-label {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--primary-color, #2f74bf);
    margin-bottom: 6px;
}
.cs-body h4 { font-size: 16px; font-weight: 700; color: #11365f; margin: 0 0 7px; line-height: 1.3; }
.cs-thumb-desc { font-size: 13px; color: #5a6f84; margin: 0 0 10px; line-height: 1.55; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.cs-tag {
    font-size: 11px; font-weight: 600; color: var(--primary-color, #2f74bf);
    background: rgba(47,116,191,.09); border-radius: 30px; padding: 3px 10px;
}
.cs-more { font-size: 13px; font-weight: 700; color: var(--primary-color, #2f74bf); }
.cs-card:hover .cs-more { text-decoration: underline; }

/* ── Case Study modal ── */
.cs-overlay {
    display: none; position: fixed; inset: 0; background: rgba(8,24,48,.72);
    z-index: 9000; backdrop-filter: blur(4px);
}
.cs-overlay.on { display: block; }
.cs-modal {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.94);
    z-index: 9001; width: min(960px, 94vw); max-height: 90vh;
    background: #fff; border-radius: 24px; overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.35);
    display: grid; grid-template-columns: 1fr 1fr; opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.cs-modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); display: grid; }
.cs-modal__img-wrap { overflow: hidden; }
.cs-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-modal__content {
    padding: 36px 32px 32px; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
}
.cs-modal__x {
    position: absolute; top: 14px; right: 16px; z-index: 10;
    background: rgba(0,0,0,.18); border: none; border-radius: 50%;
    width: 34px; height: 34px; font-size: 20px; line-height: 1; color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.cs-modal__x:hover { background: rgba(0,0,0,.42); }
.cs-modal__type { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--primary-color, #2f74bf); margin-bottom: 8px; }
.cs-modal__title { font-size: 22px; font-weight: 800; color: #11365f; margin: 0 0 14px; line-height: 1.3; }
.cs-modal__writeup { font-size: 14px; line-height: 1.7; color: #445566; margin: 0 0 16px; }
.cs-modal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
@media (max-width: 767px) {
    .cs-modal { grid-template-columns: 1fr; max-height: 88vh; width: 92vw; }
    .cs-modal__img-wrap { max-height: 240px; }
    .cs-modal__content { padding: 22px 20px 24px; }
    .cs-modal__title { font-size: 18px; }
    .cs-card { margin-bottom: 16px; }
    .cs-body h4 { font-size: 14px; }
}


/* ── v9 Mobile & Tablet Polish ── */

/* inner-page hero padding */
@media (max-width:991px){
    .page-hero{ padding:90px 0 60px; }
    .page-hero p{ font-size:15px; }
    /* process: let columns stack naturally, add gap */
    .our-process .our-process-list{ margin-top:32px; }
}

@media (max-width:767px){
    /* inner-page hero */
    .page-hero{ padding:70px 0 40px; }
    .page-hero h1{ font-size:clamp(24px,6.5vw,36px) !important; }
    .page-hero p{ font-size:14px; }

    /* hero video: bump position to show signage */
    .hero.bg-image.hero-video{ background-position:center 8% !important; }
    .hero.bg-image.hero-video .hero-bg-video video{ object-fit:cover; object-position:center top; }

    /* location section */
    .contact-book .location-map{ margin-top:26px; }
    .location-map, .location-map iframe{ min-height:240px !important; }
    .loc-item{ font-size:14px; }
    .loc-hours{ font-size:13px; flex-wrap:wrap; }
    .location-info .btn-default{ width:100%; text-align:center; margin-top:8px; }

    /* process steps */
    .our-process-item{ gap:14px; margin-bottom:4px; }
    .our-process-item h3{ font-size:16px; }
    .our-process-item p{ font-size:13.5px; }

    /* footer */
    .footer-links h3{ font-size:16px; margin-bottom:10px; }
    .footer-links ul li a{ font-size:13px; }
    .about-footer-content p{ font-size:13.5px; line-height:1.6; }
    .footer-copyright-text p{ font-size:12px; text-align:center; }
    .footer-social-links ul{ gap:10px; }

    /* love chips */
    .love-chip{ font-size:12.5px; padding:8px 13px; }

    /* floating action buttons */
    .float, .float2{ width:50px; height:50px; font-size:18px; }

    /* booking form */
    .booking-form label{ font-size:13.5px; }
    .booking-form .form-control{ font-size:14px; }
    .booking-note{ font-size:12px; }
    .bk-modal .booking-wrap .btn-default{ width:100%; text-align:center; }

    /* section body text */
    .section-title > p{ font-size:15px; }

    /* gallery captions */
    .cg-cap{ font-size:13px; }

    /* trust bar */
    .trust-bar .tb-item{ padding:10px 8px; }

    /* case study modal CTA */
    .cs-modal__content .btn-default{ width:100%; text-align:center; }

    /* doctor card spacing */
    .doctor-card{ margin-bottom:24px; }
}

@media (max-width:575px){
    /* hero breathing room */
    .hero{ min-height:100svh; }

    /* hero Google badge */
    .hero-google{ font-size:12px; gap:6px; }
    .hg-score{ font-size:18px; }
    .hg-sub{ font-size:11px; }

    /* CTA stats */
    .cta-contact-item h3{ font-size:26px; }
    .cta-contact-item p{ font-size:12.5px; }

    /* services grid: single column */
    .our-service .col-md-6{ flex:0 0 100%; max-width:100%; }
    .service-content h3{ font-size:17px; }
    .service-content p{ font-size:13.5px; }

    /* footer link columns: full width on small phones */
    .main-footer .col-6{ flex:0 0 100%; max-width:100%; }
    .footer-links{ margin-bottom:24px; }

    /* review cards */
    .rc-text{ font-size:13px; line-height:1.55; }
    .rc-name{ font-size:14px; }
    .rc-tag{ font-size:11px; }

    /* about checklist */
    .about-content-list ul li{ font-size:14px; }

    /* doctor info */
    .doctor-info h3{ font-size:20px; }
    .doctor-info .doc-role{ font-size:13px; }
    .doctor-info p{ font-size:13.5px; }

    /* process content: center on mobile */
    .our-process .our-process-content{ text-align:center; }
    .section-btn{ text-align:center; margin-top:20px; }

    /* case study cards */
    .cs-body h4{ font-size:14px; }
    .cs-thumb-desc{ font-size:12.5px; }
}

@media (max-width:480px){
    /* section headings */
    .section-title h2{ font-size:clamp(21px,7vw,29px) !important; }

    /* hero tag overflow */
    .hero-tag{ max-width:88vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* crumb breadcrumb */
    .page-hero .crumb{ font-size:12px; }

    /* booking form submit: full width */
    .booking-form button[type="submit"]{ width:100%; }

    /* footer link text smaller */
    .footer-links ul li a{ font-size:12.5px; }

    /* trust bar numbers */
    .trust-bar .tb-item span:first-child{ font-size:24px; }
}