*{margin:0;padding:0;box-sizing:border-box}:root{--primary:#00AFC0;--secondary:#333333;--white:#FFFFFF;--light-gray:#F8F9FA;--dark-gray:#333333;--gold:#00AFC0;--light-gold:#FFC107;--shadow:0 10px 30px rgba(0,0,0,0.1);--shadow-light:0 5px 15px rgba(0,0,0,0.08);--shadow-medium:0 10px 30px rgba(0,0,0,0.15);--primary-gradient:linear-gradient(135deg,#00AFC0,#008F9C);--secondary-gradient:linear-gradient(135deg,#333333,#2C2C2C);--gold-gradient:linear-gradient(135deg,#00AFC0,#FFC107)}body{font-family:'Inter',sans-serif;line-height:1.6;color:var(--text-dark)}.social-sidebar{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:999;display:flex;flex-direction:column;gap:15px;padding:20px 10px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:50px;box-shadow:0 5px 20px rgba(0,0,0,0.1);transition:all 0.3s ease}.social-icon{width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.3s ease;text-decoration:none;font-size:20px;color:var(--dark-gray)}.social-icon:hover{transform:scale(1.15);box-shadow:0 5px 15px rgba(0,175,192,0.3)}.social-icon.instagram{color:#E4405F}.social-icon.instagram:hover{background:rgba(228,64,95,0.1)}.social-icon.facebook{color:#1877F2}.social-icon.facebook:hover{background:rgba(24,119,242,0.1)}.social-icon.google{color:#4285F4}.social-icon.google:hover{background:rgba(66,133,244,0.1)}.social-icon.whatsapp{color:#25D366}.social-icon.whatsapp:hover{background:rgba(37,211,102,0.1)}@media (max-width:768px){.social-sidebar{left:10px;gap:10px;padding:15px 8px}.social-icon{width:40px;height:40px;font-size:18px}}.navbar{position:fixed;top:0;width:100%;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);z-index:1000;padding:1rem 0;transition:all 0.3s ease}.nav-container{max-width:1450px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem}.nav-logo h2{font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--primary);font-size:1.8rem;font-weight:600}.nav-logo img{height:38px !important;height:48px;width:auto;display:block;background:transparent}.nav-menu{display:flex;list-style:none;gap:3rem}.nav-menu a{text-decoration:none;color:var(--text-dark);font-weight:500;transition:all 0.3s ease;position:relative}.nav-menu a:hover,.nav-menu a.active{color:var(--primary)}.nav-menu a.active::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:2px;background:var(--primary-gradient);border-radius:2px}.btn-primary{background:var(--primary-gradient);color:var(--white);padding:0.75rem 1.5rem;border-radius:50px;text-decoration:none;font-weight:600;transition:all 0.3s ease;box-shadow:var(--shadow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.branches-hero-section{position:relative;overflow:hidden}.branches-hero-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:0.3}.hero-container{max-width:1400px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:2}.hero-content{animation:slideInLeft 1s ease-out}.hero-title{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:3.5rem;font-weight:700;color:var(--white);margin-bottom:1rem;line-height:1.2}.gold-underline{width:80px;height:4px;background:var(--gold-gradient);margin:1rem 0 2rem 0;border-radius:2px}.hero-subtitle{font-size:1.25rem;color:rgba(255,255,255,0.9);margin-bottom:1.5rem;line-height:1.6}.hero-description{font-size:1.1rem;color:rgba(255,255,255,0.8);margin-bottom:2rem;line-height:1.7}.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}.btn-gold{background:var(--gold-gradient);color:var(--secondary);padding:1rem 2rem;border-radius:50px;text-decoration:none;font-weight:600;transition:all 0.3s ease;box-shadow:var(--shadow)}.btn-navy{background:rgba(255,255,255,0.2);color:var(--white);padding:1rem 2rem;border-radius:50px;text-decoration:none;font-weight:600;transition:all 0.3s ease;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3)}.btn-gold:hover,.btn-navy:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.hero-image{position:relative;animation:slideInRight 1s ease-out}.hero-image img{width:100%;height:450px;object-fit:cover;border-radius:20px;box-shadow:0 25px 50px rgba(0,0,0,0.3)}.section-image img{width:100%;height:500px;object-fit:cover;border-radius:15px;box-shadow:0 15px 40px rgba(0,0,0,0.2)}.sparkle-particles{display:none !important}.about-branches-section{padding:4rem 0;background:var(--white)}.container{max-width:1400px;margin:0 auto;padding:0 1rem}.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.section-content h2{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:2.5rem;color:var(--secondary);margin-bottom:1rem}.gold-divider{width:60px;height:3px;background:var(--gold-gradient);margin-bottom:2rem;border-radius:2px}.section-content p{font-size:1.1rem;color:#666;margin-bottom:1.5rem;line-height:1.8}.branch-section{padding:4rem 0;position:relative}.branch-jaipur{background:var(--primary-gradient);color:var(--white)}.branch-sikar{background:var(--primary);color:var(--white)}.branch-header{text-align:center;margin-bottom:60px}.branch-header h2{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:48px;margin-bottom:20px}.branch-subtitle{font-size:18px;opacity:0.9;max-width:600px;margin:0 auto}.branch-content-grid{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:start}.branch-info-card{background:rgba(255,255,255,0.15);padding:2rem;border-radius:20px;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2)}.branch-icon{font-size:3rem;margin-bottom:1rem}.branch-info-card h3{font-size:1.5rem;margin-bottom:1.5rem}.contact-details p{margin-bottom:1rem;line-height:1.6}.contact-details a{color:var(--white);text-decoration:none;font-weight:600}.branch-description h3{font-size:1.8rem;margin-bottom:1.5rem}.branch-description p{font-size:1.1rem;line-height:1.8;margin-bottom:1.5rem;opacity:0.9}.services-overview-section{padding:4rem 0;background:var(--light-gray)}.section-header{text-align:center;margin-bottom:60px}.section-header h2{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:42px;color:var(--secondary);margin-bottom:20px}.section-header p{font-size:18px;color:#666;max-width:600px;margin:0 auto}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem}.service-category{background:var(--white);padding:2.5rem;border-radius:20px;box-shadow:var(--shadow-light);transition:all 0.3s ease}.service-category:hover{transform:translateY(-10px);box-shadow:var(--shadow-medium)}.service-category h3{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:1.5rem;color:var(--primary);margin-bottom:1.5rem;text-align:center}.service-category ul{list-style:none}.service-category li{padding:0.5rem 0;border-bottom:1px solid #eee}.service-category li:last-child{border-bottom:none}.service-category a{color:var(--secondary);text-decoration:none;transition:color 0.3s ease}.service-category a:hover{color:var(--primary)}.why-choose-branches-section{padding:4rem 0;background:var(--white)}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.benefit-card{text-align:center;padding:2rem;border-radius:15px;transition:all 0.3s ease;background:var(--white);box-shadow:var(--shadow-light)}.benefit-icon{font-size:2.6rem;margin-bottom:1.2rem;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;background:rgba(0, 175, 192,0.08);border-radius:50%}.branch-icon{font-size:2.4rem;margin-bottom:1rem;color:#00AFC0}.benefit-card h3{font-size:1.3rem;color:var(--secondary);margin-bottom:1rem}.benefit-card p{color:#666;line-height:1.6}.contact-branches-section{padding:4rem 0;background:var(--light-gray)}.contact-branches-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.contact-branch-card{background:var(--white);padding:2rem;border-radius:15px;box-shadow:var(--shadow-light);text-align:center;transition:all 0.3s ease}.contact-branch-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-medium)}.contact-branch-card h3{font-size:1.5rem;color:var(--primary);margin-bottom:1rem}.contact-branch-card p{color:#666;margin-bottom:0.5rem}.contact-branch-card a{color:var(--primary);text-decoration:none;font-weight:600}.whatsapp-btn{display:inline-block;background:#25D366;color:var(--white);padding:0.75rem 1.5rem;border-radius:50px;text-decoration:none;font-weight:600;margin-top:1rem;transition:all 0.3s ease}.whatsapp-btn:hover{background:#128C7E;transform:translateY(-2px)}.final-cta-section{padding:4rem 0;background:var(--primary-gradient);color:var(--white);text-align:center}.final-cta-section h2{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:2.5rem;margin-bottom:1rem}.final-cta-section p{font-size:1.2rem;margin-bottom:2rem;opacity:0.9}.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.footer{background:var(--secondary);color:var(--white);padding:60px 0 20px}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px}.footer-column h3,.footer-column .footer-nav-title{color:var(--primary);font-size:24px;margin-bottom:20px}.footer-column p{line-height:1.6;margin-bottom:10px}.footer-column ul{list-style:none}.footer-column ul li{margin-bottom:8px}.footer-column ul li a{color:var(--white);text-decoration:none;transition:color 0.3s ease}.footer-column ul li a:hover{color:var(--primary)}.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(0, 175, 192,0.3)}@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-20px)}}@media (max-width:480px){.container{padding:0 1rem}.hero-title{font-size:1.8rem}.section-header h2{font-size:1.8rem}.final-cta-section h2{font-size:1.8rem}.branch-header h2{font-size:1.8rem}.service-category{padding:1.5rem}.benefit-card{padding:1.5rem}.contact-branch-card{padding:1.5rem}}.hamburger{display:none;flex-direction:column;cursor:pointer;gap:5px}.hamburger span{width:25px;height:3px;background:var(--secondary);transition:all 0.3s ease}@media (max-width:1024px){.hamburger{display:flex}.nav-menu{position:fixed;left:-100%;top:70px;flex-direction:column;background:white;width:100%;text-align:center;transition:left 0.3s ease;box-shadow:0 10px 27px rgba(0,0,0,0.1);padding:20px 0;z-index:999}.nav-menu.active{left:0}.nav-menu li{margin:15px 0}.nav-cta{display:none}.container{padding:0 1rem}.branches-hero-section{margin-top:5rem}.branch-section{padding:3rem 0}.about-branches-section,.services-overview-section,.why-choose-branches-section,.contact-branches-section,.final-cta-section{padding:3rem 0}.hero-container{grid-template-columns:1fr;gap:2rem;text-align:center}.hero-title{font-size:2.5rem}.hero-image img{height:300px}.section-image img{height:350px}.section-grid{grid-template-columns:1fr;gap:2rem}.branch-content-grid{grid-template-columns:1fr;gap:2rem}.hero-ctas{flex-direction:column;align-items:center;gap:1rem}.cta-buttons{flex-direction:column;align-items:center;gap:1rem}.btn-gold,.btn-navy{width:100%;max-width:300px;text-align:center;padding:1rem 2rem}.services-grid{grid-template-columns:1fr;gap:2rem}.benefits-grid{grid-template-columns:1fr;gap:1.5rem}.contact-branches-grid{grid-template-columns:1fr;gap:1.5rem}.branch-header h2{font-size:2rem}.section-header h2{font-size:2rem}}.nav-scanner-link{color:#00AFC0 !important;font-weight:600 !important;background:rgba(0,175,192,0.08);border:1px solid rgba(0,175,192,0.2);border-radius:6px;padding:4px 10px !important}@media (min-width:1025px){.nav-container{max-width:1400px !important;padding:0 14px !important;gap:10px !important}.nav-logo img{height:36px !important}.nav-menu{gap:1px !important;flex-wrap:nowrap !important;align-items:center !important}.nav-menu a{font-size:0.78rem !important;padding:4px 7px !important;white-space:nowrap !important;font-weight:500 !important}.nav-menu a.active{color:var(--primary,#006d77) !important}.nav-cta .btn-primary,.btn-primary{padding:7px 14px !important;font-size:0.78rem !important;white-space:nowrap !important;flex-shrink:0 !important}.nav-scanner-link{font-size:0.76rem !important;padding:3px 7px !important}}.branch-map-btn{display:inline-flex;align-items:center;gap:8px;background:#00AFC0;color:#ffffff !important;padding:8px 16px;border-radius:20px;font-size:0.82rem;font-weight:600;text-decoration:none !important;margin-top:8px;transition:all 0.25s ease}.branch-map-btn:hover{background:#008f9c;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,175,192,0.35)}.footer-column .footer-nav-title,p.footer-nav-title{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:1.2rem;font-weight:600;margin-bottom:1.5rem;color:var(--primary-gold,#00AFC0);letter-spacing:0.02em}p.item-heading{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;color:inherit;line-height:1.4}p.cta-subtext{font-family:'Inter',sans-serif;font-size:0.95rem;font-weight:500;margin-top:0.75rem;opacity:0.9}p.section-subhead{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:1.15rem;font-weight:600;margin-bottom:0.75rem;color:inherit}

/* ═══════════════════════════════════════════════════════════════
   KEZZA CLINIC — BRANCHES & FRANCHISE LUXURY STYLESHEET
   Unified Developer-Grade Architecture & Medical Luxury Tokens
   ═══════════════════════════════════════════════════════════════ */

:root {
    --primary: #00AFC0;
    --primary-dark: #008f9c;
    --primary-deep: #006d77;
    --primary-light: #e6f8fa;
    --primary-subtle: rgba(0, 175, 192, 0.08);
    --primary-gradient: linear-gradient(135deg, #00AFC0 0%, #008f9c 100%);
    --teal-gradient: linear-gradient(135deg, #00AFC0 0%, #00d2e0 100%);
    --teal-glow: rgba(0, 175, 192, 0.22);
    
    --secondary: #0f172a;
    --secondary-light: #1e293b;
    --text-dark: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    
    --white: #ffffff;
    --surface-offwhite: #f8fafc;
    --surface-card: #ffffff;
    --border-light: rgba(226, 232, 240, 0.8);
    --border-primary: rgba(0, 175, 192, 0.2);
    
    --gold: #e5a93c;
    --gold-light: #fef3c7;
    --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #0096a6 100%);
    
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 20px 35px -10px rgba(15, 23, 42, 0.12), 0 0 20px rgba(0, 175, 192, 0.06);
    --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 0 30px rgba(0, 175, 192, 0.12);
    
    --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-body);
    background-color: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Global Kicker Badge ─────────────────────────────────────── */
.section-kicker-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 175, 192, 0.09);
    border: 1px solid rgba(0, 175, 192, 0.25);
    color: var(--primary-deep);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 14px;
}

.section-kicker-badge i {
    font-size: 0.8rem;
    color: var(--primary);
}

.section-heading-wrapper {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 54px;
}

.section-heading-wrapper.text-left {
    text-align: left;
    margin-left: 0;
}

.section-main-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}

.section-sub-title {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.hero-teal-gradient {
    background: var(--teal-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 1: HERO BANNER — OPEN DEVELOPER ARCHITECTURE
   ═══════════════════════════════════════════════════════════════ */
.branches-hero-section {
    position: relative;
    min-height: auto;
    display: block;
    margin-top: 0;
    padding: 80px 0 40px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    overflow: hidden;
}

.hero-ambient-aura {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(120px);
}

.hero-ambient-aura.aura-left {
    top: -150px;
    left: -150px;
    background: radial-gradient(circle, rgba(0, 175, 192, 0.16) 0%, rgba(0, 175, 192, 0) 70%);
}

.hero-ambient-aura.aura-right {
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(229, 169, 60, 0.12) 0%, rgba(0, 175, 192, 0.08) 40%, transparent 70%);
}

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

/* ── Hero Editorial Column ── */
.hero-editorial-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-kicker-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(0, 175, 192, 0.1);
    border: 1px solid rgba(0, 175, 192, 0.28);
    color: var(--primary-deep);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 175, 192, 0.1);
}

.hero-beacon-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00AFC0;
    box-shadow: 0 0 0 0 rgba(0, 175, 192, 0.7);
    animation: beaconPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    flex-shrink: 0;
}

@keyframes beaconPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 175, 192, 0.7);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(0, 175, 192, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 175, 192, 0);
    }
}

.hero-main-heading {
    font-family: var(--font-main);
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}

.hero-lead-narrative {
    font-size: 1.08rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 620px;
}

/* ── Minimalist Metrics Strip ── */
.hero-metrics-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px 22px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.hero-metric-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hmi-number {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
}

.hmi-unit, .hmi-plus {
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.hmi-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-metric-sep {
    width: 1px;
    height: 32px;
    background: var(--border-light);
}

/* ── Action Buttons Suite ── */
.hero-cta-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-gradient);
    color: var(--white) !important;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(0, 175, 192, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 175, 192, 0.45);
}

.hero-btn-primary .hero-btn-arrow {
    transition: transform 0.25s ease;
}

.hero-btn-primary:hover .hero-btn-arrow {
    transform: translateX(4px);
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--white);
    color: var(--secondary) !important;
    border: 1.5px solid var(--border-light);
    padding: 13px 24px;
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-sm);
}

.hero-btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hero-btn-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--text-dark) !important;
    padding: 12px 20px;
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none !important;
    border: 1px dashed var(--border-primary);
    transition: all 0.25s ease;
}

.hero-btn-call:hover {
    background: var(--primary-subtle);
    border-style: solid;
    color: var(--primary-deep) !important;
}

/* ── Hero Visual Showcase (Right Col) ── */
.hero-visual-col {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-visual-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
}

.hero-photo-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 3px solid rgba(255, 255, 255, 0.9);
    background: #0f172a;
    aspect-ratio: 3 / 4;
    max-height: 640px;
}

.hero-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual-wrapper:hover .hero-photo-frame img {
    transform: scale(1.03);
}

/* Floating status pill (top) */
.hero-photo-tag-flagship {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.pulse-emerald-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: emeraldPulse 2s infinite;
}

@keyframes emeraldPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.flagship-tag-text strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.flagship-tag-text span {
    font-size: 0.68rem;
    color: #94a3b8;
}

/* Floating trust badge (bottom) */
.hero-photo-tag-doctors {
    position: absolute;
    bottom: -18px;
    right: 20px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 175, 192, 0.25);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 320px;
}

.doctors-tag-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--primary-subtle);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.doctors-tag-info strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--secondary);
    line-height: 1.2;
}

.doctors-tag-info span {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 2: ABOUT KEZZA CLINIC — LUXURY EDITORIAL SHOWCASE
   (Completely redesigning the user's screenshot section)
   ═══════════════════════════════════════════════════════════════ */
.about-branches-section {
    position: relative;
    padding: 35px 0 75px;
    background: var(--white);
}

.about-editorial-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 54px;
    align-items: center;
}

.about-narrative-lead {
    font-size: 1.14rem;
    font-weight: 500;
    color: var(--secondary);
    line-height: 1.75;
    margin-bottom: 24px;
}

.about-narrative-sub {
    font-size: 0.98rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 34px;
}

/* ── 3 Pillar Feature Cards ── */
.about-pillars-suite {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-pillar-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 22px;
    background: var(--surface-offwhite);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.about-pillar-card:hover {
    background: var(--white);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.pillar-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-gradient);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 175, 192, 0.25);
}

.pillar-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 4px;
}

.pillar-content p {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── About Visual Presentation (Right Col) ── */
.about-visual-showcase {
    position: relative;
}

.about-photo-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 3px solid var(--white);
}

.about-photo-card img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-photo-card:hover img {
    transform: scale(1.02);
}

.about-floating-heritage {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--secondary);
    color: var(--white);
    border-radius: var(--radius-md);
    padding: 16px 22px;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 5;
}

.heritage-icon {
    font-size: 2rem;
    color: var(--gold);
}

.heritage-stats strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1.1;
}

.heritage-stats span {
    font-size: 0.74rem;
    color: #cbd5e1;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3: 3 CENTERS OF EXCELLENCE SHOWCASE (Jaipur, Sikar, Ajmer)
   ═══════════════════════════════════════════════════════════════ */
.centers-showcase-section {
    padding: 70px 0;
    background: var(--surface-offwhite);
    position: relative;
}

.center-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.center-luxury-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.center-luxury-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--border-primary);
}

.center-card-media {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: var(--secondary);
}

.center-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.center-luxury-card:hover .center-card-media img {
    transform: scale(1.06);
}

.center-status-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.center-status-badge.highlight {
    background: var(--primary-gradient);
    border: none;
}

.center-card-body {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.center-city-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.center-type-label {
    font-size: 0.72rem;
    color: var(--primary-deep);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary-subtle);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.center-address-row {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.center-address-row i {
    color: var(--primary);
    font-size: 0.95rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ── Specialist Info Block (Ajmer & Flagship) ── */
.center-specialists-capsule {
    background: var(--surface-offwhite);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 18px;
}

.csc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-deep);
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.csc-doctor-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 2px;
}

.csc-doctor-role {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.csc-doctor-role + .csc-doctor-name {
    margin-top: 8px;
}

/* ── Center Features Chips ── */
.center-features-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
}

.cf-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-body);
    background: #f1f5f9;
    padding: 4px 9px;
    border-radius: 6px;
}

/* ── Center Action Suite ── */
.center-card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.center-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-gradient);
    color: var(--white) !important;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 175, 192, 0.25);
}

.center-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 175, 192, 0.35);
}

.center-cta-secondary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.center-cta-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #25D366;
    color: var(--white) !important;
    padding: 9px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.center-cta-wa:hover {
    background: #1eb956;
}

.center-cta-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--white);
    color: var(--primary-deep) !important;
    border: 1px solid var(--border-primary);
    padding: 9px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.center-cta-map:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4: FRANCHISE MODEL & 4 PILLARS (White Luxury Aesthetic)
   ═══════════════════════════════════════════════════════════════ */
.franchise-model-section {
    padding: 70px 0;
    background: #ffffff;
    color: var(--secondary);
    position: relative;
    overflow: hidden;
}

.franchise-model-section::before {
    content: '';
    position: absolute;
    width: 650px;
    height: 650px;
    top: -220px;
    right: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 175, 192, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.franchise-model-section::after {
    content: '';
    position: absolute;
    width: 550px;
    height: 550px;
    bottom: -180px;
    left: -150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 175, 192, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.franchise-model-section .section-main-title {
    color: var(--secondary);
}

.franchise-model-section .section-sub-title {
    color: var(--text-muted);
}

.franchise-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.franchise-pillar-item {
    background: #ffffff;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.franchise-pillar-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #00AFC0, #00d2e0);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.franchise-pillar-item:hover {
    transform: translateY(-6px);
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 20px 45px rgba(0, 175, 192, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.franchise-pillar-item:hover::before {
    opacity: 1;
}

.fpi-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 175, 192, 0.12), rgba(0, 196, 214, 0.06));
    border: 1px solid rgba(0, 175, 192, 0.22);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.franchise-pillar-item:hover .fpi-icon {
    background: var(--primary-gradient);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 175, 192, 0.3);
}

.franchise-pillar-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 12px;
    line-height: 1.35;
}

.franchise-pillar-item p {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.65;
    margin: 0;
}

/* ── 4-Step Fast Track Roadmap ── */
.franchise-roadmap-box {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 44px 38px 36px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    position: relative;
    z-index: 2;
}

.roadmap-header {
    text-align: center;
    margin-bottom: 34px;
}

.roadmap-header h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: -0.02em;
}

.roadmap-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.roadmap-step-card {
    position: relative;
    padding: 26px 20px;
    background: #ffffff;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.roadmap-step-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 12px 28px rgba(0, 175, 192, 0.1);
}

.step-number-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    color: #946808;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.roadmap-step-card h4 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.roadmap-step-card p {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.roadmap-cta-row {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.roadmap-cta-text strong {
    display: block;
    font-size: 1.05rem;
    color: var(--secondary);
    font-weight: 700;
    margin-bottom: 4px;
}

.roadmap-cta-text span {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.roadmap-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-franchise-apply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff !important;
    padding: 11px 22px;
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    transition: all 0.25s ease;
}

.btn-franchise-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
}

.btn-franchise-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--secondary) !important;
    border: 1.5px solid var(--border-light);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.btn-franchise-call:hover {
    border-color: var(--primary);
    color: var(--primary) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 5: SERVICES ACROSS ALL BRANCHES
   ═══════════════════════════════════════════════════════════════ */
.services-overview-section {
    padding: 70px 0;
    background: var(--white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-category {
    background: var(--surface-offwhite);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-category:hover {
    background: var(--white);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-primary);
}

.sc-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.sc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary-subtle);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sc-header-row h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--secondary);
    margin: 0;
}

.service-category ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.service-category li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--white);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 8px;
    color: var(--secondary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.service-category li a:hover {
    background: var(--primary-light);
    color: var(--primary-deep);
    border-color: var(--primary);
    transform: translateX(3px);
}

.service-category li a i {
    font-size: 0.75rem;
    color: var(--primary);
}

.sc-category-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.sc-category-link:hover {
    gap: 12px;
    color: var(--primary-dark);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 6: WHY CHOOSE KEZZA (BENEFITS BENTO)
   ═══════════════════════════════════════════════════════════════ */
.why-choose-branches-section {
    padding: 70px 0;
    background: var(--surface-offwhite);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.benefit-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 30px 24px;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-primary);
}

.benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-subtle);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 18px;
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    background: var(--primary-gradient);
    color: var(--white);
    transform: scale(1.08);
}

.benefit-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 10px;
}

.benefit-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 7: QUICK BRANCH CONTACT & FINAL CTA
   ═══════════════════════════════════════════════════════════════ */
.contact-branches-section {
    padding: 70px 0;
    background: var(--white);
}

.contact-branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.contact-branch-card {
    background: var(--surface-offwhite);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.contact-branch-card:hover {
    background: var(--white);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-primary);
    transform: translateY(-3px);
}

.contact-branch-card .section-subhead {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.contact-branch-card p {
    font-size: 0.88rem;
    color: var(--text-body);
    margin-bottom: 12px;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.contact-branch-card p i {
    color: var(--primary);
    font-size: 0.95rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.contact-branch-card a {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.contact-branch-card a:hover {
    color: var(--primary);
}

.contact-branch-card .whatsapp-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: var(--white) !important;
    padding: 12px 18px;
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: all 0.25s ease;
}

.contact-branch-card .whatsapp-btn:hover {
    background: #1eb956;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

/* ── Final High-Conversion CTA Banner ── */
.final-cta-section {
    padding: 48px 0 52px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
}

.final-cta-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 175, 192, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
}

.final-cta-section h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.25rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.final-cta-section p {
    font-size: 0.96rem;
    color: #cbd5e1;
    margin-bottom: 24px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--gold-gradient);
    color: var(--secondary) !important;
    padding: 14px 30px;
    border-radius: var(--radius-full);
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.35);
    transition: all 0.3s ease;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(245, 158, 11, 0.45);
}

.btn-navy {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 13px 26px;
    border-radius: var(--radius-full);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.btn-navy:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--white);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN (1024px, 768px, 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .hero-editorial-col {
        align-items: center;
    }
    .hero-lead-narrative {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-metrics-strip {
        justify-content: center;
    }
    .hero-cta-actions {
        justify-content: center;
    }
    .about-editorial-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-photo-card img {
        height: 380px;
    }
    .about-floating-heritage {
        left: 20px;
        bottom: -15px;
    }
    .center-cards-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
    .franchise-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .roadmap-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-branches-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .branches-hero-section {
        padding: 80px 0 50px;
    }
    .hero-main-heading {
        font-size: 2rem;
    }
    .hero-metrics-strip {
        gap: 12px;
        padding: 12px 16px;
    }
    .hero-photo-frame img {
        height: 340px;
    }
    .hero-photo-tag-doctors {
        position: static;
        margin-top: 14px;
        width: 100%;
        max-width: 100%;
    }
    .hero-kicker-badge {
        font-size: 0.68rem;
        padding: 5px 12px;
    }
    .franchise-pillars-grid {
        grid-template-columns: 1fr;
    }
    .roadmap-steps-grid {
        grid-template-columns: 1fr;
    }
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    .franchise-roadmap-box {
        padding: 30px 20px 26px;
    }
    .roadmap-cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .roadmap-cta-actions {
        width: 100%;
        flex-direction: column;
    }
    .btn-franchise-apply,
    .btn-franchise-call {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    .hero-cta-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-btn-primary, .hero-btn-secondary, .hero-btn-call {
        width: 100%;
        justify-content: center;
    }
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    .btn-gold, .btn-navy {
        width: 100%;
        justify-content: center;
    }
    .hero-photo-frame img {
        height: 280px;
    }
    .about-photo-card img {
        height: 300px;
    }
}


/* ── Global Container Clearance for Fixed Social Sidebar ── */
@media (min-width: 1025px) {
    .branches-hero-section .hero-container,
    .about-branches-section .container,
    .centers-showcase-section .container,
    .franchise-model-section .container,
    .services-overview-section .container,
    .why-choose-branches-section .container,
    .contact-branches-section .container,
    .final-cta-section .container {
        padding-left: 80px !important;
        padding-right: 36px !important;
    }
}

@media (max-width: 768px) {
    .about-branches-section .container,
    .centers-showcase-section .container,
    .franchise-model-section .container,
    .services-overview-section .container,
    .why-choose-branches-section .container,
    .contact-branches-section .container {
        padding-left: 66px !important;
        padding-right: 18px !important;
    }
    .hero-container {
        padding-left: 66px !important;
        padding-right: 18px !important;
    }
}

/* css/quick-actions.css */
@media (min-width: 1025px) {
    .nav-cta {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
}

.btn-nav-call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 175, 192, 0.35) !important;
    border-radius: 25px !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 2px 8px rgba(0, 175, 192, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-nav-call i {
    color: #00AFC0 !important;
    font-size: 0.82rem !important;
    transition: transform 0.3s ease !important;
}

.btn-nav-call:hover {
    background: rgba(0, 175, 192, 0.08) !important;
    color: #008F9C !important;
    border-color: #00AFC0 !important;
    box-shadow: 0 4px 14px rgba(0, 175, 192, 0.22) !important;
    transform: translateY(-2px) scale(1.03) !important;
}

.btn-nav-call:hover i {
    color: #008F9C !important;
    animation: phoneWiggle 0.6s ease infinite !important;
}

/* ═════════════════════════════════════════════════════════════════════
   SOCIAL SIDEBAR (Left screen, vertically centred) — Dark Luxury Theme
   ═════════════════════════════════════════════════════════════════════ */
.social-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) translateZ(0) !important;
    z-index: 990 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
}

.social-sidebar:hover {
    transform: translateY(-50%) scale(1.02) !important;
}

.social-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    text-decoration: none !important;
    font-size: 18px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.social-icon:hover {
    transform: scale(1.25) translateX(4px) !important;
    width: 50px !important;
}

.social-icon.instagram {
    background: #E1306C !important;
    color: #ffffff !important;
}

.social-icon.instagram:hover {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(220, 39, 67, 0.45) !important;
}

.social-icon.facebook {
    background: #1877F2 !important;
    color: #ffffff !important;
}

.social-icon.facebook:hover {
    background: #1456b8 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.45) !important;
}

.social-icon.google {
    background: #EA4335 !important;
    color: #ffffff !important;
}

.social-icon.google:hover {
    background: #4285F4 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(66, 133, 244, 0.45) !important;
}

.social-icon.whatsapp {
    background: #25D366 !important;
    color: #ffffff !important;
}

.social-icon.whatsapp:hover {
    background: #1aa150 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
}

.social-icon.youtube {
    background: #FF0000 !important;
    color: #ffffff !important;
}

.social-icon.youtube:hover {
    background: #cc0000 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.45) !important;
}

@media (max-width: 1024px) {
    .social-sidebar {
        left: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .social-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
    .btn-nav-call span {
        display: none !important;
    }
    .btn-nav-call {
        padding: 7px 10px !important;
    }
}

@media (max-width: 768px) {
    .social-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }
    .social-icon:hover {
        transform: scale(1.18) translateX(3px) !important;
        width: 42px !important;
    }
}

@media (max-width: 480px) {
    .social-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
    .social-icon:hover {
        transform: scale(1.15) translateX(2px) !important;
        width: 38px !important;
    }
}

@media (max-height: 520px) {
    .social-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   FLOATING QUICK DOCK (Centred at the bottom of the viewport)
   ═════════════════════════════════════════════════════════════════════ */
.floating-quick-dock {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) translateZ(0) !important;
    margin: 0 !important;
    background: rgba(9, 19, 38, 0.96) !important;
    border: 1.5px solid rgba(0, 175, 192, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 50px !important;
    padding: 6px 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 175, 192, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    z-index: 998 !important;
    width: max-content !important;
    max-width: min(calc(100vw - 24px), 620px) !important;
    box-sizing: border-box !important;
    animation: dockEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    will-change: transform;
    backface-visibility: hidden;
}

.floating-quick-dock.dock-hidden {
    transform: translateX(-50%) translateY(120px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@keyframes dockEntrance {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(60px) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.dock-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 30px !important;
    color: #f1f5f9 !important;
    text-decoration: none !important;
    font-size: 0.79rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    overflow: hidden !important;
    font-family: 'Inter', sans-serif !important;
    box-sizing: border-box !important;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dock-item:active {
    transform: scale(0.94) !important;
}

/* Call Button - Matched with Kezza Teal */
.dock-item.dock-call {
    background: rgba(0, 175, 192, 0.16) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(0, 175, 192, 0.5) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.dock-item.dock-call i {
    color: #5eead4 !important;
    transition: transform 0.3s ease;
}

.dock-item.dock-call:hover {
    background: linear-gradient(135deg, #00AFC0 0%, #008F9C 100%) !important;
    color: #ffffff !important;
    border-color: #5eead4 !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 22px rgba(0, 175, 192, 0.45) !important;
}

.dock-item.dock-call:hover i {
    color: #ffffff !important;
    animation: phoneWiggle 0.6s ease infinite;
}

@keyframes phoneWiggle {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-15deg); }
    40% { transform: rotate(15deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(10deg); }
}

/* WhatsApp Button */
.dock-item.dock-wa {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1.5px solid #25d366 !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dock-item.dock-wa::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    animation: waLightSweep 3.5s ease-in-out infinite;
}

@keyframes waLightSweep {
    0%, 60% { left: -100%; }
    100% { left: 200%; }
}

.dock-item.dock-wa:hover {
    background: linear-gradient(135deg, #28e06c 0%, #15a08e 100%) !important;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}

.dock-item.dock-wa i {
    font-size: 1.05rem;
    animation: waIconPulse 2.5s infinite;
}

@keyframes waIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* AI Scanner Button - Signature Kezza Gradient */
.dock-item.dock-scan {
    background: linear-gradient(135deg, #00AFC0 0%, #008F9C 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 4px 16px rgba(0, 175, 192, 0.35) !important;
}

.dock-item.dock-scan:hover {
    background: linear-gradient(135deg, #00c7db 0%, #009baa 100%) !important;
    border-color: #5eead4 !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(0, 175, 192, 0.55) !important;
}

.dock-item.dock-scan i {
    animation: sparkleSpin 3s ease-in-out infinite;
    color: #ffffff;
}

@keyframes sparkleSpin {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.25) rotate(12deg); }
}

/* Book Visit Button - Matched with Kezza Teal & Call button */
.dock-item.dock-book {
    background: rgba(0, 175, 192, 0.16) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(0, 175, 192, 0.5) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: none !important;
}

.dock-item.dock-book i {
    color: #5eead4 !important;
    transition: transform 0.3s ease;
}

.dock-item.dock-book:hover {
    background: linear-gradient(135deg, #00AFC0 0%, #008F9C 100%) !important;
    color: #ffffff !important;
    border-color: #5eead4 !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 22px rgba(0, 175, 192, 0.45) !important;
}

.dock-item.dock-book:hover i {
    color: #ffffff !important;
    transform: scale(1.15);
}

@media (max-width: 1024px) {
    .floating-quick-dock {
        bottom: 16px !important;
        padding: 5px 9px !important;
        gap: 6px !important;
        max-width: calc(100vw - 20px) !important;
    }
    .dock-item {
        padding: 7px 12px !important;
        font-size: 0.76rem !important;
    }
}

@media (max-width: 768px) {
    .floating-quick-dock {
        bottom: 14px !important;
        padding: 5px 8px !important;
        gap: 5px !important;
        max-width: calc(100vw - 16px) !important;
    }
    .dock-item {
        padding: 7px 10px !important;
        font-size: 0.74rem !important;
        gap: 5px !important;
    }
    .dock-item.dock-call span {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .floating-quick-dock {
        bottom: 12px !important;
        padding: 4px 6px !important;
        gap: 4px !important;
        max-width: calc(100vw - 12px) !important;
    }
    .dock-item {
        padding: 6px 8px !important;
        font-size: 0.70rem !important;
        gap: 4px !important;
    }
    .dock-item.dock-call span {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .dock-item span {
        display: none !important;
    }
    .dock-item {
        padding: 6px 10px !important;
    }
    .dock-item i {
        font-size: 0.95rem !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   GLOBAL READING PROGRESS BAR (Fills across header on scroll)
   ═════════════════════════════════════════════════════════════════════ */
#kzScrollProgress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #00AFC0 0%, #00c4d6 40%, #00AFC0 85%, #00AFC0 100%) !important;
    box-shadow: 0 1px 8px rgba(0, 175, 192, 0.45) !important;
    transform-origin: 0% 50% !important;
    transform: scaleX(0);
    z-index: 10002 !important;
    pointer-events: none !important;
    will-change: transform !important;
    transition: opacity 0.25s ease !important;
}

/* ═════════════════════════════════════════════════════════════════════
   MINIMALIST LUXURY BACK-TO-TOP BUTTON
   ═════════════════════════════════════════════════════════════════════ */
#kzBackToTop {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(10, 18, 36, 0.94) !important;
    border: 1.5px solid rgba(0, 175, 192, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #00AFC0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 15px rgba(0, 175, 192, 0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) translateZ(0) !important;
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 995 !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#kzBackToTop i {
    color: #00AFC0 !important;
    font-size: 14px !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    display: inline-block !important;
    line-height: 1 !important;
}

#kzBackToTop.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) translateZ(0) !important;
}

#kzBackToTop:hover {
    background: linear-gradient(135deg, #00AFC0 0%, #008f9c 100%) !important;
    border-color: #00c4d6 !important;
    box-shadow: 0 10px 28px rgba(0, 175, 192, 0.5) !important;
    transform: translateY(-3px) scale(1.06) translateZ(0) !important;
}

#kzBackToTop:hover i {
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
    #kzBackToTop {
        bottom: 84px !important;
        left: 16px !important;
        width: 38px !important;
        height: 38px !important;
    }
    #kzBackToTop i {
        font-size: 13px !important;
    }
}
/* css/services-navigation.css */
.nav-backdrop,.nav-drawer-header,.nav-drawer-cta,.navbar .nav-menu > li.nav-drawer-header,.navbar .nav-menu > li.nav-drawer-cta,li.nav-drawer-cta,li.nav-drawer-header,a.btn-drawer-call,a.btn-drawer-book{display:none !important}.navbar{position:fixed;top:0;left:0;width:100%;background:rgba(255,255,255,0.96) !important;backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important;z-index:1000;padding:12px 0;border-bottom:1px solid rgba(226,232,240,0.85);box-shadow:0 4px 20px rgba(15,23,42,0.04) !important;transition:all 0.25s ease}.nav-container{max-width:1380px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}.nav-logo a{display:flex;align-items:center;text-decoration:none}.nav-logo img{height:48px;width:auto;display:block;transition:transform 0.25s ease}.nav-logo img:hover{transform:scale(1.02)}.nav-menu{display:flex !important;list-style:none !important;align-items:center !important;gap:2px !important;margin:0 !important;padding:0 !important;flex-wrap:nowrap !important}.nav-menu>li{position:relative !important;display:inline-flex !important;align-items:center !important;margin:0 !important;padding:0 !important;flex-shrink:0 !important}.nav-menu>li>a,.nav-menu a,.services-nav-toggle,.services-mega-toggle{position:relative !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:4px !important;text-decoration:none !important;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;font-size:0.82rem !important;font-weight:600 !important;letter-spacing:-0.01em !important;color:#334155 !important;padding:6px 10px !important;margin:0 !important;border:none !important;border-radius:8px !important;box-sizing:border-box !important;white-space:nowrap !important;line-height:1.2 !important;background:transparent !important;transform:none !important;transition:color 0.15s ease,background-color 0.15s ease !important}.nav-menu>li>a:hover,.nav-menu a:hover,.services-nav-toggle:hover,.services-mega-toggle:hover{color:#008F9C !important;background:rgba(0,175,192,0.08) !important;transform:none !important;font-weight:600 !important;letter-spacing:-0.01em !important}.nav-menu>li>a.active,.nav-menu a.active,.services-nav-toggle.active,.nav-item-services-dropdown.dropdown-active .services-nav-toggle{color:#008F9C !important;background:rgba(0,175,192,0.08) !important;font-weight:600 !important;letter-spacing:-0.01em !important;transform:none !important}.nav-menu>li>a.active::after,.nav-menu a.active::after,.services-nav-toggle.active::after{content:'' !important;position:absolute !important;bottom:-2px !important;left:50% !important;transform:translateX(-50%) !important;width:20px !important;height:2.5px !important;background:linear-gradient(90deg,#00AFC0 0%,#008F9C 100%) !important;border-radius:3px !important;box-shadow:0 1px 4px rgba(0,175,192,0.45) !important;pointer-events:none !important}.nav-menu>li>a::before,.nav-menu a::before{display:none !important}@keyframes navActiveIndicatorEntrance{0%{width:0px;opacity:0}100%{width:20px;opacity:1}}.nav-scanner-link{color:#008F9C !important;font-weight:600 !important;background:rgba(0,175,192,0.06)}.nav-scanner-link:hover{background:rgba(0,175,192,0.12) !important}.nav-item-services-dropdown,.nav-item-services-mega{position:relative;display:inline-flex;align-items:center}.services-nav-toggle,.services-mega-toggle{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:#334155;font-weight:600;font-size:0.86rem;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;padding:7px 12px;border-radius:8px;transition:all 0.2s ease;white-space:nowrap;cursor:pointer;background:transparent;border:none;user-select:none;letter-spacing:0.02em}.services-nav-toggle .nav-arrow,.services-mega-toggle .nav-arrow{font-size:0.65rem;color:#00AFC0;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1)}.nav-item-services-dropdown.services-dropdown-open .services-nav-toggle,.nav-item-services-dropdown.dropdown-active .services-nav-toggle,.nav-item-services-dropdown:hover .services-nav-toggle,.nav-item-services-mega.services-mega-open .services-mega-toggle,.nav-item-services-mega.mega-active .services-mega-toggle,.nav-item-services-mega:hover .services-mega-toggle{color:#008F9C;background:rgba(0,175,192,0.08)}.nav-item-services-dropdown.services-dropdown-open .services-nav-toggle .nav-arrow,.nav-item-services-dropdown.dropdown-active .services-nav-toggle .nav-arrow,.nav-item-services-dropdown:hover .services-nav-toggle .nav-arrow,.nav-item-services-mega.services-mega-open .services-mega-toggle .nav-arrow,.nav-item-services-mega.mega-active .services-mega-toggle .nav-arrow,.nav-item-services-mega:hover .services-mega-toggle .nav-arrow{transform:rotate(180deg)}.services-dropdown-menu,.services-mega-menu{position:absolute;top:calc(100% + 2px);left:0;width:320px;min-width:300px;max-width:350px;max-height:min(600px,calc(100vh - 90px));overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,175,192,0.3) transparent;padding:10px 8px;background:#ffffff;border-radius:22px;border:1px solid rgba(226,232,240,0.9);box-shadow:0 20px 50px rgba(15,23,42,0.14),0 4px 16px rgba(0,0,0,0.04);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity 0.22s cubic-bezier(0.16,1,0.3,1),transform 0.22s cubic-bezier(0.16,1,0.3,1),visibility 0.22s;z-index:1050;box-sizing:border-box}.services-dropdown-menu::-webkit-scrollbar{width:5px}.services-dropdown-menu::-webkit-scrollbar-thumb{background:rgba(0,175,192,0.3);border-radius:6px}.services-dropdown-menu::before,.services-mega-menu::before{content:'';position:absolute;top:-14px;left:-12px;right:-12px;bottom:-12px;background:transparent;pointer-events:auto;z-index:-1}.nav-item-services-dropdown.services-dropdown-open .services-dropdown-menu,.nav-item-services-dropdown.dropdown-active .services-dropdown-menu,.nav-item-services-dropdown:hover .services-dropdown-menu,.nav-item-services-mega.services-mega-open .services-mega-menu,.nav-item-services-mega.mega-active .services-mega-menu,.nav-item-services-mega:hover .services-mega-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(4px)}.services-dropdown-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}.services-cat-item{margin:0;padding:0;display:block;width:100%}.services-cat-header{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 14px;background:transparent;border:none;border-radius:12px;cursor:pointer;text-align:left;transition:all 0.18s cubic-bezier(0.16,1,0.3,1);box-sizing:border-box;user-select:none}.services-cat-title{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:0.92rem;font-weight:550;color:#1e293b;letter-spacing:-0.01em;transition:color 0.18s ease}.services-cat-arrow{font-size:0.68rem;color:#94a3b8;transition:transform 0.24s cubic-bezier(0.16,1,0.3,1),color 0.18s ease;margin-left:8px;flex-shrink:0}.services-cat-header:hover{background:rgba(0,175,192,0.06)}.services-cat-header:hover .services-cat-title{color:#008F9C}.services-cat-header:hover .services-cat-arrow{color:#008F9C}.services-cat-item.is-expanded .services-cat-header{background:rgba(0,175,192,0.08)}.services-cat-item.is-expanded .services-cat-title{color:#008F9C;font-weight:600}.services-cat-item.is-expanded .services-cat-arrow{transform:rotate(180deg);color:#008F9C}.services-sub-menu{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows 0.24s cubic-bezier(0.16,1,0.3,1),opacity 0.22s cubic-bezier(0.16,1,0.3,1),padding 0.22s ease;box-sizing:border-box}.services-cat-item.is-expanded .services-sub-menu{grid-template-rows:1fr;opacity:1;padding-top:3px;padding-bottom:6px}.services-sub-list{min-height:0;list-style:none;margin:0;padding:0 0 0 10px;display:flex;flex-direction:column;gap:2px;border-left:1.5px solid rgba(0,175,192,0.2);margin-left:16px}.services-sub-list li{margin:0;padding:0;display:block;width:100%}.services-sub-link{display:flex;align-items:center;width:100%;height:34px;padding:0 10px;text-decoration:none;color:#475569;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:0.835rem;font-weight:450;letter-spacing:-0.005em;border-radius:8px;transition:all 0.16s cubic-bezier(0.16,1,0.3,1);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.services-sub-link:hover,.services-sub-link:focus{background:rgba(0,175,192,0.07);color:#008F9C;font-weight:500;transform:translateX(3px)}@media (min-width:1025px){.nav-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}}.btn-nav-call{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;color:#475569;font-weight:600;font-size:0.78rem;text-decoration:none;border-radius:8px;border:1px solid #e2e8f0;background:#ffffff;transition:all 0.2s ease}.btn-nav-call i{color:#00AFC0;font-size:0.75rem}.btn-nav-call:hover{color:#008F9C;border-color:rgba(0,175,192,0.35);background:rgba(0,175,192,0.04)}.nav-cta .btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;background:linear-gradient(135deg,#00AFC0 0%,#008F9C 100%);color:#ffffff;font-weight:600;font-size:0.80rem;text-decoration:none;border-radius:8px;box-shadow:0 2px 10px rgba(0,175,192,0.25);transition:all 0.2s ease;white-space:nowrap}.nav-cta .btn-primary:hover{background:linear-gradient(135deg,#008F9C 0%,#007480 100%);box-shadow:0 4px 14px rgba(0,175,192,0.35);transform:translateY(-1px)}@media (max-width:1024px){.services-dropdown-menu::before,.services-mega-menu::before{display:none !important;content:none !important;pointer-events:none !important}.nav-container{padding:0 16px}.nav-cta .btn-nav-call{display:none}.nav-item-services-dropdown,.nav-item-services-mega{position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.services-nav-toggle,.services-mega-toggle{justify-content:space-between;width:100%;padding:12px 16px;font-size:0.92rem;border-bottom:1px solid #f1f5f9}.services-dropdown-menu,.services-mega-menu{position:static;width:100%;max-width:100%;max-height:0;overflow:hidden;transform:none !important;opacity:0;visibility:hidden;padding:0 8px;margin:0;border:none;box-shadow:none;background:#f8fafc;border-radius:14px;transition:max-height 0.3s cubic-bezier(0.16,1,0.3,1),opacity 0.2s ease,visibility 0.2s}.nav-item-services-dropdown.services-dropdown-open .services-dropdown-menu,.nav-item-services-dropdown.mobile-dropdown-open .services-dropdown-menu,.nav-item-services-mega.services-mega-open .services-mega-menu,.nav-item-services-mega.mobile-mega-open .services-mega-menu{opacity:1;visibility:visible;pointer-events:auto;max-height:600px;padding:8px;margin-top:4px;overflow-y:auto}.services-cat-header{height:42px;padding:0 12px}.services-cat-title{font-size:0.88rem}.services-sub-link{height:32px;font-size:0.82rem}}@media (max-width:640px){.nav-cta .btn-primary{padding:5px 10px;font-size:0.75rem}}
/* css/kezza-ai.css */
.kezza-chat-fab{position:fixed;bottom:24px;right:24px;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#00AFC0 0%,#008F9C 60%,#00d2e0 100%);border:none;cursor:pointer;z-index:10000;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0, 175, 192,0.45),0 2px 8px rgba(0,0,0,0.12);transition:transform 0.3s cubic-bezier(.4,0,.2,1),box-shadow 0.3s ease;animation:kezza-fab-pulse 2.5s ease-in-out infinite}.kezza-chat-fab:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(0, 175, 192,0.55),0 4px 12px rgba(0,0,0,0.15)}.kezza-chat-fab svg{width:30px;height:30px;fill:#fff;transition:transform 0.3s ease}.kezza-chat-fab.open svg.chat-icon{display:none}.kezza-chat-fab.open svg.close-icon{display:block}.kezza-chat-fab:not(.open) svg.chat-icon{display:block}.kezza-chat-fab:not(.open) svg.close-icon{display:none}.kezza-chat-fab.open{animation:none;background:linear-gradient(135deg,#e74c5e,#ff6b6b);box-shadow:0 6px 24px rgba(231,76,94,0.4)}@keyframes kezza-fab-pulse{0%,100%{box-shadow:0 6px 24px rgba(0, 175, 192,0.45),0 0 0 0 rgba(0, 175, 192,0.25)}50%{box-shadow:0 6px 24px rgba(0, 175, 192,0.45),0 0 0 14px rgba(0, 175, 192,0)}}.kezza-chat-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;max-height:calc(100vh - 140px);border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 4px 16px rgba(0,0,0,0.08);z-index:10001;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px) scale(0.95);pointer-events:none;transition:opacity 0.3s cubic-bezier(.4,0,.2,1),transform 0.3s cubic-bezier(.4,0,.2,1)}.kezza-chat-window.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.kezza-chat-header{background:linear-gradient(135deg,#008F9C 0%,#00AFC0 100%);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;position:relative;box-shadow:0 2px 10px rgba(0, 175, 192,0.25);z-index:10}.kezza-chat-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(255,255,255,0.2)}.kezza-chat-avatar{position:relative;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(255,255,255,0.45)}.kezza-avatar-robot{font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}.kezza-avatar-logo-badge{position:absolute;bottom:-3px;right:-3px;width:18px;height:18px;border-radius:50%;background:#ffffff;border:1.5px solid #008F9C;box-shadow:0 2px 6px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1px;z-index:2}.kezza-badge-logo-img{width:100%;height:100%;object-fit:contain;display:block}.kezza-chat-header-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}.kezza-chat-header-title{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:16px;font-weight:700;color:#fff;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kezza-chat-header-status{font-size:11px;color:rgba(255,255,255,0.92);display:flex;align-items:center;gap:5px;margin-top:2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kezza-status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}.kezza-status-dot.online{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,0.9);animation:kezza-pulse-online 2s infinite}.kezza-status-dot.offline{background:#f87171;box-shadow:0 0 6px rgba(248,113,113,0.6)}@keyframes kezza-pulse-online{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:0.8}}.kezza-chat-header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.kezza-header-btn{background:rgba(255,255,255,0.15);border:none;color:#ffffff;font-size:13px;cursor:pointer;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;text-decoration:none;box-sizing:border-box}.kezza-header-btn:hover{background:rgba(255,255,255,0.3);color:#ffffff;transform:scale(1.05)}.kezza-header-btn.active{background:rgba(255,255,255,0.35);color:#ffffff;box-shadow:0 0 6px rgba(255,255,255,0.6)}.kezza-chat-minimize{background:rgba(255,255,255,0.15);border:none;color:#ffffff;font-size:14px;font-weight:700;cursor:pointer;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;flex-shrink:0;margin-left:2px}.kezza-chat-minimize:hover{background:rgba(239,68,68,0.85);color:#fff;transform:scale(1.05)}.kezza-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f7f9fb;scroll-behavior:smooth}.kezza-chat-messages::-webkit-scrollbar{width:5px}.kezza-chat-messages::-webkit-scrollbar-track{background:transparent}.kezza-chat-messages::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:10px}.kezza-msg{display:flex;gap:8px;max-width:88%;animation:kezza-msg-in 0.18s cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity;transform:translateZ(0)}.kezza-msg.bot{align-self:flex-start}.kezza-msg.user{align-self:flex-end;flex-direction:row-reverse}.kezza-msg-avatar{position:relative;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#00AFC0,#008F9C);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}.kezza-msg.user .kezza-msg-avatar{background:linear-gradient(135deg,#475569,#64748b)}.kezza-msg-avatar-robot{font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}.kezza-msg-avatar-badge{position:absolute;bottom:-2px;right:-2px;width:13px;height:13px;border-radius:50%;background:#ffffff;border:1px solid #008F9C;box-shadow:0 1px 4px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1px}.kezza-msg-avatar-badge img{width:100%;height:100%;object-fit:contain;display:block}.kezza-msg-bubble{padding:12px 16px;border-radius:16px;font-size:13.5px;line-height:1.55;word-break:break-word;position:relative}.kezza-msg.bot .kezza-msg-bubble{background:#ffffff;color:#1e293b;border:1px solid #e8ecf0;border-top-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}.kezza-msg.user .kezza-msg-bubble{background:linear-gradient(135deg,#00AFC0,#0096a4);color:#ffffff;border-top-right-radius:4px;box-shadow:0 2px 8px rgba(0, 175, 192,0.25)}.kezza-msg-bubble strong{font-weight:600}.kezza-msg-bubble ul,.kezza-msg-bubble ol{margin:6px 0 2px 18px;padding:0}.kezza-msg-bubble li{margin-bottom:3px}.kezza-msg-bubble a{color:#00AFC0;text-decoration:underline;font-weight:500}.kezza-msg.user .kezza-msg-bubble a{color:#fff;text-decoration:underline}@keyframes kezza-msg-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:translate3d(0,0,0)}}.kezza-typing{display:flex;align-items:center;gap:8px;align-self:flex-start;max-width:88%;will-change:transform,opacity}.kezza-typing-dots{background:#fff;border:1px solid #e8ecf0;border-radius:4px 16px 16px 16px;padding:10px 16px;display:flex;gap:5px;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,0.04)}.kezza-typing-dot{width:6px;height:6px;border-radius:50%;background:#00AFC0;animation:kezza-dot-bounce 0.9s ease-in-out infinite}.kezza-typing-dot:nth-child(2){animation-delay:0.12s}.kezza-typing-dot:nth-child(3){animation-delay:0.24s}@keyframes kezza-dot-bounce{0%,60%,100%{transform:translateY(0);opacity:0.35}30%{transform:translateY(-4px);opacity:1}}.kezza-quick-replies{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 2px;animation:kezza-msg-in 0.2s cubic-bezier(0.16,1,0.3,1);will-change:transform,opacity}.kezza-quick-btn{background:#fff;border:1.5px solid #00AFC0;color:#00AFC0;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.25s ease;font-family:'Inter',sans-serif;white-space:nowrap}.kezza-quick-btn:hover{background:#00AFC0;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0, 175, 192,0.3)}.kezza-chat-input-area{padding:12px 14px;background:#fff;border-top:1px solid #eef1f5;display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative}.kezza-chat-scanner-btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;background:#f0fdfa;border:1px solid #ccfbf1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;flex-shrink:0;color:#0f766e;text-decoration:none}.kezza-chat-scanner-btn:hover{background:#00AFC0;color:#ffffff;border-color:#00AFC0;transform:scale(1.05)}.kezza-chat-input{flex:1;border:1.5px solid #e0e5ec;border-radius:24px;padding:10px 16px;font-size:16px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;background:#f7f9fb;color:#333}.kezza-chat-input::placeholder{color:#a0a8b4}.kezza-chat-input:focus{border-color:#00AFC0;background:#fff;box-shadow:0 0 0 3px rgba(0, 175, 192,0.1)}.kezza-chat-mic{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;background:#f0f4f8;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;flex-shrink:0;color:#555}.kezza-chat-mic:hover{background:#e2e8f0;color:#00AFC0}.kezza-chat-mic.listening{background:#ff4757;color:#fff;animation:kezza-mic-pulse 1.2s infinite}@keyframes kezza-mic-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,71,87,0.7)}70%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(255,71,87,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,71,87,0)}}.kezza-chat-send{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;background:linear-gradient(135deg,#00AFC0,#008F9C);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;flex-shrink:0}.kezza-chat-send:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(0, 175, 192,0.4)}.kezza-chat-send:active{transform:scale(0.95)}.kezza-chat-send svg{width:17px;height:17px;fill:#fff}.kezza-chat-footer-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px;background:#fff;font-size:11px;color:#94a3b8;border-top:1px solid #f1f5f9}.kezza-ai-mode-tag{display:inline-flex;align-items:center;gap:4px;background:#f0fdfa;color:#0d9488;padding:2px 8px;border-radius:10px;font-weight:500;font-size:10px}.kezza-nav-link{display:inline-flex;align-items:center;gap:4px;background:#f0fafb;border:1px solid #c8eef0;color:#008F9C;padding:5px 12px;border-radius:8px;font-size:13px;font-weight:500;text-decoration:none;margin:3px 2px;transition:all 0.2s ease}.kezza-nav-link:hover{background:#00AFC0;color:#fff;border-color:#00AFC0}.kezza-appt-summary{background:#f0fafb;border:1px solid #c8eef0;border-radius:12px;padding:14px;margin-top:6px;font-size:13px;line-height:1.6}.kezza-appt-summary strong{color:#00AFC0}.kezza-appt-summary code{background:#e0f2fe;color:#0369a1;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:600}.kezza-status-box{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;margin:8px 0;font-size:13px;font-weight:500}.kezza-status-box.sending{background:#fffbeb;border:1px solid #fde68a;color:#b45309}.kezza-status-box.sent{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}.kezza-status-box.failed{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.kezza-whatsapp-btn{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:10px 20px;border-radius:24px;font-size:14px;font-weight:600;text-decoration:none;margin-top:8px;transition:all 0.25s ease}.kezza-whatsapp-btn:hover{background:#1fb855;transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,211,102,0.35)}.kezza-map-btn{display:inline-flex;align-items:center;gap:6px;background:#ffffff;border:1.5px solid #00AFC0;color:#00AFC0;padding:9px 18px;border-radius:24px;font-size:13px;font-weight:600;text-decoration:none;margin:8px 0 4px;transition:all 0.25s ease}.kezza-map-btn:hover{background:#00AFC0;color:#ffffff;box-shadow:0 4px 14px rgba(0, 175, 192,0.3);transform:translateY(-1px)}.kezza-location-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px;margin:6px 0;font-size:13px;line-height:1.5}.kezza-chat-powered{text-align:center;font-size:10px;color:#b0b8c4;padding:4px 0 8px;background:#fff;flex-shrink:0}@media (max-width:480px){.kezza-chat-window{bottom:0;right:0;left:0;width:100%;height:100%;max-height:100vh;max-height:100dvh;border-radius:0}.kezza-chat-window.open{transform:translateY(0) scale(1)}.kezza-chat-fab{bottom:16px;right:16px;width:56px;height:56px}.kezza-chat-fab svg{width:26px;height:26px}.kezza-chat-header{padding:16px;border-radius:0;padding-top:max(16px,env(safe-area-inset-top))}.kezza-chat-messages{padding:12px}.kezza-msg{max-width:92%}.kezza-quick-btn{padding:7px 14px;font-size:12px}.kezza-chat-input-area{padding-bottom:max(12px,env(safe-area-inset-bottom))}.kezza-chat-footer-bar{padding-bottom:max(8px,env(safe-area-inset-bottom))}}@media (max-width:768px) and (min-width:481px){.kezza-chat-window{width:360px;height:520px;right:16px;bottom:84px}.kezza-chat-fab{bottom:16px;right:16px}}.kezza-chat-badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-radius:50%;background:#e74c5e;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;animation:kezza-badge-pop 0.3s cubic-bezier(.4,0,.2,1)}.kezza-chat-badge.hidden{display:none}@keyframes kezza-badge-pop{from{transform:scale(0)}to{transform:scale(1)}}.kezza-chat-tooltip{position:fixed;bottom:92px;right:24px;background:#fff;color:#333;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 6px 24px rgba(0,0,0,0.12);z-index:9999;max-width:240px;line-height:1.4;animation:kezza-tooltip-in 0.4s cubic-bezier(.4,0,.2,1);cursor:pointer}.kezza-chat-tooltip::after{content:'';position:absolute;bottom:-8px;right:24px;width:16px;height:16px;background:#fff;transform:rotate(45deg);box-shadow:4px 4px 8px rgba(0,0,0,0.05)}.kezza-chat-tooltip-close{position:absolute;top:4px;right:8px;background:none;border:none;color:#aaa;font-size:16px;cursor:pointer;padding:2px}.kezza-chat-tooltip.hidden{display:none}@keyframes kezza-tooltip-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:480px){.kezza-chat-tooltip{right:16px;bottom:76px;max-width:200px;font-size:13px;padding:10px 14px}}.kezza-chat-photo-btn{width:38px;height:38px;border-radius:50%;background:#f0fdfa;border:1px solid #ccfbf1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;flex-shrink:0;color:#0f766e}.kezza-chat-photo-btn:hover{background:#00AFC0;color:#ffffff;border-color:#00AFC0;transform:scale(1.05)}.kezza-camera-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#090d16;z-index:120;display:flex;flex-direction:column;color:#ffffff;font-family:'Inter',sans-serif;border-radius:16px;overflow:hidden;animation:kezzaFadeIn 0.25s ease}@keyframes kezzaFadeIn{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}.kezza-camera-topbar{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;background:rgba(15,23,42,0.85);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.1);z-index:10}.kezza-camera-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;color:#5eead4}.kezza-camera-close-btn{background:rgba(255,255,255,0.15);border:none;color:#ffffff;width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background 0.2s ease}.kezza-camera-close-btn:hover{background:rgba(239,68,68,0.8)}.kezza-camera-viewfinder-container{position:relative;flex:1;width:100%;min-height:260px;background:#000000;overflow:hidden;display:flex;align-items:center;justify-content:center}.kezza-camera-video{width:100%;height:100%;object-fit:cover;display:block}.kezza-camera-target-frame{position:absolute;width:78%;height:72%;border:2px dashed rgba(94,234,212,0.5);border-radius:20px;pointer-events:none;box-shadow:0 0 0 9999px rgba(0,0,0,0.35);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px;box-sizing:border-box}.kezza-camera-guide-text{background:rgba(0,0,0,0.7);color:#e2e8f0;font-size:11.5px;padding:6px 12px;border-radius:20px;text-align:center;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.15)}.kezza-camera-tips-bar{padding:8px 14px;background:rgba(15,23,42,0.9);font-size:11px;color:#94a3b8;text-align:center;border-top:1px solid rgba(255,255,255,0.05)}.kezza-camera-bottom-actions{padding:16px 20px 20px;background:#090d16;display:flex;align-items:center;justify-content:space-around;gap:16px;z-index:10}.kezza-camera-action-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:#f1f5f9;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s ease}.kezza-camera-action-btn:hover{background:rgba(255,255,255,0.2);transform:translateY(-1px)}.kezza-camera-shutter-btn{width:64px;height:64px;border-radius:50%;background:transparent;border:4px solid #ffffff;cursor:pointer;position:relative;padding:0;display:flex;align-items:center;justify-content:center;transition:transform 0.15s ease,border-color 0.2s ease}.kezza-camera-shutter-inner{width:50px;height:50px;border-radius:50%;background:#00AFC0;box-shadow:0 0 12px rgba(0, 175, 192,0.6);transition:background 0.15s ease,transform 0.15s ease}.kezza-camera-shutter-btn:hover{transform:scale(1.06);border-color:#5eead4}.kezza-camera-shutter-btn:active .kezza-camera-shutter-inner{transform:scale(0.9);background:#0f766e}.kezza-photo-preview-container{background:#ffffff;border:1.5px solid #ccfbf1;border-radius:12px;padding:12px;margin:8px 0;box-shadow:0 4px 14px rgba(15,118,110,0.08)}.kezza-photo-preview-header{font-size:13px;font-weight:600;color:#0f766e;margin-bottom:8px;display:flex;align-items:center;gap:6px}.kezza-photo-preview-image-wrap{width:100%;max-height:240px;border-radius:8px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.kezza-photo-preview-image-wrap img{width:100%;height:auto;max-height:240px;object-fit:contain;display:block}.kezza-photo-preview-actions{display:flex;gap:8px;justify-content:flex-end}.kezza-photo-retake-btn{background:#f1f5f9;border:1px solid #cbd5e1;color:#334155;padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all 0.2s ease}.kezza-photo-retake-btn:hover{background:#e2e8f0;color:#0f172a}.kezza-photo-analyze-btn{background:linear-gradient(135deg,#00AFC0,#0f766e);border:none;color:#ffffff;padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0, 175, 192,0.3);transition:all 0.2s ease}.kezza-photo-analyze-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0, 175, 192,0.4)}.kezza-photo-card{background:#ffffff;border:1.5px solid #a7f3d0;border-radius:12px;padding:16px 18px;margin:8px 0;box-shadow:0 4px 16px rgba(15,118,110,0.08);font-family:'Inter',sans-serif;color:#1f2937}.kezza-photo-card.quality-error{border-color:#fecaca;background:#fff5f5;box-shadow:0 4px 14px rgba(239,68,68,0.08)}.kezza-photo-card.unclear-area{border-color:#cbd5e1;background:#f8fafc;box-shadow:0 4px 14px rgba(100,116,139,0.08)}.kezza-photo-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-weight:600;font-size:12px}.kezza-photo-subcard{margin-top:10px;padding:10px 12px;border-radius:8px;transition:background 0.2s ease}.kezza-photo-card.red-flag{border-color:#f87171;background:#fef2f2}.kezza-photo-header{font-size:14.5px;font-weight:700;color:#0f766e;letter-spacing:0.5px;border-bottom:1.5px solid #f0fdf4;padding-bottom:8px;margin-bottom:12px;display:flex;align-items:center;gap:6px}.kezza-photo-section{margin-bottom:12px;font-size:13.5px;line-height:1.5}.kezza-photo-label{font-weight:600;color:#374151;display:block;margin-bottom:3px;font-size:13px}.kezza-photo-val{color:#1f2937;margin-left:2px}.kezza-photo-disclaimer{margin-top:14px;padding:10px 12px;background:#f8fafc;border-left:3px solid #00AFC0;border-radius:4px;font-size:11.5px;color:#475569;line-height:1.45}.kezza-photo-tips{background:#ffffff;border-radius:8px;padding:12px 14px;margin-top:8px;border:1px solid #e2e8f0;font-size:12.5px;line-height:1.5}.kezza-photo-step-loader{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f0fdfa;border:1px solid #ccfbf1;border-radius:10px;color:#0f766e;font-size:13px;font-weight:500;margin:8px 0}.kezza-photo-spinner{width:18px;height:18px;border:2.5px solid #ccfbf1;border-top-color:#00AFC0;border-radius:50%;animation:kezzaSpin 0.8s linear infinite}@keyframes kezzaSpin{to{transform:rotate(360deg)}}.kezza-photo-why-block{background:#f8fafc;border-left:3px solid #00AFC0;border-radius:6px;padding:8px 10px;margin:8px 0;font-style:italic}.kezza-photo-contact-tag{display:inline-block;background:#e0f2fe;color:#0369a1;font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:4px;margin-left:6px}.kezza-scanner-modal-backdrop{position:fixed;inset:0;background:rgba(4,9,20,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:999999;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.32s cubic-bezier(0.16,1,0.3,1),visibility 0.32s;box-sizing:border-box}.kezza-scanner-modal-backdrop.is-visible{opacity:1;visibility:visible;pointer-events:auto}.kezza-scanner-modal-card{position:relative;width:100%;max-width:860px;background:linear-gradient(145deg,#091326 0%,#0d1b38 50%,#071020 100%);border:1.5px solid rgba(0,175,192,0.35);border-radius:26px;box-shadow:0 30px 70px rgba(0,0,0,0.65),0 0 50px rgba(0,175,192,0.18);display:flex;overflow:hidden;transform:scale(0.92) translateY(16px);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);box-sizing:border-box}.kezza-scanner-modal-backdrop.is-visible .kezza-scanner-modal-card{transform:scale(1) translateY(0)}.scanner-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:all 0.2s ease}.scanner-modal-close:hover{background:rgba(239,68,68,0.85);border-color:#ef4444;color:#ffffff;transform:rotate(90deg)}.scanner-modal-visual-side{flex:0 0 38%;background:linear-gradient(180deg,rgba(0,175,192,0.12) 0%,rgba(15,23,42,0.95) 100%);border-right:1px solid rgba(255,255,255,0.08);padding:36px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-sizing:border-box}.scanner-hud-wrap{position:relative;width:140px;height:160px;background:rgba(4,9,20,0.7);border:1.5px solid rgba(0,175,192,0.45);border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:24px;box-shadow:inset 0 0 25px rgba(0,175,192,0.2),0 10px 30px rgba(0,0,0,0.5)}.scanner-hud-face-svg{width:100px;height:120px;display:block}.scanner-laser-line{position:absolute;left:0;right:0;height:2.5px;background:linear-gradient(90deg,transparent,#00AFC0,#5eead4,#00AFC0,transparent);box-shadow:0 0 12px #00AFC0,0 0 20px #5eead4;animation:laserScanHud 2.4s ease-in-out infinite;z-index:5}@keyframes laserScanHud{0%{top:6%;opacity:0.2}50%{top:88%;opacity:1}100%{top:6%;opacity:0.2}}.scanner-hud-status-badge{position:absolute;bottom:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(9,19,38,0.85);border:1px solid rgba(0,175,192,0.4);padding:3px 8px;border-radius:12px;font-size:0.68rem;font-weight:700;color:#5eead4;text-transform:uppercase;letter-spacing:0.05em}.scanner-live-pulse{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:pulseDot 1.4s infinite}@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.85)}}.scanner-quick-metrics{display:flex;flex-direction:column;gap:8px;width:100%}.sq-metric-item{display:flex;align-items:center;gap:8px;font-size:0.76rem;color:#cbd5e1;font-weight:500}.sq-metric-item i{color:#22c55e;font-size:0.8rem;flex-shrink:0}.scanner-modal-content-side{flex:1;padding:34px 36px 30px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}.scanner-modal-pill-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(0,175,192,0.14);border:1px solid rgba(0,175,192,0.45);color:#00AFC0;padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;align-self:flex-start}.scanner-modal-heading{font-family:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;font-size:1.65rem;color:#ffffff;font-weight:700;line-height:1.3;margin:0 0 10px 0}.text-gold{color:#00AFC0 !important}.scanner-modal-subtext{font-size:0.88rem;color:#94a3b8;line-height:1.55;margin:0 0 18px 0}.scanner-modal-concerns-label{font-size:0.78rem;font-weight:700;color:#cbd5e1;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px}.scanner-modal-concerns-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:22px}.concern-pill-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:#94a3b8;padding:9px 12px;border-radius:12px;font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:550;cursor:pointer;text-align:left;transition:all 0.2s cubic-bezier(0.16,1,0.3,1);box-sizing:border-box}.concern-pill-btn:hover{background:rgba(0,175,192,0.12);border-color:rgba(0,175,192,0.5);color:#ffffff}.concern-pill-btn.active{background:rgba(0,175,192,0.18);border-color:#00AFC0;color:#5eead4;font-weight:600;box-shadow:0 2px 10px rgba(0,175,192,0.25)}.concern-pill-btn i{font-size:0.85rem;color:#00AFC0;flex-shrink:0}.scanner-modal-actions{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}.btn-scanner-modal-primary{flex:1;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#00AFC0 0%,#008F9C 100%);color:#ffffff !important;padding:13px 20px;border-radius:14px;font-family:'Inter',sans-serif;font-size:0.92rem;font-weight:700;text-decoration:none !important;box-shadow:0 6px 20px rgba(0,175,192,0.4);transition:all 0.25s cubic-bezier(0.16,1,0.3,1);box-sizing:border-box}.btn-scanner-modal-primary:hover{background:linear-gradient(135deg,#00c7db 0%,#009baa 100%);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,175,192,0.55)}.scanner-arrow-icon{font-size:0.8rem;transition:transform 0.2s ease}.btn-scanner-modal-primary:hover .scanner-arrow-icon{transform:translateX(4px)}.btn-scanner-modal-chat{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.15);color:#cbd5e1;padding:13px 18px;border-radius:14px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.25s ease;box-sizing:border-box}.btn-scanner-modal-chat:hover{background:rgba(255,255,255,0.12);border-color:#00AFC0;color:#ffffff;transform:translateY(-2px)}.scanner-modal-trust-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08);flex-wrap:wrap}.trust-item{display:flex;align-items:center;gap:6px;font-size:0.74rem;color:#94a3b8;font-weight:500}.trust-item i{font-size:0.8rem;color:#00AFC0}@media (max-width:768px){.kezza-scanner-modal-card{flex-direction:column;max-height:90vh;overflow-y:auto;border-radius:20px}.scanner-modal-visual-side{padding:24px 18px 16px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.08)}.scanner-hud-wrap{width:110px;height:120px;margin-bottom:12px}.scanner-quick-metrics{display:none}.scanner-modal-content-side{padding:22px 18px 20px}.scanner-modal-heading{font-size:1.35rem}.scanner-modal-concerns-grid{grid-template-columns:1fr;gap:6px}.concern-pill-btn{padding:8px 10px;font-size:0.8rem}.scanner-modal-actions{flex-direction:column}.btn-scanner-modal-primary,.btn-scanner-modal-chat{width:100%}.scanner-modal-trust-bar{justify-content:center;gap:16px}}

/* ── Kezza Official Logo Chat Avatars (Replacing Robot Icon) ─── */
.kezza-chat-avatar {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 3px !important;
    flex-shrink: 0 !important;
}
.kezza-avatar-logo-main {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}
.kezza-msg.bot .kezza-msg-avatar,
.kezza-typing .kezza-msg-avatar {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #00AFC0 !important;
    box-shadow: 0 2px 8px rgba(0, 175, 192, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 2.5px !important;
    flex-shrink: 0 !important;
}
.kezza-msg-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* ── Kezza Chatbot 3D Background Rotating Logo ── */
.kezza-chat-3d-bg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 230px !important;
    aspect-ratio: 297/200 !important;
    transform: translate(-50%, -50%) !important;
    perspective: 900px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0.08 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.kezza-chat-3d-bg img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
    transition: transform 0.1s linear !important;
}
.kezza-chat-messages {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}
.kezza-chat-window {
    background: #f7f9fb !important;
}
/* css/responsive.css */
/**
 * Kezza Skin & Hair Clinic — Universal Responsive Header & Drawer Overrides
 * Fixes:
 *  1. Header overcrowding (shows only logo and 44x44px hamburger below 1024px)
 *  2. Hamburger alignment (44x44px target, 24x2px bars, 5px gap, #1e293b, centered with logo)
 *  3. Drawer spacing (single clean row per item, 14px padding, 1px divider, centered 0.92rem text)
 *  4. Services row harmony (centered title, right-docked chevron, inline accordion with smaller text)
 *  5. Drawer attachment (starts flush at top: 100% below header with soft bottom shadow)
 */

/* ==========================================================================
   Universal Guard: Mobile Drawer Elements Are Strictly Hidden on Desktop
   ========================================================================== */
.nav-backdrop,
.nav-drawer-header,
.nav-drawer-cta,
.navbar .nav-menu > li.nav-drawer-header,
.navbar .nav-menu > li.nav-drawer-cta,
li.nav-drawer-cta,
li.nav-drawer-header,
a.btn-drawer-call,
a.btn-drawer-book {
  display: none !important;
}

.hamburger {
  display: none;
}

/* ==========================================================================
   Desktop Rules (1025px and wider)
   ========================================================================== */
@media (min-width: 1025px) {
  .navbar {
    padding: 12px 0 !important;
  }

  .hamburger,
  .navbar .hamburger {
    display: none !important;
  }

  .nav-container {
    max-width: 1400px !important;
    padding: 0 14px !important;
    gap: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .nav-logo img {
    height: 48px !important;
    width: auto !important;
  }

  .hero-section {
    padding-top: 72px !important;
  }

  .nav-backdrop,
  .nav-drawer-header,
  .nav-drawer-cta,
  .navbar .nav-menu > li.nav-drawer-header,
  .navbar .nav-menu > li.nav-drawer-cta,
  li.nav-drawer-cta,
  li.nav-drawer-header,
  a.btn-drawer-call,
  a.btn-drawer-book {
    display: none !important;
  }

  /* Fixed position desktop header navigation (Zero layout shift) */
  .nav-menu {
    display: flex !important;
    list-style: none !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }

  .nav-menu > li {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .nav-menu > li > a,
  .nav-menu a,
  .services-nav-toggle,
  .services-mega-toggle {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #334155 !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    background: transparent !important;
    transform: none !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
  }

  .nav-menu > li > a:hover,
  .nav-menu a:hover,
  .services-nav-toggle:hover,
  .services-mega-toggle:hover {
    color: #008F9C !important;
    background: rgba(0, 175, 192, 0.08) !important;
    transform: none !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  .nav-menu > li > a.active,
  .nav-menu a.active,
  .services-nav-toggle.active,
  .nav-item-services-dropdown.dropdown-active .services-nav-toggle {
    color: #008F9C !important;
    background: rgba(0, 175, 192, 0.08) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transform: none !important;
  }

  .nav-menu > li > a.active::after,
  .nav-menu a.active::after,
  .services-nav-toggle.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #00AFC0 0%, #008F9C 100%) !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 4px rgba(0, 175, 192, 0.45) !important;
    pointer-events: none !important;
  }

  .nav-menu > li > a::before,
  .nav-menu a::before {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile & Tablet Rules (1024px and narrower)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Prevent horizontal overflow */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* 1 & 5. Navbar & Nav Container */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    padding: 10px 0;
    transition: all 0.25s ease;
    box-sizing: border-box;
  }

  .nav-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;
    box-sizing: border-box;
  }

  .nav-logo {
    display: flex;
    align-items: center;
  }

  .nav-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .nav-logo img {
    height: 44px;
    width: auto;
    display: block;
  }

  /* Hide top bar CTA on mobile/tablet */
  .nav-container > .nav-cta,
  .nav-cta {
    display: none;
  }

  /* 2. Hamburger button (44x44px tap target, centered) */
  .navbar .hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1e293b;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .navbar .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .navbar .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .navbar .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ==========================================================================
     Mobile & Tablet Navigation Drawer Redesign
     ========================================================================== */

  /* Dark translucent backdrop */
  .nav-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(11, 15, 27, 0.45) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 240ms !important;
  }

  .nav-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Prevent background page scrolling while drawer is open */
  body.nav-drawer-open,
  html.nav-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.nav-drawer-open .floating-quick-dock,
  body.nav-drawer-open .kezza-chat-fab,
  body.nav-drawer-open .kezza-chat-window,
  body.nav-drawer-open .kezza-chat-tooltip,
  body.nav-drawer-open #kezzaChatFab,
  body.nav-drawer-open #kezzaChatWindow,
  body.nav-drawer-open #kezzaTooltip {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Right-anchored slide-in drawer panel */
  .navbar .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    border: none !important;
    border-radius: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 240ms !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  /* Fixed 360px panel on tablet screens (481px to 1024px) */
  @media (min-width: 481px) and (max-width: 1024px) {
    .navbar .nav-menu {
      width: 360px !important;
      max-width: 360px !important;
    }
  }

  .navbar .nav-menu.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .navbar .nav-menu,
    .nav-backdrop {
      transition: none !important;
    }
  }

  /* Panel Header (Kezza logo on left, 44x44px close X on right, 1px bottom divider) */
  .navbar .nav-menu > li.nav-drawer-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 20px !important;
    min-height: 60px !important;
    height: 60px !important;
    border-bottom: 1px solid #e5e9f0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .nav-drawer-header .drawer-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }

  .nav-drawer-header .drawer-logo img {
    height: 38px !important;
    width: auto !important;
    display: block !important;
  }

  .nav-drawer-header .drawer-close-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: #1f2a37 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .nav-drawer-header .drawer-close-btn:hover {
    background: #f1f5f9 !important;
    color: #00AFC0 !important;
  }

  .nav-drawer-header .drawer-close-btn:focus-visible {
    outline: 2px solid #00AFC0 !important;
    outline-offset: 2px !important;
  }

  /* Navigation List Items */
  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
    border-bottom: 1px solid #e5e9f0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) > a,
  .navbar .services-nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 16px 20px !important;
    min-height: 52px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #1f2a37 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    line-height: 1.4 !important;
  }

  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) > a:hover,
  .navbar .services-nav-toggle:hover {
    background-color: #f8f9fb !important;
    color: #00AFC0 !important;
  }

  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) > a:focus-visible,
  .navbar .services-nav-toggle:focus-visible,
  .navbar .services-cat-header:focus-visible,
  .navbar .services-sub-link:focus-visible {
    outline: 2px solid #00AFC0 !important;
    outline-offset: -2px !important;
  }

  /* Active page row: 3px teal bar down left edge and teal text, no partial pill */
  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) > a.active,
  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) > a.active:hover {
    border-left: 3px solid #00AFC0 !important;
    color: #00AFC0 !important;
    font-weight: 600 !important;
    background-color: rgba(0, 175, 192, 0.04) !important;
    border-radius: 0 !important;
  }

  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) > a::before,
  .navbar .nav-menu > li:not(.nav-drawer-header):not(.nav-drawer-cta) > a::after {
    display: none !important;
    content: none !important;
  }

  /* AI Scanner Link */
  .navbar .nav-menu > li > a.nav-scanner-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    color: #00AFC0 !important;
    font-weight: 600 !important;
    background: rgba(0, 175, 192, 0.04) !important;
    padding: 16px 20px !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
  }

  .navbar .nav-menu > li > a.nav-scanner-link:hover {
    background: rgba(0, 175, 192, 0.08) !important;
    color: #008f9c !important;
  }

  .navbar .nav-menu > li > a.nav-scanner-link.active {
    border-left: 3px solid #00AFC0 !important;
  }

  /* SERVICES toggle row & rotating chevron */
  .navbar .nav-item-services-dropdown,
  .navbar .nav-item-services-mega {
    position: relative !important;
    width: 100% !important;
    display: block !important;
  }

  .navbar .services-nav-toggle {
    cursor: pointer !important;
    width: 100% !important;
  }

  .navbar .services-nav-toggle .nav-arrow {
    margin-left: auto !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
    position: static !important;
    transform: none !important;
  }

  .navbar .nav-item-services-dropdown.services-dropdown-open .services-nav-toggle .nav-arrow,
  .navbar .nav-item-services-dropdown.mobile-dropdown-open .services-nav-toggle .nav-arrow {
    transform: rotate(180deg) !important;
    color: #00AFC0 !important;
  }

  /* Inline accordion submenu (Categories container) */
  .navbar .services-dropdown-menu,
  .navbar .services-mega-menu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f8f9fb !important;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  .navbar .services-dropdown-menu::before,
  .navbar .services-mega-menu::before {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  .navbar .nav-item-services-dropdown.services-dropdown-open .services-dropdown-menu,
  .navbar .nav-item-services-dropdown.mobile-dropdown-open .services-dropdown-menu,
  .navbar .nav-item-services-dropdown.dropdown-active .services-dropdown-menu,
  .navbar .nav-item-services-mega.services-mega-open .services-mega-menu,
  .navbar .nav-item-services-mega.mobile-mega-open .services-mega-menu,
  .navbar .nav-item-services-mega.mega-active .services-mega-menu {
    max-height: 2500px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
  }

  .navbar .services-dropdown-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Categories: Indented to 36px left padding, 0.95rem, weight 600, #f8f9fb background */
  .navbar .services-cat-item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid #e5e9f0 !important;
    background: #f8f9fb !important;
    box-sizing: border-box !important;
  }

  .navbar .services-cat-item:last-child {
    border-bottom: none !important;
  }

  .navbar .services-cat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 14px 20px 14px 36px !important; /* 36px left padding indent */
    background: #f8f9fb !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease !important;
  }

  .navbar .services-cat-header:hover {
    background: #f1f5f9 !important;
  }

  .navbar .services-cat-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1f2a37 !important;
    letter-spacing: normal !important;
    transition: color 0.15s ease !important;
  }

  .navbar .services-cat-header:hover .services-cat-title,
  .navbar .services-cat-item.is-expanded .services-cat-title {
    color: #00AFC0 !important;
  }

  .navbar .services-cat-arrow {
    font-size: 0.8rem !important;
    color: #64748b !important;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
  }

  .navbar .services-cat-item.is-expanded .services-cat-arrow {
    transform: rotate(180deg) !important;
    color: #00AFC0 !important;
  }

  /* Treatment Submenu: Indented to 52px, 0.9rem, weight 400 */
  .navbar .services-sub-menu {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    background: #ffffff !important;
    transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    display: block !important;
  }

  .navbar .services-cat-item.is-expanded .services-sub-menu {
    max-height: 800px !important;
    opacity: 1 !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .navbar .services-sub-list {
    margin: 0 !important;
    padding: 0 !important;
    border-left: none !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .navbar .services-sub-list li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .navbar .services-sub-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 20px 12px 52px !important; /* 52px left padding indent */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #374151 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f8fafc !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    white-space: normal !important;
  }

  .navbar .services-sub-link:hover {
    background: #f8f9fb !important;
    color: #00AFC0 !important;
  }

  /* Pinned Footer Actions (Call & Book Consultation) */
  .navbar .nav-menu > li.nav-drawer-cta {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    margin-top: auto !important;
    background: #ffffff !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e5e9f0 !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06) !important;
    flex-shrink: 0 !important;
  }

  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-call,
  .btn-drawer-call {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1.5px solid #00AFC0 !important;
    color: #00AFC0 !important;
    border-radius: 10px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-call i,
  .btn-drawer-call i {
    font-size: 0.9rem !important;
    color: #00AFC0 !important;
  }

  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-call:hover,
  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-call:active,
  .btn-drawer-call:hover,
  .btn-drawer-call:active {
    background: rgba(0, 175, 192, 0.08) !important;
    color: #008f9c !important;
  }

  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-call:focus-visible,
  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-book:focus-visible,
  .btn-drawer-call:focus-visible,
  .btn-drawer-book:focus-visible {
    outline: 2px solid #00AFC0 !important;
    outline-offset: 2px !important;
  }

  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-book,
  .btn-drawer-book {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    background: #00AFC0 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(0, 175, 192, 0.25) !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
  }

  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-book i,
  .btn-drawer-book i {
    font-size: 1.05rem !important;
    color: #ffffff !important;
  }

  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-book:hover,
  .navbar .nav-menu > li.nav-drawer-cta a.btn-drawer-book:active,
  .btn-drawer-book:hover,
  .btn-drawer-book:active {
    background: #008f9c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 175, 192, 0.35) !important;
  }

  /* About page: stack doctor photo above story text on mobile/tablet with proper portrait framing */
  .story-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .story-image {
    order: -1 !important;
    margin: 0 auto 32px auto !important;
    width: 100% !important;
    max-width: 440px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .story-image img {
    width: 100% !important;
    max-width: 440px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-height: 580px !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    border: 1.5px solid rgba(0, 175, 192, 0.2) !important;
    object-fit: cover !important;
    object-position: top center !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ==========================================================================
   Tablet Rules (769px - 1024px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar {
    padding: 10px 0 !important;
  }

  .nav-logo img {
    height: 44px !important;
    width: auto !important;
  }

  .hero-section {
    padding-top: 64px !important;
  }
}

/* ==========================================================================
   Mobile Rules (768px and narrower)
   ========================================================================== */
@media (max-width: 768px) {
  .navbar {
    padding: 8px 0 !important;
  }

  .nav-logo img {
    height: 40px !important;
    width: auto !important;
  }

  .hero-section {
    padding-top: 60px !important;
  }

  /* Doctor Card Mobile Aspect Ratio (Task 10: 4/5 portrait ratio, width: 100%, object-fit: cover) */
  .doctor-card {
    flex-direction: column !important;
    border-radius: 18px !important;
  }

  .doctor-image-wrapper,
  .doctor-card .doctor-image {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
  }

  .doctor-image-wrapper img,
  .doctor-card .doctor-image img,
  .doctor-card > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }

  /* About page: mobile sizing for founder story photo */
  .story-image {
    max-width: 360px !important;
    margin: 0 auto 24px auto !important;
  }

  .story-image img {
    max-width: 360px !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    max-height: 480px !important;
    border-radius: 18px !important;
  }

  /* Tap targets min-height 44px */
  #btnCapture,
  .btn-scanner-primary,
  .btn-scanner-secondary,
  .btn-scanner-gold {
    min-height: 44px !important;
  }
}

@media (max-width: 480px) {
  .story-image {
    max-width: 310px !important;
    margin: 0 auto 20px auto !important;
  }

  .story-image img {
    max-width: 310px !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    max-height: 410px !important;
    border-radius: 16px !important;
  }
}

/* ==========================================================================
   Universal Form Input Zoom Prevention (font-size >= 16px below 1025px)
   ========================================================================== */
@media (max-width: 1024px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  select,
  textarea,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .kezza-chat-input,
  .q-text-input,
  .q-phone-input {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   UNIVERSAL APPOINTMENT & FINAL CTA BANNER STANDARDIZATION (ALL PAGES)
   Ensures compact padding, removes border-radius cuts above footers,
   and standardizes balanced button sizing & typography across desktop & mobile.
   ========================================================================== */
.final-cta-section,
.final-message-section,
.contact-cta-section {
  padding: 46px 20px 50px !important;
  border-radius: 0 !important;
  text-align: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.final-cta-section .container,
.final-message-section .container,
.contact-cta-section .container {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

.final-cta-section h2,
.final-message-section h2,
.contact-cta-section h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 auto 10px auto !important;
  max-width: 820px !important;
  letter-spacing: -0.015em !important;
}

.final-cta-section p,
.final-message-section p,
.contact-cta-section p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  max-width: 620px !important;
  margin: 0 auto 22px auto !important;
}

/* ── Universal CTA / Appointment Buttons ───────────────────────────────── */
.btn-appointment,
.final-cta-section .btn-consultation,
.final-message-section .btn-consultation,
.contact-cta-section .btn-white {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 30px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* White button on teal background (contact.html, index.html) */
.btn-appointment,
.contact-cta-section .btn-white {
  background: #ffffff !important;
  color: #008F9C !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14) !important;
}

.btn-appointment:hover,
.contact-cta-section .btn-white:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28) !important;
}

/* Dark consultation button on teal banner (about.html, hair-services.html, skin-services.html) */
.final-message-section .btn-consultation,
.final-cta-section .btn-consultation {
  background: linear-gradient(135deg, #091224 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.final-message-section .btn-consultation:hover,
.final-cta-section .btn-consultation:hover {
  background: #ffffff !important;
  color: #008F9C !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .final-cta-section,
  .final-message-section,
  .contact-cta-section {
    padding: 38px 16px 42px !important;
    border-radius: 0 !important;
  }

  .final-cta-section h2,
  .final-message-section h2,
  .contact-cta-section h2 {
    font-size: clamp(1.35rem, 5.2vw, 1.75rem) !important;
    margin-bottom: 8px !important;
  }

  .final-cta-section p,
  .final-message-section p,
  .contact-cta-section p {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  .btn-appointment,
  .final-cta-section .btn-consultation,
  .final-message-section .btn-consultation,
  .contact-cta-section .btn-white {
    padding: 12px 24px !important;
    font-size: 0.9rem !important;
    width: auto !important;
    max-width: 320px !important;
  }
}




/* css/scroll-3d.css */
.scroll3d-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(56vw, 480px);
    max-width: 480px;
    aspect-ratio: 297/200;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%) !important;
    perspective: 1200px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.075;
    contain: layout paint style;
    will-change: transform;
}
.scroll3d-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: visible;
    filter: drop-shadow(0 12px 28px rgba(0, 175, 192, 0.08));
    transition: filter 0.3s ease;
}
body.scanner-body .scroll3d-bg img,
body:has(#cameraFeed) .scroll3d-bg img,
body.dark-page .scroll3d-bg img,
body.weight-loss-body .scroll3d-bg img,
[data-theme="dark"] .scroll3d-bg img {
    filter: brightness(0) invert(1) drop-shadow(0 12px 28px rgba(0, 175, 192, 0.18));
    opacity: 0.07;
}
@media (prefers-reduced-motion: reduce) {
    .scroll3d-bg img {
        transform: none !important;
    }
}
/* css/mobile-pro.css */
/* ==========================================================================
   KEZZA CLINIC — PROFESSIONAL MOBILE FIX SUITE  v1.0
   Loaded LAST so every rule wins cleanly.
   Covers: 375px to 768px (phones) and 769px to 1024px (tablets)
   ========================================================================== */

/* 0. GLOBAL */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
*, *::before, *::after { box-sizing: border-box !important; }
img, video, iframe, embed { max-width: 100% !important; }

/* 1. NAVBAR */
@media (max-width: 1024px) {
    .navbar {
        position: fixed !important; top: 0 !important; left: 0 !important;
        right: 0 !important; width: 100% !important; z-index: 1000 !important;
        background: rgba(255,255,255,0.98) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-bottom: 1px solid rgba(0,175,192,0.14) !important;
        box-shadow: 0 2px 16px rgba(12,35,56,0.06) !important;
        padding: 10px 0 !important;
    }
    .nav-container {
        display: flex !important; align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important; gap: 0 !important;
    }
    .nav-logo img { height: 40px !important; width: auto !important; display: block !important; }
    .nav-cta { display: none !important; }
    .hamburger, #hamburger {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        width: 44px !important; height: 44px !important;
        min-width: 44px !important; min-height: 44px !important;
        padding: 0 !important; margin: 0 0 0 auto !important;
        background: transparent !important; border: none !important;
        cursor: pointer !important; gap: 5px !important;
        -webkit-tap-highlight-color: transparent !important;
        flex-shrink: 0 !important;
    }
    .hamburger span, #hamburger span {
        display: block !important; width: 24px !important;
        height: 2px !important; background: #1e293b !important;
        border-radius: 2px !important;
        transition: transform 0.25s ease, opacity 0.25s ease !important;
    }
    .navbar .nav-menu { left: auto !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-logo img { height: 44px !important; }
}

/* 2. HERO SECTION */
@media (max-width: 768px) {
    .hero-section { padding-top: 60px !important; }
    .hero-stage { min-height: clamp(520px, 78vh, 640px) !important; height: clamp(520px, 78vh, 640px) !important; }
    .hero-inner { align-items: flex-end !important; padding-bottom: 28px !important; }
    .hero-copy { margin-left: 0 !important; padding: 0 18px !important; width: 100% !important; }
    .hero-eyebrow { font-size: 10px !important; padding: 6px 12px !important; margin-bottom: 12px !important; }
    .hero-h1 { font-size: clamp(1.65rem, 6.5vw, 2.2rem) !important; margin-bottom: 12px !important; line-height: 1.2 !important; white-space: normal !important; }
    .hero-h1 .hero-line-1, .hero-h1 .hero-line-2, .hero-h1 .hero-line-3 { white-space: normal !important; }
    .hero-sub { font-size: 0.88rem !important; margin-bottom: 18px !important; line-height: 1.6 !important; max-width: 100% !important; }
    .hero-ctas { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 10px !important; margin: 0 !important; }
    .hero-btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; font-size: 0.92rem !important; }
    .hero-scrim { background: linear-gradient(0deg, rgba(4,14,22,0.92) 0%, rgba(4,14,22,0.5) 40%, rgba(4,14,22,0.1) 70%, transparent 100%) !important; }
}
@media (max-width: 480px) {
    .hero-stage { min-height: clamp(500px, 76vh, 600px) !important; height: clamp(500px, 76vh, 600px) !important; }
    .hero-h1 { font-size: clamp(1.45rem, 7vw, 1.9rem) !important; }
    .hero-eyebrow { font-size: 9px !important; }
}

/* 3. TRUST STRIP */
@media (max-width: 860px) {
    .kz-trust-strip { overflow: hidden !important; }
    .kz-trust-list { padding: 10px 16px !important; gap: 10px !important; }
    .kz-trust-list li { font-size: 12px !important; padding: 6px 12px !important; white-space: nowrap !important; }
}

/* 4. GALLERY CAROUSEL */
@media (max-width: 768px) {
    .image-gallery-section { padding: 20px 0 28px !important; overflow: hidden !important; }
    .gallery-carousel-viewport { padding: 6px 12px !important; overflow: hidden !important; }
    .gallery-carousel-card { flex: 0 0 78vw !important; max-width: 310px !important; height: 280px !important; border-radius: 14px !important; }
}
@media (max-width: 480px) {
    .gallery-carousel-card { flex: 0 0 85vw !important; max-width: 295px !important; height: 250px !important; }
}

/* 5. WHY KEZZA */
@media (max-width: 768px) {
    .why-kezza-section { padding: 48px 0 !important; }
    .features-grid-pro { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
    .feature-card-pro { padding: 22px 20px !important; border-radius: 14px !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .features-grid-pro { grid-template-columns: repeat(2,1fr) !important; }
}

/* 6. STATS */
@media (max-width: 768px) {
    .stats-section-pro { padding: 36px 0 !important; }
    .stats-grid-pro { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; }
    .stat-box-pro { padding: 18px 14px !important; border-radius: 14px !important; }
    .stat-number-pro { font-size: 2rem !important; }
    .stat-label-pro { font-size: 0.8rem !important; }
    .stat-badge-micro { font-size: 0.65rem !important; }
}
@media (max-width: 480px) {
    .stats-grid-pro { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
    .stat-number-pro { font-size: 1.75rem !important; }
}

/* 7. SERVICES */
@media (max-width: 768px) {
    .services-master-section { padding: 36px 0 24px !important; }
    .services-section-header { padding: 0 16px !important; }
    .services-section-header h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
    .services-categories-grid { grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; padding: 0 !important; }
    .service-category-card { border-radius: 14px !important; }
    .service-category-inner { padding: 14px 14px 16px !important; }
    .category-thumb-wrap { height: 140px !important; border-radius: 10px !important; }
    .category-desc { display: none !important; }
    .services-interactive-viewer { padding: 16px 14px !important; border-radius: 16px !important; }
    .viewer-header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-bottom: 16px !important; margin-bottom: 20px !important; }
    .viewer-header-left h3 { font-size: 1.1rem !important; }
    .viewer-tabs-nav { width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; padding: 4px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
    .viewer-tabs-nav::-webkit-scrollbar { display: none !important; }
    .viewer-tab-btn { flex-shrink: 0 !important; padding: 7px 12px !important; font-size: 0.78rem !important; white-space: nowrap !important; }
    .treatments-subgrid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .treatment-item-card { border-radius: 14px !important; }
    .treatment-thumb-box { height: 170px !important; }
    .tab-page-cta-banner { flex-direction: column !important; align-items: flex-start !important; padding: 18px 16px !important; border-radius: 14px !important; gap: 14px !important; }
    .btn-banner-full { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 480px) {
    .services-categories-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .category-thumb-wrap { height: 160px !important; }
}

/* 8. DOCTORS */
@media (max-width: 768px) {
    .doctors-section { padding: 40px 0 !important; }
    .doctors-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; }
    .doctor-card { flex-direction: column !important; border-radius: 16px !important; max-width: 480px !important; margin: 0 auto !important; width: 100% !important; }
    /* Portrait doctors: show face correctly — use 16/9 aspect ratio, crop from top */
    .doctor-image-wrapper, .doctor-card-img {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        max-height: 240px !important;
        height: auto !important;
        flex: none !important;
        overflow: hidden !important;
    }
    .doctor-image-wrapper img, .doctor-card-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
    }
}

/* 9. TESTIMONIALS */
@media (max-width: 768px) {
    .testimonials-section { padding: 48px 0 !important; }
    .testimonials-section h2 { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; margin-bottom: 32px !important; }
    .video-testimonials { grid-template-columns: 1fr !important; gap: 16px !important; }
    .video-testimonials video { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; display: block !important; }
}

/* 10. BRANCHES */
@media (max-width: 768px) {
    .kz-branches { padding: 36px 0 60px !important; }
    .kz-branches-header { padding: 0 16px !important; text-align: center !important; }
    .kz-branches-title { font-size: clamp(1.55rem, 5vw, 2rem) !important; }
    .kz-visit-filters { justify-content: flex-start !important; overflow-x: auto !important; flex-wrap: nowrap !important; padding: 4px 0 8px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; }
    .kz-visit-filters::-webkit-scrollbar { display: none !important; }
    .kz-visit-pill-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
    .kz-branch-grid { grid-template-columns: 1fr !important; max-width: 420px !important; margin: 0 auto !important; }
    .kz-branch-media { height: 180px !important; }
}

/* 11. FAQ */
@media (max-width: 768px) {
    .kz-faq { padding: 40px 0 !important; }
    .kz-faq-list { padding: 0 16px !important; }
    .kz-faq-q { font-size: 14px !important; padding: 16px 18px !important; }
    .kz-faq-a p { padding: 0 18px 16px !important; font-size: 13.5px !important; }
}

/* 12. BMI / EMI */
@media (max-width: 768px) {
    .bmi-calculator-section, .emi-calculator-section { padding: 44px 0 !important; }
    .bmi-calc-card { grid-template-columns: 1fr !important; gap: 20px !important; padding: 20px 16px !important; }
    .emi-calc-wrap { padding: 20px 16px !important; }
    .emi-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .bmi-target-grid { grid-template-columns: repeat(3,1fr) !important; }
    .emi-tenure-pills { flex-wrap: wrap !important; gap: 8px !important; }
    .emi-tenure-btn { flex: 1 1 calc(50% - 4px) !important; min-width: 80px !important; }
}

/* 13. CONTACT CTA BANNER */
@media (max-width: 768px) {
    .contact-cta-section { padding: 28px 16px !important; }
    .contact-cta-section h2 { font-size: clamp(1.2rem, 5vw, 1.55rem) !important; margin-bottom: 8px !important; }
    .contact-cta-section p { font-size: 0.86rem !important; margin-bottom: 16px !important; }
    .btn-white { padding: 10px 22px !important; font-size: 0.88rem !important; }
}

/* 14. FOOTER & FINAL CTA */
@media (max-width: 768px) {
    footer, .footer {
        padding-top: 48px !important;
        /* Extra bottom padding so last footer content never hides behind dock */
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 12px)) !important;
        background: #111827 !important;
    }
    .footer .container { padding: 0 20px !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 !important; }
    .footer-column { border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding-bottom: 18px !important; }
    .footer-column:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
    .footer-column p { font-size: 0.88rem !important; line-height: 1.65 !important; color: #94a3b8 !important; }
    .footer-column .footer-nav-title, p.footer-nav-title { font-size: 1.1rem !important; margin-bottom: 12px !important; color: #00AFC0 !important; font-weight: 600 !important; }
    .footer-column ul { display: flex !important; flex-direction: column !important; gap: 8px !important; padding-left: 0 !important; list-style: none !important; }
    .footer-column ul li a { font-size: 0.88rem !important; color: #e2e8f0 !important; display: inline-block !important; padding: 2px 0 !important; }
    .footer-bottom { margin-top: 24px !important; padding-top: 20px !important; text-align: center !important; font-size: 0.78rem !important; color: #64748b !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }
    .footer-bottom-content { flex-direction: column !important; gap: 14px !important; text-align: center !important; padding: 0 !important; }
    /* Social icons: centered, spaced, wrap cleanly */
    .footer-social { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
    .social-link { font-size: 0.82rem !important; padding: 6px 12px !important; }

    /* Final CTA Banner (contact.html & other pages) */
    .final-cta-section,
    .final-message-section,
    .contact-cta-section {
        padding: 38px 16px 42px !important;
        border-radius: 0 !important;
        text-align: center !important;
    }
    .final-cta-section h2,
    .final-message-section h2,
    .contact-cta-section h2 {
        font-size: clamp(1.35rem, 5.2vw, 1.75rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        color: #ffffff !important;
    }
    .final-cta-section p,
    .final-message-section p,
    .contact-cta-section p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        color: rgba(255,255,255,0.92) !important;
    }
    .btn-appointment,
    .final-cta-section .btn-consultation,
    .final-message-section .btn-consultation,
    .contact-cta-section .btn-white {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 26px !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        border-radius: 30px !important;
        width: auto !important;
        max-width: 320px !important;
        box-sizing: border-box !important;
    }
}

/* 15. FLOATING DOCK */
@media (max-width: 600px) {
    .floating-quick-dock {
        bottom: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 16px) !important;
        max-width: 420px !important;
        padding: 5px 5px !important;
        gap: 4px !important;
        border-radius: 35px !important;
        z-index: 998 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 15px rgba(0, 175, 192, 0.25) !important;
    }
    .floating-quick-dock.dock-hidden {
        transform: translate(-50%, 130%) !important;
    }
    /* Hide phone call button on mobile — 3 buttons fit cleanly */
    .floating-quick-dock .dock-item.dock-call {
        display: none !important;
    }
    .floating-quick-dock .dock-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 10px 6px !important;
        font-size: 0.70rem !important;
        gap: 5px !important;
        justify-content: center !important;
        border-radius: 28px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    .floating-quick-dock .dock-item span {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        max-width: none !important;
        font-weight: 700 !important;
        font-size: 0.70rem !important;
        letter-spacing: -0.015em !important;
        display: inline !important;
    }
    .floating-quick-dock .dock-item i {
        font-size: 0.88rem !important;
        flex-shrink: 0 !important;
    }
}
/* Extra-small phones: 390px and below — keep all labels but shrink further */
@media (max-width: 390px) {
    .floating-quick-dock {
        gap: 3px !important;
        padding: 4px 4px !important;
    }
    .floating-quick-dock .dock-item {
        padding: 9px 5px !important;
        gap: 4px !important;
    }
    .floating-quick-dock .dock-item span {
        font-size: 0.65rem !important;
        letter-spacing: -0.02em !important;
    }
    .floating-quick-dock .dock-item i {
        font-size: 0.82rem !important;
    }
}
/* Tiny phones ≤ 340px: icons only */
@media (max-width: 340px) {
    .floating-quick-dock .dock-item span { display: none !important; }
    .floating-quick-dock .dock-item { padding: 10px 12px !important; gap: 0 !important; }
    .floating-quick-dock .dock-item i { font-size: 1rem !important; }
}

/* 16. AI CHAT FAB — lifted above the floating dock */
@media (max-width: 768px) {
    .kezza-chat-fab, #kezzaChatFab {
        bottom: 80px !important;
        right: 14px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 997 !important;
        box-shadow: 0 4px 18px rgba(0, 175, 192, 0.45) !important;
    }
    .kezza-chat-tooltip, #kezzaTooltip {
        bottom: 138px !important;
        right: 12px !important;
        max-width: min(280px,80vw) !important;
    }
    .kezza-chat-window, #kezzaChatWindow {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 82vh !important;
        z-index: 1001 !important;
    }
}

/* 17. BACK TO TOP — Hidden on mobile phones to prevent clutter */
@media (max-width: 768px) {
    #kzBackToTop, .back-to-top {
        display: none !important;
    }
}

/* 18. SOCIAL SIDEBAR */
@media (max-width: 992px) {
    .social-sidebar { display: none !important; }
}

/* 19. SECTION PADDING RHYTHM */
@media (max-width: 768px) {
    .why-kezza-section, .services-master-section, .branches-section,
    .testimonials-section, .gallery-section, .doctors-section, .stats-section {
        padding-left: 0 !important; padding-right: 0 !important;
    }
    .container { padding: 0 16px !important; }
    .section-header h2, .section-header-pro h2 { font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important; margin-bottom: 12px !important; }
    .section-header p { font-size: 0.9rem !important; }
    .section-badge-luxury { font-size: 0.72rem !important; padding: 5px 12px !important; }
}

/* 20. INPUT ZOOM PREVENTION */
@media (max-width: 1024px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="password"], input[type="search"],
    input[type="date"], select, textarea { font-size: 16px !important; }
}

/* 21. FACE SCANNER PAGE */
@media (max-width: 768px) {
    .scanner-hero-section { padding: 80px 16px 40px !important; }
    .scanner-content-grid, .scanner-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    #videoCanvas, #cameraView { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; }
    .scanner-results-panel { max-width: 100% !important; width: 100% !important; }
}

/* 22. BRANCHES PAGE */
@media (max-width: 768px) {
    .branches-hero { padding: 80px 16px 40px !important; }
    .branches-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .branch-card { padding: 20px 16px !important; }
    .map-placeholder img { height: 220px !important; border-radius: 12px !important; }
    /* Branch CTA section buttons stack properly */
    .branch-cta-actions, .kz-branch-ctas {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .kz-btn-book, .kz-btn-wa, .kz-btn-map {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* 23. CONTACT PAGE & FLAGSHIP HERO CARD FIX */
@media (max-width: 768px) {
    .contact-hero-section {
        padding: 72px 0 30px 0 !important;
        min-height: auto !important;
    }
    .contact-hero-section .hero-container {
        padding: 0 16px !important;
        gap: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .hero-editorial-col {
        width: 100% !important;
    }
    .hero-editorial-col .hero-kicker-badge {
        font-size: 0.67rem !important;
        padding: 4px 10px !important;
        margin-bottom: 8px !important;
    }
    .hero-main-heading {
        font-size: 1.65rem !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }
    .hero-lead-narrative {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
        margin-bottom: 14px !important;
    }
    .hero-metrics-strip {
        gap: 10px !important;
        padding: 8px 12px !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    .hero-cta-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    .hero-btn-primary, .hero-btn-whatsapp, .hero-btn-call {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
        border-radius: 25px !important;
        font-size: 0.86rem !important;
    }
    .hero-visual-col, .hero-image {
        width: 100% !important;
        margin: 0 auto !important;
    }
    .hero-visual-wrapper {
        position: relative !important;
        width: 100% !important;
    }
    .hero-photo-frame {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    }
    .hero-photo-frame img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 20% !important;
        display: block !important;
    }

    /* FIX: Prevent flagship tag from stretching into a giant black box */
    .hero-photo-tag-flagship {
        position: absolute !important;
        top: 12px !important;
        bottom: auto !important;
        left: auto !important;
        right: 12px !important;
        width: auto !important;
        height: auto !important;
        max-width: calc(100% - 24px) !important;
        padding: 6px 14px !important;
        border-radius: 25px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(15, 23, 42, 0.88) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
    }
    .flagship-tag-text {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
    }
    .flagship-tag-text strong {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        color: #ffffff !important;
    }
    .flagship-tag-text span {
        font-size: 0.60rem !important;
        white-space: nowrap !important;
        color: #a7f3d0 !important;
    }

    /* FDA Doctors Pill */
    .hero-photo-tag-doctors {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 175, 192, 0.2) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    }
    .doctors-tag-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0 !important;
        background: rgba(0, 175, 192, 0.1) !important;
        color: #00AFC0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .doctors-tag-info strong {
        font-size: 0.76rem !important;
        display: block !important;
        color: #1e293b !important;
    }
    .doctors-tag-info span {
        font-size: 0.66rem !important;
        color: #64748b !important;
        display: block !important;
    }

    .contact-form-grid, .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .contact-form-section {
        padding: 85px 14px 28px !important;
    }
}

/* 24. ABOUT PAGE */
@media (max-width: 768px) {
    .story-grid, .about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .about-section { padding: 80px 16px 40px !important; }
    .timeline-item { padding-left: 20px !important; }
}

/* 25. SERVICE PAGES */
@media (max-width: 768px) {
    .treatments-grid, .services-grid, .skin-services-grid, .service-cards-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .service-card, .skin-card, .treatment-card { border-radius: 14px !important; }
    .service-card img, .skin-card img, .treatment-card img { height: 200px !important; border-radius: 10px 10px 0 0 !important; }
    .service-page-hero, .page-hero, .hair-hero, .skin-hero { padding: 80px 16px 40px !important; }
    /* PRP, Weight-Loss, Skin service page heroes */
    .prp-hero-section, .weight-hero-section, .skin-hero-section,
    .pm-hero-section, .ht-hero-section {
        padding-top: 72px !important;
        padding-bottom: 36px !important;
    }
    /* Treatment process steps & numbered lists */
    .treatment-steps, .process-steps, .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    /* Before/after result grids */
    .results-grid, .before-after-grid, .ba-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}
@media (min-width: 480px) and (max-width: 768px) {
    .treatments-grid, .services-grid, .skin-services-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* 26. BEFORE/AFTER SLIDER */
@media (max-width: 768px) {
    .before-after-slider, .comparison-slider { max-width: 100% !important; width: 100% !important; border-radius: 12px !important; }
    .comparison-slider img { height: 260px !important; }
}

/* 27. PMU PAGE */
@media (max-width: 768px) {
    .pmu-hero-section, .pmu-header { padding: 80px 16px 40px !important; }
    .pmu-grid, .pmu-treatments-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* 28. TAP TARGETS */
@media (max-width: 1024px) {
    button, [role="button"], a.btn, .btn-primary, .btn-white, .btn-gold, .btn-navy,
    .hero-btn, .kz-btn-book, .kz-btn-wa, .kz-btn-map, .btn-drawer-call, .btn-drawer-book {
        min-height: 44px !important; touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* 29. REMOVE HOVER LINGERING ON TOUCH */
@media (hover: none) {
    .feature-card-pro:hover, .kz-branch:hover, .treatment-item-card:hover,
    .gallery-carousel-card:hover, .service-category-card:hover,
    .testimonial-card:hover, .stat-box-pro:hover { transform: none !important; }
    .feature-card-pro:hover .category-thumb-wrap img,
    .service-category-card:hover .category-thumb-wrap img,
    .gallery-carousel-card:hover img { transform: none !important; }
}

/* 30. OVERFLOW GUARD — no section bleeds past viewport */
section, .hero-section, .image-gallery-section, .why-kezza-section,
.stats-section-pro, .services-master-section, .testimonials-section,
.kz-branches, .kz-trust-strip, .kz-faq, .contact-cta-section, .footer {
    max-width: 100vw !important; overflow-x: hidden !important;
}