:root {
    --primary-dark: #28211D;
    --accent-gold: #D4AF37;
    --main-bg: #FFCFAE;
    --soft-gold: #E6C18E;
    --white: #FFFFFF;

    --heading-main-size: 32px;
    --heading-secondary-size: 20px;
    --description-size: 16px;
    --button-text-size: 14px;
    --badge-size: 12px;

    --container-max-width: 1400px;
    --card-width: 350px;
    --before-after-width: 350px;
    --before-after-height: 400px;
    --card-radius: 24px;
    --media-radius: 16px;
    --pill-radius: 50px;
    --transition-base: all 0.3s ease;
}

.section-header {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.section-title {
    margin: 0 0 16px;
    font-family: 'Playfair Display', serif;
    font-size: var(--heading-main-size);
    font-weight: 700;
    line-height: 1.15;
}

.section-description {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--description-size);
    font-weight: 400;
    line-height: 1.6;
    opacity: 0.85;
}

.section-header.on-dark .section-badge {
    background: rgba(255, 207, 174, 0.12);
    color: var(--main-bg);
    border: 1px solid rgba(255, 207, 174, 0.28);
}

.section-header.on-dark .section-title {
    color: var(--main-bg);
}

.section-header.on-dark .section-description {
    color: var(--white);
}

.section-header.on-light .section-badge {
    background: rgba(40, 33, 29, 0.06);
    color: var(--primary-dark);
    border: 1px solid rgba(40, 33, 29, 0.12);
}

.section-header.on-light .section-title {
    color: var(--primary-dark);
}

.section-header.on-light .section-description {
    color: var(--primary-dark);
}

.card-title {
    margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
    font-size: var(--heading-secondary-size);
    font-weight: 700;
    line-height: 1.25;
}

.card-description {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--description-size);
    font-weight: 400;
    line-height: 1.6;
    opacity: 0.85;
}

.btn-gold {
    font-size: var(--button-text-size);
}

.btn-primary,
.action-btn,
.btn-gold-lux,
.filter-btn {
    font-size: var(--button-text-size) !important;
}

.standard-card {
    width: 100%;
    max-width: var(--card-width);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.masterpiece-media-box {
    width: var(--before-after-width);
    height: var(--before-after-height);
    max-width: 100%;
}

.page-header h1,
.page-header .section-title,
.hero h1,
.hero-content h1,
h1.section-title {
    font-size: var(--heading-main-size) !important;
    line-height: 1.15 !important;
}

.section-header h2,
.section-header .section-title {
    font-size: var(--heading-main-size) !important;
    line-height: 1.15 !important;
}

.overview-content h2,
.service-info h3,
.service-info .card-title,
.technology-info h4,
.doctor-card h3,
.dark-card h3,
.card h3,
.page-content h2,
.page-content h3,
.home-masterpiece-title,
.card-title {
    font-size: var(--heading-secondary-size) !important;
    line-height: 1.25 !important;
}

.page-header p,
.page-header .section-description,
.hero p,
.hero-content p,
.section-header p,
.section-header .section-description,
.overview-content p,
.service-info p,
.service-info .card-description,
.technology-info p,
.dark-card p,
.page-content p,
.card p,
.testimonial-card p,
.video-info p,
.card-description {
    font-size: var(--description-size) !important;
    line-height: 1.6 !important;
}

.service-card,
.technology-card,
.testimonial-card,
.video-card,
.gallery-item,
.doctor-card {
    max-width: var(--card-width);
}

.service-card,
.technology-card,
.testimonial-card,
.video-card,
.gallery-item,
.doctor-card,
.card {
    border-radius: var(--card-radius);
}

.service-img,
.technology-img,
.video-container,
.gallery-item,
.doctor-img-container,
.card-media img,
.card-media video {
    border-radius: var(--media-radius);
}

/* Contextual Button Colors overrides */
/* 1. If background is #28211D (Dark/Brown) -> Button is #FFCFAE (Peach), Text is #28211D (Dark) */
.bg-dark .btn-gold,
.bg-dark .btn-gold-lux,
.bg-dark .btn-primary,
.bg-dark .action-btn,
.bg-dark button:not(.slider-btn, .filter-btn),
footer .btn-gold,
footer .btn-gold-lux,
footer button:not(.slider-btn, .filter-btn),
[style*="#28211D"] .btn-gold,
[style*="#28211D"] .btn-gold-lux,
[style*="#28211D"] button:not(.slider-btn, .filter-btn),
[style*="var(--primary-dark)"] .btn-gold,
[style*="var(--primary-dark)"] .btn-gold-lux,
[style*="var(--primary-dark)"] button:not(.slider-btn, .filter-btn),
[style*="var(--primary-brown)"] .btn-gold,
[style*="var(--primary-brown)"] .btn-gold-lux,
[style*="var(--primary-brown)"] button:not(.slider-btn, .filter-btn),
.dark-card .btn-gold,
.dark-card .btn-gold-lux,
.dark-card button:not(.slider-btn, .filter-btn),
#custom-slider-modal .btn-gold,
#custom-slider-modal button:not(.slider-btn, .filter-btn) {
    background: #FFCFAE !important;
    color: #28211D !important;
}

/* Disable Animation/Shimmer for Dark-themed Buttons */
.bg-dark .btn-gold::before, .bg-dark .btn-gold-lux::before, .bg-dark button::before,
footer .btn-gold::before, footer button::before,
[style*="#28211D"] .btn-gold::before, [style*="#28211D"] button::before,
[style*="var(--primary-dark)"] .btn-gold::before, [style*="var(--primary-dark)"] button::before,
[style*="var(--primary-brown)"] .btn-gold::before, [style*="var(--primary-brown)"] button::before,
.dark-card .btn-gold::before, .dark-card button::before,
#custom-slider-modal .btn-gold::before, #custom-slider-modal button::before {
    display: none !important;
    animation: none !important;
}

.bg-dark .btn-gold:hover, .bg-dark .btn-gold-lux:hover, .bg-dark button:hover,
footer .btn-gold:hover, footer button:hover,
[style*="#28211D"] .btn-gold:hover, [style*="#28211D"] button:hover,
.dark-card .btn-gold:hover, .dark-card button:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 3. Banner and Header buttons remain Gold (#D4AF37) with Dark text (#28211D) */
header .btn-gold,
header button,
.hero .btn-gold,
.hero button,
.hero-slider .btn-gold,
.hero-slider button,
.hero-content .btn-gold,
.hero-content button,
.banner-section .btn-gold,
.banner-section button,
.service-banner .btn-gold,
.service-banner button {
    background: #D4AF37 !important;
    color: #28211D !important;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 28px;
    }

    .card-title {
        font-size: 18px;
    }

    .masterpiece-media-box {
        width: min(100%, var(--before-after-width));
    }

    .page-header h1,
    .page-header .section-title,
    .hero h1,
    .hero-content h1,
    .section-header h2,
    .section-header .section-title {
        font-size: 28px !important;
    }

    .overview-content h2,
    .service-info h3,
    .service-info .card-title,
    .technology-info h4,
    .doctor-card h3,
    .dark-card h3,
    .card h3,
    .page-content h2,
    .page-content h3,
    .home-masterpiece-title,
    .card-title {
        font-size: 18px !important;
    }
}
@media (max-width: 320px) {
    .section-title, 
    .page-header h1,
    .page-header .section-title,
    .hero h1,
    .hero-content h1,
    .section-header h2,
    .section-header .section-title {
        font-size: 22px !important;
    }

    .overview-content h2,
    .service-info h3,
    .service-info .card-title,
    .technology-info h4,
    .doctor-card h3,
    .dark-card h3,
    .card h3,
    .page-content h2,
    .page-content h3,
    .home-masterpiece-title,
    .card-title {
        font-size: 16px !important;
    }

    .page-header p,
    .page-header .section-description,
    .hero p,
    .hero-content p,
    .section-header p,
    .section-header .section-description,
    .overview-content p,
    .service-info p,
    .service-info .card-description,
    .technology-info p,
    .dark-card p,
    .page-content p,
    .card p,
    .testimonial-card p,
    .video-info p,
    .card-description {
        font-size: 14px !important;
    }
}