:root {
    --primary-color: #0d6efd;
    /* Blue from the button */
    --secondary-color: #0a192f;
    /* Dark background */
    --accent-color: #c5a47e;
    /* Gold/Bronze accent */
    --text-color: #333333;
    --light-text: #ffffff;
    --background-light: #f8f9fa;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
    background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

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

ul {
    list-style: none;
}

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

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 0.8rem 2rem;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
}

.btn-highlight {
    border: 2px solid var(--light-text);
    color: var(--light-text);
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
}

.btn-highlight:hover {
    background-color: var(--light-text);
    color: var(--secondary-color);
}

/* Header */
#main-header {
    background-color: transparent;
    position: absolute;
    /* Changed from fixed to absolute for overlay, or fixed if we want it to stay */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    box-shadow: none;
}

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

.logo img {
    height: 80px;
    /* Adjust based on logo aspect ratio */
    width: auto;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 40px;
}

.main-nav a {
    color: var(--light-text);
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.main-nav a:not(.btn-highlight):hover {
    color: var(--accent-color);
}

.mobile-menu-icon {
    display: none;
    color: var(--light-text);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    /* Full screen height */
    min-height: 600px;
    background: url('imagem/bg-topo-imagem.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--light-text);
    margin-top: 0;
    /* Remove margin as header is overlay */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
    /* Adjusted gradient */
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding-top: 80px;
    /* Offset for header */
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 40px;
    font-weight: 400;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero-curve {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
}

.hero-curve svg {
    display: block;
    width: 100%;
    height: 80px;
    fill: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .main-nav {
        display: none;
        /* Hide for now, requires JS for toggle */
    }

    .mobile-menu-icon {
        display: block;
    }

    .hero-content h1 {
        font-size: 2rem;
    }
}

/* Sections Common */
.section-padding {
    padding: 80px 0;
}

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

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

.mt-2 {
    margin-top: var(--spacing-md);
}

/* Intro Section */
.intro-section {
    background-color: #fff;
    padding: 100px 0;
    padding-bottom: 0;
    /* Image touches bottom */
    border-bottom: 15px solid #3b82f6;
    /* Thick blue border */
}

.intro-container {
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
}

.intro-text {
    flex: 1;
    padding-bottom: 60px;
    /* Space above border */
}

.intro-text h2 {
    font-size: 3rem;
    color: #222;
    margin-bottom: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.intro-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.7;
    max-width: 90%;
}

.intro-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
    /* Ensure image aligns bottom */
    align-self: flex-end;
}

.intro-img {
    max-width: 100%;
    height: auto;
    display: block;
    /* If the image is cut out, it might need negative margin to overlap border? 
       Reference shows it standing on the line. 
       Assuming jpg handles it, or if it has white bg it blends. */
}

/* Responsive Intro */
@media (max-width: 900px) {
    .intro-container {
        flex-direction: column-reverse;
        /* Image on top? Or Text on top?. Usually Text first on mobile. */
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .intro-text h2 {
        font-size: 2.2rem;
    }

    .intro-text p {
        margin: 0 auto 30px;
    }

    .intro-section {
        padding-bottom: 60px;
    }
}

/* About Section */
.about-section {
    background-color: #fff;
    padding: 100px 0;
}

.about-container {
    display: flex;
    align-items: flex-start;
    /* Align top */
    gap: 60px;
}

.about-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    /* Center image in its column */
}

.main-about-img {
    max-width: 100%;
    height: auto;
    /* If the image already has the shape, we don't need border-radius. 
       If it's just a square photo, we might need to mask it or add the shape.
       Assuming provided png has the shape/transparency based on "quem somos.png" name */
    display: block;
}

.about-content {
    flex: 1;
    padding-top: 20px;
}

.about-content h2 {
    font-size: 2.5rem;
    color: #222;
    margin-bottom: 30px;
    font-weight: 700;
}

.qualifications-list {
    list-style: none;
    margin-bottom: 40px;
}

.qualifications-list li {
    margin-bottom: 15px;
    color: #555;
    font-size: 0.95rem;
    position: relative;
    padding-left: 0;
}

/* Optional bullet or dash if needed, reference doesn't show standard bullets clearly but lists items */
/* .qualifications-list li::before { content: "•"; color: var(--primary-color); ... } */

.about-content p {
    margin-bottom: 20px;
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

.about-content strong {
    color: #222;
    font-weight: 700;
}

/* Responsive constraints */
@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
        align-items: center;
    }

    .about-image-wrapper {
        margin-bottom: 40px;
        width: 100%;
        max-width: 500px;
    }
}

/* Features Section */
.features-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-direction: row-reverse;
    /* Image on right */
}

.features-image {
    flex: 1;
}

.features-image img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.features-text {
    flex: 1;
}

.features-text h2 {
    font-size: 2.2rem;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-md);
}

.feature-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.feature-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 5px;
}

.feature-item span {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    font-weight: 700;
    margin-top: var(--spacing-sm);
}

.btn-link:hover {
    gap: 15px;
    /* Arrow moves */
}

/* Services Grid Layout */
.services-section {
    padding: 80px 0;
    background-color: #fff;
    padding-bottom: 0px;
    /* Adjust spacing */
}

.services-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 1400px;
    /* Allow it to be wider */
    margin: 0 auto;
}

.grid-item {
    position: relative;
    min-height: 350px;
    /* Each square height */
    overflow: hidden;
}

/* 1. Text Block */
.text-block {
    grid-column: span 2;
    background-color: #fff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.text-block h2 {
    font-size: 2.5rem;
    color: #222;
    margin-bottom: 20px;
    line-height: 1.2;
}

.text-block p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

.dots-decoration {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.dots-decoration span {
    width: 4px;
    height: 4px;
    background-color: #a5b4fc;
    /* Light blue dots */
    border-radius: 50%;
    display: block;
}

/* Service Item */
.service-item {
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text at bottom default? Or top? Image shows top/distributed */
    transition: all 0.4s ease;
    cursor: pointer;
}

.service-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Always dark enough to read text */
    transition: all 0.4s ease;
    z-index: 1;
}

.service-item .content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-item .number {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.service-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.service-item p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 1;
    /* Always visible */
    transform: none;
    /* No movement */
    transition: all 0.4s ease;
}

/* Hover Effects */
.service-item:hover .overlay {
    background: rgba(0, 0, 0, 0.8);
    /* Slightly darker on hover */

}

.service-item:hover p {
    opacity: 1;
    transform: translateY(0);
}

/* CTA Block */
.cta-block {
    grid-column: span 2;
    background-color: #3b82f6;
    /* Bright blue */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-bottom-right-radius: 100px;
    /* Rounded corner effect */
}

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

.cta-inner p {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Grid CTA Block (Item 08) */
.cta-block {
    background-color: var(--primary-color);
    /* Blue */
    color: #fff;
    /* Rounded corner like reference */
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cta-block .number,
.cta-block h3,
.cta-block p {
    color: #fff;
    z-index: 2;
    position: relative;
}

.cta-block .number {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

.cta-block h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-divider {
    border-color: rgba(255, 255, 255, 0.3);
    margin: 20px 0;
}

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
    transition: opacity 0.3s;
}

.cta-link:hover {
    opacity: 0.8;
    color: #fff;
}

.cta-block .phone-number {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 5px;
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .services-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }

    .text-block,
    .cta-block {
        grid-column: span 2;
    }
}

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

    .services-grid-layout {
        display: flex;
        flex-direction: column;
    }

    .grid-item {
        min-height: 300px;
    }

    .cta-block {
        border-bottom-right-radius: 0;
        /* Remove rounded corner on mobile */
    }

    .service-item p {
        opacity: 1;
        /* Always visible on mobile */
        transform: none;
    }
}

/* CTA Banner inside Services */
.cta-banner {
    background: linear-gradient(135deg, var(--primary-color), #0b5ed7);
    border-radius: 15px;
    padding: 40px;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
}

.cta-content h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #fff;
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.btn-light {
    background: #fff;
    color: var(--primary-color);
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 30px;
}

.btn-light:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

/* Responsive Adjustments for new sections */
@media (max-width: 900px) {

    .about-container,
    .features-container {
        flex-direction: column;
        text-align: center;
    }

    .features-container {
        flex-direction: column;
        /* Reset reverse */
    }

    .about-text h2::after {
        margin: 10px auto;
    }

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

    .cta-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .btn-light {
        margin-left: 0;
    }
}

/* Testimonials */
.google-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.rating-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.stars {
    color: #ffc107;
    font-size: 1.2rem;
}

.reviews-grid {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
}

.review-card {
    min-width: 300px;
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    scroll-snap-align: start;
    text-align: left;
}

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

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.stars-small {
    color: #ffc107;
    font-size: 0.8rem;
}

.review-text {
    font-size: 0.95rem;
    color: #555;
    font-style: italic;
}

/* Footer */
.bg-dark {
    background-color: var(--secondary-color);
}

.bg-darker {
    background-color: #050d1a;
    padding: 20px 0;
    font-size: 0.85rem;
    color: #8892b0;
}

.text-white {
    color: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    color: #ccd6f6;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-info p {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: #8892b0;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-contact p {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    color: #fff;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.social-icons a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

.mb-4 {
    margin-bottom: var(--spacing-md);
}

.mb-5 {
    margin-bottom: var(--spacing-lg);
}

/* Map specific styles if needed, otherwise handled by img placeholder */

/* Specialties Detail Section */
.specialties-detail-section {
    background-color: #f8f9fa;
    /* Light gray */
}

.section-header h2 {
    font-size: 2.2rem;
    color: #222;
    margin-bottom: 20px;
    font-weight: 700;
}

.section-header p {
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

.specialties-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.specialty-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    cursor: default;
}

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

.specialty-card .icon-box {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: #e0e7ff;
    /* Light blue bg */
    color: #3b82f6;
    /* Blue icon */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.specialty-card:hover .icon-box {
    background-color: #3b82f6;
    color: #fff;
}

.specialty-content h3 {
    font-size: 1.2rem;
    color: #222;
    margin-bottom: 10px;
    font-weight: 600;
}

.specialty-content p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Make sure the container is responsive */
@media (max-width: 768px) {
    .specialties-list-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Doctoralia Reviews & CTA Section Updates
   ========================================= */

/* Reviews Carousel Base (Refining) */
.reviews-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.reviews-carousel::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Doctoralia Carousel Specifics */
.doctoralia-carousel .review-card {
    /* Desktop: 3 items visible. 
       Formula: (100% - (gap * (visible_items - 1))) / visible_items
       Gap is 20px. 2 gaps for 3 items. Total gap 40px.
    */
    flex: 0 0 calc((100% - 40px) / 3);

    min-width: unset;
    /* Override default min-width */
    padding: 0;
    /* Images usually don't need padding inside the card if they are the card */
    border: none;
    box-shadow: none;
    background: transparent;
    scroll-snap-align: start;
}

.doctoralia-carousel img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: block;
    /* Remove bottom space */
    transition: transform 0.3s ease;
}

.doctoralia-carousel img:hover {
    transform: translateY(-5px);
}

.doctor-name {
    font-weight: 600;
    color: #777;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* Carousel Dots (Optional visual only for now) */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.carousel-dots span {
    width: 10px;
    height: 10px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
}

.carousel-dots span.active {
    background-color: var(--primary-color);
}

/* CTA Section with Background */
.cta-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
    /* Ensure height is enough */
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient blue overlay */
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.9), rgba(13, 202, 240, 0.8));
    z-index: 1;
}

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

.btn-cta {
    background-color: #fff;
    color: var(--primary-color);
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.btn-cta:hover {
    background-color: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    color: var(--primary-color);
}

/* Location Card */
.location-card {
    background: #3b82f6;
    /* Solid Blue */
    border-radius: 20px;
    padding: 40px;
    max-width: 900px;
    margin: 60px auto 0;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    color: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
    /* Ensure text alignment */
}

.loc-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.loc-details h4 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.loc-details p {
    font-size: 1rem;
    margin-bottom: 12px;
    opacity: 0.95;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.loc-details p:last-child {
    border-bottom: none;
}

/* Responsive Adjustments for Carousel & CTA */
@media (max-width: 900px) {
    .doctoralia-carousel .review-card {
        /* Mobile/Tablet: 2 items visible.
           Formula: (100% - 20px) / 2
        */
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .location-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px;
    }

    .loc-details {
        width: 100%;
    }

    .loc-details h4 {
        margin-bottom: 15px;
    }
}

@media (max-width: 600px) {
    /* Small mobile: maybe 1.2 or 1.5 items? Reference asked for 2 mobile. 
       Let's stick to 2 but verify it's not too squashed. 
       If too squashed, maybe 1.3 to show peek? 
       User said "2 no mobile". */

    .doctoralia-carousel .review-card {
        flex: 0 0 calc((100% - 15px) / 2);
        /* slightly tighter gap */
    }
}


/* Banner Style Card (Integrated in Grid) */
.banner-style-card {
    padding: 0 !important;
    /* Override default padding */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    grid-column: span 2;
    background-color: #3b82f6;
    display: block;
    /* context for flex row */
}

.banner-style-card .overlay-blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ensure text readability if bg is busy */
    /* Using a subtle gradient or just relying on the image being blue */
    background: rgba(59, 130, 246, 0.1);
    z-index: 1;
}

.banner-style-card h2 {
    color: #fff !important;
    font-size: 1.8rem !important;
    margin-bottom: 15px;
}

.banner-style-card p {
    color: #fff !important;
    opacity: 0.95;
    font-size: 1rem;
}

.banner-card-img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: normal;
    /* Adjust positioning */
    margin-top: 20px;
    /* Push down a bit if needed */
}

.banner-subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .banner-style-card .col-md-5 {
        display: none !important;
        /* Hide image on mobile if it takes too much space, or stack it */
    }
}

/* Row/Col helper if not using Bootstrap grid fully */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* Large Section Divider */
.section-divider-large {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(59, 130, 246, 0.75), rgba(0, 0, 0, 0));
    margin: 60px 0;
    /* Significant spacing */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Carousel Core Styles */
.reviews-carousel {
    display: flex;
    overflow-x: auto;
    /* Allow manual scroll if JS fails, but hidden via JS usually */
    scroll-behavior: smooth;
    gap: 20px;
    padding: 20px 0;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

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

.review-card {
    flex: 0 0 calc((100% - 40px) / 3);
    /* Desktop: 3 items (2 gaps of 20px = 40px) */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
    text-align: left;
    transition: transform 0.3s ease;
}

/* Dots Navigation */
.carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #3b82f6;
    /* Blue pivot */
    transform: scale(1.2);
}

/* Responsive Adjustments (Ensure these override default) */
@media (max-width: 900px) {

    .doctoralia-carousel .review-card,
    .reviews-carousel .review-card {
        flex: 0 0 calc((100% - 20px) / 2);
        /* Mobile: 2 items */
    }
}

@media (max-width: 600px) {

    .doctoralia-carousel .review-card,
    .reviews-carousel .review-card {
        /* Keep 2 items as requested, but might be tight. */
        flex: 0 0 calc((100% - 15px) / 2);
    }
}
}

.banner-content {
    color: #fff;
    padding: 20px;
}

.banner-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.banner-text {
    font-size: 1.1rem;
    margin-bottom: 0;
    opacity: 0.95;
    font-weight: 500;
}

/* Image on left - responsive */
.banner-img-left {
    max-width: 100%;
    height: auto;
    /* If we want it to look like the reference (cutout), we might need absolute positioning or negative margin 
       depending on the image itself. For now, standard responsive img. */
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .banner-content {
        text-align: center;
    }

    .banner-title {
        font-size: 1.8rem;
    }
}