/* --- 1. Global Reset & Core Variables --- */
:root {
    --primary-color: #881337;     /* Elegant corporate burgundy */
    --primary-hover: #6b0c2b;     /* Darker tone for active selections */
    --secondary-bg: #fdfaf9;      /* Warm cream background tint */
    --text-dark: #0f172a;         /* Deep slate for readability */
    --text-light: #475569;        /* Soft gray for sub-descriptions */
    --white: #ffffff;
    --accent-gold: #d97706;       /* Warm amber highlight accent */
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

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

body {
    font-family: var(--font-stack);
    color: var(--text-dark);
    line-height: 1.5;
    background-color: var(--white);
}

a { text-decoration: none; transition: all 0.3s ease; }
li { list-style: none; }


/* --- 2. Header & Navigation Layouts (Normal CSS) --- */
.site-header {
    background-color: #ffffff; /* Solid White */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a; /* Deep Slate Navy */
    letter-spacing: -0.5px;
}

.logo a span { 
    color: #881337; /* Corporate Burgundy */ 
}

.nav-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex: 1; 
}

.main-nav { 
    margin: 0 auto; /* Centers your menu items links */
}

.nav-links { 
    display: flex; 
    gap: 30px; 
}

.nav-links a { 
    color: #475569; /* Soft Slate Gray */
    font-weight: 500; 
    font-size: 16px; 
}

.nav-links a:hover, 
.nav-links a.active { 
    color: #881337; /* Corporate Burgundy */
}

.header-auth { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}

.btn-login { 
    color: #0f172a; /* Deep Slate Navy */
    font-weight: 500; 
}

.btn-login:hover { 
    color: #881337; /* Corporate Burgundy */
}

.btn-signup { 
    background-color: #881337; /* Corporate Burgundy Background */
    color: #ffffff; /* White Text */
    padding: 10px 20px; 
    border-radius: 6px; 
    font-weight: 500; 
}

.btn-signup:hover { 
    background-color: #6b0c2b; /* Darker Burgundy Hover State */
    box-shadow: 0 4px 12px rgba(136, 19, 85, 0.2); 
}

.menu-toggle { 
    display: none; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 26px; 
    height: 18px; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    z-index: 2000; 
    padding: 0; 
}

.menu-toggle .bar { 
    width: 100%; 
    height: 3px; 
    background-color: #0f172a; /* Deep Slate Navy for the Hamburger Lines */
    border-radius: 2px; 
    transition: all 0.3s ease; 
}



/* --- 3. Hero Banner Layout Framework (Normal CSS) --- */
.hero-banner {
    position: relative;
    background-image: url('../images/banner-image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 100%);
    z-index: 1;
}

.hero-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
    width: 100%; 
    position: relative; 
    z-index: 2; 
}

.hero-content { 
    max-width: 700px; 
}

.hero-tagline { 
    display: inline-block; 
    color: #d97706; /* Warm Amber Gold */
    font-weight: 600; 
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 20px; 
    background-color: rgba(217, 119, 6, 0.15); /* Tinted Gold background transparency */
    padding: 6px 14px; 
    border-radius: 20px; 
}

.hero-content h1 { 
    font-size: 52px; 
    line-height: 1.2; 
    font-weight: 800; 
    color: #ffffff; /* Crisp White text */
    margin-bottom: 20px; 
    letter-spacing: -0.5px; 
}

.hero-content p { 
    font-size: 19px; 
    color: #cbd5e1; /* Light slate gray */
    margin-bottom: 40px; 
    line-height: 1.6; 
}

.hero-actions { 
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; 
}

.btn-primary { 
    background-color: #881337; /* Corporate Burgundy background */
    color: #ffffff; /* White text */
    padding: 14px 30px; 
    border-radius: 6px; 
    font-weight: 600; 
}

.btn-primary:hover { 
    background-color: #6b0c2b; /* Darker Burgundy Hover */
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(136, 19, 55, 0.3); 
}

.btn-secondary { 
    background-color: transparent; 
    color: #ffffff; /* White text */
    border: 2px solid rgba(255, 255, 255, 0.6); 
    padding: 12px 28px; 
    border-radius: 6px; 
    font-weight: 600; 
}

.btn-secondary:hover { 
    background-color: #ffffff; /* White background box on hover */
    color: #0f172a; /* Deep Slate Navy text */
    border-color: #ffffff; 
    transform: translateY(-2px); 
}



/* --- 4. Core Services Styles (Normal CSS) --- */
.services-section { 
    padding: 100px 20px; 
    background-color: #fdfaf9; /* Soft, warm cream backdrop */
}

.services-container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.section-title { 
    text-align: center; 
    max-width: 700px; 
    margin: 0 auto 60px auto; 
}

.section-title h2 { 
    font-size: 38px; 
    font-weight: 800; 
    color: #0f172a; /* Deep Slate Navy text */
    margin-bottom: 15px; 
    letter-spacing: -0.5px; 
}

.section-title p { 
    font-size: 16px; 
    color: #475569; /* Soft Slate Gray description */
    line-height: 1.6; 
}

.services-grid { 
    display: flex; 
    justify-content: space-between; 
    gap: 30px; 
    flex-wrap: wrap; 
}

.service-card { 
    flex: 1; 
    min-width: 300px; 
    background-color: #ffffff; /* Crisp Solid White */
    padding: 40px 30px; 
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03); 
    border: 1px solid rgba(71, 85, 105, 0.06); 
    transition: all 0.3s ease; 
}

.service-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 12px 30px rgba(136, 19, 55, 0.06); /* Subtle corporate burgundy glow */
    border-color: rgba(136, 19, 55, 0.1); 
}

.service-icon { 
    font-size: 32px; 
    margin-bottom: 20px; 
    display: inline-block; 
}

.service-card h3 { 
    font-size: 22px; 
    font-weight: 700; 
    color: #0f172a; /* Deep Slate Navy header */
    margin-bottom: 15px; 
}

.service-card p { 
    font-size: 15px; 
    color: #475569; /* Soft Slate Gray text */
    line-height: 1.6; 
    margin-bottom: 25px; 
}

.service-link { 
    color: #881337; /* Corporate Burgundy anchor link */
    font-weight: 600; 
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}




/* --- 5. Info Section Framework (Normal CSS) --- */
.info-section { 
    padding: 100px 20px; 
    background-color: #ffffff; /* Crisp Solid White */
}

.info-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 60px; 
}

.info-text-column { 
    flex: 12; 
    max-width: 580px; 
}

.info-subtitle { 
    display: inline-block; 
    color: #881337; /* Corporate Burgundy */
    font-weight: 600; 
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 15px; 
}

.info-text-column h2 { 
    font-size: 38px; 
    font-weight: 800; 
    color: #0f172a; /* Deep Slate Navy */
    line-height: 1.25; 
    margin-bottom: 25px; 
}

.info-text-column p { 
    font-size: 16px; 
    color: #475569; /* Soft Slate Gray */
    line-height: 1.6; 
    margin-bottom: 20px; 
}

.info-checklist { 
    margin-top: 30px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.check-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
}

.check-item .check-icon { 
    background-color: rgba(136, 19, 55, 0.1); 
    color: #881337; /* Corporate Burgundy */
    font-weight: 700; 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    font-size: 12px; 
}

.info-stats-column { 
    flex: 10; 
    width: 100%; 
}

.stat-card-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.stat-box { 
    background-color: #fdfaf9; /* Soft Warm Cream Background */
    padding: 25px 30px; 
    border-radius: 10px; 
    border-left: 4px solid #cbd5e1; 
    transition: all 0.3s ease; 
}

.stat-box:hover { 
    transform: translateX(5px); 
}

.stat-box.highlighted-box { 
    background-color: #881337; /* Corporate Burgundy Background */
    border-left-color: #d97706; /* Warm Amber Gold Accent Line */
}

.stat-box.highlighted-box .stat-num, 
.stat-box.highlighted-box h4, 
.stat-box.highlighted-box p { 
    color: #ffffff; /* Crisp White text for readability against burgundy */
}

.stat-num { 
    font-size: 32px; 
    font-weight: 800; 
    color: #881337; /* Corporate Burgundy */
    display: block; 
    margin-bottom: 5px; 
}

.stat-box h4 { 
    font-size: 18px; 
    font-weight: 700; 
    margin-bottom: 5px; 
}

.stat-box p { 
    font-size: 14px; 
    color: #475569; /* Soft Slate Gray text */
}



/* --- 6. Subscription Pricing Matrix Styles (Normal CSS) --- */
.pricing-section { 
    padding: 80px 20px 100px 20px; 
    background-color: #fdfaf9; /* Soft Warm Cream Background */
}

.pricing-container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.pricing-grid { 
    display: flex; 
    justify-content: center; 
    align-items: stretch; 
    gap: 30px; 
    flex-wrap: wrap; 
    margin-top: 40px; 
}

.pricing-card { 
    flex: 1; 
    min-width: 300px; 
    max-width: 380px; 
    background-color: #ffffff; /* Crisp Solid White */
    border: 1px solid rgba(71, 85, 105, 0.1); 
    border-radius: 12px; 
    padding: 40px 30px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    position: relative; 
    transition: all 0.3s ease; 
}

.pricing-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05); 
}

.pricing-card.featured { 
    border: 2px solid #881337; /* Corporate Burgundy Border */
    box-shadow: 0 10px 30px rgba(136, 19, 55, 0.08); 
}

.pricing-card .badge { 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #881337; /* Corporate Burgundy */
    color: #ffffff; /* White Text */
    font-size: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 6px 16px; 
    border-radius: 20px; 
}

.card-header { 
    border-bottom: 1px solid rgba(71, 85, 105, 0.08); 
    padding-bottom: 25px; 
    margin-bottom: 25px; 
}

.card-header h3 { 
    font-size: 24px; 
    font-weight: 700; 
    margin-bottom: 8px; 
}

.plan-desc { 
    font-size: 14px; 
    color: #475569; /* Soft Slate Gray */
    line-height: 1.4; 
    margin-bottom: 20px; 
}

.price-box { 
    display: flex; 
    align-items: baseline; 
    color: #0f172a; /* Deep Slate Navy */
}

.price-box .currency { 
    font-size: 24px; 
    font-weight: 600; 
}

.price-box .amount { 
    font-size: 48px; 
    font-weight: 800; 
    letter-spacing: -1px; 
}

.price-box .period { 
    font-size: 16px; 
    color: #475569; /* Soft Slate Gray */
    margin-left: 4px; 
}

.plan-features { 
    flex-grow: 1; 
    margin-bottom: 35px; 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
}

.plan-features li { 
    font-size: 15px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.plan-features li span { 
    font-weight: 700; 
    color: #16a34a; /* Vibrant Green Checkmark */
}

.plan-features li.disabled { 
    color: #94a3b8; /* Muted Slate Gray for Locked Features */
}

.plan-features li.disabled span { 
    color: #cbd5e1; /* Faded Crossmark Color */
}

.btn-plan { 
    display: block; 
    width: 100%; 
    text-align: center; 
    padding: 14px; 
    border-radius: 6px; 
    font-weight: 600; 
    border: 2px solid #881337; /* Corporate Burgundy Border */
    color: #881337; /* Corporate Burgundy Text */
}

.btn-plan:hover { 
    background-color: #881337; /* Corporate Burgundy Solid Fill */
    color: #ffffff; /* White Text */
}

.featured-btn { 
    background-color: #881337; /* Corporate Burgundy Solid Fill */
    color: #ffffff; /* White Text */
}

.featured-btn:hover { 
    background-color: #6b0c2b; /* Darker Burgundy Hover State */
    border-color: #6b0c2b; 
}




/* --- 7. Booking Section Styles (Fixed, Polished & Normal CSS) --- */
.booking-section { 
    padding: 100px 20px; 
    background-color: #ffffff; /* Crisp Solid White */
    border-top: 1px solid rgba(71, 85, 105, 0.06); 
}

.booking-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; /* Aligns both columns nicely at the top */
    gap: 60px; 
}

.booking-text-column { 
    flex: 1.2; 
    max-width: 540px; 
}

.booking-subtitle { 
    display: inline-block; 
    color: #881337; /* Corporate Burgundy */
    font-weight: 600; 
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 15px; 
}

.booking-text-column h2 { 
    font-size: 38px; 
    font-weight: 800; 
    line-height: 1.25; 
    margin-bottom: 25px; 
    color: #0f172a; /* Deep Slate Navy */
}

.booking-text-column p { 
    font-size: 16px; 
    color: #475569; /* Soft Slate Gray */
    margin-bottom: 30px; 
    line-height: 1.6;
}

.booking-notes { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.note-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

/* Solid amber bullet icons */
.note-dot { 
    width: 8px; 
    height: 8px; 
    background-color: #d97706; /* Warm Amber Gold */
    border-radius: 50%; 
    display: inline-block;
    flex-shrink: 0;
}

.note-item p {
    font-size: 15px;
    color: #0f172a; /* Deep Slate Navy */
    margin-bottom: 0;
}

/* Right Side Calendar Layout */
.booking-calendar-column { 
    flex: 1; 
    width: 100%; 
    max-width: 440px; 
}

.calendar-wrapper { 
    background-color: #fdfaf9; /* Soft Warm Cream Background */
    border: 1px solid rgba(71, 85, 105, 0.08); 
    border-radius: 12px; 
    padding: 25px; 
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
}

.calendar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 25px; 
}

.calendar-header h3 { 
    font-size: 18px; 
    font-weight: 700; 
    color: #0f172a; /* Deep Slate Navy */
}

.cal-btn { 
    background: transparent; 
    border: none; 
    font-size: 18px; 
    font-weight: 600; 
    color: #475569; /* Soft Slate Gray */
    cursor: pointer; 
    padding: 5px 12px; 
    border-radius: 6px;
    transition: all 0.2s;
}

.cal-btn:hover {
    background-color: rgba(136, 19, 55, 0.05);
    color: #881337; /* Corporate Burgundy */
}

.calendar-weekdays { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    text-align: center; 
    font-weight: 700; 
    color: #475569; /* Soft Slate Gray */
    font-size: 13px; 
    margin-bottom: 15px; 
}

/* Grid parameters for daily date blocks */
.calendar-days-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 8px; 
}

.calendar-days-grid div { 
    aspect-ratio: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 14px; 
    font-weight: 600;
    color: #0f172a; /* Deep Slate Navy */
    cursor: pointer; 
    border-radius: 50%; /* Clean circular date selection grids */
    transition: all 0.2s ease; 
    min-height: 40px; /* Forces uniform grid track heights */
}

.calendar-days-grid div:hover:not(.empty-day) { 
    background-color: rgba(136, 19, 55, 0.1); 
    color: #881337; /* Corporate Burgundy */
}

.calendar-days-grid div.active-day { 
    background-color: #881337 !important; /* Corporate Burgundy Background */
    color: #ffffff !important; /* Crisp White text */
}

.calendar-days-grid div.empty-day {
    cursor: default;
    background: transparent !important;
}

/* Booking Submission Bar Form */
.booking-form-box { 
    margin-top: 25px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

#selected-date-input { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid rgba(71, 85, 105, 0.15); 
    border-radius: 6px; 
    text-align: center; 
    outline: none; 
    background-color: #f8fafc; 
    font-size: 14px;
    font-weight: 600;
    color: #0f172a; /* Deep Slate Navy */
}

.btn-book { 
    width: 100%; 
    background-color: #881337; /* Corporate Burgundy Solid Fill */
    color: #ffffff; /* White Text */
    border: none; 
    padding: 16px; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 15px;
    cursor: pointer; 
    transition: all 0.3s ease;
}

.btn-book:hover { 
    background-color: #6b0c2b; /* Darker Burgundy Hover State */
    box-shadow: 0 4px 15px rgba(136, 19, 85, 0.2);
}





/* --- 8. Core Footer Styles (Normal CSS) --- */
.site-footer { 
    background-color: #0f172a; /* Deep Slate Navy Background */
    color: #94a3b8; /* Muted slate text for readability */
    padding: 80px 20px 0 20px; 
    border-top: 4px solid #881337; /* Corporate Burgundy top accent border */
}

.footer-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    gap: 50px; 
    flex-wrap: wrap; 
    padding-bottom: 60px; 
}

.footer-column { 
    flex: 1; 
    min-width: 240px; 
}

.footer-column.brand-info { 
    flex: 2; 
    max-width: 500px; 
}

.footer-column.brand-info h3 { 
    font-size: 28px; 
    font-weight: 800; 
    color: #ffffff; /* Crisp Solid White */
    margin-bottom: 18px; 
}

.footer-column.brand-info h3 span { 
    color: #881337; /* Corporate Burgundy logo mark */
}

.footer-column.brand-info p { 
    font-size: 14px; 
    line-height: 1.6; 
    margin-bottom: 15px; 
    color: #cbd5e1; /* Brighter slate gray for description readability */
}

.office-hours { 
    color: #d97706 !important; /* Warm Amber Gold highlight for visibility */
    font-size: 13px !important; 
    margin-top: 20px; 
    font-weight: 600; 
}

.footer-column h4 { 
    color: #ffffff; /* Crisp Solid White headers */
    font-size: 16px; 
    font-weight: 700; 
    margin-bottom: 20px; 
}

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

.footer-links a { 
    color: #94a3b8; 
    font-size: 14px; 
}

.footer-links a:hover { 
    color: #ffffff; /* Turns clean white on mouse hover */
    padding-left: 4px; /* Soft interaction slide shift */
}

.footer-email { 
    color: #ffffff; /* Crisp Solid White text */
    font-weight: 600; 
    font-size: 15px; 
    border-bottom: 2px solid #881337; /* Corporate Burgundy underline indicator */
    display: inline-block; 
}

.footer-email:hover {
    color: #881337; /* Turns burgundy on hover */
    border-color: #ffffff; /* Underline shifts to white on hover */
}

.footer-bottom { 
    border-top: 1px solid rgba(148, 163, 184, 0.1); 
    padding: 25px 0; 
}

.footer-bottom-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 15px; 
    font-size: 13px; 
}

.legal-links { 
    display: flex; 
    gap: 20px; 
}

.legal-links a { 
    color: #64748b; /* Deep muted gray links */
}

.legal-links a:hover { 
    color: #94a3b8; 
}




/* --- 9. Responsive Mobile Layout Core Breakpoints (Normal CSS) --- */
@media (max-width: 992px) {
    .menu-toggle { 
        display: flex; 
    }
    
    .nav-wrapper { 
        position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%; 
        background-color: #ffffff; /* Crisp Solid White Dropdown Drawer backdrop */
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08); 
        padding: 30px; 
        margin-left: 0; 
        display: flex; 
        flex-direction: column; 
        gap: 30px; 
        align-items: center; 
        
        /* Layer depth ordering fix to ensure drawer stays completely on top of banner copy elements */
        z-index: 9999 !important; 
        
        opacity: 0; 
        visibility: hidden; 
        transform: translateY(-20px); 
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    }
    
    .nav-wrapper.active { 
        display: flex !important; 
        opacity: 1; 
        visibility: visible; 
        transform: translateY(0); 
    }
    
    .main-nav { 
        margin-right: 0; 
    }
    
    .nav-links { 
        flex-direction: column; 
        align-items: center; 
        gap: 20px; 
    }
    
    .header-auth { 
        flex-direction: column; 
        width: 100%; 
        gap: 15px; 
    }
    
    .btn-signup, .btn-login { 
        width: 100%; 
        text-align: center; 
        display: block; 
    }
    
    /* Hamburger to X Transformation Mechanics */
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Layout framework transformations from side-by-side rows to stacked columns */
    .hero-container, 
    .info-container, 
    .booking-container { 
        flex-direction: column; 
        text-align: center; 
    }
    
    .hero-content, 
    .info-text-column, 
    .booking-text-column, 
    .info-stats-column, 
    .booking-calendar-column, 
    .footer-column.brand-info { 
        max-width: 100%; 
    }
    
    .hero-actions, 
    .booking-notes { 
        justify-content: center; 
    }
    
    .pricing-grid { 
        flex-direction: column; 
        align-items: center; 
    }
    
    .pricing-card { 
        width: 100%; 
        max-width: 450px; 
    }
}

@media (max-width: 768px) {
    .hero-content h1 { 
        font-size: 36px; 
    }
    
    .services-section, 
    .info-section, 
    .pricing-section, 
    .booking-section { 
        padding: 60px 20px; 
    }
    
    .footer-container { 
        flex-direction: column; 
        gap: 35px; 
    }
    
    .footer-bottom-container { 
        flex-direction: column; 
        text-align: center; 
    }
}



/* --- 10. Floating Go to Top Button Styles (Normal CSS) --- */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #881337; /* Corporate Burgundy */
    color: #ffffff; /* White Arrow */
    border: none;
    border-radius: 50%; /* Perfect circle */
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15);
    z-index: 9998; /* Sits securely on top of layouts but right under mobile breakout drawer */
    
    /* Animation settings: Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visibility status triggered via JavaScript scroll mapping */
.scroll-top-btn.show-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background-color: #6b0c2b; /* Darker Burgundy Hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(136, 19, 55, 0.25);
}

/* Mobile viewport spacing adjustment */
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}