/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */
:root {
    --bg-cream: #FFF8F0;
    --accent-gold: #D4A373;
    --primary-red: #D34836;
    --text-dark: #333;
    --text-light: #555;
    --burgundy: #560319;
}

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

body { 
    background-color: var(--bg-cream); 
    font-family: 'Lato', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden; 
    padding-top: 60px;
}

h1, h2, h3, h4 { 
    color: var(--primary-red); 
    font-family: 'Playfair Display', serif; 
    font-weight: 700; 
}

/* =========================================
   2. GLOBAL ANIMATIONS
   ========================================= */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 1s ease; 
}

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

@keyframes zoomEffect { 
    0% { transform: scale(1); } 
    100% { transform: scale(1.1); } 
}

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

@keyframes iconPulse { 
    0% { transform: scale(1); }
    50% { transform: scale(1.15); color: var(--primary-red); background: #fff0f0; box-shadow: 0 0 15px rgba(211, 72, 54, 0.2); }
    100% { transform: scale(1); }
}

/* =========================================
   3. HERO SECTION 
   ========================================= */
.page-hero {
    position: relative;
    height: 450px; /* Shorter than the homepage hero */
    background-image: url('images/Serviceshero.png'); /* You can change this image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Darkens image slightly for text contrast */
    z-index: 1;
}

.hero-title-container {
    position: relative;
    z-index: 2;
    color: white;
}

.page-title {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    letter-spacing: 5px;
    margin: 10px 0;
    color: white !important;
}

.italic-red {
    font-style: italic;
    color: var(--primary-red);
}

.title-divider {
    width: 80px;
    height: 3px;
    background: var(--accent-gold);
    margin: 20px auto;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .page-hero { height: 350px; }
    .page-title { font-size: 3rem; }
}

/* =========================================
   3.5. RED CALL-TO-ACTION STRIP
   ========================================= */
.cta-strip {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--primary-red) 100%);
    padding: 10px 10px;
    text-align: center; 
    color: white; 
    position: relative;
    box-shadow: 0 10px 40px rgba(86, 3, 25, 0.3);
    margin-top: 0 !important; /* Snaps sections together */
    display: block;
    z-index: 20;
}

.cta-text {
    font-family: 'Playfair Display', serif; 
    font-style: italic;
    font-size: 2rem; 
    margin-bottom: 20px; 
    color: white !important;
}


/* =========================================
   NEW LUXURY TREATMENT SECTIONS
   ========================================= */
.treatment-section {
    padding: 6rem 5%;
    background-color: var(--bg-cream); /* Or #FFF8F0 */
    overflow: hidden;
}

.treatment-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 5rem;
}

/* Reverse layout for Modern Section */
.treatment-container.reverse-layout {
    flex-direction: row-reverse;
}

/* --- 1. THE VISUAL SIDE (VIDEO MOSAIC) --- */
.visual-side {
    flex: 1.2; /* Takes up slightly more space */
    position: relative;
}

.video-mosaic {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Two columns */
    grid-template-rows: 1fr 1fr;      /* Two rows */
    gap: 1.5rem;
    position: relative;
}

/* The Styling for the Video Cards */
.vid-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border: 4px solid #fff; /* White crisp border */
    position: relative;
    z-index: 2;
}

.vid-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* GRID PLACEMENT - TRADITIONAL */
.main-vid {
    grid-column: 1; 
    grid-row: 1 / span 2; /* Main video takes full height on left */
    height: 550px; /* Tall video */
}

.sub-vid-1 {
    grid-column: 2;
    grid-row: 1;
    height: 260px;
    margin-top: 30px; /* Offset for style */
}

.sub-vid-2 {
    grid-column: 2;
    grid-row: 2;
    height: 260px;
    margin-bottom: 30px; /* Offset for style */
}

/* DECORATIVE BACKGROUND SHAPES */
.deco-circle {
    position: absolute;
    width: 300px; height: 300px;
    background: #e6dac8; /* Subtle darker cream */
    border-radius: 50%;
    top: -40px; left: -40px;
    z-index: 1;
    opacity: 0.6;
}

.deco-square {
    position: absolute;
    width: 300px; height: 300px;
    border: 3px solid #D34836; /* Burgundy border */
    bottom: -30px; right: -30px;
    z-index: 1;
    opacity: 0.2;
}


/* --- 2. THE TEXT SIDE --- */
.text-side {
    flex: 1;
}

.tiny-tag {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #D34836; /* Burgundy */
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 50px;
}

/* Add a little line before the tag */
.tiny-tag::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 40px; height: 1px;
    background: #D34836;
}

.editorial-heading {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #222;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.script-accent {
    font-family: 'Great Vibes', cursive;
    color: #D34836;
    font-weight: 400;
    font-size: 4rem; /* Larger script */
    display: block; /* Puts it on new line or next to it */
}

.lead-text {
    font-size: 1.25rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.desc-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    text-align: justify;
}

/* BENEFIT BOX */
.benefit-box {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    border-left: 5px solid #D4A373; /* Gold accent */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.modern-box {
    border-left: 5px solid #D34836; /* Burgundy accent for Modern */
}

.benefit-box h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #222;
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    color: #555;
    display: flex;
    align-items: center;
}

.check-list li i {
    color: #D4A373; /* Gold checkmark */
    margin-right: 15px;
    font-size: 0.9rem;
}

/* =========================================
   MOBILE RESPONSIVE (STACKING)
   ========================================= */
@media (max-width: 1024px) {
    .treatment-container {
        flex-direction: column; /* Stack top to bottom */
        gap: 3rem;
    }
    
    .treatment-container.reverse-layout {
        flex-direction: column; /* Modern section: Image first on mobile too? Or text first? */
    }

    /* On mobile, usually nice to show image first */
    .treatment-container.reverse-layout .visual-side {
        order: -1; 
    }

    .editorial-heading { font-size: 2.8rem; }
    .script-accent { font-size: 3.5rem; }
    
    .main-vid { height: 450px; }
    .sub-vid-1, .sub-vid-2 { height: 210px; }
}

@media (max-width: 768px) {
    .video-mosaic {
        grid-template-columns: 1fr; /* Single column of videos */
        grid-template-rows: auto;
    }

    .main-vid {
        grid-column: 1; grid-row: 1;
        height: 400px;
    }
    
    .sub-vid-1 {
        grid-column: 1; grid-row: 2;
        margin: 0; height: 250px;
    }
    
    .sub-vid-2 {
        display: none; /* Hide 3rd video on small phones to save space */
    }

    .deco-circle, .deco-square {
        width: 150px; height: 150px;
    }
}

/* =========================================
   6. SERVICES SECTION DIVIDER (BURGUNDY BLOCK)
   ========================================= */
.services-divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 5%;
    background-color: var(--burgundy); /* Full burgundy background */
    text-align: center;
    width: 100%;
}

.divider-content {
    max-width: 800px;
}

.services-divider-container .badge-text {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    letter-spacing: 5px;
    color: var(--accent-gold); /* Gold looks best on burgundy */
    margin-bottom: 15px;
    text-transform: uppercase;
}

.services-divider-container .divider-heading {
    font-family: 'Playfair Display', serif;
    font-size: 4rem; /* Larger for a premium look */
    color: #ffffff !important; /* Force white text */
    margin: 0;
}

.services-divider-container .highlight-script {
    font-family: 'Great Vibes', cursive;
    color: var(--accent-gold); /* Makes "Sculpting" pop in gold */
    font-size: 5rem;
    margin-left: 10px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .services-divider-container { padding: 60px 5%; }
    .services-divider-container .divider-heading { font-size: 2.8rem; }
    .services-divider-container .highlight-script { font-size: 3.5rem; }
}

/* =========================================
   7. THE 10 SERVICE BOXES GRID
   ========================================= */
.services-grid-section {
    padding: 40px 10% 100px 10%;
    background-color: var(--bg-cream);
}

.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for desktop */
    gap: 30px;
}

.service-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

.card-image {
    position: relative;
    height: 350px;
    overflow: hidden;
}

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

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

/* Hover Overlay */
.card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(86, 3, 25, 0.4); /* Faint burgundy overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover .card-overlay {
    opacity: 1;
}

/* Rounded Pill Button */
.btn-pill-small {
    background: white;
    color: var(--primary-red);
    padding: 12px 30px;
    border-radius: 100px; /* Perfect roundness */
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.card-info {
    padding: 25px;
    text-align: center;
}

.card-info h3 {
    font-size: 1.4rem;
    color: var(--burgundy);
    margin: 0;
}

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

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

/* =========================================
   3.5. LUXURY VISUAL NAVIGATION (NEW)
   ========================================= */
.treatment-nav-visual {
    padding: 20px 5%; /* Less padding so it fits snugly under hero */
    background-color: white;
}

.nav-visual-container {
    display: flex;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    height: 350px; /* Nice big click area */
}

.nav-card {
    position: relative;
    flex: 1; /* Both take up equal space (50/50) */
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Background Image & Zoom Effect */
.nav-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.nav-card:hover .nav-bg-image {
    transform: scale(1.1); /* Slow zoom on hover */
}

/* Dark Overlay for Text Readability */
.nav-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Darkens photo so text pops */
    transition: background 0.3s ease;
}

.nav-card:hover .nav-overlay {
    background: rgba(0, 0, 0, 0.5); /* Darkens more on hover */
}

/* Typography */
.nav-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.nav-subtitle {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.9;
}

.nav-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin: 0;
    font-weight: 400; /* Editorial thin look */
    color: white !important; /* Force white text */
}

/* Animated Arrow */
.nav-arrow {
    display: inline-block;
    margin-top: 15px;
    font-size: 1.2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    color: var(--accent-gold);
}

.nav-card:hover .nav-arrow {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nav-visual-container {
        flex-direction: column; /* Stack them vertically on phone */
        height: auto;
    }
    .nav-card {
        height: 200px; /* Shorter cards on mobile */
        width: 100%;
    }
}

/* =========================================
   3.6. PREMIUM BENEFITS BANNER
   ========================================= */
.benefits-banner {
    background-color: var(--bg-cream); /* Soft luxury background */
    padding: 35px 5%;
    border-top: 1px solid rgba(212, 163, 115, 0.2); /* Subtle gold border */
    border-bottom: 1px solid rgba(212, 163, 115, 0.2);
}

.benefits-container {
    display: flex;
    justify-content: space-between; /* Spreads items evenly */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allows stacking on mobile */
    gap: 20px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.benefit-icon {
    font-size: 1.2rem;
    color: var(--accent-gold); /* Gold icons for luxury feel */
}

.benefit-text {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--burgundy); 
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The vertical gold lines between items */
.benefit-divider {
    width: 1px;
    height: 25px;
    background-color: var(--burgundy);
    opacity: 0.5;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .benefit-divider { display: none; } /* Hide lines on tablet/mobile */
    .benefits-container {
        justify-content: center; /* Center items in a grid */
        gap: 30px;
    }
    .benefit-item {
        width: 45%; /* 2 items per row */
    }
}

/* =========================================
   SERVICES WRAPPER SECTION
   ========================================= */
.services-wrapper {
    background-color: var(--burgundy); /* Full burgundy block */
    padding: 0 0;
    width: 100%;
    margin-top: -9px;
    margin-bottom: 0;
    display: block;      
    overflow: hidden;
}

/* Neutralize the section immediately before the burgundy wrapper */
section + .services-wrapper {
    margin-top: 0;
}

/* Ensure the hero or previous section doesn't have a bottom margin */
.page-hero, 
.modern-clinical-section {
    margin-bottom: 0 !important;
}

/* Header Text Colors */
.services-divider-container {
    background: transparent;
    text-align: center;
    padding-bottom: 50px;
}

.divider-heading {
    color: #ffffff !important;
    font-size: 3.5rem;
}

.badge-text {
    color: var(--accent-gold);
    letter-spacing: 5px;
}

/* =========================================
   CARDS WITH WHITE HOVER GLOW
   ========================================= */
.services-grid-section {
    background: transparent;
    padding-top: 30;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 4500px;
    margin: 0 auto;
    padding: 0 3%;
}

.service-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s ease;
    width: 100%;
}

/* THE WHITE SHADOW HOVER EFFECT */
.service-card:hover {
    transform: translateY(-10px);
    /* White glow shadow for burgundy background */
    box-shadow: 0 25px 40px rgba(255, 255, 255, 0.593); 
}

.card-info h3 {
    color: var(--burgundy);
    font-size: 1.2rem;
    padding: 20px;
    text-align: center;
}

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

@media (max-width: 768px) {
    .services-container { grid-template-columns: 1fr; }
    .divider-heading { font-size: 2.5rem; }
}

/* =========================================
   MOBILE FIXES (PASTE AT VERY BOTTOM)
   ========================================= */
@media (max-width: 600px) {

    /* --- 1. FIX THE "BENEFITS" (Align Center, No Gaps) --- */
    .benefits-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* 2 items per row */
        gap: 30px 10px; 
        justify-content: center;
        text-align: center;
    }

    .benefit-item {
        width: 100% !important;
        padding-left: 0 !important; /* REMOVED THE 20% GAP */
        justify-content: center !important; 
        flex-direction: column; /* Icon on top */
        gap: 10px;
    }

    .benefit-icon {
        font-size: 2rem !important; 
        margin-bottom: 5px;
    }

    .benefit-text {
        font-size: 0.8rem !important; 
    }

    /* --- 2. FIX THE FOOTER (Force White Background) --- */
    /* Even if footer CSS is in another file, this will override it */
    .brand-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers the logo and text */
        text-align: center !important;
        margin-bottom: 30px;
    }

    .brand-desc {
        max-width: 280px; /* Keeps the text in a nice narrow block */
        margin: 0 auto !important; /* Centers the text block itself */
        color: #555555 !important;
        font-size: 0.95rem !important;
    }

    /* FIXING THE LOGO COLOR */
    .footer-logo-white {
        /* This filter turns the white logo into a dark burgundy/black 
           so it's clear on the white background */
        filter: brightness(0) saturate(100%) invert(18%) sepia(50%) saturate(3475%) hue-rotate(331deg) brightness(88%) contrast(100%) !important;
        max-width: 180px !important;
        margin-bottom: 15px !important;
    }
}