:root {
    /* Colors */
    /* Colors */
    --primary-color: #720262;
    /* 30% - Brand Purple */
    --secondary-color: #006ab3;
    /* 10% - Accent Blue */
    --accent-color: #006ab3;
    /* 10% - Accent Blue */

    --top-bar-bg: #720262;
    /* 30% */
    --hero-bg: #fce9ef;
    /* 60% */

    --text-color: #212121;
    --text-light: #555555;
    --white: #ffffff;

    --light-bg: #fce9ef;
    /* 60% - Dominant Background */
    --footer-bg: #720262;
    /* 30% */

    /* Typography */
    --font-primary: 'Nunito', sans-serif;
    --font-secondary: 'Nunito', sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: var(--font-secondary);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--light-bg);
    /* Enforcing 60% rule on body */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

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

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.d-flex {
    display: flex;
}

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

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-50 {
    gap: 50px;
}

.gap-30 {
    gap: 30px;
}

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

.section-padding {
    padding: 80px 0;
}

/* Top Bar */
.top-bar {
    background-color: var(--top-bar-bg);
    color: var(--white);
    padding: 10px 0;
    font-size: 13px;
}

.top-bar .btn-sm {
    padding: 6px 15px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.top-bar .social-icons a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    padding: 0 8px;
    transition: all 0.3s ease;
}

.top-bar .social-icons a:hover {
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .top-bar .social-icons {
        display: none;
    }

    .top-bar .container {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .top-bar .btn-sm {
        padding: 5px 8px;
        font-size: 10px;
        gap: 4px;
        white-space: nowrap;
    }

    .top-bar .container {
        padding: 0 10px;
    }

    .top-bar .container>.d-flex.gap-10 {
        gap: 5px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.btn-contact {
    background-color: var(--accent-color);
    color: var(--white);
}

.btn-book {
    background-color: var(--accent-color);
    color: var(--white);
    border: 1px solid var(--accent-color);
}

/* Header */
header {
    background: var(--white);
    height: auto;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    padding: 15px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 50px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    line-height: 1;
}

.logo-subtitle {
    font-size: 12px;
    color: var(--primary-color);
    letter-spacing: 1px;
}

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

.nav-link {
    color: #333;
    font-weight: 500;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: var(--white);
    background-color: var(--footer-bg);
    /* Similar blue to reference */
}

/* Dropdown Menu */
.nav-menu li {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding: 10px 0;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
    /* Above header */
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    padding: 10px 20px;
    display: block;
    color: var(--text-color);
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background-color: var(--light-bg);
    color: var(--secondary-color);
}

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

/* Sub-dropdown Menu */
.dropdown-menu li {
    position: relative;
}

.dropdown-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 220px;
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding: 10px 0;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
    z-index: 1002;
    border-left: 1px solid #eee;
}

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

@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        width: 100%;
        padding-left: 15px;
    }

    .nav-menu li:hover>.dropdown-menu {
        display: block;
    }

    .dropdown-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 20px;
        display: none;
        min-width: 100%;
        border-left: 2px solid var(--primary-color);
        margin-top: 5px;
    }

    .dropdown-menu li:hover>.dropdown-submenu {
        display: block;
    }
}



.nav-link.active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

.search-icon {
    color: #555;
    cursor: pointer;
}

/* Ticker */
.ticker-bar {
    background-color: var(--top-bar-bg);
    color: var(--white);
    padding: 8px 0;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-wrapper {
    width: 100%;
    overflow: hidden;
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    animation: ticker 25s linear infinite;
    padding-left: 100%;
    /* Start from right side */
}

.ticker-content p {
    display: inline-block;
    margin: 0;
}

.ticker-content:hover {
    animation-play-state: paused;
    /* Pause on hover */
}

@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Hero Carousel */
.hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    background-color: var(--hero-bg);
    cursor: grab;
}

.hero-carousel:active {
    cursor: grabbing;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease-out;
    width: 100%;
}

.carousel-slide {
    min-width: 100%;
    width: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    max-height: 825px;
    /* Reduced height */
    object-fit: cover;
    display: block;
    pointer-events: none;
    /* Prevent image drag interfering with slide drag */
}

/* Dots */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active,
.dot:hover {
    background-color: var(--white);
}

/* Blog Section */
.blog-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.blog-image-wrapper {
    position: relative;
    width: 100%;
}

.blog-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.date-badge {
    position: absolute;
    bottom: 15px;
    left: 0;
    background-color: #483D8B;
    /* Dark Slate Blue - matching screenshot purple */
    color: var(--white);
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    min-width: 50px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.date-day {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.date-month {
    font-size: 12px;
    text-transform: uppercase;
}

.btn-blog {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    background-color: var(--accent-color);
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.btn-blog:hover {
    background-color: #4db39e;
    /* Slightly darker teal */
    transform: translateY(-2px);
}

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

    h2 {
        font-size: 28px !important;
        /* Force smaller headings on mobile */
    }
}

/* Mobile Menu */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .top-bar .container {
        justify-content: center;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        box-shadow: var(--shadow-sm);
    }

    .nav-menu.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .hero-carousel {
        min-height: 200px;
        /* Ensure height on mobile */
    }

    /* Intro Section Mobile */
    #about-intro .container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    #about-intro .intro-image {
        margin-top: 30px;
    }



    #about-intro h2 {
        font-size: 28px !important;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--font-primary);
}

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

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

.btn-gradient {
    background: var(--primary-color) !important;
    /* Solid Purple */
    color: var(--white) !important;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(114, 2, 98, 0.3) !important;
    /* Purple shadow default */
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(114, 2, 98, 0.5) !important;
    /* Stronger purple shadow on hover */
    color: var(--white) !important;
}

/* Reviews Section */
.reviews-wrapper {
    display: flex;
    gap: 70px;
    align-items: flex-start;
    width: 100%;
    padding: 0 8%;
}

.review-summary {
    flex: 0 0 250px;
    text-align: center;
    padding: 20px;
}

.reviews-list {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    /* Hide scrollbar for cleaner look but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.reviews-list::-webkit-scrollbar {
    height: 6px;
}

.reviews-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

.review-card {
    flex: 0 0 280px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.review-info h4 {
    font-size: 14px;
    margin: 0;
    color: #333;
}

.review-date {
    font-size: 12px;
    color: #999;
}

.review-text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
}

.read-more {
    font-size: 12px;
    color: #999;
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .reviews-wrapper {
        flex-direction: column;
    }

    .review-summary {
        width: 100%;
        flex: none;
        margin-bottom: 20px;
    }

    .reviews-list {
        width: 100%;
    }
}




/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}




@media (max-width: 768px) {
    .nav-menu.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .hero-carousel {
        min-height: 200px;
        /* Ensure height on mobile */
    }

    /* Intro Section Mobile */
    #about-intro .container {
        flex-direction: column;
        text-align: center;
    }

    #about-intro .intro-image {
        text-align: center !important;
        margin-top: 30px;
    }

    #about-intro h2 {
        font-size: 28px !important;
    }
}


/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--font-primary);
}

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

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

/* Reviews Section */
.reviews-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    padding: 0 0 0 1%;
    /* Shifted to 1% left padding */
}

.review-summary {
    flex: 0 0 250px;
    text-align: center;
    padding: 20px;
}

.reviews-list {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    /* Hide scrollbar for cleaner look but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.reviews-list::-webkit-scrollbar {
    height: 6px;
}

.reviews-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

.review-card {
    flex: 0 0 280px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.review-info h4 {
    font-size: 14px;
    margin: 0;
    color: #333;
}

.review-date {
    font-size: 12px;
    color: #999;
}

.review-text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
}

.read-more {
    font-size: 12px;
    color: #999;
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .reviews-wrapper {
        flex-direction: column;
    }

    .review-summary {
        width: 100%;
        flex: none;
        margin-bottom: 20px;
    }

    .reviews-list {
        width: 100%;
    }
}




.review-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: 0.3s;
    color: var(--primary-color);
}

.review-btn:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.prev-btn {
    left: -45px;
}

.next-btn {
    right: 70px;
}

@media (max-width: 992px) {
    .prev-btn {
        left: -20px;
    }

    .next-btn {
        right: -20px;
    }

    .reviews-wrapper {
        padding: 0 5%;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .prev-btn {
        left: 0;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .next-btn {
        right: 0;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .reviews-wrapper {
        padding: 0;
        gap: 15px;
    }
}

.reviews-list {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.reviews-list::-webkit-scrollbar {
    display: none;
}

/* Stats Section */
.stats-section {
    background-color: #7a296c;
    padding: 60px 0;
    color: var(--white);
}

.stat-item h2 {
    color: var(--white);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .stats-section .d-flex {
        flex-direction: column;
        gap: 40px;
    }
}


/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal.fade-in {
    transform: translateY(0);
    /* Just fade, no slide */
}

/* Key Services Section */
.services-section {
    background-color: #E6F7F8;
    /* Light cyan/mint background */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns to center/fill after removing one */
    gap: 30px;
}

.service-card {
    background: var(--white);
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 280px;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
    margin-bottom: 20px;
    font-size: 50px;
    transition: transform 0.3s ease;
}

.service-card:hover .icon-wrapper {
    transform: scale(1.1);
}

.service-btn i {
    transition: transform 0.3s ease;
}

.service-btn:hover i {
    transform: translateX(5px);
}

/* Specific Card Styling (Nth-child strategy) */
/* 1. Doctors - Dark Blue */
.service-card:nth-child(1) {
    border-bottom: 3px solid transparent;
}

.service-card:nth-child(1):hover {
    border-bottom: 3px solid var(--primary-color);
}

.service-card:nth-child(1) .icon-wrapper i {
    color: var(--primary-color);
}

.service-card:nth-child(1) h3 {
    color: var(--primary-color);
}

/* 2. Treatments - Teal */
.service-card:nth-child(2) {
    border-bottom: 3px solid transparent;
}

.service-card:nth-child(2):hover {
    border-bottom: 3px solid #4DB6AC;
}

.service-card:nth-child(2) .icon-wrapper i {
    color: #4DB6AC;
}

.service-card:nth-child(2) h3 {
    color: #4DB6AC;
}

/* 3. Virtual Tour - Cyan/Blue (Was 4, now 3) */
.service-card:nth-child(3) {
    border-bottom: 3px solid transparent;
}

.service-card:nth-child(3):hover {
    border-bottom: 3px solid #29B6F6;
}

.service-card:nth-child(3) .icon-wrapper i {
    color: #29B6F6;
}

.service-card:nth-child(3) h3 {
    color: #29B6F6;
}


.service-card h3 {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: 700;
}

.service-btn {
    width: 50px;
    height: 50px;
    background-color: #E0F2F1;
    /* Very light teal */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4DB6AC;
    /* Teal arrow */
    font-size: 18px;
    transition: 0.3s;
}

.service-btn:hover {
    background-color: #B2DFDB;
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* --- About Page Styles --- */

/* Timeline */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: var(--secondary-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    border-radius: 3px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid var(--accent-color);
    top: 20px;
    border-radius: 50%;
    z-index: 1;
}

.left {
    left: 0;
}

.right {
    left: 50%;
}

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

.right::after {
    left: -16px;
}

.timeline-content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

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

.facility-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
}

.facility-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.facility-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.facility-info {
    padding: 20px;
    text-align: center;
}

.facility-info h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

/* Timeline Mobile */
@media screen and (max-width: 600px) {
    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

}

/* 4. Virtual Tour - Cyan/Blue */
.service-card:nth-child(4) .icon-wrapper i {
    color: #29B6F6;
}

.service-card:nth-child(4) h3 {
    color: #29B6F6;
}


.service-card h3 {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: 700;
}

.service-btn {
    width: 50px;
    height: 50px;
    background-color: #E0F2F1;
    /* Very light teal */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4DB6AC;
    /* Teal arrow */
    font-size: 18px;
    transition: 0.3s;
}

.service-btn:hover {
    background-color: #B2DFDB;
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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




/* --- Infrastructure Page Styles --- */

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

.gallery-card {
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(114, 2, 98, 0.1);
}

.gallery-card .img-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
    filter: brightness(1.02) contrast(1.02);
}

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

.gallery-card .img-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 60%, rgba(31, 43, 108, 0.15));
    pointer-events: none;
    opacity: 0.8;
}

.gallery-card h4 {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 5px;
}

@media (max-width: 992px) {
    .infra-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .infra-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Search Overlay */
.search-icon {
    cursor: pointer;
    transition: color 0.3s;
}

.search-icon:hover {
    color: var(--secondary-color);
}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 150px;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-container {
    width: 60%;
    max-width: 800px;
    position: relative;
    transform: translateY(-50px);
    transition: transform 0.4s ease;
}

.search-overlay.active .search-container {
    transform: translateY(0);
}

.search-input {
    width: 100%;
    padding: 20px 30px;
    font-size: 20px;
    border: none;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    outline: none;
}

.search-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
}

.search-close:hover {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .search-container {
        width: 90%;
    }

    .search-input {
        font-size: 16px;
        padding: 15px 20px;
    }
}

/* Doctor Profile Specializations */
.specialization-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

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

.spec-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.spec-icon {
    width: 40px;
    height: 40px;
    background: #f4f6f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 16px;
    flex-shrink: 0;
}

.spec-text {
    font-weight: 700;
    color: #212121;
    font-size: 15px;
}

/* Healthcare Solutions Section */
.healthcare-section {
    background-color: var(--light-bg);
    /* Matches site theme */
    padding: 80px 0;
}

.healthcare-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
    gap: 20px;
}

.healthcare-title {
    width: 100%;
}

.healthcare-title h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 0;
}

.healthcare-desc {
    color: #555;
    font-size: 16px;
    text-align: center;
    max-width: 700px;
    line-height: 1.6;
}

.healthcare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 25px;
}

.healthcare-grid-bottom {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.solution-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.solution-card:hover {
    transform: translateY(-5px);
}

.solution-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(21, 158, 236, 0.1);
    /* Light Blue Tint */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 20px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.solution-card:hover .solution-icon {
    background-color: var(--primary-color);
    color: #fff;
}

.solution-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.solution-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.learn-more-link {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.learn-more-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.healthcare-grid-bottom .solution-card {
    flex: 0 1 calc(25% - 19px);
    /* Matches grid 1fr approx */
    min-width: 250px;
}

.book-btn-container {
    text-align: center;
    margin-top: 50px;
}

.btn-gradient {
    background: var(--accent-color);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(91, 193, 172, 0.4);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.btn-gradient:hover {
    background: #453f85;
    color: white;
    box-shadow: 0 6px 20px rgba(69, 63, 133, 0.4);
}

@media (max-width: 992px) {
    .healthcare-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .healthcare-header {
        text-align: left;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .healthcare-desc {
        text-align: left;
    }
}

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

    .healthcare-grid-bottom .solution-card {
        flex: 1 1 100%;
    }
}

/* Footer Mobile */
@media (max-width: 768px) {
    footer {
        padding: 40px 20px 100px !important;
    }

    /* Two-column grid layout */
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px 20px !important;
        text-align: left;
    }

    .footer-grid>div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Section headers - bold white */
    .footer-grid h3 {
        color: #fff !important;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 15px;
        text-transform: none;
        letter-spacing: 0;
    }

    .footer-grid h3::after {
        display: none;
    }

    /* Vertical link list */
    .footer-grid ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .footer-grid ul li {
        margin-bottom: 0;
    }

    .footer-grid ul li a {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
    }

    /* Contact section spans full width */
    .footer-grid>div:last-child {
        grid-column: 1 / -1;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 10px;
    }

    .footer-grid>div:last-child p {
        font-size: 13px;
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.7);
    }

    /* Copyright section */
    footer .text-center {
        padding: 25px 0 10px;
        font-size: 11px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 20px;
    }

    footer .text-center p {
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
    }

    footer .text-center p a {
        color: rgba(255, 255, 255, 0.7);
        margin: 0 5px;
    }
}

@media (max-width: 768px) {
    .stats-section .d-flex {
        flex-direction: column;
        gap: 40px;
    }
}

/* Blog Page Styles */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.blog-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.blog-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

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

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-bottom: 15px;
}

.blog-meta i {
    margin-right: 5px;
    color: var(--secondary-color);
}

.blog-title {
    font-size: 20px;
    margin-bottom: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.blog-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.blog-title a:hover {
    color: var(--primary-color);
}

.blog-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.blog-read-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s;
}

.blog-read-more:hover {
    gap: 10px;
    color: var(--secondary-color);
}

@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Page Header */
/* Page Header & Breadcrumbs */
.page-header {
    background-color: #2E2E66;
    /* Base dark blue */
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 40%, transparent 100%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 30%, transparent 100%);
    /* Simulate the geometric overlay */
    padding: 60px 0;
    text-align: left;
    /* Left align */
    color: white;
    position: relative;
    overflow: hidden;
    border-top: 2px solid #ffffff;
}

/* Specific Header for Treatments Page */
.page-header.treatments-header {
    background: linear-gradient(rgba(122, 32, 84, 0.9), rgba(122, 32, 84, 0.9)), url('../images/treatments/lab-header-bg.webp') no-repeat center center / cover !important;
    background-color: #7a2054 !important;
    border-bottom: 4px solid var(--secondary-color);
    padding: 70px 0;
    text-align: left;
}

.page-header h1 {
    font-size: 42px;
    /* Bigger Title */
    font-weight: 800;
    margin: 0;
    position: relative;
    z-index: 10;
    color: #fff;
    /* Ensure white */
}

.breadcrumb-bar {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.breadcrumb-bar p {
    font-size: 15px;
    /* Bigger Breadcrumb */
    color: #666;
    /* Slightly darker */
    margin: 0;
}



/* Why Us Section */

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

.why-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align content */
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.why-icon {
    width: 60px;
    height: 60px;
    background: #E3F2FD;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 24px;
    border: 1px solid #BBDEFB;
}

.why-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.why-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Button Teal (Replaces Gradient) */
.btn-gradient {
    background: #4DB6AC;
    /* Teal color matching reference */
    color: white;
    padding: 15px 50px;
    border-radius: 50px;
    text-transform: capitalize;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(77, 182, 172, 0.3);
    /* Matching colored shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 18px;
    border: none;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(77, 182, 172, 0.4);
    background: #45a399;
    /* Slightly darker on hover */
    color: white;
}

@media (max-width: 992px) {
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .why-us-grid {
        grid-template-columns: 1fr;
    }
}

/* Treatments Page Styles */
.treatment-section {
    background-color: var(--light-bg);
    /* Light Pink Theme Background */


}

.tab-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    background: #fff;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif;
}

.tab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background: var(--primary-color);
    color: #fff;
}

.tab-btn.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 8px 20px rgba(114, 2, 98, 0.2);
}

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

.treatment-card {
    background: #fff;
    border-radius: 20px;
    padding: 50px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 350px;
    z-index: 1;
}

/* Image-based Wavy Overlay for Hover */
.treatment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    /* Fixed size to match card proportions */
    height: 250px;
    background: url('../images/card-hover-overlay.webp') no-repeat left top / contain;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 0;
    pointer-events: none;
    transform: translate(-30%, -30%);
    /* Start slightly outside */
}

.treatment-card:hover::before {
    opacity: 1;
    transform: translate(0, 0);
    /* Slide into the corner */
}

.treatment-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(114, 2, 98, 0.15);
    border-color: rgba(114, 2, 98, 0.2);
}

.treatment-card:hover::before {
    top: -50px;
    left: -50px;
    opacity: 1;
    transform: rotate(0deg) scale(1.1);
}

.treatment-card:hover::after {
    top: -40px;
    left: -40px;
    opacity: 0.6;
    transform: rotate(15deg) scale(1);
}

/* Ensure content stays above the sharp CSS waves */
.treatment-icon-wrapper,
.treatment-card h3,
.treatment-arrow {
    position: relative;
    z-index: 2;
}

.treatment-icon-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Fallback */
    font-size: 36px;
    position: relative;
    z-index: 1;
}

.treatment-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Creating the "Blob" effect behind the icon */
.treatment-icon-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Standard circle */
    background: currentColor;
    opacity: 0.15;
    z-index: -1;
}

/* Card Typography */
.treatment-card h3 {
    font-size: 22px;
    font-weight: 800;
    /* Bolder as per reference */
    margin-bottom: 20px;
    flex-grow: 1;
    line-height: 1.4;
}

/* Button Text Styles */
.know-more-text {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.5s ease-in-out;
    font-size: 16px;
    font-weight: 700;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
}

.treatment-card .treatment-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    background-color: rgba(0, 106, 179, 0.1);
    /* Secondary Blue light */
    font-size: 16px;
    transition: all 0.5s ease-in-out;
    text-decoration: none;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.treatment-card .treatment-arrow:hover {
    width: 85%;
    border-radius: 50px;
    padding: 0 25px;
    background-color: var(--secondary-color);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 106, 179, 0.2);
}

.treatment-card .treatment-arrow:hover .know-more-text {
    opacity: 1;
    max-width: 150px;
    margin-right: 15px;
}

/* Theme-based Button Colors (Override with specific colors) */
.treatment-card.theme-pink .treatment-arrow,
.treatment-card.theme-orange .treatment-arrow,
.treatment-card.theme-teal .treatment-arrow,
.treatment-card.theme-blue .treatment-arrow {
    background-color: rgba(114, 2, 98, 0.1);
    color: var(--primary-color);
}

.treatment-arrow:hover {
    transform: scale(1.05);
}



/* Ensure content stays above waves */
.treatment-card .treatment-icon-wrapper,
.treatment-card h3,
.treatment-card .treatment-arrow {
    position: relative;
    z-index: 2;
}





/* Keep default text colors via Themes */
/* Keep default text colors via Themes */
.treatment-card.theme-pink h3 {
    color: var(--primary-color);
}

.treatment-card.theme-pink .treatment-icon-wrapper {
    color: var(--primary-color);
}

.treatment-card.theme-orange h3 {
    color: var(--primary-color);
}

.treatment-card.theme-orange .treatment-icon-wrapper {
    color: var(--primary-color);
}

.treatment-card.theme-teal h3 {
    color: var(--primary-color);
}

.treatment-card.theme-teal .treatment-icon-wrapper {
    color: var(--primary-color);
}

.treatment-card.theme-blue h3 {
    color: var(--primary-color);
}

.treatment-card.theme-blue .treatment-icon-wrapper {
    color: var(--primary-color);
}





@media (max-width: 1200px) {
    .treatment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .treatment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Testimonials Section (Heartfelt Stories) */
.testimonials-section {
    background-color: var(--footer-bg);
    /* Deep Brand Blue Background */
    padding: 80px 0;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Header Grid */
.testimonials-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}

.header-content .eyebrow {
    color: #FF7043;
    /* Coral accent text */
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.header-content h2 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: white;
}

.highlight-text {
    color: #FF7043;
    /* Coral for 'success' */
}

/* Google Badge */
.google-badge {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 300px;
}

.g-logo img {
    width: 40px;
    height: 40px;
}

.g-info {
    display: flex;
    flex-direction: column;
}

.g-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.g-rating {
    font-size: 16px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
}

.g-rating i {
    font-size: 12px;
}

.g-users {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.g-users img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    margin-left: -10px;
}

.g-users img:first-child {
    margin-left: 0;
}

.g-count {
    background: white;
    color: var(--primary-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    z-index: 2;
}

/* Cards Grid */
.testimonials-grid {
    display: flex;
    overflow-x: auto;
    gap: 30px;
    padding: 40px 20px;
    /* Extra padding for hover lift */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.testimonials-grid::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.testimonial-card {
    flex: 0 0 auto;
    width: 350px;
    background: rgba(255, 255, 255, 0.05);
    /* Glass dark */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    scroll-snap-align: center;
}

@media (max-width: 768px) {
    .testimonial-card {
        width: 300px;
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        width: 280px;
        padding: 20px;
    }
}

.testimonial-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-card.featured-teal:hover {
    transform: scale(1.05) translateY(-5px);
    /* Maintain scale and add slight lift */
    background: var(--secondary-color);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.card-header .avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    /* Squircle */
    object-fit: cover;
}

.user-info h4 {
    color: white;
    font-size: 18px;
    margin-bottom: 2px;
}

.user-info span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.quote-icon {
    margin-left: auto;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.2);
}

.testimonial-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1.6;
}

/* Featured Card (Coral Blue / Teal Theme) */
.testimonial-card.featured-teal {
    background: var(--secondary-color);
    /* Brand Teal (Coral Blue-ish) */
    transform: scale(1.05);
    /* Slightly bigger */
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.testimonial-card.featured-teal .user-info h4,
.testimonial-card.featured-teal .testimonial-text,
.testimonial-card.featured-teal .quote-icon {
    color: white;
    /* All white text on teal */
}

.testimonial-card.featured-teal .user-info span {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonial-card.featured-teal {
        transform: none;
    }

    .testimonials-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Intro Image Hover Effect */
.intro-image {
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.intro-image img {
    transition: transform 0.8s ease;
    display: block;
    margin: 0 auto;
}

.intro-image:hover img {
    transform: scale(1.1);
}

/* Testimonials Section (New) */
.home-testimonials-section {
    padding: 0;
    overflow: hidden;
}

.home-testimonials-wrapper {
    display: flex;
    flex-wrap: wrap;
    min-height: 600px;
}

/* Left Panel */
.home-testimonial-left {
    background-color: var(--primary-color);
    /* Google Blue style dark */
    width: 25%;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.google-rating-box {
    margin-bottom: 20px;
}

.home-testimonial-nav .nav-btn {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    border-radius: 8px;
    /* Slightly rounded squares */
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-testimonial-nav .nav-btn:hover {
    background: #fff;
    color: var(--primary-color);
    border-color: #fff;
}

/* Right Panel (Carousel) */
.home-testimonial-right {
    width: 75%;
    background-color: #f5f5f5;
    /* Fallback */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/Testimonial-BG.webp');
    background-size: cover;
    background-position: center;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.home-testimonial-track-container {
    width: 100%;
    overflow-x: auto;
    /* Enable native scroll */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar IE/Edge */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* Snap to cards */
    padding-bottom: 30px;
    /* Space for shadow */
}

.home-testimonial-track-container::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.home-testimonial-track {
    display: flex;
    gap: 30px;
    width: max-content;
    /* Ensure items sit in a row */
    padding: 20px 10px;
    /* Padding inside track */
}

.home-testimonial-card {
    min-width: 350px;
    max-width: 350px;
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    scroll-snap-align: center;
    /* Snap cards */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
    transition: all 0.3s ease;
    /* Ensure smooth hover */
}

.home-testimonial-card:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
}

.review-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--primary-color);
    font-weight: 500;
}

.reviewer-meta h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    font-weight: 700;
}

.review-date {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.stars-gold {
    color: #FFC107;
    /* Amber/Gold */
}

/* Utilities used in this section */
.text-white {
    color: #fff;
}

.bg-white {
    background-color: #fff;
}

.rounded-circle {
    border-radius: 50%;
}

.d-flex {
    display: flex;
}

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

.justify-center {
    justify-content: center;
}

.gap-10 {
    gap: 10px;
}

.opacity-80 {
    opacity: 0.8;
}

.my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.text-sm {
    font-size: 14px;
}

.w-100 {
    width: 100%;
}

/* Responsive */
@media (max-width: 991px) {
    .home-testimonials-wrapper {
        flex-direction: column;
    }

    .home-testimonial-left,
    .home-testimonial-right {
        width: 100%;
    }

    .home-testimonial-left {
        padding: 40px;
        text-align: center;
        align-items: center;
    }

    .home-testimonial-nav {
        justify-content: center;
    }

    .home-testimonial-card {
        min-width: 280px;
        max-width: 280px;
        padding: 30px 20px;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .home-testimonial-card {
        min-width: 260px;
        max-width: 260px;
        padding: 25px 15px;
    }

    .review-text {
        font-size: 14px;
    }
}

/* --- Chatbot Widget --- */
.chatbot-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: var(--font-secondary);
}

.chatbot-toggle {
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: bounce-in 1s ease;
    /* Mobile touch fixes */
    position: relative;
    z-index: 10000;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure image inside toggle doesn't block clicks */
.chatbot-toggle img {
    pointer-events: none;
}

/* Only apply hover on devices that support it to avoid sticky hover on mobile */
@media (hover: hover) {
    .chatbot-toggle:hover {
        transform: scale(1.1);
        background-color: var(--secondary-color);
    }
}

.chatbot-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 400px;
    height: 600px;
    /* Increased size for better spacing */
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.chatbot-window.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.chatbot-header {
    background: var(--primary-color);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    border-bottom: none;
}

.chatbot-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: white;
}

.chatbot-title img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    object-fit: contain;
    background: white;
    /* Add white bg back for logo visibility on dark header */
    padding: 2px;
}

.chatbot-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.chatbot-refresh,
.chatbot-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    transition: 0.3s;
    opacity: 0.8;
}

.chatbot-refresh:hover,
.chatbot-close:hover {
    color: white;
    opacity: 1;
}

.chatbot-refresh:hover {
    transform: rotate(180deg);
}

.chatbot-close:hover {
    transform: rotate(90deg);
}

.chatbot-body {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    /* White background */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    gap: 15px;
    scrollbar-width: thin;
}

.message-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.chat-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0f0f0;
    padding: 2px;
}

.message-bubbles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Close stacking */
}

.chatbot-message {
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    width: fit-content;
    max-width: 85%;
}

.bot-message {
    background-color: #f7f7f7;
    color: var(--primary-color);
    /* Match header color */
    border-bottom-left-radius: 4px;
    box-shadow: none;
    border: 1px solid #f0f0f0;
}

/* Fix rounding for first/last in group if needed, but simple is okay */
.message-bubbles .bot-message:first-child {
    border-bottom-left-radius: 18px;
    border-top-left-radius: 18px;
}

.message-bubbles .bot-message:last-child {
    border-bottom-left-radius: 4px;
}


.user-message {
    background-color: var(--secondary-color);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.message-time {
    display: block;
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.5;
    text-align: right;
}

.bot-message .message-time {
    text-align: left;
    display: none;
    /* Hide per-bubble time to match clean reference */
}

.chatbot-footer {
    padding: 15px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    align-items: center;
}

#chatbot-input {
    flex: 1;
    border: 1px solid #eee;
    padding: 10px 15px;
    border-radius: 20px;
    outline: none;
    font-size: 14px;
    transition: 0.3s;
}

#chatbot-input:focus {
    border-color: var(--secondary-color);
}

#chatbot-send {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

#chatbot-send:hover {
    background: var(--secondary-color);
    transform: scale(1.1);
}

/* Bounce Animation for Toggle */
@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .chatbot-window {
        position: fixed;
        /* Fix to viewport, not parent */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        z-index: 10005;
        /* Ensure above everything */
        transform: translateY(20px);
        /* Initial state for animation */
    }

    .chatbot-window.active {
        transform: translateY(0);
    }


    .chatbot-widget {
        bottom: 20px;
        right: 20px;
    }
}

.chips-container-message {
    background-color: #f8f9fa !important;
    /* Very light grey card */
    padding: 20px !important;
    border-radius: 20px !important;
    max-width: 100% !important;
    margin-top: 10px;
}

.chips-container-message p {
    margin-bottom: 15px;
    color: var(--primary-color);
    /* Match header color */
    font-size: 15px;
}

.chatbot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Chip Style Match Reference - Adapted to Theme */
.chip-btn {
    background: #fff;
    border: 1px solid var(--primary-color);
    /* Theme border */
    color: var(--primary-color);
    /* Theme text */
    padding: 8px 16px;
    border-radius: 50px;
    /* Pill shape */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-dot {
    width: 10px;
    height: 10px;
    background-color: #e0e0e0;
    /* Grey dot */
    border-radius: 50%;
    display: inline-block;
}

.chip-btn:hover {
    background: var(--primary-color);
    /* Theme background on hover */
    color: white;
    /* White text on hover */
}


.chip-btn:hover .chip-dot {
    background-color: white;
    /* White dot on hover */
}

/* Typing Indicator */
.typing-indicator {
    background-color: #f1f3f4;
    width: fit-content;
    padding: 15px 20px;
    border-radius: 20px;
    border-bottom-left-radius: 5px;
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    animation: fade-in 0.3s ease;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background-color: #aaa;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* === Appointment Modal Styles === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 800px;
    /* Increased from 600px */
    padding: 40px;
    /* Increased padding */
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: 0.3s;
}

/* ... existing styles ... */

.form-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    align-items: center;
    /* Center the footer content */
}

.terms-checkbox {
    display: flex;
    gap: 10px;
    font-size: 14px;
    /* Slightly larger text */
    color: #666;
    align-items: center;
    justify-content: center;
    /* Center horizontally */
    width: 100%;
}

.modal-close:hover {
    color: var(--primary-color);
}

.modal-badge {
    display: inline-block;
    background: #e3f2fd;
    color: var(--secondary-color);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 15px;
}

.modal-header h3 {
    margin-bottom: 25px;
    line-height: 1.4;
    color: #333;
    font-size: 20px;
}

.modal-form .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.modal-form input,
.modal-form select,
.phone-input-group {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font-secondary);
    outline: none;
    transition: 0.3s;
}

.modal-form input:focus,
.modal-form select:focus {
    border-color: var(--secondary-color);
}

.phone-input-group {
    display: flex;
    padding: 0;
    overflow: hidden;
}

.phone-input-group select {
    width: auto;
    border: none;
    background: #f9f9f9;
    padding: 0 10px;
    border-right: 1px solid #e0e0e0;
    border-radius: 0;
    font-weight: 600;
}

.phone-input-group input {
    border: none;
    padding: 12px;
}

.date-input-wrapper {
    flex: 1;
    position: relative;
}

.center-select {
    flex: 1;
}

.form-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.terms-checkbox {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #666;
    align-items: center;
    justify-content: center;
    /* Center the text */
}

.terms-checkbox input {
    width: auto;
    /* Prevent input stretching */
    margin: 0;
    cursor: pointer;
}

.terms-checkbox a {
    color: var(--secondary-color);
    text-decoration: underline;
}

.btn-block {
    width: 100%;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .modal-form .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .modal-content {
        width: 90%;
        padding: 20px;
    }
}

/* === Doctors Page Redesign === */

/* Hero Section */
.doctors-hero {
    display: flex;
    align-items: center;
    position: relative;
}

.doctors-hero .hero-content {
    position: relative;
    z-index: 2;
}

/* === New Doctor List Design (Reference Match) === */

.doctors-list-section {
    padding: 60px 0;
    background: #fdfdfd;
}

.doctors-list-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}

.doctor-card-ref {
    display: flex;
    background: #fff;
    /* Clean white background */
    border-radius: 20px;
    overflow: hidden;
    /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); Subtle shadow */
    transition: transform 0.3s ease;
    padding: 30px;
    gap: 40px;
    /* Space between image and content */
    align-items: center;
    /* Center vertically to fix spacing */
}

.doctor-card-ref:hover {
    /* transform: translateY(-5px); Optional hover effect */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.doc-img-ref {
    flex-shrink: 0;
    width: 250px;
    height: 300px;
    /* Fixed height for uniformity */
    border-radius: 20px;
    /* Rounded square as per ref */
    overflow: hidden;
    background: #f0f0f0;
}

.doc-img-ref img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    /* Focus on face */
}

.doc-content-ref {
    flex: 1;
    display: flex;
    justify-content: space-between;
    /* Split info and meta */
    gap: 30px;
}

/* Main Info (Left Side) */
.doc-main-info {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.doc-name {
    font-size: 32px;
    color: #1F2B6C;
    /* Blue color */
    font-weight: 500;
    margin-bottom: 15px;
}

.doc-bio {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 600px;
}

.doc-credentials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.credential-item {
    font-size: 15px;
    color: #1F2B6C;
    /* Blue text for credentials */
    font-weight: 500;
}

/* Meta & Action (Right Side) */
.doc-meta-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align to right */
    text-align: right;
    justify-content: space-between;
    /* Spread vertical content */
    min-width: 200px;
}

.meta-group {
    margin-bottom: 20px;
}

.meta-label {
    display: block;
    font-size: 13px;
    color: #1F2B6C;
    /* Blue label */
    text-transform: capitalize;
    margin-bottom: 5px;
}

.meta-value {
    display: block;
    font-size: 18px;
    color: #333;
    font-weight: 400;
}

.btn-book-ref {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: auto;
    border: 1px solid transparent;
}

.btn-book-ref:hover {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(114, 2, 98, 0.15);
}

/* Responsive */
@media (max-width: 900px) {
    .doctor-card-ref {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .doc-content-ref {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .doc-meta-action {
        align-items: center;
        text-align: center;
    }

    .doc-img-ref {
        width: 200px;
        height: 200px;
    }

    .meta-group {
        margin-bottom: 10px;
    }

    .doc-main-info {
        align-items: center;
    }
}

/* === Consultation Section (Doctors Page) === */
.consultation-section {
    padding: 100px 0;
    /* Balanced vertical spacing */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/Testimonial-BG.webp') no-repeat center center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    /* Ensure section takes up height */
}

.consultation-card {
    display: flex;
    background: white;
    border-radius: 30px;
    /* More rounded corners */
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
    max-width: 1300px;
    /* Adjusted width */
    width: 95%;
    margin: 0 auto;
    /* height: 600px;  Fixed height to match aspect ratio */
    align-items: stretch;
}

.consultation-form-wrapper {
    flex: 1.4;
    /* Increased width for content */
    padding: 60px 50px;
    /* Precise padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.consultation-image-wrapper {
    flex: 0.8;
    /* Reduced width for image */
    position: relative;
    margin: 20px 20px 20px 0;
    /* Trick to create the 'floating' image look if intended, or just padding */
    border-radius: 0 30px 30px 0;
    /* Match card radius if flush, or its own if floating */
    /* Based on ref, it looks FLUSH. Let's revert to flush but clean */
    margin: 0;
    /* Reset margin */
}

.consultation-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.form-header {
    text-align: center;
    margin-bottom: 35px;
}

.badge-consultation {
    background: #E8F1FC;
    color: #1F2B6C;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 20px;
}

.form-header h3 {
    font-size: 26px;
    color: #333;
    line-height: 1.4;
    font-weight: 500;
}

/* Form Styles */
.consultation-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* Fix flex sizing */
.consultation-form .form-row>input,
.consultation-form .form-row>select,
.consultation-form .form-row>.phone-input-group,
.consultation-form .form-row>.date-input-wrapper {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.consultation-form input,
.consultation-form select,
.consultation-form .phone-input-group {
    padding: 0 25px;
    height: 55px;
    /* Slightly taller for premium feel */
    line-height: 55px;
    border: 1px solid #f0f0f0;
    /* Very subtle border */
    border-radius: 50px;
    font-size: 15px;
    font-family: var(--font-secondary);
    outline: none;
    transition: all 0.3s ease;
    color: #444;
    background: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    /* Soft shadow */
    font-weight: 600;
}

.consultation-form input::placeholder {
    color: #999;
    font-weight: 400;
}

.consultation-form input:hover,
.consultation-form select:hover,
.consultation-form .phone-input-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.consultation-form input:focus,
.consultation-form select:focus,
.consultation-form .phone-input-group:focus-within {
    border-color: #1F2B6C;
    box-shadow: 0 8px 25px rgba(31, 43, 108, 0.15);
    transform: translateY(-2px);
}

.consultation-form .phone-input-group {
    padding: 0;
    /* Reset padding for group container */
    overflow: hidden;
}

.consultation-form .phone-input-group select {
    border: none;
    border-right: 1px solid #E0E0E0;
    height: 100%;
    /* Fill height */
    width: auto;
    padding: 0 15px;
    background: transparent;
    border-radius: 0;
    color: #333;
    font-weight: 600;
}

.consultation-form .phone-input-group input {
    border: none;
    flex: 1;
    height: 100%;
    /* Fill height */
    border-radius: 0;
    padding-left: 15px;
}

.consultation-form .center-select {
    border-radius: 50px;
}

.consultation-form .terms-checkbox {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: #777;
    margin-bottom: 30px;
    align-items: center;
    justify-content: center;
}

.consultation-form .terms-checkbox input {
    width: auto;
    margin: 0;
    accent-color: #1F2B6C;
}

.consultation-form .btn {
    width: fit-content;
    margin: 0 auto;
    display: block;
    background: #1F2B6C;
    color: white;
    padding: 14px 50px;
    /* Wide button */
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.consultation-form .btn:hover {
    background: #151d48;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(31, 43, 108, 0.3);
}

/* Adjust Image Wrapper to match 'floating image' look if actually desired.
   Upon closer inspection of user ref 1765825859798.png,
   The image appears to have rounded corners on ALL sides and is separated from the card edge by white space?
   No, it looks like a 2-column layout. The image is full height.
   Let's stick to full height 50/50.
*/

/* Responsive */
@media (max-width: 900px) {
    .consultation-card {
        flex-direction: column-reverse;
        max-width: 500px;
        min-height: auto;
    }

    .consultation-image-wrapper {
        height: 300px;
        flex: none;
    }

    .consultation-form-wrapper {
        padding: 40px 30px;
    }

    .consultation-form .form-row {
        flex-direction: column;
        gap: 15px;
    }
}

/* Section Header */
.section-header {
    width: 100%;
    text-align: left;
}

.section-label {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: default;
    box-shadow: 0 4px 10px rgba(114, 2, 98, 0.2);
}

.section-title {
    font-size: 36px;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* =========================================
   Treatment Detail Page Styles
   ========================================= */

.treatment-detail-section {
    padding: 80px 0;
    background-color: #fff;
}

.treatment-detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Left Content */
.treatment-content {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.treatment-banner-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.treatment-content h2 {
    color: var(--primary-color);
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 700;
}

.treatment-content h3 {
    color: var(--primary-color);
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.treatment-content p {
    margin-bottom: 20px;
}

.treatment-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.treatment-content ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #555;
}

.treatment-content ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--primary-color);
}

/* Sidebar */
.treatment-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.widget-title {
    font-size: 22px;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(114, 2, 98, 0.1);
}

.booking-form .form-group {
    margin-bottom: 15px;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(114, 2, 98, 0.1);
}

.booking-form button {
    width: 100%;
    padding: 12px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.booking-form button:hover {
    background: #5a024e;
    transform: translateY(-2px);
}

.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-list li {
    margin-bottom: 10px;
}

.services-list a {
    display: block;
    padding: 12px 15px;
    background: #f9f9f9;
    border-radius: 10px;
    color: #555;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.services-list a:hover,
.services-list a.active {
    background: rgba(114, 2, 98, 0.05);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    padding-left: 20px;
}

/* Process Timeline Section */
.process-section {
    padding: 80px 0;
    background-color: var(--light-bg);
}

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

.section-title h2 {
    font-size: 36px;
    color: var(--primary-color);
    font-weight: 800;
    margin-bottom: 15px;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 50px;
    right: 50px;
    height: 2px;
    border-bottom: 2px dashed #ddd;
    z-index: 0;
}

.process-step {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 180px;
}

.step-number {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--primary-color);
    font-size: 32px;
    font-weight: 800;
    color: rgba(114, 2, 98, 0.2);
    /* Transparent number effect */
    position: relative;
    overflow: hidden;
}

.step-number span {
    z-index: 2;
}

.step-content h4 {
    color: var(--primary-color);
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
}

.step-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .treatment-detail-layout {
        grid-template-columns: 1fr;
    }

    .treatment-sidebar {
        position: static;
        margin-top: 50px;
    }

    .process-steps {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .process-steps::before {
        display: none;
    }
}

/* =========================================
   404 Page Not Found Styles
   ========================================= */

.not-found-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 0;
    background: radial-gradient(circle at center, rgba(114, 2, 98, 0.05) 0%, transparent 70%);
}

.not-found-content {
    max-width: 600px;
    margin: 0 auto;
}

.error-code {
    font-size: 150px;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 20px;
    position: relative;
    opacity: 0.1;
    letter-spacing: 10px;
    animation: pulse-soft 3s infinite ease-in-out;
}

.not-found-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.not-found-text {
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.6;
}

.detour-text {
    font-style: italic;
    color: var(--secondary-color);
    font-weight: 600;
    margin-top: 20px;
    display: block;
}

.not-found-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes pulse-soft {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.15;
    }
}

@media (max-width: 768px) {
    .error-code {
        font-size: 100px;
    }

    .not-found-title {
        font-size: 26px;
    }

    .not-found-text {
        font-size: 16px;
    }
}