/* Custom CSS for fonts and refined color variables based on image analysis */
body {
    font-family: 'Roboto', sans-serif;
    /* Default body font */
    /* Define CSS variables for the refined color palette */
    --color-primary-bg: #FBF8F5;
    /* Very light, almost off-white beige */
    --color-secondary-bg: #F9F3EC;
    /* Slightly deeper, warm beige for sections */
    --color-heading: #5A3E38;
    /* Dark brown for headings */
    --color-text-body: #7A6F6C;
    /* Muted grey-brown for body text */
    --color-accent: #eb7555;
    /* Muted orange/terracotta for buttons/accents */
    --color-light-accent: #E4D5C9;
    /* Light, desaturated pinkish-beige for borders/subtleties */
    --color-white: #FFFFFF;
    --color-star: #FFD700;
    /* Gold color for stars */
    --color-whatsapp: #25D366;
    /* WhatsApp green */
    --color-soft-peach: #EADDD8;
    /* A very subtle background color from the behance hero */
    --color-border-image: #E4C0B6;
    /* A slightly darker border for the hero image */
    --color-trust-section-bg: #AE8D7A;
    /* Background for the new trust section */
    --color-trust-card-bg: #AE8D7A;
    /* Background for the trust cards, same as section for seamless look */
    --color-trust-card-border: #FFFFFF;
    /* Explicit white border for cards */
    --color-trust-text: #FFFFFF;
    /* White text for trust section */
    --color-services-bg: #F9F3EC;
    /* Lighter beige for services section */
}

.mobile-menu-button{
    display: NONE;
}

/* Apply background colors */
body {
    background-color: var(--color-primary-bg);
    overflow-x: hidden;
    /* Prevent horizontal overflow */
}

/* Apply text colors */
h1,
h2,
h3,
h4,
h5,
h6,
.font-marcellus {
    font-family: 'Marcellus', serif;
    /* Headings and specific elements use Marcellus */
    color: var(--color-heading);
}

p,
a,
span,
div:not(.bg-white) {
    color: var(--color-text-body);
}

/* Utility classes for consistency with defined colors */
.bg-primary-bg {
    background-color: var(--color-primary-bg);
}

.bg-secondary-bg {
    background-color: var(--color-secondary-bg);
}

.text-heading {
    color: var(--color-heading);
}

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

.bg-accent {
    background-color: var(--color-accent);
}

.hover\:bg-accent-dark:hover {
    background-color: #C27A65;
}

/* Slightly darker on hover */
.border-light-accent {
    border-color: var(--color-light-accent);
}

.text-accent {
    color: var(--color-accent);
}

.text-star {
    color: var(--color-star);
}

/* Custom styles for rounded corners and shadows */
.rounded-xl-custom {
    border-radius: 1.5rem;
}

.shadow-lg-custom {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hero image container styling - now independent and fully visible */
/* === Enhanced Micro-Testimonials Bar Styles === */
.micro-testimonials-bar {
    width: 100%;
    background-color: var(--color-primary-bg); /* Or a slightly darker variant if hero is too bright */
    padding: 1.5rem 0; /* Increased vertical padding for more prominence */
    overflow: hidden;
    position: relative;
    z-index: 10;
    margin-top: 0.5rem; /* More space from content above */
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1); /* Stronger, clearer shadow */
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--color-light-accent); /* Subtle top border for definition */
    border-bottom: 1px solid var(--color-light-accent); /* Subtle bottom border */
}

/* Adjust Owl Carousel Container within the bar */
.micro-testimonials-carousel {
    max-width: 700px; /* Increased max-width for better readability on larger screens */
    margin: 0 auto;
    position: relative; /* For dot positioning */
    padding-bottom: 05px; /* Space for dots */
}

.micro-testimonials-carousel .item {
    text-align: center;
    padding: 0 1.5rem; /* Horizontal padding */
}

.micro-testimonials-carousel .item p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.15rem; /* Larger font size for readability */
    font-weight: 500; /* Slightly bolder */
    color: var(--color-heading); /* Stronger contrast text color */
    line-height: 1.6;
    margin: 0; /* Remove default paragraph margin */
    position: relative;
    padding-left: 30px; /* Space for the opening quote mark */
    padding-right: 30px; /* Space for the closing quote mark */
}

/* Custom Quote Mark Styling */
.micro-testimonials-carousel .item p::before {
    content: "“"; /* Opening quote mark */
    font-family: 'Marcellus', serif; /* Use a decorative font for quotes */
    font-size: 3.5rem; /* Large quote mark */
    color: var(--color-accent); /* Accent color for quotes */
    position: absolute;
    left: 0;
    top: -10px; /* Adjust vertical position */
    line-height: 1;
    opacity: 0.7;
}

.micro-testimonials-carousel .item p::after {
    content: "”"; /* Closing quote mark */
    font-family: 'Marcellus', serif;
    font-size: 3.5rem;
    color: var(--color-accent);
    position: absolute;
    right: 0;
    bottom: -10px; /* Adjust vertical position */
    line-height: 1;
    opacity: 0.7;
}

/* Owl Carousel Dots Styling (more visible) */
.micro-testimonials-carousel.owl-theme .owl-dots {
    position: absolute;
    bottom: -20px!important; /* Position at the very bottom of the carousel container */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    margin-top: 0;
}

.micro-testimonials-carousel.owl-theme .owl-dots .owl-dot span {
    width: 12px; /* Larger dots */
    height: 12px; /* Larger dots */
    background: var(--color-light-accent); /* Muted color for inactive dots */
    margin: 0 6px; /* More space between dots */
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    border: 2px solid var(--color-light-accent); /* Border for definition */
}

.micro-testimonials-carousel.owl-theme .owl-dots .owl-dot.active span,
.micro-testimonials-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-accent); /* Your accent color for active/hover */
    border-color: var(--color-accent); /* Matching border color */
    transform: scale(1.1); /* Slightly larger on active/hover */
}

/* Hide default Owl Carousel Navigation Arrows (unless specifically requested) */
.micro-testimonials-carousel.owl-theme .owl-nav {
    display: none;
}

/* Responsive adjustments for Micro-Testimonials Bar */
@media (max-width: 991px) {
    .micro-testimonials-bar {
        padding: 1.2rem 0;
        margin-top: 3rem;
    }
    .micro-testimonials-carousel {
        max-width: 90%; /* Allow wider on smaller desktops */
    }
    .micro-testimonials-carousel .item p {
        font-size: 1.05rem; /* Slightly smaller on tablets */
        padding-left: 25px;
        padding-right: 25px;
    }
    .micro-testimonials-carousel .item p::before,
    .micro-testimonials-carousel .item p::after {
        font-size: 3rem;
        top: -8px;
        bottom: -8px;
    }
}

/* Custom styles for the dropdown arrow (retained) */
.select-arrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A6F6C'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

/* Decorative floral patterns (retained) */
.floral-pattern-hero {
    position: absolute;
    background-image: url('https://placehold.co/250x250/F0E9DF/F0E9DF?text=');
    /* Placeholder for actual floral pattern */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.floral-pattern-hero-top-right {
    top: 5%;
    right: 0;
    width: 250px;
    height: 250px;
    transform: rotate(30deg);
}

.floral-pattern-hero-bottom-left {
    bottom: 5%;
    left: 0;
    width: 300px;
    height: 300px;
    transform: rotate(-20deg);
}

/* Adjustments for the quick form in hero section */
.hero-form-container {
    background-color: var(--color-white);
    border-radius: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    /* Reduced padding for compactness */
    width: 100%;
    /* Take full width of its column */
    max-width: 380px;
    /* Max width to maintain aesthetic proportions */
    margin: 0 auto;
    /* Center in its column */
}

.hero-form-container input,
.hero-form-container textarea {
    font-size: 0.9rem;
    /* Smaller font for form fields */
    padding: 0.75rem 1rem;
    /* Adjusted padding */
}

.hero-form-container button {
    padding: 0.75rem 1.5rem;
    /* Adjusted button padding */
    font-size: 1rem;
    /* Adjusted button font size */
}

/* Icon section text sizing */
.icon-label {
    font-size: 0.95rem;
    /* Slightly smaller than default text-lg (1.125rem) to be more compact */
    line-height: 1.25rem;
    /* Ensure proper line height */
}

/* Responsive adjustments for image container */
.hero-image-container {
    width: 100%;
    max-width: 450px;
    height: 560px;
    border-radius: 0 60px 0 60px;
    overflow: hidden;
    margin: 0 auto;
    
}

.hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (min-width: 768px) {
    .hero-image-container {
        max-width: 380px;
        height: 480px;
        border-radius: 0 50px 0 50px;
    }
}

@media (min-width: 1024px) {
    .hero-image-container {
        max-width: 450px;
        height: 560px;
        border-radius: 0 60px 0 60px;
    }
}

@media (min-width: 1280px) {
    /* xl breakpoint */
    .hero-image-container {
        max-width: 500px;
        height: 620px;
    }
}


/* --- Mobile-Specific Overrides (max-width: 767px) --- */
@media (max-width: 767px) {

    section{
        padding-left: 0.8rem!important;
        padding-right: 0.8rem!important;
    }

    .mobile-layout-container {
        flex-direction: column; /* Ensure vertical stacking */
        padding-top: 1rem; /* Adjust top padding for mobile */
        min-height: auto; /* Remove fixed min-height for mobile */
        gap: 1.5rem; /* Reduce gap between sections on mobile */
    }

    /* Reorder sections for mobile: Text -> Image -> Form */
    .hero-text-section {
        order: 1; /* Text content first */
        margin-bottom: 1.5rem; /* Space before the image */
        padding-right: 0; /* Remove desktop padding */
        padding-left: 0; /* Ensure no horizontal padding from larger screens */
    }

    .hero-image-section {
        order: 2; /* Image after text */
        margin-top: 0 !important; /* Override desktop specific margins */
        margin-bottom: 1.5rem; /* Space before the form */
    }

    .hero-form-section {
        order: 3; /* Form last */
        margin-top: 0 !important; /* Override desktop specific margins */
        margin-bottom: 1.5rem; /* Space after the form before any following content */
    }

    /* Typography adjustments for mobile */
    .hero-text-section .mobile-h1 {
        font-size: 2.25rem; /* Smaller H1 for mobile, about text-4xl equivalent */
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }

    .hero-text-section .mobile-h2 {
        font-size: 1.375rem; /* Smaller H2 for mobile, about text-xl equivalent */
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    /* Adjust icon section spacing for mobile */
    .hero-text-section .mobile-icon-section {
        gap: 1rem; /* Reduce gap between icons */
        margin-bottom: 1.25rem; /* Reduce space after icons */
    }

    /* Adjust call button for mobile */
    .hero-text-section .mobile-call-button {
        padding: 0.6rem 1.2rem; /* Slightly smaller button padding */
        font-size: 0.9rem; /* Smaller font for button */
        margin-bottom: 1.25rem; /* Space below button */
    }

    /* Adjust micro-testimonials bar for mobile */
    .micro-testimonials-bar {
        padding: 0.75rem 0; /* Reduced vertical padding */
        margin-top: 1rem; /* Adjust margin from content above */
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06); /* Lighter shadow */
    }

    .micro-testimonials-carousel .item p {
        font-size: 0.875rem; /* Slightly smaller for compactness */
        padding-left: 15px; /* Adjust quote mark spacing */
        padding-right: 15px;
    }

    .micro-testimonials-carousel .item p::before,
    .micro-testimonials-carousel .item p::after {
        font-size: 2rem; /* Smaller quote marks */
        top: -2px; /* Adjust vertical position */
        bottom: -2px;
    }

    .micro-testimonials-carousel.owl-theme .owl-dots {
        bottom: 5px; /* Bring dots closer to text if space is tight */
        position: relative; /* Make it relative to normal flow for better positioning */
        margin-top: 10px; /* Add some space above dots */
    }

    .micro-testimonials-carousel.owl-theme .owl-dots .owl-dot span {
        width: 8px; /* Even smaller dots */
        height: 8px; /* Even smaller dots */
        margin: 0 4px; /* Less space between dots */
    }

    /* Adjust Hero Image container for mobile when it's at the bottom */
    .hero-image-container {
        max-width: 95%; /* Allow it to take more width on mobile */
        height: 504px; /* Set a fixed height for consistency, or use auto with object-fit: contain if images vary widely */
        border-radius: 0 30px 0 30px; /* Smaller border radius */
        overflow: hidden;
    border-right: 5px solid var(--color-border-image);
    border-bottom: 5px solid var(--color-border-image);
    background: linear-gradient(to bottom, var(--color-secondary-bg) 0%, var(--color-primary-bg) 100%);
    }

    /* Adjust form container and fields for mobile */
    .hero-form-container {
        padding: 1rem; /* Reduced padding for compactness */
        max-width: 95%; /* Allow it to take more width on mobile */
    }

    .hero-form-container .mobile-form-quote {
        font-size: 0.875rem; /* Smaller quote in form */
        margin-bottom: 0.75rem;
    }

    .hero-form-container .mobile-form-heading {
        font-size: 1.125rem; /* Smaller heading in form */
        margin-bottom: 1rem;
    }

    .hero-form-container .mobile-form-field {
        font-size: 0.85rem; /* Slightly smaller font for form fields */
        padding: 0.65rem 0.9rem; /* Adjusted padding */
    }

    .hero-form-container .mobile-form-button {
        padding: 0.65rem 1.2rem; /* Adjusted button padding */
        font-size: 0.95rem; /* Adjusted button font size */
    }
}

/* Hide by default (for mobile) */
.hide-on-mobile {
    display: none !important; /* Use !important to override any flex/block displays */
}

/* Show on larger screens (e.g., tablets and desktops) */
@media (min-width: 768px) { /* Adjust this breakpoint if your "large" starts at a different size */
    .hide-on-mobile {
        display: flex !important; /* Or 'block', 'inline-block' depending on original display */
                                  /* Since your button has 'flex', use 'flex' here. */
    }
}
/* Trust Section Specific Styles - RE-REVISED FOR COMPACTNESS AND VISUAL FIDELITY */
.trust-section-bg {
    background-color: #856d60;
    /* Direct color from the image for the main section background */
    padding-top: 2.5rem;
    /* Reduced padding for compactness */
    padding-bottom: 2.5rem;
    /* Reduced padding for compactness */
}

.trust-card {
    background-color: var(--color-trust-card-bg);
    /* Use the same color as section background */
    border-radius: 0.75rem;
    /* Slightly smaller border-radius for more compact look */
    border: 1px solid var(--color-trust-card-border);
    /* Explicit white border for cards */
    padding: 1rem;
    /* Reduced padding for compactness */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-trust-text);
    /* White text for contrast */
    min-height: 110px;
    /* Reduced min-height for even more compactness */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.trust-card:hover {
    transform: translateY(-3px);
    /* Subtle lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Softer shadow on hover */
}

.trust-card img {
    width: 45px;
    /* Slightly smaller icon size for more compactness */
    height: 45px;
    /* Slightly smaller icon size */
    margin-bottom: 0.4rem;
    /* Reduced margin-bottom */
    filter: brightness(0) invert(1);
    /* Force icons to white */
}

.trust-card p {
    color: var(--color-trust-text);
    /* Ensure text is white */
    font-weight: 500;
    font-size: 0.95rem;
    /* Adjusted font size for compactness */
    line-height: 1.2;
    /* Adjusted line height for compactness */
}

/* WhatsApp floating button (retained) */
.whatsapp-button {
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    background-color: var(--color-whatsapp);
    color: var(--color-white);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: transform 0.2s ease-in-out;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

/* === UPDATED STYLES FOR ARCHED SERVICE CARDS === */

/* The main card container */
.service-card {
    /* background-color: var(--color-white); */
    border-radius: 1.5rem; /* 24px rounded corners for the card */
    /* box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07); */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card-content {
    background: #ffffff5e !important;
}

/* The container for the image part of the card */
.service-card-image-wrapper {
    height: 250px;
    width: 100%;
    overflow: hidden; /* This is crucial for the arch effect */
}

/* The actual image tag styling */
.service-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* NEW SHAPE for cards with the image on TOP.
   A very large radius creates the desired arch shape. */
.shape-top-semicircle {
    border-radius: 12rem 12rem 0 0;
}

/* NEW SHAPE for cards with the image on the BOTTOM.
   This mirrors the top arch for the alternating card. */
.shape-bottom-semicircle {
    border-radius: 0 0 12rem 12rem;
}

/* The container for the text content */
.service-card-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.service-card-content h3 {
    margin-bottom: 0.75rem;
    font-size: 1.875rem; /* Default for h3, smaller for mobile in media query */
}

.service-card-content p {
    flex-grow: 1;
    margin-bottom: 1.5rem;
    font-size: 1rem; /* Default for p, adjusted for mobile */
}

/* Floral patterns for this section */
.floral-pattern-services {
    position: absolute;
    background-image: url('https://placehold.co/150x150/FBF8F5/FBF8F5?text='); /* Placeholder */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.floral-pattern-services-top-left {
    top: 5%;
    left: -30px;
    width: 150px;
    height: 150px;
    transform: rotate(-20deg);
}

.floral-pattern-services-bottom-right {
    bottom: 5%;
    right: -30px;
    width: 120px;
    height: 120px;
    transform: rotate(30deg);
}


/* --- Mobile-Specific Overrides (max-width: 767px) --- */
@media (max-width: 767px) {
    .services-section-bg {
        padding-top: 3rem; /* Reduce vertical padding for mobile */
        padding-bottom: 3rem;
    }

    /* Adjust the first service card (introductory text) */
    .service-card.md\:col-span-2 {
        /* On mobile, ensure it takes full width and its content is centered */
        grid-column: auto !important; /* Override md:col-span-2 */
        text-align: center; /* Center align all text within this card on mobile */
        margin-bottom: 2rem; /* Add some space below the intro card */
    }

    .service-card.md\:col-span-2 h2 {
        font-size: 2rem; /* Smaller heading for mobile */
        text-align: center; /* Explicitly center align for mobile */
        line-height: 1.2;
        margin-bottom: 0.75rem; /* Reduce space below heading */
    }

    .service-card.md\:col-span-2 p {
        font-size: 0.95rem; /* Smaller paragraph for mobile */
        text-align: center; /* Explicitly center align for mobile */
        margin-top: 0.5rem;
        margin-bottom: 1.5rem; /* Space before button */
        max-width: 90%; /* Constrain width for better readability when centered */
        margin-left: auto;
        margin-right: auto;
    }

    .service-card.md\:col-span-2 .bg-accent {
        width: 100%; /* Make button full width on mobile within its container */
        max-width: 250px; /* Max width for readability */
        margin-left: auto; /* Center the button */
        margin-right: auto; /* Center the button */
        text-align: center; /* Center text inside button */
        padding: 0.8rem 1.5rem; /* Adjust button padding */
        font-size: 1rem; /* Adjust button font size */
    }

    /* Adjust individual service cards */
    .service-card {
        border-radius: 1rem; /* Slightly smaller border radius for cards */
    }

    .service-card-image-wrapper {
        height: 180px; /* Smaller image height for mobile */
    }

    /* Adjust the semicircular shapes for mobile */
    .shape-top-semicircle {
        border-radius: 12rem 12rem 0 0; /* Smaller radius for mobile */
    }

    .shape-bottom-semicircle {
        border-radius: 0 0 8rem 8rem; /* Smaller radius for mobile */
    }

    .service-card-content {
        padding: 1.5rem; /* Reduced padding for content area */
    }

    .service-card-content h3 {
        font-size: 1.5rem; /* Smaller heading for service titles */
        margin-bottom: 0.5rem;
    }

    .service-card-content p {
        font-size: 0.9rem; /* Smaller paragraph text for service descriptions */
        margin-bottom: 1rem;
    }

    /* Floral patterns for mobile */
    .floral-pattern-services-top-left {
        width: 80px;
        height: 80px;
        top: 3%;
        left: -10px;
        transform: rotate(-15deg);
    }

    .floral-pattern-services-bottom-right {
        width: 70px;
        height: 70px;
        bottom: 3%;
        right: -10px;
        transform: rotate(25deg);
    }
}

/* Services Section Background with Gradient and Floral Patterns */
.services-section-bg {
    background: linear-gradient(to bottom, var(--color-secondary-bg) 0%, var(--color-primary-bg) 100%);
    position: relative;
    overflow: hidden;
}

.floral-pattern-services {
    position: absolute;
    background-image: url('https://placehold.co/200x200/F0E9DF/F0E9DF?text=');
    /* Placeholder for actual floral pattern */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.floral-pattern-services-top-left {
    top: -50px;
    left: -50px;
    width: 250px;
    height: 250px;
    transform: rotate(-15deg);
}

.floral-pattern-services-bottom-right {
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    transform: rotate(25deg);
}


/* Existing CSS: Styles for the "Wow Factor" Pain Point Cards and Decorative flourishes (retained) */
.pain-point-card-wow {
    background-color: var(--color-white);
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.pain-point-card-wow:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.18), 0 8px 12px -8px rgba(0, 0, 0, 0.1);
    background-color: var(--color-secondary-bg);
}

.pain-point-card-wow .icon-wrapper-wow {
    background-color: var(--color-accent);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.pain-point-card-wow:hover .icon-wrapper-wow {
    transform: scale(1.1);
}

.pain-point-card-wow .icon-wrapper-wow img {
    width: 55px;
    height: 55px;
    filter: brightness(0) invert(1);
}

.pain-point-card-wow h3 {
    font-size: 1.5rem;
    color: var(--color-heading);
    margin-bottom: 0.75rem;
    font-family: 'Marcellus', serif;
    line-height: 1.3;
}

.pain-point-card-wow p {
    color: var(--color-text-body);
    font-size: 1.05rem;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.pain-point-card-wow::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 4px;
    background-color: var(--color-accent);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.pain-point-card-wow:hover::before {
    width: 80%;
}

.floral-pattern-pain-point {
    position: absolute;
    background-image: url('https://placehold.co/150x150/FBF8F5/FBF8F5?text=');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.floral-pattern-pain-point-top-right {
    top: 20%;
    right: -50px;
    width: 150px;
    height: 150px;
    transform: rotate(45deg);
}

.floral-pattern-pain-point-bottom-left {
    bottom: 10%;
    left: -30px;
    width: 120px;
    height: 120px;
    transform: rotate(-30deg);
}

/* --- Mobile-Specific Overrides for Pain Point Section (max-width: 767px) --- */
@media (max-width: 767px) {
    .pain-point-section {
        padding-top: 3rem; /* Reduced from py-20 (80px) */
        padding-bottom: 3rem; /* Reduced from py-20 (80px) */
    }

    .pain-point-section .text-center {
        margin-bottom: 2rem; /* Reduce margin below heading block */
    }

    .pain-point-section h2 {
        font-size: 1.75rem; /* ~28px - more appropriate for mobile h2 */
        line-height: 1.25;
    }

    .pain-point-section p.mt-4 {
        font-size: 0.95rem; /* Slightly smaller body text for intro paragraph */
        margin-top: 0.75rem; /* Reduce space from heading */
    }

    .pain-point-card-wow {
        padding: 1.25rem; /* Slightly less padding for cards */
        border-radius: 1rem; /* Slightly less rounded corners */
        box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04); /* Lighter shadow */
    }

    .pain-point-card-wow .icon-wrapper-wow {
        width: 70px; /* Smaller icon wrapper */
        height: 70px; /* Smaller icon wrapper */
        margin-bottom: 1rem; /* Reduced space below icon */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Lighter shadow for icon circle */
    }

    .pain-point-card-wow .icon-wrapper-wow img {
        width: 40px; /* Smaller icon image */
        height: 40px; /* Smaller icon image */
    }

    .pain-point-card-wow h3 {
        font-size: 1.25rem; /* Smaller heading for card titles */
        margin-bottom: 0.5rem; /* Reduced space below card title */
        line-height: 1.3;
    }

    .pain-point-card-wow p {
        font-size: 0.9rem; /* Smaller body text for card descriptions */
        margin-bottom: 0.75rem; /* Reduced space below card text */
    }

    /* Adjust button for mobile */
    .pain-point-section .text-center.mt-12 {
        margin-top: 2rem; /* Reduce margin above button */
    }

    .pain-point-section button {
        padding: 0.75rem 1.5rem; /* Slightly smaller button padding */
        font-size: 1rem; /* Slightly smaller button font size */
        width: auto; /* Allow button to size based on content */
    }

    /* Adjust floral patterns for mobile */
    .floral-pattern-pain-point-top-right {
        top: 5%;
        right: -30px;
        width: 100px; /* Smaller */
        height: 100px; /* Smaller */
        transform: rotate(45deg);
    }

    .floral-pattern-pain-point-bottom-left {
        bottom: 5%;
        left: -20px;
        width: 80px; /* Smaller */
        height: 80px; /* Smaller */
        transform: rotate(-30deg);
    }
}
/* Dr. Parul Image Container (Based on Reference) */
.dr-parul-image-container-sanchi {
    width: 100%;
    /* Take full width of its column */
    max-width: 450px;
    /* Max width to maintain aesthetic proportions */
    height: 560px;
    /* Fixed height for consistent presentation */
    border-radius: 0 60px 0 60px;
    /* Specific rounded corners as per screenshot */
    overflow: hidden;
    /* Crucial for containing the image within the border-radius */
    border-right: 5px solid var(--color-border-image);
    border-bottom: 5px solid var(--color-border-image);
    /* Specific border color */
    background: linear-gradient(to bottom, var(--color-secondary-bg) 0%, var(--color-primary-bg) 100%);
    /* Fallback/background for transparency */
    margin: 0 auto;
    /* Center in its column */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for hover */
}

.dr-parul-image-container-sanchi:hover {
    transform: translateY(-5px);
    /* Gentle lift on hover */
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
    /* Slightly stronger shadow */
}

.dr-parul-image-container-sanchi img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensures PNG fits without cropping */
    object-position: bottom;
    /* Aligns the person to the bottom of the frame */
    display: block;
}

/* Dr. Info Content (Refined, no specific background as it uses section's) */
.dr-info-content-sanchi {
    padding: 0;
    text-align: center;
    /* Default for mobile, overridden for desktop below */
    max-width: 700px;
    /* Control content width on larger screens */
    margin-left: auto;
    margin-right: auto;
}

.dr-info-content-sanchi .dr-name {
    font-size: 2.5rem;
    /* Prominent name */
    line-height: 1.1;
    margin-bottom: 0.5rem;
    color: var(--color-heading);
    font-family: 'Marcellus', serif;
}

.dr-info-content-sanchi .qualifications {
    font-weight: 500;
    color: var(--color-heading);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.dr-info-content-sanchi .google-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center rating on all screens, overridden for desktop */
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: var(--color-heading);
    font-weight: 500;
}

.dr-info-content-sanchi .google-rating .stars {
    display: flex;
    gap: 0.1rem;
}

.dr-info-content-sanchi .google-rating .fa-star,
.dr-info-content-sanchi .google-rating .fa-star-half-alt {
    color: var(--color-star);
    font-size: 1.1rem;
}

.dr-info-content-sanchi .intro-paragraph {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--color-text-body);
    text-align: center; /* Default center align for mobile */
}

.dr-info-content-sanchi .intro-paragraph:last-of-type {
    margin-bottom: 2rem;
}

/* Bullet Points for Achievements/Specializations */
.dr-info-content-sanchi ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2.5rem;
    text-align: center; /* Default center align for mobile */
}

.dr-info-content-sanchi ul li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.7rem;
    font-size: 1.05rem;
    color: var(--color-text-body);
    line-height: 1.5;
    font-weight: 400;
}

.dr-info-content-sanchi ul li strong {
    color: var(--color-heading);
}

.dr-info-content-sanchi ul li::before {
    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0.5rem; /* Adjusted for centered text on mobile */
    top: 0.1rem;
    color: var(--color-accent);
    font-size: 1rem;
}

/* Call to Action Button */
.dr-info-content-sanchi .cta-button {
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 0.9rem 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.15rem;
    font-family: 'Marcellus', serif;
    font-weight: normal;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-left: auto; /* Center button on mobile */
    margin-right: auto; /* Center button on mobile */
}

.dr-info-content-sanchi .cta-button:hover {
    background-color: #C27A65;
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .dermatologist-section {
        padding-top: 3rem; /* Adjusted for mobile */
        padding-bottom: 3rem; /* Adjusted for mobile */
    }

    .dermatologist-section .text-center.mb-16 {
        margin-bottom: 2rem; /* Reduce margin below main heading */
    }

    .dermatologist-section h2 {
        font-size: 2.25rem; /* Smaller main heading for mobile */
    }

    .dr-parul-image-container-sanchi {
        height: 380px;
        /* Adjust height for mobile */
        max-width: 336px;
        /* Adjust max-width for mobile */
        border-radius: 0 40px 0 40px; /* Slightly smaller border radius */
    }

    .dr-info-content-sanchi .dr-name {
        font-size: 2rem; /* Smaller name on mobile */
    }

    .dr-info-content-sanchi .qualifications {
        font-size: 1rem; /* Smaller qualifications on mobile */
    }

    .dr-info-content-sanchi .google-rating {
        font-size: 0.95rem; /* Smaller rating text on mobile */
    }

    .dr-info-content-sanchi .google-rating .fa-star,
    .dr-info-content-sanchi .google-rating .fa-star-half-alt {
        font-size: 0.95rem; /* Smaller stars on mobile */
    }

    .dr-info-content-sanchi .intro-paragraph {
        font-size: 0.95rem; /* Smaller paragraphs on mobile */
        text-align: left; /* Explicitly center paragraphs on mobile */
        margin-bottom: 0.8rem;
    }

    .dr-info-content-sanchi .intro-paragraph:last-of-type {
        margin-bottom: 1.5rem; /* Adjust space before button */
    }

    .dr-info-content-sanchi ul {
        margin-bottom: 1.5rem; /* Adjust space below list */
        text-align: center; /* Explicitly center list on mobile */
        padding-left: 1rem; /* Adjust padding for bullet points */
    }

    .dr-info-content-sanchi ul li {
        font-size: 0.95rem; /* Smaller list items on mobile */
        margin-bottom: 0.5rem;
    }

    .dr-info-content-sanchi ul li::before {
        left: calc(50% - 130px); /* Adjust bullet position relative to centered text */
        /* This calc value (50% - half of max-width of text block) will need fine-tuning
           based on exact text width, or use a left: 0.5rem if padding on ul handles centering.
           For simpler centering, just ensure UL has a max-width and margin: auto; */
    }
    
    /* Re-evaluate bullet point centering on mobile more robustly */
    .dr-info-content-sanchi ul {
      
        text-align: left; /* Keep bullets left-aligned within the max-width */
        padding-left: 0rem; /* Add padding for bullet space */
    }

    .dr-info-content-sanchi ul li::before {
        left: 0.5rem; /* Position bullet relative to list item's padding */
    }
    
    .dr-info-content-sanchi .cta-button {
        padding: 0.75rem 2rem; /* Smaller button padding on mobile */
        font-size: 1rem; /* Smaller button font size on mobile */
    }

    /* Floral patterns for mobile */
    .floral-pattern-section-top-left {
        width: 80px; /* Smaller */
        height: 80px; /* Smaller */
        top: 2%;
        left: -20px;
    }
    .floral-pattern-section-bottom-right {
        width: 70px; /* Smaller */
        height: 70px; /* Smaller */
        bottom: 2%;
        right: -20px;
    }
}

@media (min-width: 768px) {
    .dr-info-content-sanchi {
        text-align: left;
        /* Left align content on larger screens */
    }

    .dr-info-content-sanchi .dr-name,
    .dr-info-content-sanchi .qualifications {
        text-align: left;
        /* Ensure these are left aligned */
    }

    .dr-info-content-sanchi .google-rating {
        justify-content: flex-start;
        /* For flex containers like rating, align to start */
    }

    .dr-info-content-sanchi .intro-paragraph,
    .dr-info-content-sanchi ul {
        margin-left: 0;
        /* Remove auto margins */
        margin-right: 0;
        text-align: left; /* Ensure paragraphs and list are left-aligned */
    }

    .dr-info-content-sanchi ul li::before {
        left: 0; /* Reset bullet position for left-aligned text */
    }

    .dr-info-content-sanchi .cta-button {
        margin-left: 0;
        /* Align button to left */
    }
}

/* CTA Section Specific Styles (Revised to match existing theme) */
.cta-section-themed {
    background-color: #856d60;
    /* Dark brown from your theme */
    padding: 4rem 1.5rem;
    /* Generous padding */
    text-align: center;
    position: relative;
    overflow: hidden;
    /* For any subtle patterns if desired */
}

.cta-section-themed h2 {
    font-family: 'Marcellus', serif;
    color: var(--color-white);
    /* White text for contrast */
    font-size: 2.5rem;
    /* Large heading */
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.cta-section-themed p {
    font-family: 'Roboto', sans-serif;
    color: var(--color-white);
    /* White text */
    font-size: 1.15rem;
    /* Subheading size */
    margin-bottom: 2.5rem;
    /* Space before button */
}

.cta-section-themed .cta-button-white-on-dark {
    background-color: var(--color-white);
    color: var(--color-heading);
    /* Dark brown text on white button */
    padding: 1rem 2.5rem;
    border-radius: 0.5rem;
    /* Slightly less rounded for a clean look */
    font-size: 1.1rem;
    font-weight: 500;
    /* Medium bold */
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Subtle shadow for lift */
    display: inline-block;
    /* To allow padding and transform */
    text-decoration: none;
    /* Remove underline for links */
    border: none;
    /* No default button border */
}

.cta-section-themed .cta-button-white-on-dark:hover {
    background-color: #e0e0e0;
    /* Slightly darker white on hover */
    transform: translateY(-2px);
    /* Subtle lift */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .cta-section-themed h2 {
        font-size: 2rem;
    }

    .cta-section-themed p {
        font-size: 1rem;
    }

    .cta-section-themed .cta-button-white-on-dark {
        font-size: 1rem;
        padding: 0.8rem 2rem;
    }
}

/* Add to your existing style block */

/* === Advanced Treatments Section Styles (Two-Column Layout) === */
.advanced-treatments-section {
    /* CHANGED: Solid background to differentiate from preceding gradient section */
    background-color: var(--color-primary-bg); /* Very light beige/off-white */
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.advanced-treatments-section .section-heading {
    font-family: 'Marcellus', serif;
    color: var(--color-heading);
    font-size: 3.2rem; /* Larger heading for desktop */
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-align: center; /* Ensure heading is centered */
}

/* Tab Navigation Styles */
.treatment-tabs {
    display: flex;
    flex-wrap: wrap; /* Allows tabs to wrap to the next line */
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
    border-bottom: 2px solid var(--color-light-accent);
    padding-bottom: 1rem;
    overflow-x: auto; /* Enable horizontal scrolling if tabs don't fit */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
}

/* Hide scrollbar for Webkit browsers */
.treatment-tabs::-webkit-scrollbar {
    display: none;
}

.treatment-tab-button {
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--color-secondary-bg);
    color: var(--color-text-body);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--color-light-accent);
    white-space: nowrap; /* Prevent text wrapping within buttons */
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.treatment-tab-button:hover {
    background-color: var(--color-light-accent);
    color: var(--color-heading);
}

.treatment-tab-button.active {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Tab Content */
.tab-content-container {
    display: none;
    animation: fadeIn 0.5s ease-out;
    background-color: var(--color-white);
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.05);
    padding: 2.5rem; /* Desktop padding */
}

.tab-content-container.active {
    display: block;
}

.tab-content-inner {
    display: flex;
    flex-direction: column; /* Default stack on mobile */
    gap: 2.5rem; /* Space between list and image */
}

@media (min-width: 992px) {
    .tab-content-inner {
        flex-direction: row; /* Desktop: side-by-side */
        align-items: flex-start;
    }
}

.treatment-list-wrapper {
    flex: 1;
    padding-right: 0; /* No right padding on mobile */
    display: flex; /* Changed from !important */
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom */
}

@media (min-width: 992px) {
    .treatment-list-wrapper {
        padding-right: 2.5rem; /* Add right padding on desktop */
    }
}

.treatment-image-wrapper {
    flex-shrink: 0;
    width: 100%; /* Full width on mobile */
    max-width: 450px; /* Max width for image container */
    margin: 0 auto; /* Center image on mobile */
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    height: 22rem; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image covers the area */
}

@media (min-width: 992px) {
    .treatment-image-wrapper {
        width: 50%; /* 50% width on desktop */
        margin: 0; /* Remove auto margins on desktop */
    }
}

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

/* Individual Bullet Point Styles */
.treatment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.treatment-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--color-text-body);
}

.treatment-list li:last-child {
    margin-bottom: 0;
}

.treatment-list .icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    background-color: var(--color-accent); /* Accent background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.treatment-list .icon i {
    font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is used */
    font-weight: 900; /* Use solid icon weight */
    content: '\f00c'; /* Unicode for checkmark */
    color: var(--color-white);
    font-size: 1.2rem;
}

.treatment-list .text-content h3 {
    font-family: 'marcellus', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-heading);
    margin-bottom: 0.2rem;
}

.treatment-list .text-content p {
    font-size: 1rem;
    color: var(--color-text-body);
    margin-top: 0;
    margin-bottom: 0;
}

/* Call to action button within tab content */
.treatment-list-wrapper .bg-accent {
    display: inline-flex; /* Use inline-flex for proper centering */
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 2rem; /* Adjusted margin-top for better spacing */
    width: 215px; /* Specific width from your HTML */
    max-width: 100%; /* Ensure it doesn't overflow on small screens */
    /* margin-left: auto; Center the button */
    margin-right: auto; /* Center the button */
    padding: 0.9rem 1.5rem; /* Restore original padding */
    font-size: 1.15rem; /* Restore original font size */
    border-radius: 0.75rem; /* Ensure consistent border radius */
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.treatment-list-wrapper .bg-accent:hover {
    background-color: #C27A65; /* Darker accent on hover */
    transform: translateY(-2px);
}

/* Keyframe for fade-in animation (Unchanged) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments for headings and paragraphs */
@media (max-width: 767px) {
    .advanced-treatments-section {
        padding-top: 3rem; /* Reduce vertical padding */
        padding-bottom: 3rem;
    }

    .advanced-treatments-section .section-heading {
        font-size: 2rem; /* Smaller heading for mobile */
        margin-bottom: 1rem;
    }

    .treatment-tabs {
        margin-bottom: 2rem;
        padding-bottom: 0.5rem;
        justify-content: flex-start; /* Align tabs to start on mobile, allows scrolling */
    }

    .treatment-tab-button {
        font-size: 0.85rem; /* Smaller tab button text */
        padding: 0.6rem 1rem; /* Smaller tab button padding */
        border-radius: 0.4rem;
    }

    .tab-content-container {
        padding: 1.5rem; /* Reduced padding for tab content */
    }

    .treatment-list li {
        font-size: 0.95rem; /* Smaller list item text */
        margin-bottom: 0.8rem;
    }

    .treatment-list .icon {
        width: 28px;
        height: 28px;
        margin-right: 0.7rem;
    }

    .treatment-list .icon i {
        font-size: 0.9rem;
    }

    .treatment-list .text-content h3 {
        font-size: 1.05rem; /* Smaller sub-heading for treatments */
    }

    .treatment-list .text-content p {
        font-size: 0.9rem; /* Smaller paragraph for treatment descriptions */
    }

    .treatment-image-wrapper {
        height: 180px; /* Smaller image height for mobile */
        max-width: 100%; /* Ensure it fits within parent */
        margin-top: 1.5rem; /* Add space between list and image */
    }

    .treatment-list-wrapper .bg-accent {
        width: 100%; /* Make button full width on mobile */
        max-width: 250px; /* Max width to prevent stretching too much */
        padding: 0.8rem 1.5rem; /* Smaller padding */
        font-size: 1rem; /* Smaller font size */
        margin-top: 1.5rem; /* Adjust space above button */
    }
}
/* === Why Choose Us Section Styles === */

/* --- New/Modified CSS for CTA Button Centering --- */

/* Ensure the flex container is properly defined */
.cta-button-container {
    display: flex; /* Make it a flex container */
    justify-content: center; /* Horizontally center flex items */
    width: 100%; /* Ensure it takes full width of its parent */
    /* You might want to adjust the margin-top if 'mt-8' (margin-top: 2rem) isn't enough */
    margin-top: 3rem; /* Example: adjust as needed, or rely on your mt-8 class */
}

/* Ensure the button text itself is centered within the button */
.cta-button-container a { /* Targeting the anchor tag within the container */
    text-align: center; /* Center the text inside the button */
    display: inline-block; /* Essential for text-align to work on width-constrained buttons */
    /* Add max-width to the button if w-60 isn't defined or you need a specific size */
    max-width: 250px; /* Example: Limit button width for consistency */
    width: 100%; /* Allows it to shrink on mobile */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

/* --- Rest of your existing CSS (as provided in previous responses) --- */
/* Your existing section and grid styles, icon styles, etc. go here */

.why-choose-us-section {
    background-color: var(--color-primary-bg); /* Very light beige/off-white */
    padding-top: 6rem; /* More generous padding */
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    z-index: 1; /* Ensure content is above patterns */
}

/* Floral Patterns for Why Choose Us Section */
.floral-pattern-why-choose {
    position: absolute;
    /* Use a real floral pattern image here */
    background-image: url('https://placehold.co/200x200/FBF8F5/FBF8F5?text='); /* Placeholder for actual floral pattern */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6; /* Adjust opacity as needed */
    z-index: 0;
    pointer-events: none; /* Allows clicks to pass through */
}

.floral-pattern-why-choose-top-left {
    top: -30px; /* Adjust position */
    left: -30px; /* Adjust position */
    width: 180px;
    height: 180px;
    transform: rotate(-25deg);
}

.floral-pattern-why-choose-bottom-right {
    bottom: -40px; /* Adjust position */
    right: -40px; /* Adjust position */
    width: 220px;
    height: 220px;
    transform: rotate(35deg);
}

.why-choose-us-section .section-heading {
    font-family: 'Marcellus', serif;
    color: var(--color-heading);
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 1rem; /* Closer to subheading */
    text-align: center;
}

.why-choose-us-section .section-subheading {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem; /* More space before the main content grid */
    text-align: center;
}

/* Grid Layout for Central Image and Surrounding Points */
.advantage-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on small screens */
    gap: 2.5rem; /* Space between items on mobile */
    align-items: center; /* Center items vertically in their grid cell */
    justify-content: center; /* Center items horizontally */
    max-width: 1200px; /* Constrain max width of the grid */
    margin: 0 auto;
}

@media (min-width: 768px) {
    .advantage-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet/desktop */
        grid-template-rows: auto auto auto; /* Define 3 rows for more control */
        gap: 2rem 3rem; /* Row gap, column gap */
    }
}

@media (min-width: 1024px) {
    .advantage-grid {
        grid-template-columns: 1fr 1.2fr 1fr; /* Center column slightly wider for image */
        grid-template-rows: auto auto auto;
        gap: 2.5rem 4rem;
    }
}

/* Specific Grid Area Placement for Desktop (6 points + 1 image) */
@media (min-width: 768px) {
    /* Top-Left */
    .advantage-item:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2;
        text-align: right;
        flex-direction: row-reverse; /* Icon on the right, text on the left */
    }

    /* Top-Right (now 2nd in HTML, 3rd in grid due to image) */
    .advantage-item:nth-child(2) {
        grid-area: 1 / 3 / 2 / 4;
        text-align: left;
        flex-direction: row; /* Icon on the left, text on the right */
    }

    /* Middle-Left (now 3rd in HTML, 4th in grid) */
    .advantage-item:nth-child(3) {
        grid-area: 2 / 1 / 3 / 2;
        text-align: right;
        flex-direction: row-reverse; /* Icon on the right, text on the left */
    }

    /* Middle-Right (now 4th in HTML, 5th in grid) */
    .advantage-item:nth-child(4) {
        grid-area: 2 / 3 / 3 / 4;
        text-align: left;
        flex-direction: row; /* Icon on the left, text on the right */
    }

    /* Bottom-Left (now 5th in HTML, 6th in grid) */
    .advantage-item:nth-child(5) {
        grid-area: 3 / 1 / 4 / 2;
        text-align: right;
        flex-direction: row-reverse; /* Icon on the right, text on the left */
    }

    /* Bottom-Right (now 6th in HTML, 7th in grid, previously "Holistic Wellness") */
    .advantage-item:nth-child(6) { /* This is the 'Holistic Wellness' item after HTML change */
        grid-area: 3 / 3 / 4 / 4;
        text-align: left; /* Keep left alignment for this item as it's on the right */
        flex-direction: row; /* Icon on the left, text on the right */
    }

    /* Central image spans all rows in the middle column */
    .why-choose-image-container {
        grid-area: 1 / 2 / 4 / 3;
    }

    /* Adjust margins for icons based on their side of the image */
    .advantage-item:nth-child(1) .icon-wrapper,
    .advantage-item:nth-child(3) .icon-wrapper,
    .advantage-item:nth-child(5) .icon-wrapper { /* Items on the left of the image */
        margin-right: 1.5rem; /* Space between icon and text */
        margin-left: 0; /* Reset */
    }

    .advantage-item:nth-child(2) .icon-wrapper,
    .advantage-item:nth-child(4) .icon-wrapper,
    .advantage-item:nth-child(6) .icon-wrapper { /* Items on the right of the image */
        margin-left: 1.5rem; /* Space between icon and text */
        margin-right: 0; /* Reset */
    }
}


/* Central Image Container */
.why-choose-image-container {
    width: 100%;
    max-width: 400px; /* Max width for image */
    margin: 0 auto; /* Center on mobile */
    border-radius: 1.5rem; /* Rounded corners for the container */
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-light-accent); /* Placeholder background */
    display: flex; /* For centering the image if it's smaller */
    align-items: center;
    justify-content: center;
}

.why-choose-image-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.15), 0 6px 15px -6px rgba(0, 0, 0, 0.1);
}

.why-choose-image-container img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover; /* Cover the container */
}

/* Advantage Item (Point) Styles */
.advantage-item {
    display: flex;
    flex-direction: column; /* Stack icon and text vertically on mobile */
    align-items: center; /* Center horizontally on mobile */
    text-align: center; /* Center text on mobile */
}

@media (min-width: 768px) {
    .advantage-item {
        /* flex-direction controlled by specific grid-area styles above */
        align-items: flex-start; /* Align icon and text to top */
        /* text-align is now handled by grid-area specific styles */
    }
}

.advantage-item .icon-wrapper {
    flex-shrink: 0;
    width: 70px; /* Larger icon circle, consistent with previous plan */
    height: 70px;
    background-color: var(--color-accent); /* Keep this background */
    border-radius: 50%; /* Make it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem; /* Space below icon on mobile */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin : 0rem 1rem!important;
}

.advantage-item:hover .icon-wrapper {
    background-color: var(--color-accent); /* Maintain accent on hover */
    transform: scale(1.05); /* Slight scale on hover */
}

/* Styling for the PNG image inside the icon-wrapper */
.advantage-item .icon-wrapper img {
    width: 60%; /* Adjust size of PNG icon within its wrapper */
    height: 60%; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire icon is visible */
    display: block; /* Remove any inline-block spacing issues */
    /* This filter turns the black/dark PNG icon content white */
    filter: brightness(0) invert(1);
}

.advantage-item .text-content {
    flex-grow: 1;
}

.advantage-item h3 {
    font-family: 'marcellus', sans-serif; /* Keep consistent */
    font-weight: 700;
    font-size: 1.23rem; /* Larger heading for point */
    color: var(--color-heading);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.advantage-item p {
    font-size: 0.95rem; /* Slightly smaller detail text */
    color: var(--color-text-body);
    line-height: 1.4;
}

/* Call to action button */
.cta-button-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 4rem; /* Space above the button */
}

.cta-button-container .bg-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 2.5rem; /* Generous padding */
    border-radius: 0.75rem; /* Consistent border radius */
    font-size: 1.15rem; /* Larger font size */
    font-family: 'Marcellus', serif; /* Use Marcellus for buttons */
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-accent);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow */
}

.cta-button-container .bg-accent:hover {
    background-color: var(--color-accent-dark); /* Darker accent on hover */
    transform: translateY(-3px); /* Lift button on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


/* Responsive adjustments for mobile */
@media (max-width: 767px) {
    .why-choose-us-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .why-choose-us-section .section-heading {
        font-size: 2.2rem; /* Smaller heading for mobile */
        margin-bottom: 0.8rem;
    }

    .why-choose-us-section .section-subheading {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .advantage-grid {
        gap: 2rem; /* Reduce gap on mobile */
    }

    .why-choose-image-container {
        max-width: 280px; /* Slightly smaller image on mobile */
        height: auto; /* Allow height to adjust */
        border-radius: 1rem; /* Slightly less rounded corners */
        margin-bottom: 1rem; /* Add some space if it's not the last item in the flow */
    }

    .advantage-item .icon-wrapper {
        width: 55px; /* Slightly smaller icons on mobile */
        height: 55px;
        margin: 1rem 0rem!important;
    }

    .advantage-item .icon-wrapper img {
        width: 60%; /* Adjust PNG icon size for mobile */
        height: 60%;
    }

    .advantage-item h3 {
        font-size: 1.2rem; /* Smaller sub-heading for points */
        margin-bottom: 0.2rem;
    }

    .advantage-item p {
        font-size: 0.88rem; /* Smaller paragraph for descriptions */
    }

    .cta-button-container {
        margin-top: 3rem; /* Adjust space above the button on mobile */
    }

    .cta-button-container .bg-accent {
        padding: 0.8rem 2rem; /* Smaller padding for button */
        font-size: 1rem; /* Smaller font size for button */
        width: 100%; /* Make button full width on mobile */
        max-width: 280px; /* Constrain max width for better appearance */
    }
}

@media (min-width: 768px) {
    /* Reset mobile-specific flex direction for all items */
    .advantage-item {
        flex-direction: row; /* Default for desktop, specific items override */
        align-items: flex-start;
        text-align: left; /* Default text alignment for items on right of image */
    }

    /* Ensure .text-content within items on the right side of the image aligns left */
    .advantage-item:nth-child(2) .text-content,
    .advantage-item:nth-child(4) .text-content,
    .advantage-item:nth-child(6) .text-content {
        text-align: left;
    }

    /* Ensure .text-content within items on the left side of the image aligns right */
    .advantage-item:nth-child(1) .text-content,
    .advantage-item:nth-child(3) .text-content,
    .advantage-item:nth-child(5) .text-content {
        text-align: right;
    }
}
/* === Our Clients' Success Stories Section Styles === */
/* === Our Clients' Success Stories Section Styles === */
.success-stories-section {
    background-color: var(--color-secondary-bg); /* Deeper warm beige */
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Floral Patterns for Success Stories Section */
.floral-pattern-success {
    position: absolute;
    background-image: url('image_a5ce18.jpg'); /* Using your provided floral image */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none; /* Allows clicks to pass through */
}

.floral-pattern-success-top-right {
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
}

.floral-pattern-success-bottom-left {
    bottom: -60px;
    left: -60px;
    width: 250px;
    height: 250px;
    transform: rotate(-30deg);
}

.success-stories-section .section-heading {
    font-family: 'Marcellus', serif;
    color: var(--color-heading);
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
}

.success-stories-section .section-subheading {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    text-align: center;
}

/* Outer container for the carousel to add more side padding */
.carousel-outer-wrapper {
    position: relative;
    padding-left: 4rem; /* Example: 4rem or 64px */
    padding-right: 4rem; /* Example: 4rem or 64px */
    max-width: 1400px; /* Adjust max width if needed for larger screens */
    margin: 0 auto; /* Center the wrapper */
    /* Add overflow hidden to prevent navigation buttons from causing horizontal scroll */
    overflow: hidden;
}

/* Owl Carousel Customizations */
.success-stories-carousel .item {
    background-color: var(--color-white);
    border-radius: 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 0.5rem; /* Small padding to act as a border/frame for the image */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensure image doesn't break rounded corners */
    
    /* Set a consistent aspect ratio for the items if images vary in size */
    aspect-ratio: 1 / 1; /* For square images, adjust as needed (e.g., 4/3, 16/9) */
}

.success-stories-carousel .item:hover {
    transform: translateY(-8px); /* More pronounced lift on hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

.success-stories-carousel .transformation-image {
    width: 100%;
    height: 100%; /* Fill the parent item's height (which has aspect-ratio) */
    object-fit: cover; /* Ensures image covers the area without distortion */
    border-radius: 0.8rem; /* Slightly smaller border-radius for image within item */
    display: block;
}

/* Owl Carousel Navigation (Arrows) - Minimalistic Style */
.owl-theme .owl-nav button {
    background-color: transparent !important; /* No background */
    color: var(--color-heading) !important; /* Dark text color */
    font-size: 2.5rem !important; /* Slightly larger icons */
    border-radius: 50% !important;
    width: 60px; /* Larger hit area */
    height: 60px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: none !important; /* No shadow */
    border: 2px solid var(--color-heading); /* Minimalistic border */
    transition: all 0.3s ease;
    opacity: 0.8; /* Slightly transparent when idle */
    z-index: 10; /* Ensure arrows are above carousel items */
}

.owl-theme .owl-nav button:hover {
    background-color: var(--color-light-accent) !important; /* Light background on hover */
    color: var(--color-accent) !important; /* Accent color for icon on hover */
    border-color: var(--color-accent); /* Accent border on hover */
    transform: translateY(-50%) scale(1.05);
    opacity: 1;
}

.owl-theme .owl-nav .owl-prev {
    left: 0px; /* Adjusted position to be slightly outside the wrapper */
}

.owl-theme .owl-nav .owl-next {
    right: 0px; /* Adjusted position to be slightly outside the wrapper */
}

/* Responsive adjustments for Navigation */
@media (max-width: 1023px) {
    /* Adjust for smaller screens (tablet/mobile) */
    .carousel-outer-wrapper {
        padding-left: 2rem; /* Reduce side padding on smaller screens */
        padding-right: 2rem;
    }

    .owl-theme .owl-nav .owl-prev {
        left: 0px; /* Bring buttons closer to carousel edge */
    }

    .owl-theme .owl-nav .owl-next {
        right: 0px; /* Bring buttons closer to carousel edge */
    }
}

@media (max-width: 767px) {
    .success-stories-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .success-stories-section .section-heading {
        font-size: 2.5rem;
    }

    .success-stories-section .section-subheading {
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
    }

    .success-stories-carousel .item {
        /* Maintain aspect-ratio for consistency, remove fixed height */
        aspect-ratio: 1 / 1; /* Or adjust if images are more rectangular on mobile */
    }

    .carousel-outer-wrapper {
        padding-left: 1rem; /* Even less padding on very small screens */
        padding-right: 1rem;
    }

    /* Mobile specific button positioning */
    .owl-theme .owl-nav {
        position: relative; /* Make nav container relative for positioning buttons */
        margin-top: 2rem; /* Space between carousel and buttons */
        display: flex; /* Use flex to position buttons */
        justify-content: center; /* Center buttons horizontally */
        width: 100%;
    }

    .owl-theme .owl-nav button {
        position: static; /* Remove absolute positioning */
        transform: none; /* Remove transform */
        width: 45px;
        height: 45px;
        font-size: 2rem !important;
        border: none; /* No border on mobile for cleaner look */
        background-color: var(--color-light-accent) !important; /* Solid background on mobile */
        color: var(--color-heading) !important; /* Keep color consistent */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow on mobile buttons */
        margin: 0 0.5rem; /* Space between prev and next buttons */
    }

    .owl-theme .owl-nav button:hover {
        background-color: var(--color-accent) !important; /* Accent background on hover */
        transform: none; /* No scale on mobile hover */
        color: var(--color-white) !important; /* White icon on hover */
    }

    .owl-theme .owl-nav .owl-prev,
    .owl-theme .owl-nav .owl-next {
        left: unset; /* Reset explicit left/right */
        right: unset;
    }
}


/* Owl Carousel Dots (Pagination) */
.owl-theme .owl-dots .owl-dot span {
    background: var(--color-light-accent); /* Light dot color */
    width: 12px;
    height: 12px;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-accent); /* Active/hover dot color */
    transform: scale(1.2);
}

.owl-theme .owl-dots {
    margin-top: 3rem;
    text-align: center;
}

/* === Gallery Section Styles === */
.gallery-section {
    /* Distinct background color */
    background-color: var(--color-primary-bg); /* Very light beige/off-white */
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    z-index: 1; /* Ensure content is above patterns */
}

/* Floral Patterns for Gallery Section */
.floral-pattern-gallery {
    position: absolute;
    /* Ensure this image path is correct relative to your CSS file */
    background-image: url('image_a5ce18.jpg'); /* Using your provided floral image */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.floral-pattern-gallery-top-left {
    top: -70px;
    left: -70px;
    width: 250px;
    height: 250px;
    transform: rotate(-15deg);
}

.floral-pattern-gallery-bottom-right {
    bottom: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    transform: rotate(25deg);
}

.gallery-section .section-heading {
    font-family: 'Marcellus', serif;
    color: var(--color-heading);
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
}

.gallery-section .section-subheading {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    text-align: center;
}

/* Gallery Grid Layout (Super Cool & Mind-Blowing Design) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Flexible columns */
    grid-auto-rows: minmax(250px, auto); /* Minimum row height for smaller images */
    gap: 1.5rem; /* Space between grid items */
    max-width: 1400px; /* Max width for the grid */
    margin: 0 auto;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
        grid-auto-rows: 250px; /* Fixed row height for more structured layout */
        gap: 1.5rem;
    }

    /* Make some images span multiple columns/rows for visual interest */
    /* Adjusted nth-child selectors to match the provided HTML structure more accurately */
    .gallery-item:nth-child(1) { /* Corresponds to Gallery Image 1 */
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item:nth-child(4) { /* Corresponds to Gallery Image 4 */
        grid-column: span 2;
    }

    .gallery-item:nth-child(6) { /* Corresponds to Gallery Image 8 (based on HTML order) */
        grid-row: span 2;
    }

    /* If you want to span the last image (Gallery Image 6) also: */
    /* .gallery-item:nth-child(7) {
        grid-column: span 2;
    } */
}

/* Gallery Item Styles */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-secondary-bg); /* Background for lazy loading or smaller images */
    display: flex; /* For centering content if needed */
    align-items: center;
    justify-content: center;
}

.gallery-item:hover {
    transform: scale(1.03); /* Subtle zoom effect */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area */
    display: block;
    transition: opacity 0.3s ease; /* For smooth loading if lazy */
}

/* Lightbox Modal Styles (Expand on Click) */
.lightbox-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* High z-index to be on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Semi-transparent dark background */
    backdrop-filter: blur(5px); /* Optional: blur background for extra cool effect */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Added transition for background */
}

.lightbox-modal.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-white); /* Background for the image container */
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures entire image is visible within the modal */
    border-radius: 1rem; /* Match modal border radius */
    display: block;
    /* Consider adding a max-width and max-height to the image itself if not already constrained by parent */
}

/* Lightbox Navigation Arrows */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1010; /* Above image, below close button */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.lightbox-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* Lightbox Close Button */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1020; /* Highest z-index */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.lightbox-close:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg) scale(1.1);
}

/* Hide scrollbar when modal is active */
body.modal-open {
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .gallery-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .gallery-section .section-heading {
        font-size: 2.5rem;
    }

    .gallery-section .section-subheading {
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Smaller min width for mobile grid */
        grid-auto-rows: minmax(150px, auto); /* Smaller minimum height */
        gap: 1rem; /* Reduce gap on mobile */
    }

    /* Reset spans for mobile to ensure a consistent flow */
    .gallery-item:nth-child(1),
    .gallery-item:nth-child(4),
    .gallery-item:nth-child(6) {
        grid-column: auto;
        grid-row: auto;
    }

    .lightbox-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        left: 10px;
        right: 10px;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 1.5rem;
    }

    .lightbox-content {
        max-width: 95%;
        max-height: 95%;
    }
}

/* === Testimonial Section Styles === */
.testimonial-section {
    /* Background color from the provided image, matching secondary-bg */
    background-color: var(--color-secondary-bg);
    /* Deeper warm beige */
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Ensure content is above patterns */
}

/* Floral Patterns for Testimonial Section */
.floral-pattern-testimonial {
    position: absolute;
    background-image: url('image_a5ce18.jpg');
    /* Using your provided floral image */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.floral-pattern-testimonial-top-right {
    top: -70px;
    right: -70px;
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
}

.floral-pattern-testimonial-bottom-left {
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    transform: rotate(-40deg);
}

.testimonial-section .section-heading {
    font-family: 'Marcellus', serif;
    color: var(--color-heading);
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
}

.testimonial-section .section-subheading {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    /* Space before carousel */
    text-align: center;
}

/* Outer container for the carousel to add more side padding */
.testimonial-carousel-outer-wrapper {
    position: relative;
    padding-left: 4rem;
    padding-right: 4rem;
    max-width: 1400px;
    /* Max width for the carousel area */
    margin: 0 auto;
    /* Center the wrapper */
}

/* Testimonial Card Styles (Owl Carousel .item) */
.testimonial-carousel .item {
    background: #ffffff4d !important;
    border-radius: 1rem;

    padding: 2.5rem;
    /* Generous padding inside the card */
    text-align: left;
    /* Text alignment from the image */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    /* Ensure consistent height for all cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-carousel .item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.testimonial-quote-icon {
    font-size: 4rem;
    /* Large quote icon */
    color: var(--color-accent);
    /* Accent color for the quote icon */


    display: block;
    /* Ensure it takes its own line */
}

.testimonial-text {
    font-family: 'Roboto', sans-serif;
    /* A clear readable font for the quote */
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text-body);
    margin-bottom: 1.5rem;
    flex-grow: 1;
    /* Allows text to push info to the bottom */
    display: -webkit-box;
    /* For multi-line ellipsis */
    -webkit-line-clamp: 7;
    /* Limit to 7 lines for consistency */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-author {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-heading);
    margin-bottom: 0.2rem;
}

.testimonial-date {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* Owl Carousel Navigation (Arrows) - Consistent minimalistic style */
.owl-theme .owl-nav button {
    background-color: transparent !important;
    color: var(--color-heading) !important;
    font-size: 2.5rem !important;
    border-radius: 50% !important;
    width: 60px;
    height: 60px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: none !important;
    border: 2px solid var(--color-heading);
    transition: all 0.3s ease;
    opacity: 0.8;
}

.owl-theme .owl-nav button:hover {
    background-color: var(--color-light-accent) !important;
    color: var(--color-accent) !important;
    border-color: var(--color-accent);
    transform: translateY(-50%) scale(1.05);
    opacity: 1;
}

.owl-theme .owl-nav .owl-prev {
    left: -40px;
}

.owl-theme .owl-nav .owl-next {
    right: -40px;
}

/* Owl Carousel Dots (Pagination) */
.owl-theme .owl-dots .owl-dot span {
    background: var(--color-light-accent);
    width: 12px;
    height: 12px;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-accent);
    transform: scale(1.2);
}

.owl-theme .owl-dots {
    margin-top: 3rem;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
    .testimonial-carousel-outer-wrapper {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .owl-theme .owl-nav .owl-prev {
        left: -10px;
    }

    .owl-theme .owl-nav .owl-next {
        right: -10px;
    }

    .testimonial-carousel .item {
        min-height: 380px;
        /* Adjust height for tablet if needed */
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .testimonial-section .section-heading {
        font-size: 2.5rem;
    }

    .testimonial-section .section-subheading {
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
    }

    .testimonial-carousel-outer-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .testimonial-carousel .item {
        padding: 1.5rem;
        min-height: auto;
        /* Allow height to adjust naturally on mobile */
        -webkit-line-clamp: unset;
        /* Remove line clamp on mobile for full text */
    }

    .testimonial-quote-icon {
        font-size: 3rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    .owl-theme .owl-nav button {
        width: 45px;
        height: 45px;
        font-size: 2rem !important;
        top: unset;
        bottom: -60px;
        transform: unset;
        border: none;
        background-color: transparent !important;
        color: var(--color-heading) !important;
    }

    .owl-theme .owl-nav button:hover {
        background-color: transparent !important;
        transform: unset;
        color: var(--color-accent) !important;
        border: none;
    }

    .owl-theme .owl-nav .owl-prev {
        left: 0%;
        right: unset;
    }

    .owl-theme .owl-nav .owl-next {
        right: 0%;
        left: unset;
    }
}

/* === FAQ Section Styles === */
.faq-section {
    background-color: var(--color-primary-bg);
    /* Very light beige/off-white */
    padding-top: 6rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Ensure content is above patterns */
}

/* Floral Patterns for FAQ Section (using your specified styles) */
.floral-pattern-faq-top-right {
    position: absolute;
    background-image: url('image_a5ce18.jpg');
    /* Using your provided floral image */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    /* Adjusted for background effect */
    z-index: 0;
    pointer-events: none;
    top: 5%;
    right: 0;
    width: 250px;
    height: 250px;
    transform: rotate(30deg);
}

.floral-pattern-faq-bottom-left {
    position: absolute;
    background-image: url('image_a5ce18.jpg');
    /* Using your provided floral image */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    /* Adjusted for background effect */
    z-index: 0;
    pointer-events: none;
    bottom: 5%;
    left: 0;
    width: 300px;
    height: 300px;
    transform: rotate(-20deg);
}

.faq-section .section-heading {
    font-family: 'Marcellus', serif;
    color: var(--color-heading);
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
}

.faq-section .section-subheading {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    text-align: center;
}

/* FAQ Accordion Styles */
.faq-accordion-container {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    /* For rounded corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    background-color: var(--color-white);
    /* White background for the accordion block */
}

.faq-item {
    border-bottom: 1px solid var(--color-light-accent);
    /* Subtle separator */
}

.faq-item:last-child {
    border-bottom: none;
    /* No border on the last item */
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 2rem;
    background-color: transparent;
    /* No background on question bar */
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--color-heading);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.faq-question span {
    font-family: 'marcellus'
}

.faq-question:hover {
    background-color: var(--color-secondary-bg);
    /* Light hover effect */
}

.faq-question.active {
    background-color: var(--color-light-accent);
    /* Slightly darker when active */
    color: var(--color-accent);
    /* Accent color when active */
}

.faq-question .icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    transition: transform 0.3s ease;
}

.faq-question.active .icon {
    transform: rotate(45deg);
    /* Rotate plus icon to become cross */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    /* Smooth slide transition */
    padding: 0 2rem;
    /* Initial padding is zero for collapse */
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-body);
}

.faq-answer.active {
    max-height: 500px;
    /* Max height large enough to contain content */
    padding: 1rem 2rem 2rem;
    /* Restore padding when active */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .faq-section .section-heading {
        font-size: 2.5rem;
    }

    .faq-section .section-subheading {
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
    }

    .faq-accordion-container {
        border-radius: 0.75rem;
        /* Smaller radius on mobile */
    }

    .faq-question {
        padding: 1.2rem 1.5rem;
        font-size: 1rem;
    }

    .faq-question .icon {
        font-size: 1.2rem;
    }

    .faq-answer {
        padding: 0 1.5rem;
        font-size: 0.9rem;
    }

    .faq-answer.active {
        padding: 0.8rem 1.5rem 1.5rem;
    }
}
.call-to-action-section {
    /* Base background will be covered by overlay, but good for fallback */
    background-color: var(--color-accent);
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    margin-top: 4rem; /* Add some space above the last section */
    overflow: hidden; /* Ensure nothing spills out due to absolute positioning */
}

.cta-background-overlay {
    position: absolute;
    inset: 0; /* Shorthand for top, right, bottom, left: 0 */
    /* A more engaging gradient, feel free to adjust colors based on your theme */
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
    opacity: 1; /* Make it solid as it's the primary background */
    /* Optional: Add a subtle pattern for texture, ensures it looks good over the gradient */
    /* For a subtle pattern, you can use an SVG or a small transparent PNG */
    /* background-image: url('data:image/svg+xml,...'); or url('path/to/subtle-pattern.png'); */
    /* background-size: 20px 20px; */ /* Adjust size for pattern repeat */
    /* background-blend-mode: overlay; */ /* Blends pattern nicely with gradient */
}

/* Enhancing the overall section with subtle background elements */
.call-to-action-section::before,
.call-to-action-section::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.08); /* Slightly transparent white/light accent */
    border-radius: 50%;
    filter: blur(80px); /* Stronger blur for a soft glow effect */
    z-index: 1; /* Below content, above main background */
}

.call-to-action-section::before {
    top: -30%; /* Position higher */
    left: -15%; /* Position more left */
    width: 300px;
    height: 300px;
    animation: floatEffect 8s ease-in-out infinite alternate; /* Gentle floating animation */
}

.call-to-action-section::after {
    bottom: -30%; /* Position lower */
    right: -15%; /* Position more right */
    width: 350px;
    height: 350px;
    animation: floatEffect 10s ease-in-out infinite alternate reverse; /* Reversed animation */
}

@keyframes floatEffect {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, 30px) scale(1.05); }
}


.call-to-action-section .container {
    max-width: 900px; /* Constrain content width for better readability */
}

.call-to-action-section .cta-heading {
    font-family: 'Marcellus', serif; /* Ensure consistent font */
    font-size: 2.8rem; /* Larger, more impactful heading */
    line-height: 1.2;
    color: var(--color-white); /* White text for contrast */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* More prominent text shadow for pop */
    font-weight: 700; /* Ensure it's bold */
}

@media (min-width: 1024px) { /* Adjust for larger screens */
    .call-to-action-section .cta-heading {
        font-size: 3.8rem; /* Even larger on large desktops */
    }
}

@media (max-width: 767px) { /* Mobile adjustments */
    .call-to-action-section .cta-heading {
        font-size: 2.2rem; /* Smaller heading for mobile */
    }
}


.call-to-action-section .cta-subheading {
    font-size: 1.3rem; /* Slightly larger subheading */
    color: var(--color-white); /* White text */
    max-width: 700px; /* Keep subheading concise */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300; /* Lighter weight for subheading */
}

@media (min-width: 1024px) {
    .call-to-action-section .cta-subheading {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .call-to-action-section .cta-subheading {
        font-size: 1rem; /* Smaller subheading for mobile */
        margin-bottom: 2.5rem; /* Adjust margin */
    }
}

.call-to-action-section .cta-button {
    background-color: var(--color-white); /* White button for high contrast */
    color: var(--color-accent); /* Accent color text for branding */
    text-decoration: none;
    font-weight: bold; /* Make the button text stand out */
    border: 2px solid var(--color-white); /* White border for crispness */
    box-shadow: 0 8px 25px rgba(0,0,0,0.25); /* Stronger shadow for depth */
    letter-spacing: 0.05em; /* Slightly increased letter spacing */
    padding: 1.2rem 3rem; /* Slightly more vertical padding */
}

.call-to-action-section .cta-button:hover {
    background-color: var(--color-accent); /* Invert colors on hover */
    color: var(--color-white);
    border-color: var(--color-white); /* Maintain white border */
    box-shadow: 0 12px 30px rgba(0,0,0,0.35); /* Even stronger shadow on hover */
    transform: translateY(-5px) scale(1.05); /* More pronounced lift and scale */
}

@media (max-width: 767px) {
    .call-to-action-section {
        padding-top: 4rem; /* Reduced padding for mobile */
        padding-bottom: 4rem;
        margin-top: 3rem; /* Adjusted margin */
    }

    .call-to-action-section .cta-button {
        padding: 1rem 2rem; /* Smaller padding for mobile button */
        font-size: 1rem; /* Smaller font size */
        display: block; /* Make button full width on mobile */
        max-width: 280px; /* Constrain max width for better appearance */
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.5rem; /* Slightly less rounded on mobile if preferred */
    }

    .call-to-action-section .cta-button:hover {
        transform: translateY(-3px) scale(1.02); /* Less aggressive hover for mobile */
    }
}

/* === Existing Popup Styles (keeping previous refinements) === */

.derma-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Higher than any other element */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px); /* A subtle blur for depth */
    -webkit-backdrop-filter: blur(4px);
}

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

.popup-container {
    background-color: var(--color-white);
    border-radius: 1.5rem; /* Even more pronounced rounded corners for a softer look */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Stronger, deeper shadow */
    width: 90%;
    max-width: 900px; /* Increased max-width for better desktop layout */
    position: relative;
    padding: 3rem; /* Increased internal padding */
    display: flex;
    flex-direction: column; /* Default for mobile, will be row for desktop */
    transform: translateY(30px); /* Initial position for slide-up effect */
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother, more distinct animation */
}

.derma-popup-modal.active .popup-container {
    transform: translateY(0);
    opacity: 1;
}

.popup-close-btn {
    position: absolute;
    top: 20px; /* Slightly more space from top */
    right: 20px; /* Slightly more space from right */
    background: none;
    border: none;
    font-size: 2rem; /* Larger close icon */
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 10; /* Ensure it's clickable */
    outline: none; /* Remove outline on focus for cleaner look */
}

.popup-close-btn:hover {
    color: var(--color-accent);
    transform: rotate(90deg) scale(1.1); /* Rotate and slight scale for emphasis */
}

.popup-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 3rem; /* Increased space between columns */
    align-items: flex-start; /* Align content to the top */
}

.popup-left-side {
    flex: 1 1 280px; /* Flexible width for left column, slightly larger base */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-right: 1.5rem; /* Add some internal padding for separation */
}

.popup-doctor-img {
    width: 260px ;/* Slightly larger image */
    height: 300px;
    border-radius: 0 60px 0 60px;
    overflow: hidden;
    border-left: 5px solid var(--color-border-image);
    border-top: 5px solid var(--color-border-image);
    background: linear-gradient(to bottom, var(--color-secondary-bg) 0%, var(--color-primary-bg) 100%);
    object-fit: contain;
    margin-bottom: 2rem; /* More space below image */
    
}

.popup-heading {
    font-family: 'Marcellus', serif;
    font-size: 2.2rem; /* Larger heading */
    color: var(--color-heading);
    margin-bottom: 1rem; /* More space below heading */
    line-height: 1.3;
}

.popup-text {
    font-size: 1.1rem; /* Slightly larger text */
    line-height: 1.7; /* Improved line height for readability */
    color: var(--color-text-body);
    margin: 0;
    max-width: 350px; /* Constrain text width for better readability on wider screens */
}

.popup-right-side {
    flex: 1 1 400px; /* Flexible width for right column, allowing more space for form */
    display: flex;
    flex-direction: column;
    padding-left: 2.5rem; /* Add separation line visual */
    border-left: 1px solid var(--color-light-accent); /* Clear separator line */
}

.popup-form-title {
    font-family: 'Marcellus', serif;
    font-size: 2rem; /* Larger form title */
    color: var(--color-heading);
    margin-bottom: 2rem; /* More space before form elements */
}

/* Call Now Button Styling within the popup */
.call-btn-with-number {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem; /* More generous padding */
    border-radius: 0.8rem; /* Slightly more rounded */
    font-weight: 600;
    font-size: 1.15rem; /* Slightly larger font */
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 2rem; /* More space before the form */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Improved shadow */
    background-color: var(--color-accent); /* Your main accent color */
    color: var(--color-white);
    border: 2px solid var(--color-accent); /* Solid border matching background */
}

.call-btn-with-number:hover {
    background-color: var(--color-heading); /* Darker hover */
    border-color: var(--color-heading);
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.call-btn-with-number i {
    margin-right: 1rem; /* More space between icon and text */
    font-size: 1.25rem; /* Larger icon */
}

/* Form specific styles for the popup to ensure responsiveness */
.popup-form input[type="text"],
.popup-form input[type="tel"],
.popup-form textarea {
    width: 100%;
    padding: 0.9rem 1.25rem; /* More vertical padding for input fields */
    border: 1px solid var(--color-light-accent);
    border-radius: 0.75rem; /* Match custom rounding */
    background-color: var(--color-light-bg); /* Slightly off-white background for inputs */
    font-size: 1rem;
    color: var(--color-text-body);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.popup-form input:focus,
.popup-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25); /* Using rgba variable for accent if available */
}

.popup-form textarea {
    min-height: 100px; /* Minimum height for textarea */
    resize: vertical; /* Allow vertical resize only */
}

.popup-form .send-btn {
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 1rem 1.5rem; /* Generous padding for the submit button */
    border-radius: 0.75rem;
    font-weight: bold;
    font-family: 'Marcellus', serif; /* Apply Marcellus font to button */
    font-size: 1.2rem; /* Larger font size for submit button */
    letter-spacing: 0.05em; /* Subtle letter spacing */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Initial shadow for button */
}

.popup-form .send-btn:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.popup-form .space-y-4 > *:not(:last-child) {
    margin-bottom: 1.25rem; /* Slightly more space between form elements */
}


/* Responsive adjustments for Popup */
@media (max-width: 991px) { /* Tablet breakpoint for popup */
    .popup-container {
        max-width: 700px;
        padding: 2.5rem;
    }

    .popup-content-wrapper {
        gap: 2rem;
    }

    .popup-left-side {
        flex: 1 1 200px; /* Allow left side to be smaller on tablets */
        padding-right: 1rem;
    }

    .popup-right-side {
        flex: 1 1 300px; /* Allow right side to be smaller on tablets */
        /* padding-left: 2rem; */
    }

    .popup-doctor-img {
        width: 140px;
        height: 140px;
    }

    .popup-heading {
        font-size: 2rem;
    }

    .popup-form-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) { /* Mobile breakpoint */
    .popup-container {
        max-width: 95%;
        /* Adjusted padding to distribute space better when left is hidden */
        padding: 2.5rem 1.5rem;
        border-radius: 1rem;
    }

    .popup-close-btn {
        font-size: 1.6rem;
        top: 15px;
        right: 15px;
    }

    .popup-content-wrapper {
        flex-direction: column; /* Stack columns on mobile */
        gap: 0; /* No gap needed between columns when one is hidden and the other is full width */
    }

    /* --- IMPORTANT: Hide left side on mobile --- */
    .popup-left-side {
        display: none; /* Hide the entire left section on mobile */
    }
    /* --- End IMPORTANT --- */


    /* --- IMPORTANT: Make right side full width on mobile --- */
    .popup-right-side {
        /* This is the core change: flex: 0 0 100% ensures it takes 100% of the available flex container space */
        flex: 0 0 100%;
        width: 100%; /* Ensure it doesn't exceed 100% of parent width */
        /* padding-left: 0; Remove left padding */
        border-left: none; /* Remove vertical border */
        /* Center content if it's the only one left, and adjust for form width */
        align-items: center; /* Center items within the flex column */
        text-align: center; /* Center text within elements */
        padding-left: 0!important;
    }

    /* Ensure the form itself takes full width of the right section */
    .popup-right-side .popup-form {
        width: 100%;
        max-width: 400px; /* Add a max-width to the form itself for better readability on wider mobile screens (e.g., tablets in portrait) */
        margin: 0 auto; /* Center the form if it has a max-width */
    }
    /* --- End IMPORTANT --- */

    .popup-form-title {
        font-size: 1.6rem;
        text-align: center; /* Center title on mobile */
        margin-bottom: 1.5rem;
    }

    .call-btn-with-number {
        font-size: 1rem;
        padding: 0.8rem 1rem;
        width: 100%; /* Make buttons full width */
        margin-bottom: 1.25rem; /* Adjust margin for mobile stacking */
    }

    .call-btn-with-number i {
        margin-right: 0.6rem;
        font-size: 1rem;
    }

    .popup-form input[type="text"],
    .popup-form input[type="tel"],
    .popup-form textarea {
        padding: 0.8rem 1rem; /* Adjust input padding for mobile */
        font-size: 0.9rem;
    }

    .popup-form .send-btn {
        padding: 0.9rem 1.25rem;
        font-size: 1.05rem;
    }

    .popup-form .space-y-4 > *:not(:last-child) {
        margin-bottom: 1rem; /* Standard space on mobile */
    }
}

@media (max-width: 480px) { /* Smaller mobile screens */
    .popup-container {
        padding: 1.5rem 1rem;
    }

    .popup-close-btn {
        font-size: 1.4rem;
        top: 10px;
        right: 10px;
    }

    .popup-heading {
        font-size: 1.5rem;
    }

    .popup-form-title {
        font-size: 1.4rem;
    }
}

/* Fixed Bottom CTA Section - Hidden by default */
.fixed-bottom-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none; /* IMPORTANT: Hidden by default */
    z-index: 1000; /* Ensure it's above most other content */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow at the top */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle separation line for the whole bar */
}

/* --- Mobile Specific Styles (Applies only to screens up to 767px wide) --- */
@media (max-width: 767px) {
    .fixed-bottom-cta {
        display: flex; /* IMPORTANT: Show on mobile */
        /* Flexbox to arrange buttons side-by-side */
        flex-direction: row; /* Ensure they are side by side */
        border-radius: 0; /* Full width, sharp corners for mobile */
    }

    .fixed-bottom-cta .cta-button {
        flex: 1; /* Each button takes equal width */
        padding: 1.1rem 0.5rem; /* Good tap target size */
        text-align: center;
        text-decoration: none;
        font-size: 1rem; /* Appropriate font size for mobile */
        font-weight: bold;
        display: flex; /* Use flex for icon and text alignment */
        align-items: center;
        justify-content: center;
        gap: 0.5rem; /* Space between icon and text */
        transition: background-color 0.3s ease, color 0.3s ease; /* No transform needed for fixed buttons */
        /* No individual border-top here, as it's on the parent container */
    }

    /* Call Now Button - White Background, Accent Text */
    .fixed-bottom-cta .call-now-btn {
        background-color: var(--color-white);
        color: var(--color-accent);
        border-right: 1px solid var(--color-light-accent); /* Separator between buttons */
    }

    .fixed-bottom-cta .call-now-btn:hover {
        background-color: var(--color-light-accent);
        color: var(--color-accent-dark);
        /* No transform for mobile fixed button hover for simplicity */
    }

    /* Book Appointment Button - Accent Background, White Text */
    .fixed-bottom-cta .book-appointment-btn {
        background-color: var(--color-accent);
        color: var(--color-white);
    }

    .fixed-bottom-cta .book-appointment-btn:hover {
        background-color: var(--color-accent-dark);
        color: var(--color-white);
        /* No transform for mobile fixed button hover for simplicity */
    }

    .fixed-bottom-cta .cta-button i {
        font-size: 1.2em; /* Adjust icon size relative to text */
    }
}

/* --- Desktop and Tablet: Ensure it's hidden on larger screens --- */
@media (min-width: 768px) {
    .fixed-bottom-cta {
        display: none; /* Explicitly hide on screens 768px and wider */
    }
}

@media (max-width: 767px) {
    html {
        overflow-x: hidden!important;
    }
    /* You might also consider applying it to html if body isn't sufficient */
    /* html {
        overflow-x: hidden;
    } */
}


/* thank you page */

/* General Body & Typography - These global styles remain on body */
.thankyoubody {
    font-family: var(--font-sans, 'Open Sans', sans-serif);
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--color-light-bg); /* Light background for the page */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures footer sticks to bottom if content is short */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* All thank you page specific styles are now nested */
.thank-you-page h1,
.thank-you-page h2,
.thank-you-page h3,
.thank-you-page h4,
.thank-you-page h5,
.thank-you-page h6 {
    font-family: var(--font-marcellus, 'Marcellus', serif);
    color: var(--color-heading);
    line-height: 1.2;
    margin-bottom: 0.8em;
}

.thank-you-page .text-center {
    text-align: center;
}

.thank-you-page .mt-8 {
    margin-top: 2rem;
}

/* Container for Centering Content */
.thank-you-page .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
.thank-you-page .thank-you-header {
    background-color: var(--color-white);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.thank-you-page .thank-you-header .logo img {
    max-height: 50px;
    display: block;
    margin: 0 auto;
}

/* Main Content Area */
.thank-you-page .thank-you-main {
    flex-grow: 1;
}

/* Hero Section - Thank You Message */
.thank-you-page .hero-thank-you {
    background: linear-gradient(135deg, var(--color-light-accent) 0%, var(--color-white) 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
}

/* Subtle background circles for visual interest */
.thank-you-page .hero-thank-you::before,
.thank-you-page .hero-thank-you::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}
.thank-you-page .hero-thank-you::before {
    width: 200px;
    height: 200px;
    top: -50px;
    left: -50px;
}
.thank-you-page .hero-thank-you::after {
    width: 250px;
    height: 250px;
    bottom: -80px;
    right: -80px;
}

.thank-you-page .hero-thank-you .container {
    position: relative;
    z-index: 1;
}

.thank-you-page .icon-circle {
    background-color: var(--color-accent);
    color: var(--color-white);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 20px rgba(var(--color-accent-rgb, 0,0,0), 0.2);
    animation: bounceIn 0.8s ease-out;
}

.thank-you-page .thank-you-heading {
    font-size: 3rem;
    color: var(--color-heading);
    margin-bottom: 1rem;
    font-weight: 700;
}

.thank-you-page .thank-you-subtext {
    font-size: 1.25rem;
    color: var(--color-text-body);
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

/* Buttons */
.thank-you-page .btn {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
}

.thank-you-page .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: 2px solid var(--color-accent);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.thank-you-page .btn-primary:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.thank-you-page .btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.thank-you-page .btn-secondary:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.thank-you-page .btn i {
    margin-right: 0.5rem;
}

/* What Happens Next Section */
.thank-you-page .next-steps-section {
    background-color: var(--color-white);
    padding: 4rem 0;
    margin-bottom: 3rem;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    border-radius: 1rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.thank-you-page .section-title {
    font-size: 2.5rem;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: 2.5rem;
}

.thank-you-page .steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 0 1rem;
}

.thank-you-page .step-item {
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.8rem;
    background-color: var(--color-light-bg);
    border: 1px solid var(--color-light-accent);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thank-you-page .step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
}

.thank-you-page .step-icon {
    background-color: var(--color-light-accent);
    color: var(--color-accent);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 1rem;
}

.thank-you-page .step-item h3 {
    font-size: 1.4rem;
    color: var(--color-heading);
    margin-bottom: 0.8rem;
}

.thank-you-page .step-item p {
    font-size: 0.95rem;
    color: var(--color-text-body);
    line-height: 1.6;
}

/* Contact Reminder Section */
.thank-you-page .contact-reminder-section {
    padding: 3rem 0;
    background-color: var(--color-white);
    margin-bottom: 3rem;
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.03);
}
.thank-you-page .contact-reminder-section p {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
    color: var(--color-heading);
}

/* Social Connect Section (Optional) */
.thank-you-page .social-connect-section {
    padding: 3rem 0;
    margin-bottom: 3rem;
}
.thank-you-page .social-links {
    margin-top: 1.5rem;
}
.thank-you-page .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-accent);
    font-size: 1.5rem;
    margin: 0 0.8rem;
    border: 1px solid var(--color-light-accent);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.thank-you-page .social-links a:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Footer */
.thank-you-page .thank-you-footer {
    background-color: var(--color-heading);
    color: rgba(255,255,255,0.7);
    padding: 1.5rem 0;
    font-size: 0.9rem;
    margin-top: auto;
}


/* Animations */
/* Note: @keyframes are global, they don't need to be nested under .thank-you-page */
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* --- Responsive Adjustments (also nested) --- */
@media (max-width: 991px) {
    .thank-you-page .thank-you-heading {
        font-size: 2.5rem;
    }
    .thank-you-page .thank-you-subtext {
        font-size: 1.15rem;
    }
    .thank-you-page .section-title {
        font-size: 2rem;
    }
    .thank-you-page .steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 767px) {
    .thank-you-page .hero-thank-you {
        padding: 3rem 0;
        margin-bottom: 2rem;
    }
    .thank-you-page .icon-circle {
        width: 80px;
        height: 80px;
        font-size: 2.8rem;
    }
    .thank-you-page .thank-you-heading {
        font-size: 2rem;
    }
    .thank-you-page .thank-you-subtext {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    .thank-you-page .btn {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem;
    }
    .thank-you-page .next-steps-section,
    .thank-you-page .contact-reminder-section,
    .thank-you-page .social-connect-section {
        padding: 2.5rem 0;
        margin-bottom: 2rem;
    }
    .thank-you-page .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    .thank-you-page .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .thank-you-page .step-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    .thank-you-page .step-item h3 {
        font-size: 1.25rem;
    }
    .thank-you-page .contact-reminder-section p {
        font-size: 1rem;
    }
    .thank-you-page .social-links a {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        margin: 0 0.6rem;
    }
}

@media (max-width: 480px) {
    .thank-you-page .hero-thank-you {
        padding: 2.5rem 0;
    }
    .thank-you-page .thank-you-heading {
        font-size: 1.7rem;
    }
    .thank-you-page .thank-you-subtext {
        font-size: 0.9rem;
    }
    .thank-you-page .section-title {
        font-size: 1.6rem;
    }
    .thank-you-page .next-steps-section,
    .thank-you-page .contact-reminder-section,
    .thank-you-page .social-connect-section {
        padding: 2rem 0;
    }
}

/* General Body & Typography - These global styles remain on body */
.thankyoubody {
    font-family: var(--font-sans, 'Open Sans', sans-serif);
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--color-light-bg); /* Light background for the page */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures footer sticks to bottom if content is short */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* All thank you page specific styles are now nested */
.thank-you-page h1,
.thank-you-page h2,
.thank-you-page h3,
.thank-you-page h4,
.thank-you-page h5,
.thank-you-page h6 {
    font-family: var(--font-marcellus, 'Marcellus', serif);
    color: var(--color-heading);
    line-height: 1.2;
    margin-bottom: 0.8em;
}

.thank-you-page .text-center {
    text-align: center;
}

.thank-you-page .mt-8 {
    margin-top: 2rem;
}

/* Container for Centering Content */
.thank-you-page .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
.thank-you-page .thank-you-header {
    background-color: var(--color-white);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.thank-you-page .thank-you-header .logo img {
    max-height: 50px;
    display: block;
    margin: 0 auto;
}

/* Main Content Area */
.thank-you-page .thank-you-main {
    flex-grow: 1;
}

/* Hero Section - Thank You Message */
.thank-you-page .hero-thank-you {
    background: linear-gradient(135deg, var(--color-light-accent) 0%, var(--color-white) 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
}

/* Subtle background circles for visual interest */
.thank-you-page .hero-thank-you::before,
.thank-you-page .hero-thank-you::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}
.thank-you-page .hero-thank-you::before {
    width: 200px;
    height: 200px;
    top: -50px;
    left: -50px;
}
.thank-you-page .hero-thank-you::after {
    width: 250px;
    height: 250px;
    bottom: -80px;
    right: -80px;
}

.thank-you-page .hero-thank-you .container {
    position: relative;
    z-index: 1;
}

.thank-you-page .icon-circle {
    background-color: var(--color-accent);
    color: var(--color-white);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 20px rgba(var(--color-accent-rgb, 0,0,0), 0.2);
    animation: bounceIn 0.8s ease-out;
}

.thank-you-page .thank-you-heading {
    font-size: 3rem;
    color: var(--color-heading);
    margin-bottom: 1rem;
    font-weight: 700;
}

.thank-you-page .thank-you-subtext {
    font-size: 1.25rem;
    color: var(--color-text-body);
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

/* Buttons */
.thank-you-page .btn {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
}

.thank-you-page .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: 2px solid var(--color-accent);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.thank-you-page .btn-primary:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.thank-you-page .btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.thank-you-page .btn-secondary:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.thank-you-page .btn i {
    margin-right: 0.5rem;
}

/* What Happens Next Section */
.thank-you-page .next-steps-section {
    background-color: var(--color-white);
    padding: 4rem 0;
    margin-bottom: 3rem;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    border-radius: 1rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.thank-you-page .section-title {
    font-size: 2.5rem;
    color: var(--color-heading);
    text-align: center;
    margin-bottom: 2.5rem;
}

.thank-you-page .steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 0 1rem;
}

.thank-you-page .step-item {
    text-align: center;
    padding: 1.5rem;
    border-radius: 0.8rem;
    background-color: var(--color-light-bg);
    border: 1px solid var(--color-light-accent);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thank-you-page .step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
}

.thank-you-page .step-icon {
    background-color: var(--color-light-accent);
    color: var(--color-accent);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 1rem;
}

.thank-you-page .step-item h3 {
    font-size: 1.4rem;
    color: var(--color-heading);
    margin-bottom: 0.8rem;
}

.thank-you-page .step-item p {
    font-size: 0.95rem;
    color: var(--color-text-body);
    line-height: 1.6;
}

/* Contact Reminder Section */
.thank-you-page .contact-reminder-section {
    padding: 3rem 0;
    background-color: var(--color-white);
    margin-bottom: 3rem;
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.03);
}
.thank-you-page .contact-reminder-section p {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
    color: var(--color-heading);
}

/* Social Connect Section (Optional) */
.thank-you-page .social-connect-section {
    padding: 3rem 0;
    margin-bottom: 3rem;
}
.thank-you-page .social-links {
    margin-top: 1.5rem;
}
.thank-you-page .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-accent);
    font-size: 1.5rem;
    margin: 0 0.8rem;
    border: 1px solid var(--color-light-accent);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.thank-you-page .social-links a:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Footer */
.thank-you-page .thank-you-footer {
    background-color: var(--color-heading);
    color: rgba(255,255,255,0.7);
    padding: 1.5rem 0;
    font-size: 0.9rem;
    margin-top: auto;
}


/* Animations */
/* Note: @keyframes are global, they don't need to be nested under .thank-you-page */
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* --- Responsive Adjustments (also nested) --- */
@media (max-width: 991px) {
    .thank-you-page .thank-you-heading {
        font-size: 2.5rem;
    }
    .thank-you-page .thank-you-subtext {
        font-size: 1.15rem;
    }
    .thank-you-page .section-title {
        font-size: 2rem;
    }
    .thank-you-page .steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 767px) {
    .thank-you-page .hero-thank-you {
        padding: 3rem 0;
        margin-bottom: 2rem;
    }
    .thank-you-page .icon-circle {
        width: 80px;
        height: 80px;
        font-size: 2.8rem;
    }
    .thank-you-page .thank-you-heading {
        font-size: 2rem;
    }
    .thank-you-page .thank-you-subtext {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    .thank-you-page .btn {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem;
    }
    .thank-you-page .next-steps-section,
    .thank-you-page .contact-reminder-section,
    .thank-you-page .social-connect-section {
        padding: 2.5rem 0;
        margin-bottom: 2rem;
    }
    .thank-you-page .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    .thank-you-page .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .thank-you-page .step-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    .thank-you-page .step-item h3 {
        font-size: 1.25rem;
    }
    .thank-you-page .contact-reminder-section p {
        font-size: 1rem;
    }
    .thank-you-page .social-links a {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        margin: 0 0.6rem;
    }
}

@media (max-width: 480px) {
    .thank-you-page .hero-thank-you {
        padding: 2.5rem 0;
    }
    .thank-you-page .thank-you-heading {
        font-size: 1.7rem;
    }
    .thank-you-page .thank-you-subtext {
        font-size: 0.9rem;
    }
    .thank-you-page .section-title {
        font-size: 1.6rem;
    }
    .thank-you-page .next-steps-section,
    .thank-you-page .contact-reminder-section,
    .thank-you-page .social-connect-section {
        padding: 2rem 0;
    }
}


@media (max-width: 767px) {
.holistic{
    text-align: center!important;
}

.holisticP{
    text-align: center!important;
}

}

/* Base styles for small screens (mobile-first approach) */
.dermatologist-section {
    padding-top: 0px!important; /* pt-0 on small screens */
    padding-bottom: 20px; /* pb-20 (assuming this is 20px) */
   

}

/* Styles for large screens (e.g., desktops, large tablets) */
@media (min-width: 1024px) { /* This media query targets "large" screens */
    .dermatologist-section {
        padding-top: 3.5rem !important; /* pt-20 on large screens */
        padding-bottom: 24px; /* lg:py-24 would mean 24px top and bottom */
    }
}


/* --- CRITICAL: Override Owl Carousel's Height Management --- */

/* Ensure the main stage and stage-outer flow naturally */
.owl-carousel .owl-stage-outer {
    overflow: hidden; /* Standard for carousels */
    /* Remove any explicit height or min-height set by Owl or other CSS */
}

.owl-carousel .owl-stage {
    display: flex; /* Force flex on the stage to allow items to size dynamically */
    height: auto !important; /* Force height to auto for the stage */
    min-height: auto !important; /* Ensure no min-height is forcing size */
    align-items: flex-start; /* Align items to the top if their height differs */
}

.owl-carousel .owl-item {
    height: auto !important; /* Each item should take its content's height */
    -webkit-backface-visibility: hidden; /* Helps with rendering consistency */
    position: relative; /* Needed for transforms */
    display: block; /* Important for Owl Carousel's internal logic */
}

/* Ensure the content wrapper within each item also adjusts */
.mobile-treatment-carousel .carousel-content-wrapper {
    display: flex;
    flex-direction: column;
    height: auto; /* Just to be absolutely sure */
    min-height: 1px; /* Minimal height just in case */
    
    background-color: #fff; /* Moving bg-white here */
    border-radius: 1rem; /* Moving rounded-xl here as it's the item's main container now */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Moving shadow here as it's the item's main container now */
    padding: 0.5rem; /* Consistent padding */
    padding-bottom: 2rem; /* More padding at bottom for content + button */
    
    overflow: hidden; 
}


/* Make sure the list takes up available space, pushing the button down */
.mobile-treatment-carousel .treatment-list-carousel {
    flex-grow: 1; /* This is key to push the button down */
    margin-bottom: 1.5rem; /* Space between last list item and button if needed, or rely on pt-4 on button parent */
}

/* --- END CRITICAL HEIGHT OVERRIDES --- */


/* Custom properties for consistency (if you haven't defined them globally) */
:root {
    --accent-color: #E1B898; /* Example accent color */
    --heading-color: #333;   /* Example heading text color */
    --body-color: #555;      /* Example body text color */
}

/* Base styles for the treatment list items within carousel */
.mobile-treatment-carousel .treatment-list-carousel {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-treatment-carousel .treatment-list-carousel li {
    background-color: #fbfbfb;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    padding: 0.35rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-treatment-carousel .treatment-list-carousel li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.mobile-treatment-carousel .treatment-list-carousel li .icon {
    color: var(--accent-color);
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.15em;
}

.mobile-treatment-carousel .treatment-list-carousel li .text-content h4 {
    font-size: 1.15rem;
    margin-bottom: 0.1rem;
    color: var(--heading-color);
    font-family: 'Marcellus', serif;
    line-height: 1.3;
}

.mobile-treatment-carousel .treatment-list-carousel li .text-content p {
    font-size: 0.875rem;
    color: var(--body-color);
    line-height: 1.4;
}

/* Owl Carousel Navigation (Arrows) Styling */
.owl-theme .owl-nav {
    margin-top: 0;
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
    pointer-events: none;
    z-index: 10;
}

.owl-theme .owl-nav [class*='owl-'] {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--accent-color) !important;
    font-size: 1.25rem;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
    pointer-events: all;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.owl-theme .owl-nav [class*='owl-']:hover {
    background-color: var(--accent-color) !important;
    color: #FFF !important;
    transform: scale(1.05);
}

.owl-theme .owl-nav .owl-prev {
    margin-left: -22px;
}
.owl-theme .owl-nav .owl-next {
    margin-right: -22px;
}

/* Owl Carousel Dots Styling */
.owl-theme .owl-dots {
    position: relative;
    text-align: center;
    padding-top: 1.5rem;
    margin-top: 1rem;
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    display: inline;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #ccc;
    display: block;
    /* -webkit-backface-visibility: visible; */
    transition: opacity .2s ease, background-color 0.2s ease, border-color 0.2s ease;
    border-radius: 30px;
    border: 1px solid #ccc;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Ensure images maintain aspect ratio and fill space */
.mobile-treatment-carousel .carousel-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.75rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Small adjustments for overall section padding on smaller screens */
.mobile-treatments-carousel-section {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* For slightly larger mobile screens (e.g., small tablets in portrait) */
@media (min-width: 640px) {
    .mobile-treatments-carousel-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .owl-theme .owl-nav .owl-prev {
        margin-left: -30px;
    }
    .owl-theme .owl-nav .owl-next {
        margin-right: -30px;
    }
}