:root {
    --primary-color: #0f172a;
    /* Deep Slate - Matches Name Gradient */
    --secondary-color: #334155;
    /* Slate 700 */
    --accent-color: #64748b;
    /* Slate 500 */
    --highlight-color: #0284c7;
    /* Vivid Sky Blue - Professional & Trustworthy */
    --text-color: #1e293b;
    /* Slate 800 */
    --text-light: #f8fafc;
    /* Slate 50 */
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-shadow: 0 10px 30px -10px rgba(2, 132, 199, 0.15);
    /* Tinted subtle shadow */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
    background-color: #f4f9fc;
    min-height: 100vh;
    position: relative;
    /* Removed background-attachment: fixed for performance */
}

/* Performance Optimization: Fixed background on pseudo-element */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Updated to match new Sky Blue / Slate palette */
    background-image:
        radial-gradient(at 0% 0%, rgba(2, 132, 199, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(2, 132, 199, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(15, 23, 42, 0.05) 0px, transparent 50%);
    z-index: -1;
    pointer-events: none;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
#main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1005;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow);
    transition: var(--transition);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

@keyframes glow-pulse {
    0% {
        filter: drop-shadow(0 0 2px rgba(2, 132, 199, 0.3));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(2, 132, 199, 0.6));
    }

    100% {
        filter: drop-shadow(0 0 2px rgba(2, 132, 199, 0.3));
    }
}

.brand .logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: glow-pulse 3s infinite ease-in-out;
}

.brand .dr-title {
    font-weight: 400;
    /* Removed specific color to allow gradient to span the whole text */
}

/* Desktop Nav */
.desktop-nav {
    display: none;
}

@media (min-width: 992px) {
    .desktop-nav {
        display: block;
    }
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--secondary-color);
    position: relative;
    padding: 10px 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--highlight-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--highlight-color);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 220px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    border-radius: 8px;
    padding: 10px 0;
}

.dropdown:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 0.9rem;
    color: var(--secondary-color);
    border-left: 2px solid transparent;
}

.dropdown-menu li a:hover {
    background: #f4f6f8;
    color: var(--primary-color);
    border-left: 2px solid var(--highlight-color);
}

/* Nested Dropdown */
.wide-dropdown {
    min-width: 250px;
}

.nested-dropdown {
    position: relative;
}

.nested-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nested-menu {
    top: 0;
    left: 100%;
    margin-left: 10px;
    /* Spacing */
}

.nested-dropdown:hover>.nested-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Contact Button */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.btn-primary {
    background: var(--highlight-color);
    color: var(--white);
    box-shadow: 0 4px 6px rgba(91, 192, 190, 0.3);
}

.btn-primary:hover {
    background: #4ab1ae;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(91, 192, 190, 0.4);
}

.btn-outline {
    border: 2px solid var(--white);
    color: var(--white);
    background: transparent;
}

.btn-outline:hover {
    background: var(--white);
    color: var(--primary-color);
}

.contact-btn {
    display: none;
}

@media (min-width: 768px) {
    .contact-btn {
        display: inline-block;
    }
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    padding: 10px;
}

/* Mobile Menu Button Animation */
.mobile-menu-btn.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-btn.active .bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 992px) {
    .mobile-menu-btn {
        display: none;
    }
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--primary-color);
    margin: 5px 0;
    transition: var(--transition);
}



/* Mobile Nav Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: var(--white);
    z-index: 1001;
    transition: right 0.4s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    padding-top: 80px;
    overflow-y: auto;
}

.mobile-nav-overlay.open {
    right: 0;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
}

.mobile-nav-links li a,
.mobile-dropdown-btn,
.mobile-nested-btn {
    display: block;
    padding: 15px 20px;
    font-size: 1rem;
    color: var(--secondary-color);
    border-bottom: 1px solid #eee;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-dropdown-btn {
    display: flex;
    justify-content: space-between;
}

.mobile-submenu,
.mobile-nested-menu {
    display: none;
    background: #f9f9f9;
}

.mobile-submenu.open,
.mobile-nested-menu.open {
    display: block;
}

.mobile-submenu li a {
    padding-left: 30px;
    font-size: 0.9rem;
}

.mobile-nested-menu li a {
    padding-left: 40px;
    font-size: 0.85rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}



@keyframes heroBreathe {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15) rotate(1deg);
    }
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 19, 43, 0.85) 0%, rgba(28, 37, 65, 0.6) 100%);
    z-index: 1;
}

/* Hero Section Updated */
/* Hero Section - Redesigned (Bio Left, Image Right) */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 80px;
    /* Offset for fixed header */
}

.hero-grid-rev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
}

.hero-text-left {
    flex: 1;
    max-width: 650px;
}

.hero-image-right {
    flex: 0 0 450px;
    /* Fixed width for image container */
    display: flex;
    justify-content: center;
}

.hero-name-large {
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 10px;
    color: var(--white);
    background: linear-gradient(to bottom right, #ffffff, #b3e5fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.degree-badge-hero {
    display: inline-block;
    font-size: 1.1rem;
    color: var(--highlight-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--highlight-color);
    padding-bottom: 5px;
}

.hero-bio-short p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    font-weight: 300;
}

.hero-expertise-list h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--highlight-color);
    margin-bottom: 15px;
}

.hero-expertise-list ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}

.hero-expertise-list li {
    position: relative;
    padding-left: 25px;
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

.hero-expertise-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--highlight-color);
    font-size: 1.5rem;
    line-height: 1rem;
    top: 2px;
}

/* Premium Image Frame */
.img-frame-premium {
    position: relative;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
}

.hero-profile-full {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: block;
}

.mt-4 {
    margin-top: 1.5rem;
}

@media (max-width: 992px) {
    .hero-grid-rev {
        flex-direction: column-reverse;
        /* Usually for mobile we want text first? No, User wanted hero section as Text left Image Right. On Mobile, Image usually top. Let's stack Image top then Text. Actually usually it's Text then Image. Let's do Image top for personal brand. */
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-image-right {
        flex: none;
        width: 100%;
        max-width: 350px;
    }

    .hero-expertise-list ul {
        grid-template-columns: 1fr;
        text-align: left;
        max-width: 300px;
        margin: 0 auto 30px;
    }

    .hero-name-large {
        font-size: 3rem;
    }
}

/* Shimmer Effect */
.shimmer-text {
    display: inline-block;
    font-weight: 700;
    background: linear-gradient(45deg, var(--highlight-color) 40%, #ffffff 50%, var(--highlight-color) 60%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

@media (max-width: 992px) {
    .hero-grid {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
    }

    .hero-name {
        font-size: 2.5rem;
    }

    .hero-desc {
        font-size: 1rem;
        text-align: left;
        /* Keep readable */
    }
}

/* === New Clean Hero Section === */
.hero-clean-section {
    padding-top: 100px;
    /* Space for fixed header */
    padding-bottom: 60px;
    background: #fdfdfd;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero-clean-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* Text Side */
.hero-clean-text {
    flex: 1;
    max-width: 600px;
}

.sub-identity {
    font-size: 1.1rem;
    color: var(--highlight-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: 600;
}

.main-identity {
    font-family: var(--font-heading);
    font-size: 4rem;
    color: var(--primary-color);
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-bio-clean p {
    font-size: 1.15rem;
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.7;
}

.expertise-clean-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 35px;
}

.badg-clean {
    background: rgba(0, 212, 255, 0.1);
    color: var(--secondary-color);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.btn-primary-clean {
    display: inline-block;
    background: var(--highlight-color);
    color: white;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: transform 0.2s;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.btn-primary-clean:hover {
    transform: translateY(-2px);
    background: #4ab1ae;
}

/* Image Side */
.hero-clean-img {
    flex: 0 0 450px;
    display: flex;
    justify-content: center;
}

.img-container-clean {
    position: relative;
    padding: 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.profile-pic-clean {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .hero-clean-section {
        padding-top: 120px;
        /* More space for mobile header */
        text-align: center;
        min-height: auto;
    }

    .hero-clean-wrapper {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .hero-clean-text {
        width: 100%;
        max-width: 100%;
    }

    .hero-clean-img {
        flex: none;
        width: 100%;
        max-width: 350px;
    }

    .main-identity {
        font-size: 2.8rem;
    }

    .expertise-clean-list {
        justify-content: center;
    }
}

.text-image-hero {
    position: relative;
    min-height: 85vh;
    /* Taller hero */
    display: flex;
    align-items: center;
    padding-top: 100px;
    /* Header clearance */
    background-color: #f8fbff;
    /* Soft fallback */
}

.hero-bg-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(91, 192, 190, 0.15), transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(44, 62, 80, 0.1), transparent 60%);
    z-index: 1;
}

.z-10 {
    position: relative;
    z-index: 10;
}

.hero-flex-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* Typography & Name Block */
.name-block {
    margin-bottom: 30px;
}

.pre-title {
    font-size: 1.1rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    opacity: 0.7;
}

.doctor-name-display {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    /* Massive impact */
    line-height: 1.05;
    color: var(--primary-color);
    margin: 0;
    margin-bottom: 10px;
    position: relative;
}

.qualification-tag {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 15px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    border-radius: 4px;
    font-weight: 500;
}

/* Bio Glass Card */
.bio-card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--highlight-color);
    padding: 25px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.bio-card-glass p {
    font-size: 1.1rem;
    color: #4a5568;
    margin-bottom: 15px;
    line-height: 1.7;
}

.bio-card-glass p:last-child {
    margin-bottom: 0;
}

.secondary-bio {
    font-size: 1rem !important;
    opacity: 0.85;
}

.bio-card-glass strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Expertise Pills */
.expertise-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.expertise-pills-container span {
    background: #eefcfd;
    color: var(--highlight-color);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid rgba(91, 192, 190, 0.2);
    transition: all 0.3s ease;
}

.expertise-pills-container span:hover {
    background: var(--highlight-color);
    color: var(--white);
    transform: translateY(-2px);
}

/* Creative Image Profile */
.hero-img-col {
    position: relative;
    flex-shrink: 0;
}

.profile-image-creative {
    position: relative;
    z-index: 2;
    width: 420px;
    height: 520px;
}

.hero-img-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 20px 20px 0 var(--highlight-color);
    /* Offset shadow block */
    position: relative;
    z-index: 5;
    transition: transform 0.4s ease;
}

.profile-image-creative:hover .hero-img-main {
    transform: translate(-5px, -5px);
    box-shadow: 25px 25px 0 var(--secondary-color);
}

.decorative-circle {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 150px;
    height: 150px;
    border: 10px solid rgba(91, 192, 190, 0.1);
    border-radius: 50%;
    z-index: 1;
}

.btn-glow {
    background: var(--highlight-color);
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 20px rgba(91, 192, 190, 0.4);
    transition: all 0.3s ease;
}

.btn-glow:hover {
    background: #4ab1ae;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(91, 192, 190, 0.5);
}

/* Tablet Responsive */
@media (max-width: 992px) {
    .text-image-hero {
        padding-top: 120px;
        min-height: auto;
        padding-bottom: 60px;
    }

    .hero-flex-wrapper {
        flex-direction: column-reverse;
        text-align: center;
        gap: 50px;
    }

    .profile-image-creative {
        width: 300px;
        height: 380px;
        margin: 0 auto;
    }

    .doctor-name-display {
        font-size: 3rem;
    }

    .bio-card-glass {
        text-align: left;
        /* Keep bio readable */
        border-left: none;
        border-top: 4px solid var(--highlight-color);
        border-radius: 12px;
    }

    .expertise-pills-container {
        justify-content: center;
    }
}

.section {
    padding: 100px 0;
}

.section-header {
    margin-bottom: 40px;
    text-align: center;
}

.section-header h2 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.separator {
    height: 4px;
    width: 70px;
    background: var(--highlight-color);
    margin: 0 auto;
    border-radius: 2px;
}

.bg-light {
    background-color: rgba(255, 255, 255, 0.5);
    /* Subtle glass effect to show theme */
    backdrop-filter: blur(5px);
}

/* About Section Styles */
.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

.about-text {
    max-width: 800px;
    margin: 0 auto;
}

.about-highlights {
    text-align: left;
    display: inline-block;
    margin-top: 20px;
}

.about-text h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
    margin-top: 0;
}

.about-text p {
    font-size: 1.05rem;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.8;
}

/* Medical Expertise Section */
.expertise-block {
    background: #f8fbfd;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e1e8ed;
    margin: 25px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.expertise-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--highlight-color);
    display: inline-block;
    padding-bottom: 5px;
}

.about-highlights {
    margin-bottom: 10px;
}

.about-highlights li {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    color: var(--secondary-color);
    font-weight: 500;
}

.about-highlights li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--highlight-color);
    font-weight: bold;
    font-size: 1.2rem;
}

.signature {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary-color);
    font-style: italic;
    opacity: 0.8;
    margin-top: 30px;
}

/* Responsive About */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column;
        gap: 60px;
    }

    .about-image-wrapper {
        margin: 0 auto;
        width: 100%;
    }

    .experience-badge {
        right: 10px;
    }
}

/* Footer */
#contact {
    /* Main Site Gradient */
    background-color: #f4f9fc;
    background-image:
        radial-gradient(at 0% 0%, rgba(91, 192, 190, 0.4) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(28, 37, 65, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(91, 192, 190, 0.3) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(28, 37, 65, 0.15) 0px, transparent 50%);
    color: var(--text-color);
    padding: 100px 0 50px;
    font-family: var(--font-body);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.footer-col h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--secondary-color);
    /* Dark */
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.footer-col p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: var(--text-color);
    /* Dark */
}

.footer-address h4 {
    font-family: var(--font-heading);
    color: var(--highlight-color);
    font-size: 1.2rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

.footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    /* Darker border */
    font-size: 0.9rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.developer-credit strong {
    color: var(--highlight-color);
}

.footer-links a {
    color: var(--text-color);
    transition: var(--transition);
}

.phone-link a,
.email-link {
    color: var(--secondary-color);
    font-weight: 600;
    margin-top: 10px;
    display: inline-block;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SLEEK MODERN HERO (Tech-Savvy Style)
   ========================================= */

.sleek-hero {
    position: relative;
    padding-top: 140px;
    /* Space for fixed header */
    padding-bottom: 80px;
    background: #f8fbff;
    /* Very subtle cool white */
    overflow: hidden;
    min-height: 90vh;
    /* Full viewport feel */
    display: flex;
    align-items: center;
}

/* Animated Background Blobs */
.hero-bg-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: floatBlob 10s infinite alternate ease-in-out;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: #e0f2fe;
    /* Light Blue */
    top: -100px;
    right: -100px;
}

.blob-2 {
    width: 300px;
    height: 300px;
    background: #f0fdf4;
    /* Light Green/Mint */
    bottom: 50px;
    left: -50px;
    animation-delay: -5s;
}

@keyframes floatBlob {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, 50px);
    }
}

/* Glass Main Card */
.glass-panel {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    padding: 50px;
    box-shadow:
        0 20px 50px -10px rgba(0, 0, 0, 0.05),
        0 10px 20px -5px rgba(0, 0, 0, 0.02);
    display: grid;
    grid-template-columns: 350px 1fr;
    /* Image Left, Text Right */
    gap: 60px;
    align-items: center;
}

/* Mobile Responsive Layout */
@media (max-width: 992px) {
    .glass-panel {
        grid-template-columns: 1fr;
        /* Stack Vertical */
        text-align: center;
        padding: 30px;
        gap: 30px;
    }

    .hero-details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .name-block {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Profile Image Styling */
.profile-frame {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-wrapper {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    /* Straight image - no tilt */
    transform: rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1);
}

.img-wrapper:hover {
    transform: rotate(0deg) scale(1.02);
}

.sleek-img {
    width: 100%;
    max-width: 350px;
    /* Limit size */
    display: block;
    height: auto;
    object-fit: cover;
}

/* Status Badge (Online/Available) */
.status-badge {
    position: absolute;
    bottom: 20px;
    right: -10px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #059669;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

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

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Typography */
.sleek-name {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    margin-bottom: 15px;
}

@media (max-width: 480px) {
    .sleek-name {
        font-size: 2rem;
        white-space: nowrap;
    }
}

.sleek-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 25px;
    flex-wrap: wrap;
    justify-content: center;
    /* For mobile mainly */
}

@media (min-width: 993px) {
    .sleek-title {
        justify-content: flex-start;
    }
}

.highlight-pill {
    background: #e0f2fe;
    color: #0284c7;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.divider {
    color: #cbd5e1;
}

.sleek-bio {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 30px;
    max-width: 600px;
}

.text-accent {
    color: var(--highlight-color);
    font-weight: 600;
}

/* Tech Stack Pills for Expertise */
.tech-stack-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.tech-pill {
    background: #f1f5f9;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.tech-pill:hover {
    background: #fff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Buttons */
.hero-cta-group {
    display: flex;
    gap: 20px;
    align-items: center;
}

.btn-glow {
    background: var(--primary-color);
    color: white;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 20px -5px rgba(27, 42, 73, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(27, 42, 73, 0.5);
    background: #1e2d42;
    /* Slightly Lighter */
}

.btn-glow .arrow {
    transition: transform 0.3s ease;
}

.btn-glow:hover .arrow {
    transform: translateX(5px);
}

.btn-minimal {
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.btn-minimal:hover {
    color: var(--primary-color);
    background: #f1f5f9;
}

/* =========================================
   SPECIALITIES PREVIEW SECTION
   ========================================= */

.spec-preview {
    padding: 80px 0;
    background: #ffffff;
}

.section-header-center {
    text-align: center;
    margin-bottom: 50px;
}

.section-header-center h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.section-header-center p {
    color: #64748b;
    font-size: 1.1rem;
}

.spec-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.spec-preview-card {
    background: #f8fafc;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.spec-preview-card:hover {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
    border-color: #e2e8f0;
}

.img-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* Circle */
    overflow: hidden;
    margin: 0 auto 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 3px solid #fff;
}

.spec-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.spec-preview-card:hover .spec-img {
    transform: scale(1.1);
}

.spec-preview-card h3 {
    color: var(--secondary-color);
    font-size: 1.25rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.spec-preview-card p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.view-all-wrapper {
    text-align: center;
}

.btn-link-arrow {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.btn-link-arrow:hover {
    color: var(--highlight-color);
    border-bottom-color: var(--highlight-color);
}

.btn-link-arrow span {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 5px;
}

.btn-link-arrow:hover span {
    transform: translateX(5px);
}

.mobile-call-link {
    color: var(--highlight-color) !important;
    font-weight: 700 !important;
    background: rgba(45, 212, 191, 0.1);
    border-radius: 8px;
    margin: 10px 20px;
    border-bottom: none !important;
}

.back-to-top {
    color: var(--secondary-color);
    font-weight: 600;
    text-decoration: none;
    padding: 5px 15px;
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    margin: 10px 0;
}

.back-to-top:hover {
    background: var(--secondary-color);
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================
   ABOUT PAGE STYLES
   ========================================= */

.clinic-info-section {
    padding: 80px 0;
    background: #fff;
}

.clinic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .clinic-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.clinic-text h2 {
    font-family: var(--font-heading);
    color: var(--highlight-color);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.clinic-head {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 25px;
    line-height: 1.2;
}

.highlight-text {
    color: var(--primary-color);
}

.clinic-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.feature-item,
.check-item {
    font-weight: 500;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.check {
    color: var(--highlight-color);
    font-weight: bold;
}

.clinic-featured-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 20px 20px 0 var(--light-bg);
}

/* Location Section */
.location-section {
    padding: 80px 0;
    background: #f8fafc;
}

.box-shadow-container {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.location-header {
    text-align: center;
    margin-bottom: 40px;
}

.location-header h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.map-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
}

@media (max-width: 768px) {
    .map-grid {
        grid-template-columns: 1fr;
    }
}

.address-card {
    background: var(--primary-color);
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.address-card h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #fff !important;
}

.address-text {
    margin-bottom: 30px;
    line-height: 1.6;
    opacity: 0.9;
    color: #fff !important;
}

.contact-details p {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: #fff !important;
}

.contact-details a {
    color: #fff;
    text-decoration: underline;
}

.map-btn {
    margin-top: 30px;
    background: #fff;
    color: var(--primary-color);
    text-align: center;
}

.map-btn:hover {
    background: #f1f5f9;
    color: var(--primary-color);
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 20px;
}

/* =========================================
   ABOUT PAGE STYLES
   ========================================= */

.clinic-info-section {
    padding: 80px 0;
    background: #fff;
}

.clinic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .clinic-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.clinic-text h2 {
    font-family: var(--font-heading);
    color: var(--highlight-color);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.clinic-head {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 25px;
    line-height: 1.2;
}

.highlight-text {
    color: var(--primary-color);
}

.clinic-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.feature-item,
.check-item {
    font-weight: 500;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.check {
    color: var(--highlight-color);
    font-weight: bold;
}

.clinic-featured-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 20px 20px 0 var(--light-bg);
}

/* Location Section */
.location-section {
    padding: 80px 0;
    background: #f8fafc;
}

.box-shadow-container {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.location-header {
    text-align: center;
    margin-bottom: 40px;
}

.location-header h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.map-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
}

@media (max-width: 768px) {
    .map-grid {
        grid-template-columns: 1fr;
    }
}

.address-card {
    background: var(--primary-color);
    color: #fff;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.address-card h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #fff !important;
}

.address-text {
    margin-bottom: 30px;
    line-height: 1.6;
    opacity: 0.9;
    color: #fff !important;
}

.contact-details p {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: #fff !important;
}

.contact-details a {
    color: #fff;
    text-decoration: underline;
}

.map-btn {
    margin-top: 30px;
    background: #fff;
    color: var(--primary-color);
    text-align: center;
}

.map-btn:hover {
    background: #f1f5f9;
    color: var(--primary-color);
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 20px;
}

/* 1. GLOBAL RESET - Prevents the "Horizontal Slide" */
html,
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* 2. HERO SECTION FIXES */
.sleek-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* This stops the blobs from pushing the page right */
    padding: 100px 0 60px 0;
}

.hero-bg-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    /* Ensures blobs stay inside the hero */
}

.hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 2rem;
}

/* Mobile Responsiveness for Hero */
@media (max-width: 768px) {
    .hero-card {
        flex-direction: column;
        /* Stacks image and text vertically */
        text-align: center;
    }

    .tech-stack-expertise {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-cta-group {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }
}

/* 3. FOOTER ALIGNMENT FIXES */
#contact {
    width: 100%;
    background: #f9f9f9;
    /* Or your preferred color */
    padding: 60px 0 20px 0;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-col {
    flex: 1 1 250px;
    /* Forces columns to grow/shrink but stack when narrow */
}

.email-link {
    word-break: break-all;
    /* Prevents long emails from pushing the footer left */
}

/* 4. UTILITY IMAGE FIX */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Center the footer bottom content */
.footer-bottom {
    width: 100%;
    text-align: center;
    /* Centers the text and the 'Back to Top' link */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Optional: adds a subtle line */
    display: flex;
    flex-direction: column;
    /* Stacks elements vertically on mobile */
    align-items: center;
    /* Centers items horizontally in the flex container */
    gap: 10px;
    /* Adds space between the copyright, link, and credit */
}

/* Ensure the container within the footer remains centered */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Optional: Make the Back to Top link look better */
.back-to-top {
    text-decoration: none;
    font-size: 0.9rem;
    color: inherit;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.back-to-top:hover {
    opacity: 1;
}