/* --- 1. VARIABLES --- */
:root {
    --bg-body: #03080a;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
    --glass-bg: rgba(15, 23, 28, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    
    /* GASTRO COLORS */
    --brand-primary: #2EC4B6; /* Teal */
    --brand-secondary: #FF6A88; /* Coral Pink */
    --brand-gradient: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    
    --brand-glow: 0 0 30px rgba(46, 196, 182, 0.3);
    
    --nav-width: 1200px;
    --curve: 50px;
    --transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="light"] {
    --bg-body: #F5F7F8;
    --text-main: #121212;
    --text-muted: rgba(0, 0, 0, 0.6);
    --glass-bg: rgba(255, 255, 255, 0.9);
    --brand-primary: #009B90;
    --glass-border: rgba(0, 0, 0, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'SF Pro Display', -apple-system, sans-serif; }

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.5s ease;
    overflow-x: hidden;
    
    /* FIX: Hide Scrollbar but allow scrolling */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* --- 2. PRELOADER --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}
.logo-img{
    height: 70px;   /* apne design ke hisaab se change kar sakte ho */
    width: auto;
    display: block;
}


.holo-container { position: relative; width: 120px; height: 120px; margin-bottom: 30px; }
.heart-svg { width: 100%; height: 100%; overflow: visible; }
.heart-fill { clip-path: inset(100% 0 0 0); animation: fillLiquid 2s ease-in-out forwards; }
.scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--brand-primary); box-shadow: 0 0 15px var(--brand-primary);
    animation: scanDown 2s ease-in-out infinite; opacity: 0.7;
}

.loading-bar { width: 200px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-top: 15px; overflow: hidden; }
.progress { width: 0%; height: 100%; background: var(--brand-secondary); animation: loadProgress 2s ease-out forwards; }

/* --- 3. AMBIENT BACKGROUND --- */
.ambient-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background: 
        radial-gradient(circle at 10% 20%, rgba(46, 196, 182, 0.12), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255, 106, 136, 0.1), transparent 40%);
    filter: blur(80px);
}

/* --- 4. NAVBAR STYLES --- */
.glass-nav {
    position: fixed; top: 25px; left: 50%; transform: translateX(-50%);
    width: 95%; max-width: var(--nav-width); z-index: 1000;
    transition: var(--transition);
}
.glass-nav.scrolled { top: 10px; width: 90%; max-width: 1550px; }

.nav-container {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 30px; background: var(--glass-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: var(--curve);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2);
    transition: all 0.5s ease;
}

.logo { font-size: 1.5rem; font-weight: 700; color: var(--text-main); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.logo-icon { color: var(--brand-primary); font-size: 1.6rem; }
.logo:hover .logo-icon { animation: heartBeat 1s infinite; }
.highlight { color: var(--brand-secondary); }

/* NAV LINKS */
.nav-links { display: flex; gap: 30px; list-style: none; }
.anim-item { opacity: 0; transform: translateY(-20px); }
body.loaded .anim-item { animation: slideInDown 0.8s forwards; animation-delay: calc(0.1s * var(--d)); }

.nav-links a {
    text-decoration: none; color: var(--text-muted); font-weight: 600;
    font-size: 0.95rem; transition: 0.3s; position: relative; letter-spacing: 0.3px;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-main); }
.nav-links a::after {
    content: ''; position: absolute; bottom: -6px; left: 0; width: 0%; height: 2px;
    background: var(--brand-gradient); transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nav-links a:hover::after { width: 100%; }

/* BUTTONS */
.nav-controls { display: flex; align-items: center; gap: 12px; }
.icon-btn {
    background: transparent; border: 1px solid var(--glass-border);
    color: var(--text-main); width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; transition: var(--transition);
}
.icon-btn:hover { background: var(--brand-primary); color: #fff; border-color: transparent; }

/* Global Button Styles */
.btn-primary, .btn-secondary {
    display: flex; align-items: center; justify-content: center; /* FIX: Center Content */
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), #20a4f3);
    color: white; padding: 12px 28px; border-radius: 30px;
    text-decoration: none; font-weight: 600; font-size: 0.95rem;
    box-shadow: var(--brand-glow); transition: var(--transition); border: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(46, 196, 182, 0.4); }

/* WHATSAPP FLOAT */
.whatsapp-float {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px);
    border: 1px solid rgba(37, 211, 102, 0.4); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #25D366; font-size: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 999; transition: var(--transition); text-decoration: none !important;
}
.whatsapp-float:hover { background: #25D366; color: white; transform: scale(1.1) rotate(10deg); }


/* --- 5. UPDATED HERO SECTION STYLES --- */

/* Container Layout */
.hero-section {
    min-height: 100vh; 
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    padding: 180px 20px 100px 20px; 
    overflow-x: hidden; 
}

.hero-container {
    width: 100%; max-width: 1200px;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px;
    align-items: center;
}

/* LEFT SIDE */
.hero-content { text-align: left; z-index: 2; }
.hero-content h1 { font-size: 4.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; }

/* Buttons Group */
.cta-group { display: flex; gap: 15px; flex-wrap: wrap; }
.hero-btn { padding: 16px 38px; font-size: 1rem; }

/* Play Icon */
.play-icon {
    width: 35px; height: 35px; background: rgba(255,255,255,0.1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-right: 10px; border: 1px solid var(--glass-border); transition: 0.3s;
}
[data-theme="light"] .play-icon { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
.btn-secondary:hover .play-icon { background: var(--brand-primary); color: #fff; border-color: transparent; }
.btn-secondary { color: var(--text-main); text-decoration: none; font-weight: 600; }

/* Trust Badges */
.trust-badge { margin-top: 40px; display: flex; align-items: center; gap: 15px; }
.avatar-group { display: flex; }
.avatar-group img {
    width: 45px; height: 45px; border-radius: 50%; border: 3px solid var(--bg-body);
    margin-left: -15px; object-fit: cover;
}
.avatar-group img:first-child { margin-left: 0; }
.trust-text { font-size: 0.95rem; color: var(--text-muted); }
.trust-text .bold { color: var(--text-main); font-weight: 700; display: block; }

/* RIGHT SIDE: GLASS VISUALS */
.hero-visual {
    position: relative; height: 500px; display: flex;
    align-items: center; justify-content: center; perspective: 1000px;
}

/* Glass Cards */
.glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); position: absolute; transition: 0.4s;
}
[data-theme="light"] .glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Main Dashboard Card */
.main-card {
    width: 340px; height: 420px; padding: 30px; z-index: 2;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; justify-content: space-between;
    animation: floatMain 6s ease-in-out infinite;
}

.card-header { display: flex; align-items: center; gap: 15px; }
.icon-box {
    width: 50px; height: 50px; background: rgba(46, 196, 182, 0.15);
    border-radius: 15px; display: flex; align-items: center; justify-content: center;
    color: var(--brand-primary); font-size: 1.5rem;
}
.card-header h4 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-main); }
.status { font-size: 0.8rem; color: var(--brand-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* FIX: Animated Graph */
.graph-wave {
    flex-grow: 1; display: flex; align-items: center;
    overflow: hidden; position: relative; margin: 15px 0;
}
.wave-svg { width: 100%; height: 100%; }
.wave-line {
    stroke-dasharray: 1000; stroke-dashoffset: 1000;
    animation: waveDraw 5s linear infinite alternate;
}
.wave-fill { animation: wavePulse 4s ease-in-out infinite alternate; }

/* Stats Row */
.stats-row {
    display: flex; justify-content: space-between;
    background: rgba(0,0,0,0.2); padding: 15px 20px; border-radius: 20px;
}
[data-theme="light"] .stats-row { background: rgba(255,255,255,0.3); }

.stat { display: flex; flex-direction: column; }
.stat .label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; }
/* FIX: Theme Capable Font Color */
.stat .value { font-size: 1.1rem; font-weight: 700; color: var(--text-main); }

/* Floating Small Cards */
.float-card {
    padding: 12px 20px; display: flex; align-items: center; gap: 12px;
    border-radius: 20px; min-width: 170px;
    background: rgba(20, 25, 30, 0.8); backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
}
[data-theme="light"] .float-card { background: rgba(255, 255, 255, 0.7); }

.float-card i { font-size: 1.4rem; }
.pink-icon { color: var(--brand-secondary); }
.teal-icon { color: var(--brand-primary); }
.float-card span { font-size: 0.7rem; color: var(--text-muted); display: block;}
/* FIX: Theme Capable Font Color */
.float-card h5 { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--text-main); }

.small-1 { top: 15%; right: -25px; z-index: 3; animation: floatSmall 5s ease-in-out infinite; animation-delay: 1s; }
.small-2 { bottom: 10%; left: -35px; z-index: 3; animation: floatSmall 7s ease-in-out infinite; animation-delay: 0.5s; }


/* --- 6. ANIMATIONS --- */
@keyframes floatMain {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-20px); }
}
@keyframes floatSmall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
/* Graph Animations */
@keyframes waveDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes wavePulse { from { opacity: 0.3; transform: scaleY(1); } to { opacity: 0.5; transform: scaleY(1.1); } }

/* Load Animations */
.fade-up { opacity: 0; transform: translateY(40px); }
body.loaded .fade-up { animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
body.loaded .delay-1 { animation-delay: 0.2s; }
body.loaded .delay-2 { animation-delay: 0.4s; }
body.loaded .delay-3 { animation-delay: 0.6s; }

@keyframes slideInDown { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@keyframes slideDownMenu { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heartBeat { 0% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } }
@keyframes fillLiquid { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes loadProgress { 0% { width: 0%; } 100% { width: 100%; } }
@keyframes scanDown { 0%, 100% { top: 0; opacity: 0; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0; } }


/* --- 7. RESPONSIVE ADJUSTMENTS (MOBILE) --- */
.mobile-only { display: none; }
.mobile-cta-container { display: none; }

@media (max-width: 900px) {
    
    .desktop-only { display: none; }
    .mobile-only { display: flex; }
    .nav-container { padding: 12px 20px; }

    /* MOBILE MENU DRAWER */
    .nav-links {
        display: none; flex-direction: column;
        position: absolute; top: 80px; left: 0; width: 100%;
        background: var(--bg-body); 
        backdrop-filter: none; -webkit-backdrop-filter: none;
        padding: 20px 25px; 
        border-radius: 30px; border: 1px solid var(--glass-border);
        box-shadow: 0 30px 80px rgba(0,0,0,0.8); z-index: 999;
    }
    
    .nav-links.active {
        display: flex; animation: slideDownMenu 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        align-items: flex-start; text-align: left;
    }

    .nav-links li { 
        width: 100%; opacity: 1; transform: none; animation: none; 
        margin-bottom: 5px; 
        border-bottom: 1px solid rgba(255,255,255,0.03); padding-bottom: 8px;
    }
    .nav-links a { font-size: 1.1rem; display: block; width: 100%; }
    .mobile-cta-container { display: block; border: none !important; margin-top: 10px;}
    .mobile-btn-full { display: block; width: 100%; text-align: center; padding: 12px; font-size: 1rem; }

    /* HERO ADJUSTMENTS */
    /* FIX: Reduced Padding to close gap */
    .hero-section {
        padding-top: 110px; /* Was 140px, now 110px */
        padding-bottom: 60px;
        display: block; height: auto; text-align: center;
    }
    
    .hero-container { display: flex; flex-direction: column; gap: 50px; }
    .hero-content { align-items: center; display: flex; flex-direction: column; }
    .hero-content h1 { font-size: 3rem; }
    .cta-group { justify-content: center; }
    .trust-badge { justify-content: center; }

    /* Visual Cards on Mobile */
    .hero-visual {
        height: 400px; width: 100%; margin-top: 0;
        transform: scale(0.9); transform-origin: center top;
    }
    .main-card { width: 300px; height: 380px; }
    .small-1 { right: -10px; top: 10%; }
    .small-2 { left: -10px; bottom: 5%; }
}





/* --- COMPACT MODERN SERVICES GRID --- */

.gastro-services {
    padding: 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-size: 2.2rem; font-weight: 800; margin: 10px 0; line-height: 1.1; }
.section-header p { font-size: 1rem; color: var(--text-muted); }

/* Compact Grid */
.services-grid {
    display: grid;
    /* Auto-fit creates responsive columns automatically */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 20px; /* Tighter gap for compact feel */
}

/* --- SERVICE CARD --- */
.svc-card {
    position: relative;
    border-radius: 24px; /* Slightly squarer for "Tech" feel */
    overflow: hidden;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Glass Background */
.card-glass {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px); z-index: 0;
    transition: 0.4s;
}
[data-theme="light"] .card-glass { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* Hover Effects */
.svc-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}
.svc-card:hover .card-glass { background: rgba(255, 255, 255, 0.06); }

/* Icon Styling */
.svc-icon {
    width: 50px; height: 50px; flex-shrink: 0;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; position: relative; z-index: 2;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: #fff;
    transition: 0.4s;
}
[data-theme="light"] .svc-icon { color: #333; }

/* Icon Colors */
.teal-glow { color: var(--brand-primary); }
.pink-glow { color: var(--brand-secondary); }
.blue-glow { color: #20a4f3; }
.purple-glow { color: #8e44ad; }
.orange-glow { color: #e67e22; }
.red-glow { color: #e74c3c; }

.svc-card:hover .svc-icon {
    transform: scale(1.1) rotate(-5deg);
    background: #000;
    border-color: transparent;
}
/* Icon Glows on Hover */
.svc-card:hover .teal-glow { box-shadow: 0 0 20px var(--brand-primary); background: var(--brand-primary); color: #000;}
.svc-card:hover .pink-glow { box-shadow: 0 0 20px var(--brand-secondary); background: var(--brand-secondary); color: #000;}
.svc-card:hover .blue-glow { box-shadow: 0 0 20px #20a4f3; background: #20a4f3; color: #fff;}
.svc-card:hover .purple-glow { box-shadow: 0 0 20px #8e44ad; background: #8e44ad; color: #fff;}
.svc-card:hover .orange-glow { box-shadow: 0 0 20px #e67e22; background: #e67e22; color: #fff;}
.svc-card:hover .red-glow { box-shadow: 0 0 20px #e74c3c; background: #e74c3c; color: #fff;}

/* Content Info */
.svc-info { position: relative; z-index: 2; flex-grow: 1; }

.svc-info h3 {
    font-size: 1.2rem; font-weight: 700; margin-bottom: 8px;
    color: var(--text-main); transition: 0.3s;
}

.svc-info p {
    font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 15px;
}

/* Tags (Pills) */
.svc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-tags span {
    font-size: 0.75rem; padding: 4px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.05); color: var(--text-muted);
    border: 1px solid var(--glass-border); font-weight: 500;
    transition: 0.3s;
}
.svc-card:hover .svc-tags span {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: var(--text-main);
}

/* Gradient Background Effect on Hover */
.hover-gradient {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    border-radius: 50%; filter: blur(80px); opacity: 0;
    transform: translate(50%, -50%); z-index: 1; pointer-events: none;
    transition: 0.5s;
}
.teal-grad { background: var(--brand-primary); }
.pink-grad { background: var(--brand-secondary); }
.blue-grad { background: #20a4f3; }
.purple-grad { background: #8e44ad; }
.orange-grad { background: #e67e22; }
.red-grad { background: #e74c3c; }

.svc-card:hover .hover-gradient { opacity: 0.15; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .services-grid { grid-template-columns: 1fr; } /* Single column on phone */
    .svc-card { padding: 20px; }
}






/* --- DOCTOR PROFILE SECTION (IOS 26 STYLE - AURA EDITION) --- */

.doctor-section {
    padding: 50px 20px 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* To keep the big aura inside bounds */
}

.profile-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Split Layout */
    gap: 80px;
    align-items: center;
}

/* --- LEFT: VISUALS --- */
.doctor-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.image-wrapper {
    position: relative;
    width: 400px; height: 500px;
    display: flex; align-items: center; justify-content: center;
}

/* NEW: MYSTIC AURA EFFECT (Circle + Zoom + Rotate) */
.neon-ring {
    position: absolute;
    top: 50%; left: 50%;
    /* Bada Size Circle ke liye */
    width: 550px; height: 550px; 
    border-radius: 50%;
    
    /* Conic Gradient for Energy look */
    background: conic-gradient(from 0deg, var(--brand-primary), transparent 40%, var(--brand-secondary), transparent 80%, var(--brand-primary));
    
    /* Heavy Blur for Gas/Aura effect */
    filter: blur(60px);
    opacity: 0.5;
    z-index: 0;
    
    /* Animation: Ghoomna + Saans Lena (Combined) */
    animation: auraAlive 12s linear infinite;
}

.image-frame {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 40px;
    overflow: hidden;
    z-index: 1; /* Image Aura ke upar rahegi */
    background: #000;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}

.image-frame img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}
.image-wrapper:hover img { transform: scale(1.08); }

/* Shine Overlay inside image */
.shine-overlay {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg);
    animation: shineMove 6s infinite;
}

/* Floating Badges */
.float-badge {
    position: absolute;
    background: rgba(15, 20, 25, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 14px 20px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    z-index: 2;
    animation: floatBadge 6s ease-in-out infinite;
}
[data-theme="light"] .float-badge { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); }

.badge-icon {
    width: 45px; height: 45px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
}
.badge-icon i { font-size: 1.5rem; color: var(--brand-secondary); }

.float-badge div { display: flex; flex-direction: column; }
.float-badge span { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.float-badge strong { font-size: 0.95rem; color: var(--text-main); font-weight: 700; }

.badge-1 { top: 8%; left: -40px; animation-delay: 0s; border-left: 3px solid var(--brand-primary); }
.badge-2 { bottom: 12%; right: -30px; animation-delay: 2s; border-right: 3px solid var(--brand-secondary); }

/* --- RIGHT: INFO --- */
.doctor-info { text-align: left; padding-left: 20px; }

.section-tag {
    display: inline-block; padding: 6px 16px;
    background: rgba(46, 196, 182, 0.1);
    border: 1px solid rgba(46, 196, 182, 0.2);
    border-radius: 30px;
    font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--brand-primary); margin-bottom: 20px; font-weight: 700;
}

.doctor-info h2 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.designation { font-size: 1.1rem; color: var(--text-muted); font-weight: 500; margin-bottom: 25px; letter-spacing: 0.5px; }

.bio-text { font-size: 1.05rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 35px; max-width: 90%; }
.highlight-text { color: var(--text-main); font-weight: 600; border-bottom: 1px dashed var(--brand-primary); }

/* Animated Signature */
.signature-area { margin-bottom: 40px; }
.signature-area span { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }

.sig-wrapper { position: relative; height: 60px; width: 250px; display: flex; align-items: center; }
.sig-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.sig-path {
    stroke-dasharray: 300; stroke-dashoffset: 300;
    animation: signWrite 4s ease-out forwards infinite;
    animation-delay: 1s;
}
.sig-name {
    font-family: serif; font-size: 2rem; color: var(--text-main); opacity: 0;
    animation: fadeInName 4s forwards infinite; animation-delay: 1s;
    margin-left: 10px; font-style: italic;
}

/* Stats Grid */
.stats-grid { display: flex; gap: 20px; margin-bottom: 40px; }

.glass-stat {
    flex: 1;
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid var(--glass-border);
    padding: 18px; border-radius: 20px;
    text-align: center; transition: 0.3s;
}
[data-theme="light"] .glass-stat { background: rgba(255,255,255,0.6); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.glass-stat:hover { transform: translateY(-5px); border-color: var(--brand-primary); background: rgba(46, 196, 182, 0.05); }

.glass-stat h3 { font-size: 2.2rem; font-weight: 800; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 5px; }
.glass-stat p { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* Action */
.action-area { display: flex; align-items: center; gap: 20px; }
.social-links { display: flex; gap: 10px; }
.social-links a {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: 0.3s; text-decoration: none; font-size: 1.2rem;
}
.social-links a:hover { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); transform: rotate(10deg); }

/* --- ANIMATIONS --- */

/* New Aura Animation: Rotate + Pulse (Zoom In/Out) */
@keyframes auraAlive {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(0.9); 
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(1.15); /* Zoom In */
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(0.9); /* Zoom Out */
    }
}

@keyframes shineMove { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes signWrite { to { stroke-dashoffset: 0; } }
@keyframes fadeInName { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0.8; } }

/* --- RESPONSIVE FOR ALL DEVICES --- */
@media (max-width: 900px) {
    .doctor-section { padding-top: 30px; } 
    .profile-container { grid-template-columns: 1fr; gap: 60px; }
    
    .doctor-visual { margin-bottom: 20px; }
    .image-wrapper { width: 100%; max-width: 320px; height: 380px; }
    
    /* Mobile par Aura thoda chhota taaki screen se bahar na jaye */
    .neon-ring { width: 350px; height: 350px; filter: blur(50px); }
    
    .badge-1 { left: -10px; top: 10%; }
    .badge-2 { right: -10px; bottom: 10%; }
    
    .doctor-info { text-align: center; padding-left: 0; }
    .signature-area { display: flex; flex-direction: column; align-items: center; }
    .sig-wrapper { justify-content: center; }
    
    .action-area { justify-content: center; flex-wrap: wrap; }
    .stats-grid { gap: 10px; }
    .glass-stat h3 { font-size: 1.8rem; }
}
@media (max-width: 768px) {
  .stats-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
    width: 100%;
  }

  .stat-card{
    width: 100%;
    text-align: center;
  }

  .stat-card h3{
    font-size: 24px;
  }

  .stat-card p{
    font-size: 14px;
  }
}



/* --- PATIENT JOURNEY (SPECTRUM EDITION) --- */

.process-section {
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
    /* FIX: Solid Black hataya, subtle gradient base diya */
    background: radial-gradient(circle at center, #0a1015 0%, #000 100%);
}
[data-theme="light"] .process-section { background: #f0f2f5; }

/* New Colorful Background Mesh */
.spectrum-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(46, 196, 182, 0.15), transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 106, 136, 0.1), transparent 50%);
    filter: blur(60px); z-index: 0; pointer-events: none;
}

/* Timeline Layout */
.timeline-container {
    max-width: 1100px; margin: 60px auto 0;
    display: flex; justify-content: space-between;
    position: relative; z-index: 1;
}

/* Gradient Line */
.timeline-line {
    position: absolute; top: 30px; left: 50px; right: 50px; height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px; z-index: 0;
}
[data-theme="light"] .timeline-line { background: rgba(0,0,0,0.1); }

.line-fill {
    width: 100%; height: 100%;
    /* Full Spectrum Gradient */
    background: linear-gradient(to right, #2EC4B6, #20a4f3, #8e44ad, #FF6A88);
    opacity: 0.8; box-shadow: 0 0 15px rgba(255,255,255,0.2);
}

/* --- STEP ITEM --- */
.process-step {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; flex: 1;
}

/* Glowing Markers (Numbers) */
.step-marker {
    width: 60px; height: 60px;
    background: #0a0f14;
    border: 2px solid; /* Border color defined per step below */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem;
    margin-bottom: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: 0.3s;
    position: relative; z-index: 2;
}
[data-theme="light"] .step-marker { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Card Styling */
.step-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid var(--glass-border);
    padding: 30px 20px; border-radius: 24px;
    width: 95%;
    transition: 0.4s;
    backdrop-filter: blur(10px);
}
[data-theme="light"] .step-card { background: rgba(255,255,255,0.8); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* Colorful Icons */
.step-icon-box {
    font-size: 2.5rem; margin-bottom: 15px;
    transition: 0.3s; display: inline-block;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.2));
}

.step-card h4 { font-size: 1.2rem; color: var(--text-main); margin-bottom: 8px; font-weight: 700; }
.step-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }

/* --- COLOR THEMES PER STEP --- */

/* Step 1: Teal */
.st-1 .step-marker { border-color: #2EC4B6; color: #2EC4B6; }
.st-1 .step-icon-box { color: #2EC4B6; }
.st-1:hover .step-card { border-color: #2EC4B6; transform: translateY(10px); box-shadow: 0 10px 30px rgba(46, 196, 182, 0.2); }
.st-1:hover .step-marker { background: #2EC4B6; color: #000; box-shadow: 0 0 20px #2EC4B6; }

/* Step 2: Blue */
.st-2 .step-marker { border-color: #20a4f3; color: #20a4f3; }
.st-2 .step-icon-box { color: #20a4f3; }
.st-2:hover .step-card { border-color: #20a4f3; transform: translateY(10px); box-shadow: 0 10px 30px rgba(32, 164, 243, 0.2); }
.st-2:hover .step-marker { background: #20a4f3; color: #fff; box-shadow: 0 0 20px #20a4f3; }

/* Step 3: Purple */
.st-3 .step-marker { border-color: #8e44ad; color: #8e44ad; }
.st-3 .step-icon-box { color: #8e44ad; }
.st-3:hover .step-card { border-color: #8e44ad; transform: translateY(10px); box-shadow: 0 10px 30px rgba(142, 68, 173, 0.2); }
.st-3:hover .step-marker { background: #8e44ad; color: #fff; box-shadow: 0 0 20px #8e44ad; }

/* Step 4: Pink */
.st-4 .step-marker { border-color: #FF6A88; color: #FF6A88; }
.st-4 .step-icon-box { color: #FF6A88; }
.st-4:hover .step-card { border-color: #FF6A88; transform: translateY(10px); box-shadow: 0 10px 30px rgba(255, 106, 136, 0.2); }
.st-4:hover .step-marker { background: #FF6A88; color: #000; box-shadow: 0 0 20px #FF6A88; }


/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .timeline-container { flex-direction: column; gap: 40px; align-items: center; }
    
    /* Vertical Line for Mobile */
    .timeline-line {
        width: 3px; height: 100%; top: 0; left: 30px; right: auto;
        background: linear-gradient(to bottom, #2EC4B6, #FF6A88);
    }
    .line-fill { display: none; }

    .process-step { 
        flex-direction: row; width: 100%; gap: 20px; 
        text-align: left; padding-left: 10px;
    }
    
    .step-marker { margin-bottom: 0; flex-shrink: 0; width: 40px; height: 40px; font-size: 1rem; }
    .step-card { width: 100%; max-width: 320px; padding: 20px; }
    
    .step-icon-box { font-size: 1.8rem; margin-bottom: 5px; float: right; }
}



/* --- ULTRA PREMIUM HOLOGRAPHIC FEATURES (THEME FIXED) --- */

.advantage-section {
    padding: 100px 20px;
    max-width: 1250px;
    margin: 0 auto;
    position: relative;
}

/* Ambient Background */
.advantage-bg {
    position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, transparent 70%);
    transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
}
[data-theme="light"] .advantage-bg {
    background: radial-gradient(circle at center, rgba(0,0,0,0.03) 0%, transparent 70%);
}

/* Grid Layout */
.crystal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* --- THE CRYSTAL CARD --- */
.crystal-card {
    position: relative;
    border-radius: 35px;
    background: transparent; 
    z-index: 1;
    transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. Animated Gradient Border */
.card-border {
    position: absolute; inset: 0; padding: 2px; 
    border-radius: 35px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none; transition: 0.4s;
}
/* Light Mode Border Fix */
[data-theme="light"] .card-border {
    background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.02));
}

/* Theme Colors */
.teal-theme .card-border { background: linear-gradient(135deg, var(--brand-primary), transparent 60%); }
.pink-theme .card-border { background: linear-gradient(135deg, var(--brand-secondary), transparent 60%); }
.blue-theme .card-border { background: linear-gradient(135deg, #20a4f3, transparent 60%); }
.purple-theme .card-border { background: linear-gradient(135deg, #8e44ad, transparent 60%); }

/* 2. Inner Card Body (Background Fix) */
.card-inner {
    position: relative;
    background: #0a0f14; /* Deep Dark */
    border-radius: 35px;
    padding: 40px 30px;
    height: 100%;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}

/* LIGHT MODE CARD BACKGROUND FIX */
[data-theme="light"] .card-inner { 
    background: #ffffff; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Soft Shadow instead of inset */
    border: 1px solid rgba(0,0,0,0.05);
}

.crystal-card:hover { transform: translateY(-10px); }

/* 3. Noise Texture */
.bg-noise {
    position: absolute; inset: 0; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* 4. Holographic Orb (Icon Container) */
.holo-orb {
    width: 70px; height: 70px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    margin-bottom: 30px;
    font-size: 2rem; color: #fff;
    /* Dark Mode Orb */
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    transition: 0.5s;
}

/* LIGHT MODE ORB FIX */
[data-theme="light"] .holo-orb {
    background: rgba(0,0,0,0.04); /* Slight grey tint */
    border: 1px solid rgba(0,0,0,0.08);
    color: #333; /* Dark Icon */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Orb Glows */
.orb-glow {
    position: absolute; inset: 5px; border-radius: 50%;
    filter: blur(15px); opacity: 0.4; transition: 0.5s;
}
.teal-theme .orb-glow { background: var(--brand-primary); }
.pink-theme .orb-glow { background: var(--brand-secondary); }
.blue-theme .orb-glow { background: #20a4f3; }
.purple-theme .orb-glow { background: #8e44ad; }

/* Icon Colors Update */
.teal-theme i { color: var(--brand-primary); }
.pink-theme i { color: var(--brand-secondary); }
.blue-theme i { color: #20a4f3; }
.purple-theme i { color: #8e44ad; }

.crystal-card:hover .holo-orb { transform: scale(1.1); }
.crystal-card:hover .orb-glow { opacity: 0.8; filter: blur(20px); }

/* 5. Watermark Number (Visibility Fix) */
.meta-number {
    position: absolute; top: 20px; right: 30px;
    font-size: 4rem; font-weight: 800;
    font-family: 'Segoe UI', sans-serif;
    transition: 0.4s; pointer-events: none;
    
    /* Dark Mode Visibility Fix */
    color: rgba(255, 255, 255, 0.09); 
}

/* LIGHT MODE NUMBER FIX */
[data-theme="light"] .meta-number { 
    color: rgba(0, 0, 0, 0.09); /* Visible grey on white */
}

.crystal-card:hover .meta-number { transform: translateY(-5px); opacity: 0.2; }

/* Text Styling */
.crystal-card h3 {
    font-size: 1.6rem; font-weight: 700; margin-bottom: 15px; 
    color: var(--text-main); /* Uses variable for theme switching */
    position: relative; z-index: 1;
}
.crystal-card p {
    font-size: 1rem; 
    color: var(--text-muted); /* Uses variable */
    line-height: 1.6;
    position: relative; z-index: 1;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .crystal-grid { grid-template-columns: 1fr; }
    .card-inner { padding: 30px; }
}


/* --- CURVED KNOWLEDGE HUB (APPLE STYLE) --- */

.faq-section {
    padding: 80px 20px 120px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* The "iPad" Container Wrapper */
.faq-curved-wrapper {
    background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid var(--glass-border);
    border-radius: 50px; /* Heavy Curve */
    padding: 60px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}
[data-theme="light"] .faq-curved-wrapper {
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
}

.faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Split Layout */
    gap: 80px;
    align-items: start;
}

/* --- LEFT SIDE (Sticky Visual) --- */
.faq-left { position: relative; height: 100%; }
.sticky-content { position: sticky; top: 50px; }

.icon-badge {
    width: 60px; height: 60px;
    background: var(--brand-primary);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #000;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(46, 196, 182, 0.3);
}

.faq-left h2 {
    font-size: 3.5rem; font-weight: 800; line-height: 1; margin-bottom: 20px; color: var(--text-main);
}
.faq-left p {
    font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 40px;
}

/* Contact Box */
.contact-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    padding: 20px; border-radius: 24px;
    display: flex; align-items: center; gap: 15px;
    width: max-content;
}
[data-theme="light"] .contact-box { background: #f5f7f9; border-color: transparent; }

.support-avatars { display: flex; }
.support-avatars img {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bg-body);
    margin-left: -10px;
}
.support-avatars img:first-child { margin-left: 0; }

.support-text span { display: block; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.support-text a {
    color: var(--text-main); font-weight: 700; text-decoration: none; font-size: 0.95rem;
    display: flex; align-items: center; gap: 5px; transition: 0.3s;
}
.support-text a:hover { gap: 10px; color: var(--brand-primary); }


/* --- RIGHT SIDE (Floating Capsules) --- */
.faq-right { display: flex; flex-direction: column; gap: 20px; }

/* The Capsule Card */
.faq-capsule {
    background: rgba(10, 15, 20, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 30px; /* Curvy Capsule */
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}
[data-theme="light"] .faq-capsule {
    background: #f9fbfc; border-color: transparent;
}

/* Hover Effect */
.faq-capsule:hover {
    background: rgba(255,255,255,0.03);
    transform: scale(1.01);
}
[data-theme="light"] .faq-capsule:hover { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* Active State */
.faq-capsule.active {
    background: rgba(20, 25, 30, 0.8);
    border-color: var(--brand-primary);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.3);
}
[data-theme="light"] .faq-capsule.active {
    background: #fff;
    border-color: var(--brand-primary);
    box-shadow: 0 20px 40px rgba(46, 196, 182, 0.15);
}

/* Header */
.capsule-head {
    padding: 25px 30px;
    display: flex; align-items: center; gap: 20px;
}

.q-id {
    font-size: 1rem; font-weight: 700; color: var(--text-muted);
    background: rgba(255,255,255,0.05); padding: 5px 12px; border-radius: 12px;
}
[data-theme="light"] .q-id { background: rgba(0,0,0,0.05); }

.faq-capsule.active .q-id { background: var(--brand-primary); color: #000; }

.capsule-head h4 {
    flex-grow: 1; font-size: 1.2rem; font-weight: 600; color: var(--text-main); margin: 0;
}

/* Toggle Icon */
.capsule-toggle {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-main); transition: 0.4s;
}
[data-theme="light"] .capsule-toggle { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

.faq-capsule.active .capsule-toggle {
    background: var(--brand-primary); color: #000;
    transform: rotate(135deg); /* Plus to Cross */
}

/* Body (Answer) */
.capsule-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-capsule.active .capsule-body { max-height: 250px; }

.capsule-content {
    padding: 0 30px 30px 85px; /* Indented text */
}

.capsule-content p {
    font-size: 1.05rem; color: var(--text-muted); line-height: 1.7;
}

/* --- RESPONSIVE --- */
/* CRITICAL FIX: Prevent Toggle button from squashing on small screens */
.capsule-toggle, .q-id {
    flex-shrink: 0; /* Ye icon aur ID ko dabne se rokega */
}

@media (max-width: 900px) {
    /* Wrapper padding kam ki taaki mobile par jagah bache */
    .faq-curved-wrapper {
        padding: 30px 15px; /* Side padding kam ki (60px -> 15px) */
        border-radius: 30px;
    }

    .faq-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 50px;
    }
    
    /* Left side center alignment */
    .faq-left { text-align: center; }
    .contact-box { margin: 0 auto; }
    .icon-badge { margin: 0 auto 20px auto; }
    .faq-left h2 { font-size: 2.8rem; }

    /* CAPSULE MOBILE ADJUSTMENTS */
    .capsule-head {
        padding: 15px; /* Padding kam ki (25px -> 15px) */
        gap: 12px; /* Gap thoda kam kiya */
        align-items: flex-start; /* Important: Long text hone par icon upar rahega */
    }

    /* ID aur Toggle ko text ke saath align karna */
    .q-id, .capsule-toggle {
        margin-top: 4px; /* Thoda neeche khiskaya taaki text ke center mein lage */
    }

    /* Question Text Size */
    .capsule-head h4 {
        font-size: 1.1rem; /* Font thoda chota kiya */
        line-height: 1.4;
    }

    /* Answer Content Padding */
    .capsule-content {
        /* Desktop ka bada indent (85px) hata kar normal padding di */
        padding: 5px 15px 25px 15px; 
    }
}




/* --- SECTION 7: VISIT PORTAL (HOLOGRAPHIC MAP) --- */

.contact-section {
    padding: 80px 20px 120px 20px;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}

/* Background Ambient Glow */
.contact-ambient {
    position: absolute; top: 50%; right: 0; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(46, 196, 182, 0.08) 0%, transparent 70%);
    transform: translateY(-50%); pointer-events: none; z-index: -1;
}

/* The Main Glass Container */
.contact-curved-wrapper {
    background: #080c10; /* Dark Base */
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
}
[data-theme="light"] .contact-curved-wrapper {
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Map is slightly wider */
    min-height: 650px;
}

/* --- LEFT: THE CYBER MAP --- */
.map-visual {
    position: relative; height: 100%; width: 100%;
    overflow: hidden;
    border-right: 1px solid var(--glass-border);
}

.map-frame { width: 100%; height: 100%; position: relative; }

/* THE MAGIC: Dark Mode Map Filter */
.map-frame iframe {
    width: 100%; height: 100%;
    filter: grayscale(100%) invert(90%) hue-rotate(180deg) contrast(1.2) brightness(0.8);
    transition: 0.5s;
}
/* Light Mode Map Adjustment */
[data-theme="light"] .map-frame iframe {
    filter: grayscale(20%) contrast(1.1) brightness(1);
}

/* On Hover: Light up slightly */
.map-visual:hover iframe { filter: grayscale(100%) invert(90%) hue-rotate(180deg) contrast(1.2) brightness(0.9); }
[data-theme="light"] .map-visual:hover iframe { filter: grayscale(0%); }

/* Map Overlay (Vignette) */
.map-overlay {
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
}

/* Animated Pin */
.location-pin {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
    z-index: 2; display: flex; justify-content: center; align-items: center;
}
.pin-core {
    font-size: 2.5rem; color: var(--brand-secondary);
    filter: drop-shadow(0 0 15px var(--brand-secondary));
    animation: pinBounce 2s infinite;
}
.pin-ring {
    position: absolute; bottom: 5px; width: 60px; height: 30px;
    border-radius: 50%; border: 2px solid var(--brand-secondary);
    opacity: 0; animation: ringPulse 2s infinite;
    transform: rotateX(60deg);
}

/* Floating AR Address Card */
.ar-card {
    position: absolute; bottom: 40px; left: 40px;
    background: rgba(15, 20, 25, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 15px 20px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    z-index: 3; transition: 0.3s;
    min-width: 280px;
}
[data-theme="light"] .ar-card { background: rgba(255,255,255,0.95); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.ar-card:hover { transform: translateY(-5px); border-color: var(--brand-primary); }

.ar-icon {
    width: 45px; height: 45px; background: rgba(46, 196, 182, 0.1);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    color: var(--brand-primary); font-size: 1.4rem;
}
.ar-text { display: flex; flex-direction: column; flex: 1; }
.ar-text span { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.ar-text strong { font-size: 1rem; color: var(--text-main); }
.ar-text small { font-size: 0.75rem; color: var(--brand-primary); margin-top: 2px; }

.ar-btn {
    width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary);
    display: flex; align-items: center; justify-content: center; color: #000;
    font-size: 1.2rem; text-decoration: none; box-shadow: 0 0 15px rgba(46, 196, 182, 0.4);
    transition: 0.3s;
}
.ar-btn:hover { transform: rotate(45deg); }


/* --- RIGHT: THE FORM CONSOLE --- */
.form-visual {
    padding: 60px 50px;
    display: flex; flex-direction: column; justify-content: center;
}

.form-header h2 { font-size: 3rem; margin: 15px 0 10px 0; }
.form-header p { font-size: 1rem; color: var(--text-muted); margin-bottom: 40px; }

/* Cyber Form Styles */
.cyber-form { display: flex; flex-direction: column; gap: 35px; }

.input-group { position: relative; }

.input-group input, .input-group select {
    width: 100%; padding: 10px 0 10px 35px;
    background: transparent; border: none; outline: none;
    color: var(--text-main); font-size: 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s; font-family: 'Segoe UI', sans-serif;
}
[data-theme="light"] .input-group input { border-bottom: 1px solid rgba(0,0,0,0.1); color: #000; }

.input-group select { cursor: pointer; color: var(--text-muted); }
.input-group select option { background: #000; color: #fff; }
[data-theme="light"] .input-group select option { background: #fff; color: #000; }

.field-icon {
    position: absolute; top: 12px; left: 0; color: var(--text-muted); font-size: 1.2rem;
    transition: 0.3s;
}

/* Floating Label Logic */
.input-group label {
    position: absolute; top: 10px; left: 35px;
    color: var(--text-muted); font-size: 1rem; pointer-events: none;
    transition: 0.3s ease;
}

/* Animation on Focus (Input valid or focused) */
.input-group input:focus ~ label,
.input-group input:valid ~ label {
    top: -20px; left: 0; font-size: 0.8rem; color: var(--brand-primary);
}

.input-group input:focus ~ .field-icon,
.input-group select:focus ~ .field-icon { color: var(--brand-primary); }

/* The Laser Line Animation */
.laser-line {
    position: absolute; bottom: 0; left: 0; width: 0%; height: 2px;
    background: var(--brand-gradient);
    transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 10px var(--brand-primary);
}
.input-group input:focus ~ .laser-line,
.input-group select:focus ~ .laser-line { width: 100%; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

/* Glowing Submit Button */
.submit-btn {
    width: 100%; justify-content: space-between; margin-top: 20px;
    font-size: 1.1rem; overflow: hidden; position: relative;
}
.btn-glow {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg); animation: btnShine 3s infinite;
}

/* Info Strip */
.info-strip {
    margin-top: 40px; padding-top: 20px;
    border-top: 1px solid var(--glass-border);
    display: flex; justify-content: space-between; align-items: center;
}
.info-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-muted); }
.i-dot { width: 8px; height: 8px; border-radius: 50%; }
.green { background: #25D366; box-shadow: 0 0 10px #25D366; }

/* --- ANIMATIONS --- */
@keyframes pinBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ringPulse { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 80px; height: 40px; opacity: 0; } }
@keyframes btnShine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; display: flex; flex-direction: column-reverse; }
    
    .map-visual { height: 350px; min-height: 350px; border-right: none; border-top: 1px solid var(--glass-border); }
    .ar-card { left: 50%; transform: translateX(-50%); bottom: 20px; min-width: 90%; }
    .ar-card:hover { transform: translateX(-50%) translateY(-5px); }
    
    .form-visual { padding: 40px 25px; width: 100%; }
    .form-row { grid-template-columns: 1fr; gap: 35px; }
    .info-strip { flex-direction: column; gap: 15px; align-items: flex-start; }
}







/* --- SECTION 8: THE ECOSYSTEM (CINEMATIC PORTAL) --- */

.gallery-section {
    padding: 100px 20px;
    max-width: 1400px; /* Wide screen layout */
    margin: 0 auto;
    position: relative;
}

/* Background Glow */
.gallery-bg-glow {
    position: absolute; top: 50%; left: 50%; width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(46, 196, 182, 0.05) 0%, transparent 60%);
    transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
}

/* The Wrapper (Flex Container) */
.gallery-wrapper {
    display: flex;
    gap: 20px;
    height: 600px; /* Fixed height for desktop */
    margin-top: 50px;
}

/* --- THE CARD (Portal) --- */
.gallery-card {
    position: relative;
    flex: 1; /* Default collapsed state */
    border-radius: 40px; /* High curve */
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth spring animation */
    border: 1px solid var(--glass-border);
    background: #000;
}

/* Active State (Expanded) */
.gallery-card.active {
    flex: 4; /* Takes up 4x space */
    border-color: var(--brand-primary);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Image Handling (Parallax Zoom) */
.card-img {
    width: 100%; height: 100%; position: absolute; inset: 0;
}
.card-img img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) brightness(0.6);
    transform: scale(1.1); /* Zoomed in initially */
    transition: 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-card.active .card-img img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1); /* Zooms out to normal on active */
}

/* Gradient Overlay */
.card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000 0%, transparent 70%);
    opacity: 0.9; transition: 0.5s;
}

/* --- CONTENT INSIDE (Title & Text) --- */
.card-content {
    position: absolute; bottom: 40px; left: 40px;
    display: flex; align-items: flex-end; gap: 20px;
    opacity: 0; transform: translateY(30px);
    transition: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-delay: 0.1s;
    z-index: 2; width: 80%;
}

/* Show content only when active */
.gallery-card.active .card-content {
    opacity: 1; transform: translateY(0);
}

.icon-box {
    width: 60px; height: 60px; border-radius: 20px;
    background: var(--brand-primary); color: #000;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; box-shadow: 0 10px 30px rgba(46, 196, 182, 0.4);
}
.pink-glow { background: var(--brand-secondary); box-shadow: 0 10px 30px rgba(255, 106, 136, 0.4); }
.blue-glow { background: #20a4f3; box-shadow: 0 10px 30px rgba(32, 164, 243, 0.4); }
.purple-glow { background: #8e44ad; box-shadow: 0 10px 30px rgba(142, 68, 173, 0.4); }

.text-group h3 { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1; }
.text-group p { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.5; }

/* --- VERTICAL STRIP (Collapsed Label) --- */
.vertical-strip {
    position: absolute; bottom: 40px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 300px;
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 2; opacity: 1; transition: 0.3s;
}

.vertical-strip span {
    writing-mode: vertical-rl; /* Writes text vertically */
    transform: rotate(180deg);
    font-size: 1rem; font-weight: 700; letter-spacing: 4px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap; text-transform: uppercase;
}

.gallery-card:hover .vertical-strip span { color: #fff; }
.gallery-card.active .vertical-strip { opacity: 0; pointer-events: none; }


/* --- RESPONSIVE (ULTRA MOBILE OPTIMIZATION) --- */
@media (max-width: 900px) {
    
    .gallery-wrapper {
        flex-direction: column; /* Stack vertically */
        height: 700px; /* Total height for all cards */
        gap: 15px;
    }

    .gallery-card {
        width: 100%;
        flex: 1; /* Collapsed height */
        border-radius: 30px;
        transition: flex 0.6s ease; /* Faster on mobile */
    }

    /* Active state expands Height instead of Width */
    .gallery-card.active {
        flex: 5; /* Active takes much more vertical space */
    }

    /* Adjust Content for Mobile */
    .card-content {
        bottom: 25px; left: 20px; width: 90%;
        flex-direction: column; align-items: flex-start; gap: 15px;
    }
    
    .icon-box { width: 50px; height: 50px; font-size: 1.5rem; }
    .text-group h3 { font-size: 1.5rem; }
    .text-group p { font-size: 0.9rem; }

    /* Adjust Vertical Strip to be Horizontal on Mobile collapsed cards */
    .vertical-strip {
        width: 100%; height: 100%;
        bottom: 0; left: 0; transform: none;
        align-items: center; justify-content: center;
    }
    
    .vertical-strip span {
        writing-mode: horizontal-tb; /* Horizontal text */
        transform: none;
        font-size: 0.9rem; letter-spacing: 2px;
    }
}


/* --- SECTION 9: TRUST NETWORK (CRYSTAL ALLIANCE) --- */

.partners-section {
    padding: 80px 0 100px 0; /* Full width */
    position: relative;
    overflow: hidden;
    /* Subtle vertical gradient background */
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
}

.partners-section .section-header { padding: 0 20px; margin-bottom: 60px; }

/* Background Glow */
.partners-glow {
    position: absolute; top: 50%; left: 50%; width: 100%; height: 200px;
    background: radial-gradient(ellipse at center, rgba(46, 196, 182, 0.05), transparent 70%);
    transform: translate(-50%, -50%); pointer-events: none;
}

/* Stream Wrapper */
.logo-stream-wrapper {
    position: relative;
    width: 100%;
    padding: 40px 0;
    /* Glass Strip Background */
    background: rgba(255,255,255,0.01);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(5px);
}

/* Fade Edges Mask */
.fade-edges {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, var(--bg-body) 0%, transparent 15%, transparent 85%, var(--bg-body) 100%);
    z-index: 2; pointer-events: none;
}

/* Moving Track */
.logo-track {
    display: flex; gap: 50px;
    width: max-content;
    animation: scrollLogos 40s linear infinite;
    padding: 0 50px;
}

.logo-stream-wrapper:hover .logo-track { animation-play-state: paused; }

/* --- THE PARTNER CRYSTAL (Glass Prism) --- */
/* --- THE PARTNER CRYSTAL (Glass Prism) --- */
.partner-crystal {
    position: relative;
    width: 200px; height: 100px;
    
    /* Change 1: Background ko thoda light kiya taaki logo saaf dikhe */
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    overflow: hidden;
    transition: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

[data-theme="light"] .partner-crystal { 
    background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

/* Change 2: Logo Styling (FULL COLOR FIXED) */
.partner-crystal img {
    max-width: 85%; max-height: 85%;
    object-fit: contain; /* Logo stretch nahi hoga */
    
    /* OLD FILTER REMOVED. New settings: */
    filter: brightness(1.1) contrast(1.1); /* Thoda bright kiya taaki dark mein pop kare */
    opacity: 0.9; /* Slight transparency for blending */
    transition: 0.5s;
    mix-blend-mode: normal; /* Isse colors wapis aa jayenge */
}

/* Light Mode specific adjustments */
[data-theme="light"] .partner-crystal img { 
    filter: none; opacity: 1; 
}

/* --- HOVER EFFECT: GLOW & ZOOM --- */
.partner-crystal:hover {
    transform: translateY(-8px) scale(1.05);
    background: rgba(255,255,255,0.1); /* Bright glass on hover */
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

[data-theme="light"] .partner-crystal:hover { 
    background: #fff; border-color: var(--brand-primary); 
}

.partner-crystal:hover img {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,255,255,0.3)); /* Glow Effect */
}

/* Crystal Shine Sweep (Refined) */
.crystal-shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); /* Stronger shine */
    transform: skewX(-25deg);
    animation: crystalSweep 4s infinite;
    pointer-events: none;
}

/* Bottom Reflection */
.bottom-reflection {
    position: absolute; bottom: 0; left: 10%; width: 80%; height: 1px;
    background: radial-gradient(circle, rgba(255,255,255,0.8), transparent);
    opacity: 0.5; transition: 0.5s;
}
.partner-crystal:hover .bottom-reflection { 
    opacity: 1; width: 100%; left: 0; box-shadow: 0 0 10px rgba(255,255,255,0.5); 
}

/* Note Capsule */
.tpa-note {
    display: flex; justify-content: center; margin-top: 40px;
}
.note-capsule {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.05);
    padding: 8px 20px; border-radius: 30px;
    border: 1px solid var(--glass-border);
    font-size: 0.9rem; color: var(--text-muted);
}
.note-capsule i { color: var(--brand-primary); font-size: 1.1rem; }


/* --- ANIMATIONS --- */
@keyframes scrollLogos {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-200px * 7 - 350px)); } /* Adjusted for logo count & gap */
}

@keyframes crystalSweep {
    0% { left: -100%; opacity: 0; }
    30% { opacity: 1; }
    60% { left: 200%; opacity: 0; }
    100% { left: 200%; opacity: 0; }
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .partner-crystal { width: 150px; height: 80px; }
    .logo-track { gap: 30px; }
}



/* --- SECTION 10: MEGA HUB FOOTER (ULTRA PREMIUM) --- */

.footer-section {
    position: relative;
    background: #020305; /* Pitch Black for contrast */
    padding: 0 0 30px 0;
    margin-top: 0;
}
[data-theme="light"] .footer-section { background: #f8f9fa; }

/* 1. Neon Gradient Top Border */
.footer-border-gradient {
    width: 100%; height: 4px;
    background: linear-gradient(90deg, 
        var(--brand-primary), 
        var(--brand-secondary), 
        #20a4f3, 
        var(--brand-primary));
    background-size: 200% 200%;
    animation: gradientFlow 5s ease infinite;
    box-shadow: 0 0 20px rgba(46, 196, 182, 0.4);
}
@keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.footer-container {
    max-width: 1400px; /* Wide layout */
    margin: 0 auto;
    padding: 80px 20px 20px 20px;
}

/* 2. Five Column Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr 1.2fr; /* Asymmetric Grid */
    gap: 40px;
    margin-bottom: 60px;
}

/* --- COLUMN STYLES --- */
.f-col { display: flex; flex-direction: column; }

/* Brand Column */
.f-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 2rem; font-weight: 800; color: #fff;
    margin-bottom: 20px; text-decoration: none;
}
[data-theme="light"] .f-logo { color: #000; }
.f-logo i { color: var(--brand-primary); }

.f-bio {
    font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 30px;
}

/* Certification Badges */
.cert-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-box {
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.03);
    padding: 8px 12px; border-radius: 8px;
    text-align: center; width: 80px;
}
[data-theme="light"] .badge-box { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

.badge-box span { display: block; font-weight: 700; color: var(--brand-primary); font-size: 0.9rem; }
.badge-box small { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }

/* Headers */
.f-head {
    font-size: 1.1rem; color: #fff; font-weight: 700; margin-bottom: 25px;
    text-transform: uppercase; letter-spacing: 1px;
    position: relative; display: inline-block;
}
[data-theme="light"] .f-head { color: #000; }

.f-head::after {
    content: ''; position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px;
    background: var(--brand-gradient); border-radius: 2px;
}
.mt-4 { margin-top: 30px; }

/* Link Lists (Glass Hover Effect) */
.f-links { list-style: none; padding: 0; }
.f-links li { margin-bottom: 12px; }

.f-links a {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem; color: var(--text-muted); text-decoration: none;
    padding: 8px 12px; border-radius: 8px;
    transition: 0.3s; border-left: 2px solid transparent;
}

/* Hover State */
.f-links a:hover {
    background: rgba(255,255,255,0.05);
    color: var(--brand-primary);
    border-left-color: var(--brand-primary);
    transform: translateX(5px);
}
[data-theme="light"] .f-links a:hover { background: #eefbfb; }

.f-links i { font-size: 1.1rem; opacity: 0.7; }
.sm-links a { font-size: 0.85rem; padding: 5px 0; border: none; }
.sm-links a:hover { background: transparent; padding-left: 5px; }

/* --- CONTACT COLUMN --- */
.contact-card {
    display: flex; gap: 15px; margin-bottom: 20px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
    padding: 15px; border-radius: 12px;
    align-items: center; transition: 0.3s;
}
[data-theme="light"] .contact-card { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.contact-card:hover { border-color: var(--brand-secondary); transform: translateY(-3px); }

.contact-card i {
    font-size: 1.5rem; color: var(--brand-secondary);
    background: rgba(255, 106, 136, 0.1); width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
}

.contact-card div { display: flex; flex-direction: column; }
.contact-card strong { font-size: 0.95rem; color: var(--text-main); margin-bottom: 2px; }
.contact-card span { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.sub-text { font-size: 0.8rem; opacity: 0.7; }

/* Newsletter */
.newsletter-box { margin-top: 30px; }
.newsletter-box h5 { font-size: 0.9rem; color: var(--text-main); margin-bottom: 10px; }

.news-input {
    display: flex; background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border); border-radius: 8px;
    overflow: hidden;
}
[data-theme="light"] .news-input { background: #fff; border-color: rgba(0,0,0,0.1); }

.news-input input {
    flex: 1; background: transparent; border: none; outline: none;
    padding: 12px; color: var(--text-main); font-size: 0.9rem;
}
.news-input button {
    background: var(--brand-primary); border: none; color: #000;
    width: 50px; cursor: pointer; font-size: 1.2rem; transition: 0.3s;
}
.news-input button:hover { background: #fff; color: var(--brand-primary); }

/* --- FOOTER BOTTOM --- */
.footer-divider {
    height: 1px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin-bottom: 30px;
}

.footer-bottom {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    text-align: center;
}

.social-row { display: flex; gap: 15px; margin-bottom: 10px; }
.social-btn {
    width: 45px; height: 45px; border-radius: 50%;
    background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); text-decoration: none; font-size: 1.2rem;
    transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[data-theme="light"] .social-btn { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.social-btn:hover { transform: translateY(-5px) scale(1.1); color: #fff; border-color: transparent; }
.facebook:hover { background: #1877F2; }
.twitter:hover { background: #000; border-color: #333; }
.linkedin:hover { background: #0077b5; }
.instagram:hover { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.youtube:hover { background: #FF0000; }

.copy-text p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 5px; }
.copy-text strong { color: var(--text-main); }
.credits { font-size: 0.8rem; opacity: 0.6; }
.credits i { color: #FF3B30; animation: heartBeat 1.5s infinite; }

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
    .brand-col, .contact-col { grid-column: span 3; text-align: center; }
    
    .brand-col { align-items: center; }
    .f-logo, .cert-badges { justify-content: center; }
    .f-bio { max-width: 600px; margin: 0 auto 20px auto; }
    
    .contact-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
    .newsletter-box { grid-column: span 2; }
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; display: flex; flex-direction: column; gap: 40px; }
    
    .brand-col, .contact-col { grid-column: auto; text-align: left; }
    .brand-col { align-items: flex-start; }
    .f-logo { justify-content: flex-start; }
    .f-bio { margin: 0 0 20px 0; text-align: left; }
    
    .contact-col { display: flex; flex-direction: column; }
    .newsletter-box { width: 100%; }
    
    .footer-bottom { text-align: center; }
}

/* --- ORTHO SECTION SPECIFIC STYLES --- */

.ortho-section {
    position: relative;
    /* Optional: A slight background separation if needed */
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
}

/* THE REVERSED LAYOUT LOGIC */
.reversed-layout {
    grid-template-columns: 1.1fr 0.9fr; /* Content Left (Wide), Image Right (Narrower) */
}

/* Swap Order for Desktop */
.reversed-layout .doctor-visual {
    order: 2; /* Visual goes to the right */
    justify-content: flex-start; /* Align image towards center */
}

.reversed-layout .doctor-info {
    order: 1; /* Content goes to the left */
    padding-left: 0;
    padding-right: 40px; /* Padding now on the right side */
    text-align: right; /* Right align text for style */
}

/* Align elements inside reversed layout to right */
.reversed-layout .section-tag {
    margin-left: auto; margin-right: 0;
}

.reversed-layout .signature-area {
    justify-content: flex-end; /* Align signature right */
}
.reversed-layout .sig-wrapper {
    flex-direction: row-reverse; /* Flip signature and name */
}
.reversed-layout .sig-name {
    margin-left: 0; margin-right: 10px;
}
.reversed-layout .stats-grid {
    justify-content: flex-end;
}
.reversed-layout .action-area {
    justify-content: flex-end;
}
.reversed-layout .social-links {
    justify-content: flex-end;
}

/* Mobile Responsiveness for Reversed Section */
@media (max-width: 900px) {
    .reversed-layout {
        grid-template-columns: 1fr; /* Stack vertically */
    }
    
    .reversed-layout .doctor-visual {
        order: 1; /* Visual back to top on mobile */
        justify-content: center;
        margin-bottom: 30px;
    }
    
    .reversed-layout .doctor-info {
        order: 2;
        padding-right: 0;
        text-align: center; /* Center align on mobile */
    }
    
    /* Reset alignments for mobile */
    .reversed-layout .section-tag,
    .reversed-layout .bio-text {
        margin-left: auto; margin-right: auto;
    }
    .reversed-layout .signature-area,
    .reversed-layout .stats-grid,
    .reversed-layout .action-area {
        justify-content: center;
    }
    .reversed-layout .sig-wrapper {
        flex-direction: row; /* Normal direction on mobile */
    }
    .reversed-layout .sig-name {
        margin-left: 10px; margin-right: 0;
    }
}
/* --- ICON VISIBILITY FIX --- */

/* 1. Force Icon Container Visibility */
.svc-icon {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center; 
    justify-content: center;
    background: rgba(255, 255, 255, 0.08); /* Thoda bright background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; /* Default fallback color */
}

/* 2. Force Icon Font Size */
.svc-icon i {
    font-size: 1.8rem !important; /* Size thoda bada kiya taaki clear dikhe */
    line-height: 1;
    display: block;
}

/* 3. Force Specific Colors (Non-Hover State) */
/* Ye classes ensure karengi ki bina hover ke bhi color dikhe */

.svc-icon.teal-glow { color: #2EC4B6 !important; text-shadow: 0 0 10px rgba(46, 196, 182, 0.4); }
.svc-icon.pink-glow { color: #FF6A88 !important; text-shadow: 0 0 10px rgba(255, 106, 136, 0.4); }
.svc-icon.blue-glow { color: #20a4f3 !important; text-shadow: 0 0 10px rgba(32, 164, 243, 0.4); }
.svc-icon.purple-glow { color: #8e44ad !important; text-shadow: 0 0 10px rgba(142, 68, 173, 0.4); }
.svc-icon.orange-glow { color: #e67e22 !important; text-shadow: 0 0 10px rgba(230, 126, 34, 0.4); }
.svc-icon.red-glow { color: #e74c3c !important; text-shadow: 0 0 10px rgba(231, 76, 60, 0.4); }

/* 4. Hover State Changes (Background Black, Color same) */
.svc-card:hover .svc-icon {
    background: #000 !important;
    transform: scale(1.1) rotate(-5deg);
    border-color: transparent;
}

/* Hover par specific colors wapis set karna taaki black na ho jayein (Agar CSS conflict ho) */
.svc-card:hover .svc-icon.teal-glow { color: #2EC4B6 !important; background: #2EC4B6 !important; color: #000 !important; box-shadow: 0 0 20px #2EC4B6; }
.svc-card:hover .svc-icon.pink-glow { color: #FF6A88 !important; background: #FF6A88 !important; color: #000 !important; box-shadow: 0 0 20px #FF6A88; }
.svc-card:hover .svc-icon.blue-glow { color: #20a4f3 !important; background: #20a4f3 !important; color: #fff !important; box-shadow: 0 0 20px #20a4f3; }
.svc-card:hover .svc-icon.purple-glow { color: #8e44ad !important; background: #8e44ad !important; color: #fff !important; box-shadow: 0 0 20px #8e44ad; }
.svc-card:hover .svc-icon.orange-glow { color: #e67e22 !important; background: #e67e22 !important; color: #fff !important; box-shadow: 0 0 20px #e67e22; }
.svc-card:hover .svc-icon.red-glow { color: #e74c3c !important; background: #e74c3c !important; color: #fff !important; box-shadow: 0 0 20px #e74c3c; }
/* --- LAYOUT CONTROL LOGIC --- */

/* Ortho Section Styling */
.ortho-section {
    position: relative;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
}

/* DESKTOP: REVERSED LAYOUT (Swapping for Gastro Section) */
/* Isse Gastro Section mein Content Left aur Image Right ho jayega */
@media (min-width: 901px) {
    .reversed-layout .doctor-visual {
        order: 2; /* Image goes to Right */
        justify-content: flex-end; /* Align image slightly right */
    }
    
    .reversed-layout .doctor-info {
        order: 1; /* Content goes to Left */
        padding-right: 40px; 
        padding-left: 0;
        text-align: left; /* Ensure Text is Left Aligned */
    }
}

/* MOBILE: RESET LAYOUT */
/* Phone par sab kuch HTML order mein dikhega (Image First) */
@media (max-width: 900px) {
    .reversed-layout, .profile-container {
        display: flex;
        flex-direction: column;
    }
    
    /* Image hamesha pehle */
    .doctor-visual {
        order: 1 !important;
        margin-bottom: 30px;
        justify-content: center;
    }
    
    /* Content hamesha baad mein */
    .doctor-info {
        order: 2 !important;
        padding: 0;
        text-align: center;
    }
    
    
    .sig-wrapper { flex-direction: row !important; }
    .sig-name { margin: 0 0 0 10px !important; }
}
/* --- DOCTOR PROFILE SECTION (IMPROVED ALIGNMENT) --- */

.doctor-section {
    padding: 50px 20px 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    /* overflow: hidden; Removed to let badges float freely if needed */
}

.ortho-section {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
}

.profile-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Split Layout */
    gap: 60px; /* Slightly reduced gap for better connection */
    align-items: center; /* CRITICAL: Vertically center content and image */
}

/* --- LEFT/RIGHT: INFO CONTENT --- */
.doctor-info {
    text-align: left;
    /* CRITICAL FIX: Limit width to prevent stretching and improve balance */
    max-width: 550px; 
    width: 100%;
}

/* --- DESKTOP LAYOUT LOGIC (min-width: 901px) --- */
@media (min-width: 901px) {
    /* STANDARD LAYOUT (Gastro: Content Left, Image Right) */
    /* Jab tak 'reversed-layout' class nahi hai */
    .profile-container:not(.reversed-layout) .doctor-info {
        margin-right: auto; /* Keep content compact on the left */
        padding-right: 20px;
    }
    .profile-container:not(.reversed-layout) .doctor-visual {
        justify-content: flex-end; /* Align image block to right */
        padding-left: 20px;
    }

    /* REVERSED LAYOUT (Ortho: Image Left, Content Right) */
    .reversed-layout .doctor-visual {
        order: 1; /* Image stays on Left */
        justify-content: flex-start; /* Align image block to left */
         padding-right: 20px;
    }
    
    .reversed-layout .doctor-info {
        order: 2; /* Content stays on Right */
        margin-left: auto; /* Push content compact to the right */
        padding-left: 20px;
        text-align: left; /* Ensure text remains left-aligned */
    }
}


/* --- MOBILE LAYOUT LOGIC (max-width: 900px) --- */
/* Phone par hamesha Image Upar, Content Neeche */
@media (max-width: 900px) {
    .profile-container,
    .reversed-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    
    /* Force Image to Top */
    .doctor-visual {
        order: 1 !important;
        margin-bottom: 20px;
        justify-content: center; padding: 0;
    }
    
    /* Force Content to Bottom */
    .doctor-info {
        order: 2 !important;
        max-width: 100%; /* Full width on mobile */
        padding: 0;
        text-align: center; /* Center text on mobile looks better */
    }
    
    
    .sig-wrapper { flex-direction: row !important; }
    .sig-name { margin: 0 0 0 10px !important; }
}

/* --- VISUALS & REST OF CSS (Keep existing styles below) --- */
.doctor-visual {
    position: relative;
    display: flex;
    /* justify-content handled in layout media queries above */
}

.image-wrapper {
    position: relative;
    width: 400px; height: 500px;
    display: flex; align-items: center; justify-content: center;
}

/* ... (Baki ke neon-ring, badges, text styles same rahenge jo pehle diye the) ... */


/* --- RESPONSIVE & ALIGNMENT FIXES --- */

/* 1. HERO SECTION - BASE ADJUSTMENTS */
.hero-section {
    /* Height ko min-height rakha taaki content overlap na ho */
    min-height: 100vh; 
    padding: 140px 20px 80px; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden; /* Horizontal scroll rokne ke liye */
}

.hero-container {
    width: 100%;
    max-width: 1280px;
    display: grid;
    /* Desktop: 2 Columns */
    grid-template-columns: 1fr 1fr; 
    gap: 80px;
    align-items: center;
}

/* CONTENT LEFT ALIGNMENT (Desktop & Mobile) */
.hero-content {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Items left me align honge */
    z-index: 5;
}

/* Fluid Typography (Screen ke hisaab se font size change hoga) */
/* --- DEFAULT (DARK MODE) --- */
.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem); 
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;

    /* Dark Mode: Bright White to Teal (Glowy Look) */
    background: linear-gradient(120deg, #ffffff 20%, var(--brand-primary) 90%);
    
    /* Text Clipping */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Fill Transparent */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Dark Mode Glow (Neon Vibe) */
    filter: drop-shadow(0 0 25px rgba(46, 196, 182, 0.3));
    
    transition: all 0.5s ease; /* Smooth transition when theme switches */
}

/* --- LIGHT MODE OVERRIDE --- */
[data-theme="light"] .hero-content h1 {
    /* Light Mode: Dark Slate to Teal (Sharp & Readable Look) */
    background: linear-gradient(120deg, #1a2a33 20%, var(--brand-primary) 100%);
    
    /* Clipping Re-applied just in case */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Light Mode Shadow: Clean Shadow, No Glow (Taaki text dhundhla na ho) */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.hero-content .subtitle {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    max-width: 500px; /* Line length control */
    margin-bottom: 35px;
    color: var(--text-muted);
}

/* Button Group Alignment */
.cta-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* Choti screen par button stack ho jayenge */
    justify-content: flex-start; /* Left Align */
}

/* Trust Badge Left Align */
.trust-badge {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-start; /* Left Align */
}

/* VISUAL ADJUSTMENTS */
.hero-visual {
    position: relative;
    height: 500px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main Card Responsive Fix */
.main-card {
    /* Fixed width hata kar max-width diya */
    width: 100%; 
    max-width: 340px; 
    height: 420px;
    padding: 30px;
}

/* --- MEDIA QUERIES (TABLET & MOBILE) --- */

/* 1. TABLET / SMALL LAPTOP (Max-Width: 1024px) */
@media (max-width: 1024px) {
    .hero-container {
        gap: 30px;
        grid-template-columns: 1fr 1fr; /* Abhi bhi side-by-side */
    }
    
    .hero-content h1 {
        font-size: 3rem; /* Thoda chota font */
    }

    .hero-visual {
        transform: scale(0.9); /* Visual ko thoda chota kiya taaki fit ho */
    }
}

/* 2. MOBILE / PORTRAIT TABLET (Max-Width: 900px) */
@media (max-width: 900px) {
    
    .hero-section {
        padding-top: 120px;
        padding-bottom: 60px;
        height: auto;
        min-height: auto; /* Mobile par full height force nahi karenge */
    }

    .hero-container {
        display: flex;
        flex-direction: column; /* Stack vertically */
        gap: 50px;
    }

    /* Content Order */
    .hero-content {
        order: 1; /* Text upar */
        width: 100%;
        align-items: flex-start; /* Left Align Force */
        text-align: left; /* Left Align Force */
        padding-left: 10px; /* Slight breathing room */
    }

    .hero-visual {
        order: 2; /* Image neeche */
        height: 400px;
        margin-top: 0;
        transform: scale(1); /* Reset scale */
    }

    /* Floating Cards adjustment for Mobile so they don't cut off */
    .small-1 {
        right: 0; /* Screen ke andar lana */
        top: 5%;
        transform: scale(0.9);
    }
    .small-2 {
        left: 0; /* Screen ke andar lana */
        bottom: 0;
        transform: scale(0.9);
    }
    
    /* Buttons full width on very small screens */
    .cta-group {
        width: 100%;
    }
    
    .hero-btn {
        width: 100%; /* Full width buttons for better touch target */
        justify-content: center;
    }
}

/* 3. SMALL MOBILE (Max-Width: 400px) */
@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 2.2rem; /* Very small screens */
    }
    
    .main-card {
        max-width: 300px; /* Card shrink */
        height: 380px;
    }
}

/* --- THE ZENITH HERO (Ultra Premium Upgrade) --- */

.zenith-hero {
    position: relative;
    min-height: 100vh;
    padding: 160px 20px 100px; /* More top padding for breathing room */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    overflow: hidden;
}

/* 1. Background Ambience */
.z-bg-light {
    position: absolute; top: -20%; right: -10%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(46, 196, 182, 0.15), transparent 60%);
    filter: blur(80px); opacity: 0.6;
    animation: pulseLight 8s infinite alternate;
}
/* Noise Texture for Realism */
.z-noise {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.4; pointer-events: none; z-index: 0;
}

.z-container {
    width: 100%; max-width: 1300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    position: relative; z-index: 2;
    align-items: center;
}

/* --- LEFT: TEXT CONTENT --- */
.z-content { padding-right: 20px; }

.z-label {
    display: flex; align-items: center; gap: 15px;
    font-size: 0.9rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--brand-primary);
    font-weight: 600; margin-bottom: 30px;
}
.z-label .line { width: 40px; height: 2px; background: var(--brand-primary); }

.z-title {
    font-size: clamp(3rem, 5vw, 4.8rem); /* Big but controlled */
    font-weight: 800; line-height: 1.1;
    color: var(--text-main); margin-bottom: 25px;
    letter-spacing: -1px;
}

/* The Serif Font touch for Luxury */
.highlight-serif {
    font-family: 'Playfair Display', serif; /* Agar font load na ho to fallback serif */
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.z-desc {
    font-size: 1.15rem; color: var(--text-muted);
    line-height: 1.7; max-width: 500px; margin-bottom: 45px;
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: 20px;
}
[data-theme="light"] .z-desc { border-color: rgba(0,0,0,0.1); }

/* Buttons */
.z-btn-group { display: flex; align-items: center; gap: 20px; margin-bottom: 50px; }

/* Refined Primary Button */
.zenith-hero .btn-primary {
    padding: 18px 35px; border-radius: 50px;
    font-size: 1rem; letter-spacing: 0.5px;
    box-shadow: 0 10px 30px rgba(46, 196, 182, 0.25); /* Softer shadow */
}

/* Play Button */
.play-btn {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--text-main); font-weight: 600;
    transition: 0.3s;
}
.play-icon {
    width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--text-main);
    transition: 0.3s;
}
.play-btn:hover .play-icon {
    background: var(--text-main); color: var(--bg-body); border-color: var(--text-main);
    transform: scale(1.1);
}

/* Authority Badges */
.z-authority {
    display: flex; align-items: center; gap: 30px;
    padding-top: 30px; border-top: 1px solid var(--glass-border);
}
.auth-item { display: flex; align-items: center; gap: 12px; }
.auth-item i { font-size: 2rem; color: var(--text-muted); opacity: 0.5; }
.auth-item div { display: flex; flex-direction: column; }
.auth-item strong { font-size: 1rem; color: var(--text-main); }
.auth-item small { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }
.vertical-sep { width: 1px; height: 30px; background: var(--glass-border); }


/* --- RIGHT: THE TWIN PILLARS (Visuals) --- */
.z-visual {
    position: relative;
    height: 600px;
    display: flex; align-items: center; justify-content: center;
}

/* The Pillars Logic */
.glass-pillar {
    position: absolute;
    width: 300px; height: 480px;
    border-radius: 200px 200px 20px 20px; /* Arch Shape */
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[data-theme="light"] .glass-pillar {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.pillar-inner {
    width: 100%; height: 100%;
    border-radius: 190px 190px 15px 15px;
    overflow: hidden; position: relative;
}
.pillar-inner img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s ease;
}

/* Overlay Gradient for Text Readability */
.pillar-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    z-index: 1;
}

/* Pillar Content */
.pillar-content {
    position: absolute; bottom: 30px; left: 0; width: 100%;
    text-align: center; z-index: 2;
}
.p-dept {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--brand-secondary); display: block; margin-bottom: 5px;
}
.pillar-content h4 {
    font-size: 1.4rem; color: #fff; font-weight: 600; margin: 0;
}

/* Positioning Pillars */
.pillar-gastro {
    z-index: 1;
    transform: translateX(-140px) translateY(-30px) scale(0.9);
    opacity: 0.8; filter: grayscale(40%);
}

.pillar-ortho {
    z-index: 2;
    transform: translateX(40px) translateY(20px);
}

/* Floating Badge on Front Pillar */
.badge-float {
    position: absolute; bottom: 1px; right: -0px;
    background: #fff; color: #000;
    padding: 10px 20px; border-radius: 30px;
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 0.85rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 3;
    animation: floatY 4s ease-in-out infinite;
}
.badge-float i { color: #FFD700; font-size: 1.1rem; }

/* HOVER INTERACTION */
.z-visual:hover .pillar-gastro {
    transform: translateX(-180px) translateY(0) scale(1);
    opacity: 1; filter: grayscale(0%);
    z-index: 3; /* Brings back card to front on some interactions if needed, strictly separating here looks better */
}
.z-visual:hover .pillar-ortho {
    transform: translateX(80px) translateY(0);
}
.glass-pillar:hover img { transform: scale(1.1); }


/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .z-container { grid-template-columns: 1fr; text-align: center; gap: 80px; }
    .z-content { padding-right: 0; display: flex; flex-direction: column; align-items: center; }
    .z-desc { text-align: center; border-left: none; padding-left: 0; margin: 0 auto 40px; }
    .z-label { justify-content: center; }
    .z-btn-group { justify-content: center; }
    .z-authority { justify-content: center; width: 100%; }
    
    .z-visual { height: 500px; }
    .pillar-gastro { transform: translateX(-80px) scale(0.9); }
    .pillar-ortho { transform: translateX(80px); }
}

@media (max-width: 600px) {
    .z-title { font-size: 2.8rem; }
    .glass-pillar { width: 220px; height: 350px; }
    /* Stack nicely on mobile */
    .pillar-gastro { transform: translateX(-40px) translateY(-20px) scale(0.9); }
    .pillar-ortho { transform: translateX(40px) translateY(20px); }
    
    .z-visual:hover .pillar-gastro { transform: translateX(-60px); }
    .z-visual:hover .pillar-ortho { transform: translateX(60px); }
}

@keyframes pulseLight { 0% { opacity: 0.4; transform: scale(1); } 100% { opacity: 0.7; transform: scale(1.1); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.2s; }
/* --- THE QUANTUM HERO (Treatments Page) --- */

.treatment-hero {
    position: relative;
    min-height: 100vh;
    padding: 160px 20px 100px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-body);
    overflow: hidden;
}

/* 1. Cinematic Background */
.t-ambient-light {
    position: absolute; top: -30%; right: -10%;
    width: 800px; height: 800px;
    /* Purple glow for tech feel */
    background: radial-gradient(circle, rgba(142, 68, 173, 0.15), transparent 60%);
    filter: blur(100px); opacity: 0.6;
    animation: lightShift 8s infinite alternate;
}

/* 3D Grid Floor (Tron / Iron Man Style) */
.t-grid-floor {
    position: absolute; bottom: -25%; left: -50%; width: 200%; height: 600px;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    /* This creates the floor depth perspective */
    transform: perspective(500px) rotateX(60deg);
    mask-image: linear-gradient(to bottom, transparent 10%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 60%, transparent 100%);
    opacity: 0.5; pointer-events: none;
}
[data-theme="light"] .t-grid-floor {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

.t-container {
    width: 100%; max-width: 1300px;
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    gap: 60px; position: relative; z-index: 2; align-items: center;
}

/* --- LEFT CONTENT --- */
.t-content { z-index: 5; }

.t-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 30px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
    margin-bottom: 25px; backdrop-filter: blur(10px);
}
.t-tag i { color: var(--brand-secondary); }

.t-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800; line-height: 1.1;
    color: var(--text-main); margin-bottom: 25px;
}
/* Reusing the Serif Class for Luxury */
.highlight-serif {
    font-family: 'Playfair Display', serif;
    font-style: italic; font-weight: 400;
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.t-desc {
    font-size: 1.1rem; color: var(--text-muted);
    line-height: 1.7; max-width: 500px; margin-bottom: 50px;
}

/* --- LUXURY SEARCH BAR --- */
.t-search-wrapper { max-width: 500px; position: relative; }

.search-glass {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 50px; padding: 8px;
    backdrop-filter: blur(20px);
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
[data-theme="light"] .search-glass { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.search-glass:focus-within {
    border-color: var(--brand-secondary);
    box-shadow: 0 15px 40px rgba(255, 106, 136, 0.15);
    transform: translateY(-2px);
    background: rgba(20, 25, 30, 0.8);
}
[data-theme="light"] .search-glass:focus-within { background: #fff; }

.search-icon { font-size: 1.2rem; color: var(--text-muted); margin-left: 15px; }

.search-input {
    flex: 1; background: transparent; border: none; outline: none;
    padding: 12px 15px; font-size: 1rem; color: var(--text-main);
}
.search-input::placeholder { color: var(--text-muted); opacity: 0.6; }

.search-btn {
    width: 45px; height: 45px; border-radius: 50%;
    background: var(--brand-gradient); border: none;
    color: #fff; font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.search-btn:hover { transform: rotate(-45deg); box-shadow: 0 0 15px var(--brand-secondary); }

.search-tags { margin-top: 15px; display: flex; gap: 10px; font-size: 0.85rem; color: var(--text-muted); }
.search-tags span { opacity: 0.6; }
.search-tags a {
    color: var(--text-muted); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2); transition: 0.3s;
}
.search-tags a:hover { color: var(--brand-primary); border-color: var(--brand-primary); }


/* --- RIGHT: FLOATING CARDS VISUAL --- */
.t-visual {
    position: relative; height: 600px;
    display: flex; align-items: center; justify-content: center;
    /* 3D Space for rotation */
    perspective: 1000px;
}

/* Axis Line */
.axis-line {
    position: absolute; top: 10%; bottom: 10%; width: 1px;
    background: linear-gradient(to bottom, transparent, var(--glass-border), transparent);
    left: 50%; opacity: 0.5;
}

/* Abstract Center Orb (Core Reactor) */
.center-orb {
    position: absolute; width: 150px; height: 150px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 0;
}
.orb-core {
    width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle, var(--brand-secondary), transparent 70%);
    filter: blur(50px); opacity: 0.4; animation: pulseLight 4s infinite;
}
.orb-ring {
    position: absolute; top: 50%; left: 50%;
    width: 200px; height: 200px; border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 50%; transform: translate(-50%, -50%);
    animation: spinSlow 30s linear infinite;
}
.ring-2 {
    width: 300px; height: 300px; border-style: solid; border-width: 1px;
    border-color: rgba(255,255,255,0.03);
    animation: spinSlow 40s linear infinite reverse;
}

/* THE LEVITATING CARDS */
.levitate-card {
    position: absolute;
    width: 290px; padding: 25px;
    background: rgba(20, 25, 30, 0.65);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; gap: 15px;
    transition: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}
[data-theme="light"] .levitate-card { 
    background: rgba(255,255,255,0.85); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
}

/* Card Inner Glow */
.lc-glow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent 60%);
    pointer-events: none; border-radius: 24px;
}

/* Icon Box */
.lc-icon-box {
    width: 50px; height: 50px; border-radius: 16px;
    background: rgba(255, 106, 136, 0.15);
    color: var(--brand-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.box-teal { background: rgba(46, 196, 182, 0.15); color: var(--brand-primary); }

/* Content */
.lc-content h5 { font-size: 1.1rem; color: var(--text-main); margin-bottom: 3px; font-weight: 700; }
.lc-content p { font-size: 0.85rem; color: var(--text-muted); }

/* Stat Row */
.lc-stat {
    margin-top: 5px; padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; align-items: center;
}
[data-theme="light"] .lc-stat { border-color: rgba(0,0,0,0.08); }

.lc-stat span { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.lc-stat strong { font-size: 1.2rem; color: var(--text-main); }

/* Positioning & Animation */
.card-ortho {
    top: 10%; right: 0;
    /* Magnetic Float Animation */
    animation: floatCard1 8s ease-in-out infinite;
}

.card-gastro {
    bottom: 10%; left: 0;
    animation: floatCard2 9s ease-in-out infinite;
}

/* Hover Interaction: Reveal effect */
.levitate-card:hover {
    transform: scale(1.05) translateY(-5px); 
    border-color: var(--text-muted);
    background: rgba(30, 35, 40, 0.9);
    z-index: 10;
}
[data-theme="light"] .levitate-card:hover { background: #fff; }

.levitate-card:hover .lc-icon-box { transform: rotate(10deg) scale(1.1); transition: 0.3s; }


/* --- ANIMATIONS --- */
@keyframes floatCard1 {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-20px) rotate(-1deg); }
}
@keyframes floatCard2 {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(20px) rotate(1deg); }
}
@keyframes lightShift { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0.6; transform: scale(1.2); } }
@keyframes spinSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }


/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .t-container { grid-template-columns: 1fr; text-align: center; gap: 60px; }
    .t-content { align-items: center; }
    .t-desc { margin: 0 auto 40px; }
    .t-search-wrapper { width: 100%; margin: 0 auto; }
    .search-tags { justify-content: center; }
    
    .t-visual { height: 450px; }
    /* Bring cards closer on tablet */
    .card-ortho { right: 10%; }
    .card-gastro { left: 10%; }
}

@media (max-width: 600px) {
    .t-title { font-size: 2.5rem; }
    .levitate-card { width: 370px; padding: 20px; }
    
    /* Stack cards vertically for mobile safety */
    .t-visual { height: 500px; display: block; margin-top: 20px; }
    
    .card-ortho { 
        position: relative; top: 0; right: auto; left: auto;
        margin: 0 auto 20px; 
        transform: none !important; animation: floatCard1 4s ease-in-out infinite; 
    }
    
    .card-gastro { 
        position: relative; bottom: auto; left: auto; 
        margin: 0 auto;
        transform: none !important; animation: floatCard2 4s ease-in-out infinite; 
    }
    
    .center-orb { display: none; } /* Hide orb on mobile to reduce clutter */
    .axis-line { display: none; }
}


/* --- GALLERY HERO SECTION --- */
.gallery-hero {
    position: relative;
    padding: 180px 20px 80px;
    text-align: center;
    background: var(--bg-body);
    overflow: hidden;
}

.g-ambient {
    position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(46, 196, 182, 0.1), transparent 70%);
    filter: blur(80px); pointer-events: none;
}

.g-badge {
    display: inline-block;
    padding: 6px 16px; border-radius: 30px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.05);
    color: var(--brand-primary); font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 20px;
}

.g-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800; color: var(--text-main); margin-bottom: 20px;
}
.highlight-serif {
    font-family: 'Playfair Display', serif; font-style: italic;
    background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.g-desc {
    font-size: 1.1rem; color: var(--text-muted); max-width: 600px; margin: 0 auto;
}

/* --- THE VAULT SECTION (Main Gallery) --- */
.vault-section {
    padding: 20px 20px 100px;
    max-width: 1400px; margin: 0 auto;
}

/* 1. Filter Controls (Glass Toggle) */
.vault-controls {
    display: flex; justify-content: center; gap: 10px;
    margin-bottom: 60px;
}

.v-tab {
    padding: 12px 30px; border-radius: 50px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    color: var(--text-muted); font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.v-tab i { font-size: 1.2rem; }

/* Active State */
.v-tab.active {
    background: var(--brand-primary); color: #000; border-color: var(--brand-primary);
    box-shadow: 0 0 20px rgba(46, 196, 182, 0.4); transform: scale(1.05);
}
.v-tab:hover:not(.active) { background: rgba(255,255,255,0.1); color: var(--text-main); }

/* 2. Grid Layout */
.vault-grid-wrapper { position: relative; min-height: 500px; }

.vault-grid {
    display: none; /* Hidden by default */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 250px;
    gap: 20px;
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.vault-grid.active-grid {
    display: grid;
    opacity: 1; transform: translateY(0);
}

/* 3. The Card (Glass Panel) */
.v-card {
    position: relative; border-radius: 20px; overflow: hidden;
    cursor: pointer; border: 1px solid var(--glass-border);
}

/* Asymmetric Sizes */
.v-tall { grid-row: span 2; } /* 500px height */
.v-wide { grid-column: span 2; } /* Double width */

/* Responsive Fix for Wide/Tall on Mobile */
@media (max-width: 768px) {
    .v-tall { grid-row: span 1; }
    .v-wide { grid-column: span 1; }
}

.v-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s ease;
}

/* Hover Overlay */
.v-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
    opacity: 0; transition: 0.4s;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 25px;
}

.v-card:hover .v-overlay { opacity: 1; }
.v-card:hover img { transform: scale(1.1); }

.v-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem; transition: 0.4s;
}
.v-card:hover .v-icon { transform: translate(-50%, -50%) scale(1); }

.v-info h4 { color: #fff; font-size: 1.2rem; margin-bottom: 2px; transform: translateY(10px); transition: 0.4s; }
.v-info span { color: var(--brand-primary); font-size: 0.85rem; transform: translateY(10px); transition: 0.4s delay 0.1s; }

.v-card:hover .v-info h4, 
.v-card:hover .v-info span { transform: translateY(0); }


/* --- 4. LIGHTBOX (Ultra Premium Modal) --- */
.lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 3, 10, 0.95);
    backdrop-filter: blur(20px);
    display: none; /* Hidden */
    align-items: center; justify-content: center;
    padding: 40px;
    opacity: 0; transition: opacity 0.3s ease;
}

.lightbox.open { display: flex; opacity: 1; }

.lightbox-content {
    max-width: 900px; max-height: 85vh;
    position: relative; text-align: center;
}

.lightbox-content img {
    max-width: 100%; max-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(46, 196, 182, 0.2);
    border: 1px solid rgba(255,255,255,0.1);
}

.lightbox-caption { margin-top: 20px; }
.lightbox-caption h3 { color: #fff; font-size: 1.5rem; margin-bottom: 5px; }
.lightbox-caption p { color: var(--text-muted); }

.close-lightbox {
    position: absolute; top: 30px; right: 30px;
    background: transparent; border: none;
    color: #fff; font-size: 2.5rem; cursor: pointer;
    transition: 0.3s;
}
.close-lightbox:hover { color: var(--brand-secondary); transform: rotate(90deg); }
/* --- LIGHTBOX NAVIGATION STYLES --- */

/* Navigation Buttons (Floating Glass Circles) */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); /* Subtle Glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10001; /* Above image */
    backdrop-filter: blur(5px);
}

.lb-prev { left: 30px; }
.lb-next { right: 30px; }

/* Hover Effect: Glow & Scale */
.lb-nav:hover {
    background: var(--brand-primary);
    color: #000;
    border-color: var(--brand-primary);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(46, 196, 182, 0.4);
}

/* Counter Text (e.g., 1 / 4) */
.lb-counter {
    font-size: 0.9rem; color: var(--brand-primary);
    margin-top: 5px; font-family: monospace; letter-spacing: 2px;
}

/* Image Transition Animation */
.fade-change {
    animation: fadeInImage 0.4s ease forwards;
}

@keyframes fadeInImage {
    from { opacity: 0.5; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .lb-nav {
        width: 45px; height: 45px; font-size: 1.4rem;
        background: rgba(0,0,0,0.5); /* Darker bg for mobile visibility */
    }
    .lb-prev { left: 10px; }
    .lb-next { right: 10px; }
}

/* --- 1. HERO: THE HALL OF TRIUMPH (Theme Capable) --- */
.testi-hero {
    position: relative;
    padding: 200px 20px 120px;
    text-align: center;
    background: var(--bg-body);
    overflow: hidden;
    transition: background 0.5s ease;
}

.hero-spotlight {
    position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 100%; height: 120%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}
/* Light Mode Spotlight Fix */
[data-theme="light"] .hero-spotlight {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0%, transparent 60%);
}

/* --- APPLE PILL BADGE (Hero) --- */
.apple-pill-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 20px; border-radius: 50px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem; color: var(--text-main);
    font-weight: 500; margin-bottom: 25px; 
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .apple-pill-badge {
    background: #fff; border-color: rgba(0,0,0,0.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    color: #333;
}

.dot-indicator {
    width: 8px; height: 8px; background: #25D366; border-radius: 50%;
    box-shadow: 0 0 10px #25D366; animation: pulseGreen 2s infinite;
}

/* Typography */
.t-main-title {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800; line-height: 1.1;
    color: var(--text-main); margin-bottom: 20px;
    letter-spacing: -1px;
}
.highlight-serif {
    font-family: 'Playfair Display', serif; font-style: italic;
    background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.t-main-desc {
    font-size: 1.2rem; color: var(--text-muted);
    max-width: 650px; margin: 0 auto 50px; line-height: 1.6;
}

/* Stats Row (Theme Fixed) */
.t-stat-row {
    display: inline-flex; align-items: center; gap: 40px;
    padding: 20px 40px; border-radius: 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
}
[data-theme="light"] .t-stat-row {
    background: #fff; border-color: rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.ts-item h2 { font-size: 2.5rem; color: var(--text-main); line-height: 1; margin-bottom: 5px; }
.ts-item h2 span { font-size: 1.5rem; color: var(--brand-primary); }
.ts-item p { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.ts-sep { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }
[data-theme="light"] .ts-sep { background: rgba(0,0,0,0.1); }


/* --- 2. THE APPLE DEPARTMENT PILL (Ultra Premium) --- */
.section-header-center { text-align: center; margin-bottom: 50px; }

.apple-pill {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 10px 10px 20px; /* Right padding handled by arrow */
    border-radius: 100px; /* Full Capsule */
    background: rgba(20, 25, 30, 0.6); /* Semi-transparent dark */
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}

/* Light Mode Pill */
[data-theme="light"] .apple-pill {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Pill Icon */
.pill-icon {
    font-size: 1.2rem;
}
.pill-gastro .pill-icon { color: var(--brand-primary); }
.pill-ortho .pill-icon { color: var(--brand-secondary); }

/* Pill Text */
/* --- UPDATE THIS IN STYLE.CSS --- */

/* 1. Common Text Style (Size Badhaya) */
.pill-text {
    font-size: 1.2rem; /* Size bada kiya (0.95rem se 1.4rem) */
    font-weight: 800;  /* Thoda bold kiya */
    letter-spacing: 0.5px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Text transparent taaki gradient dikhe */
}

/* 2. Gastro Text Gradient (Teal/Blue) */
.pill-gastro .pill-text {
    background-image: linear-gradient(90deg, #2EC4B6, #20a4f3);
}

/* 3. Ortho Text Gradient (Pink/Purple) */
.pill-ortho .pill-text {
    background-image: linear-gradient(90deg, #FF6A88, #8e44ad);
}

/* 4. Arrow Icon ko bhi bada aur align kro */
.pill-arrow {
    width: 40px; height: 40px; /* Arrow circle bada kiya */
    font-size: 1.2rem;
}

/* Arrow Circle */
.pill-arrow {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: 0.3s;
}
[data-theme="light"] .pill-arrow { background: rgba(0,0,0,0.05); }

/* Hover Effects */
.apple-pill:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255,255,255,0.3);
}
[data-theme="light"] .apple-pill:hover { border-color: rgba(0,0,0,0.2); }

.apple-pill:hover .pill-arrow {
    background: var(--text-main); color: var(--bg-body);
    transform: rotate(-45deg); /* Arrow moves up-right */
}

.zone-title { font-size: 2.5rem; color: var(--text-main); font-weight: 800; }


/* --- 3. REVIEW CARDS (Light/Dark Capable) --- */
.review-grid-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    grid-auto-rows: minmax(200px, auto);
    padding: 0 20px;
}

.r-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03); /* Dark Mode Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(15px);
    transition: all 0.4s ease;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
}

/* Light Mode Card - THE FIX */
[data-theme="light"] .r-card {
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

/* Spanning Classes */
.r-wide { grid-column: span 2; }
.r-tall { grid-row: span 2; }

/* Content Typography Fixes */
.quote-mark {
    font-family: 'Georgia', serif; font-size: 4rem; line-height: 1;
    opacity: 0.2; margin-bottom: -20px; margin-left: -5px;
    color: var(--text-main);
}
[data-theme="light"] .quote-mark { opacity: 0.1; color: #000; }

.r-text-large {
    font-size: 1.3rem; color: var(--text-main); line-height: 1.6; font-style: italic;
    margin-bottom: 30px; position: relative; z-index: 2;
}
.r-text {
    font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px;
}

/* Highlights */
.highlight-teal { color: var(--brand-primary); font-weight: 700; }
.highlight-pink { color: var(--brand-secondary); font-weight: 700; }

/* User Info */
.r-user, .r-user-compact { display: flex; align-items: center; gap: 15px; }
.r-user { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
[data-theme="light"] .r-user { border-top: 1px solid rgba(0,0,0,0.05); }

.u-img-box { position: relative; }
.r-user img, .r-user-compact img {
    width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1);
}
[data-theme="light"] .r-user img, 
[data-theme="light"] .r-user-compact img { border-color: rgba(0,0,0,0.1); }

.verified-tick {
    position: absolute; bottom: 0; right: -5px;
    background: #20a4f3; color: #fff; width: 18px; height: 18px;
    border-radius: 50%; font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-body);
}
[data-theme="light"] .verified-tick { border-color: #fff; }

.u-info h5, .r-user-compact h5 { font-size: 1rem; color: var(--text-main); margin-bottom: 2px; font-weight: 700; }
.u-info span, .r-user-compact span { font-size: 0.8rem; color: var(--text-muted); }

.u-stars { margin-left: auto; color: #FFD700; letter-spacing: 2px; }

/* Hover Effects */
.r-card:hover { transform: translateY(-8px); }
.gastro-zone .r-card:hover { border-color: var(--brand-primary); }
.ortho-zone .r-card:hover { border-color: var(--brand-secondary); }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .review-grid-masonry { grid-template-columns: 1fr 1fr; }
    .r-wide { grid-column: span 2; }
}

@media (max-width: 768px) {
    .review-grid-masonry { grid-template-columns: 1fr; }
    .r-wide, .r-tall { grid-column: span 1; grid-row: span 1; }
    .t-main-title { font-size: 2.8rem; }
    .section-header-center { margin-bottom: 30px; }
}

@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }


/* --- 1. HERO: THE CONNECTIVITY HUB --- */
.ultra-contact-hero {
    position: relative;
    padding: 180px 20px 100px;
    text-align: center;
    background: var(--bg-body);
    overflow: hidden;
}

/* Background Aura */
.uch-bg-glow {
    position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 100%; height: 150%;
    background: radial-gradient(ellipse at center, rgba(46, 196, 182, 0.15), transparent 70%);
    filter: blur(120px); pointer-events: none; z-index: 0;
    animation: breathGlow 8s infinite alternate;
}

.uch-title {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 800; line-height: 1;
    color: var(--text-main); margin-bottom: 20px;
    letter-spacing: -2px; position: relative; z-index: 2;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #FFD700, #FDB931, #FFFFFF);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(253, 185, 49, 0.3));
}

.uch-desc {
    font-size: 1.2rem; color: var(--text-muted);
    max-width: 500px; margin: 0 auto; position: relative; z-index: 2;
}


/* --- 2. THE INFINITY CONSOLE (Wrapper) --- */
.console-section {
    padding: 0 20px 120px;
    display: flex; justify-content: center;
    perspective: 1500px; /* For 3D Tilt */
}

/* The Main Glass Slab */
.infinity-console {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Map gets less, Form gets more */
    width: 100%; max-width: 1200px;
    background: rgba(20, 25, 30, 0.4); /* Dark Glass */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5), 
                inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}
[data-theme="light"] .infinity-console {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0,0,0,0.05);
    box-shadow: 0 30px 80px rgba(0,0,0,0.1);
}

/* --- LEFT: MAP SCANNER --- */
.console-left {
    position: relative;
    padding: 10px; /* Gap for inner frame */
    display: flex; flex-direction: column; gap: 10px;
}

.map-scanner-wrapper {
    position: relative;
    height: 100%; min-height: 450px;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

/* The Map */
.ultra-map {
    width: 100%; height: 100%; border: 0;
    filter: grayscale(100%) invert(92%) contrast(0.9); /* Cyber Dark */
    transition: 0.5s;
}
[data-theme="light"] .ultra-map { filter: grayscale(20%); }

/* Scanner Beam Animation */
.scan-beam {
    position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: var(--brand-primary);
    box-shadow: 0 0 20px var(--brand-primary);
    z-index: 5; opacity: 0.7;
    animation: scanMap 4s linear infinite;
}

.live-badge {
    position: absolute; top: 20px; left: 20px; z-index: 6;
    background: rgba(0,0,0,0.8); color: #fff;
    padding: 6px 14px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255,255,255,0.2);
}
.blink-dot {
    width: 8px; height: 8px; background: #FF3B30; border-radius: 50%;
    animation: pulseRed 1s infinite;
}

/* Floating Contact Tiles (Bottom of Map) */
.contact-tiles {
    position: absolute; bottom: 30px; left: 30px; right: 30px;
    display: flex; gap: 15px; z-index: 6;
}

.c-tile {
    flex: 1;
    background: rgba(20, 25, 30, 0.9);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 15px; border-radius: 20px;
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: #fff;
    transition: 0.3s; backdrop-filter: blur(10px);
}
[data-theme="light"] .c-tile { background: rgba(255,255,255,0.95); color: #000; border-color: rgba(0,0,0,0.1); }

.c-tile:hover { transform: translateY(-5px); border-color: var(--brand-primary); }

.tile-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(46, 196, 182, 0.15); color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.tile-info span { display: block; font-size: 0.7rem; opacity: 0.7; text-transform: uppercase; }
.tile-info strong { font-size: 0.95rem; white-space: nowrap; }


/* --- RIGHT: INTELLIGENT FORM --- */
.console-right {
    padding: 50px;
    display: flex; flex-direction: column; justify-content: center;
}

.form-head h3 { font-size: 2.2rem; color: var(--text-main); margin-bottom: 5px; font-weight: 700; }
.form-head p { color: var(--text-muted); margin-bottom: 40px; }

.ultra-form { display: flex; flex-direction: column; gap: 25px; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* The Liquid Input */
.u-input-group { position: relative; }

.u-field {
    width: 100%; padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-main); font-size: 1rem;
    outline: none; transition: 0.4s;
    font-family: inherit;
}
[data-theme="light"] .u-field { background: #f5f7f9; border-color: transparent; }

/* Focus State */
.u-field:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-primary);
    box-shadow: 0 0 20px rgba(46, 196, 182, 0.1);
    transform: translateY(-2px);
}
[data-theme="light"] .u-field:focus { background: #fff; }

/* Floating Label Animation */
.u-label {
    position: absolute; left: 20px; top: 18px;
    color: var(--text-muted); font-size: 0.95rem; pointer-events: none;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0 5px; background: transparent;
}

.u-field:focus ~ .u-label,
.u-field:not(:placeholder-shown) ~ .u-label,
.u-field:valid ~ .u-label {
    top: -10px; left: 15px; font-size: 0.75rem;
    color: var(--brand-primary); background: var(--bg-body);
    font-weight: 600;
}
[data-theme="light"] .u-field:focus ~ .u-label { background: #fff; }

/* Select Arrow */
.select-arrow {
    position: absolute; right: 20px; top: 18px; color: var(--text-muted); pointer-events: none;
}
.u-field option { background: #000; color: #fff; }
[data-theme="light"] .u-field option { background: #fff; color: #000; }

/* THE ULTRA BUTTON */
.ultra-btn {
    position: relative;
    width: 100%; padding: 18px; margin-top: 10px;
    background: var(--brand-gradient);
    border: none; border-radius: 14px;
    color: #fff; font-size: 1.1rem; font-weight: 600;
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    padding-left: 30px; padding-right: 30px;
    transition: 0.4s;
}

.ultra-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 40px rgba(46, 196, 182, 0.4);
}

.ultra-btn i { font-size: 1.4rem; transition: 0.3s; }
.ultra-btn:hover i { transform: translateX(5px); }

/* Shine Effect on Button */
.btn-glow-bg {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: btnShine 3s infinite;
}

.form-footer {
    margin-top: 25px; text-align: center;
    font-size: 0.85rem; color: var(--text-muted); opacity: 0.6;
}


/* --- ANIMATIONS & RESPONSIVE --- */
@keyframes breathGlow { 0% { opacity: 0.3; } 100% { opacity: 0.6; } }
@keyframes scanMap { 0% { top: 0%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes pulseRed { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

@media (max-width: 900px) {
    .infinity-console { grid-template-columns: 1fr; border-radius: 30px; }
    
    .console-left { height: 400px; padding: 0; }
    .map-scanner-wrapper { border-radius: 30px 30px 0 0; border: none; border-bottom: 1px solid var(--glass-border); }
    
    .contact-tiles { bottom: 20px; left: 20px; right: 20px; flex-direction: column; gap: 10px; }
    .c-tile { padding: 12px; }
    
    .console-right { padding: 30px 20px; }
    .input-grid { grid-template-columns: 1fr; gap: 25px; } /* Stack inputs on mobile */
    .u-input-group { margin-bottom: 0; }
}



/* ================================
   ULTRA PREMIUM DOCTOR PROFILE MODAL
================================ */

.doctor-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.doctor-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.doctor-modal-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 60%),
    rgba(0,0,0,0.82);
  backdrop-filter: blur(18px);
}

/* ===== CARD ===== */
.doctor-modal-card {
  position: relative;
  width: min(980px, 94%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 42px 46px;
  border-radius: 26px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    #0b0c10;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 40px 120px rgba(0,0,0,0.85);

  animation: premiumIn .55s cubic-bezier(.2,.8,.2,1);
}

/* Entrance animation */
@keyframes premiumIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== CLOSE BUTTON ===== */
.doctor-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 20px;

  display: grid;
  place-items: center;

  transition: all .25s ease;
}

.doctor-modal-close:hover {
  background: rgba(255,255,255,0.14);
  transform: rotate(90deg);
}

/* ===== HEADER ===== */
.doctor-modal-card h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 6px;
}

.modal-subtitle {
  font-size: 15px;
  letter-spacing: .3px;
  opacity: .7;
  margin-bottom: 34px;
}

/* ===== SECTIONS ===== */
.modal-section {
  position: relative;
  margin-bottom: 34px;
  padding-left: 18px;
}

.modal-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    var(--brand-primary),
    transparent
  );
}

.modal-section h4 {
  font-size: 15px;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 10px;
}

.modal-section p {
  line-height: 1.7;
  opacity: .9;
}

.modal-section ul {
  padding-left: 18px;
}

.modal-section li {
  margin-bottom: 8px;
  line-height: 1.6;
  opacity: .88;
}

/* ===== SCROLLBAR ===== */
.doctor-modal-card::-webkit-scrollbar {
  width: 6px;
}

.doctor-modal-card::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--brand-primary),
    transparent
  );
  border-radius: 10px;
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .doctor-modal-card {
    padding: 28px 22px;
    border-radius: 20px;
  }

  .modal-section {
    padding-left: 14px;
  }
}
/* ================================
   LIGHT MODE SUPPORT – DOCTOR MODAL
================================ */

html[data-theme="light"] .doctor-modal-overlay {
  background:
    radial-gradient(circle at top, rgba(0,0,0,0.05), transparent 60%),
    rgba(245,246,250,0.85);
  backdrop-filter: blur(16px);
}

html[data-theme="light"] .doctor-modal-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85)),
    #ffffff;

  color: #111;

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08),
    0 40px 120px rgba(0,0,0,0.18);
}

html[data-theme="light"] .doctor-modal-close {
  background: rgba(0,0,0,0.06);
  color: #111;
}

html[data-theme="light"] .doctor-modal-close:hover {
  background: rgba(0,0,0,0.12);
}

html[data-theme="light"] .modal-subtitle {
  color: #444;
  opacity: 1;
}

html[data-theme="light"] .modal-section h4 {
  color: #222;
}

html[data-theme="light"] .modal-section p,
html[data-theme="light"] .modal-section li {
  color: #333;
  opacity: 1;
}

html[data-theme="light"] .modal-section::before {
  background: linear-gradient(
    180deg,
    var(--brand-primary),
    transparent
  );
}

/* Scrollbar – light */
html[data-theme="light"] .doctor-modal-card::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--brand-primary),
    rgba(0,0,0,0.1)
  );
}

.full-map-only {
    padding: 0;
    margin: 0;
}

.map-full-wrapper {
    width: 100%;
    height: 80vh;
    position: relative;
}

.full-map {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.ultra-map {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(20%) contrast(1.1) brightness(0.9);
}

.map-console-only {
    padding: 0;
}

.only-map-console {
    display: block;
}

.full-console-map {
    width: 100%;
    height: 85vh;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
}

/* Map full size */
.full-console-map .ultra-map {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(25%) contrast(1.1) brightness(0.85);
}

/* Floating contact buttons */
.floating-tiles {
    position: absolute;
    bottom: 30px;
    left: 30px;
    display: flex;
    gap: 14px;
    z-index: 5;
}

.c-tile {
    backdrop-filter: blur(18px);
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 14px 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    transition: 0.3s;
}

.c-tile:hover {
    transform: translateY(-4px);
    background: rgba(0,0,0,0.7);
}

.nav-tile {
    background: linear-gradient(135deg,#0ea5ff,#22c55e);
}

/* --- VIEW MORE BUTTON STYLES --- */
.view-more-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding-bottom: 20px;
}
.view-more-btn {
    cursor: pointer;
    min-width: 220px;
    font-size: 1.05rem;
}
.view-more-btn i {
    transition: transform 0.3s ease;
}
.view-more-btn[data-expanded="true"] i {
    transform: rotate(180deg);
}