/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Birthstone&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Montserrat:wght@400;600;700;800&family=Poppins:wght@300;400;600;700&family=Tangerine:wght@400;700&display=swap');


/* CSS Variables for Creative Dark Palette */
:root {
    /* Dark Backgrounds */
    --bg-dark-main: #1A1A1A; /* Very dark charcoal for main body/sections */
    --bg-dark-section: #1F1F1F; /* Slightly lighter dark for distinct sections */
    --bg-darker-section: #121212; /* Near black for contrast sections (PS5, Newsletter) */
    --bg-dark-card: #282828; /* Darker grey for card backgrounds */
    --bg-darker-section-alt: #0D0D0D; /* Even deeper dark for cinema card */

    /* Light Text on Dark Backgrounds */
    --text-on-dark: #EAEAEA; /* Off-white for general text */
    --text-light-p: #B0B0B0; /* Lighter grey for secondary paragraphs */
    --text-white-75: rgba(255, 255, 255, 0.75); /* White with opacity */
    --text-white-50: rgba(255, 255, 255, 0.5); /* White with more opacity */

    /* Accent Colors (Pop against dark) */
    --accent-teal: #00ADB5; /* Fresh, modern teal */
    --accent-orange: #FF7F11; /* Warm, energetic orange */
    --accent-green: #8AC926; /* Lively, optimistic green */
    --accent-warning: #FFC107; /* Standard Bootstrap warning yellow */
    --accent-info: #0dcaf0; /* Standard Bootstrap info blue */

    /* Re-purposed Primary Colors for specific accents on dark */
    --primary-deep-blue-accent: var(--accent-teal); /* Using teal for primary accents */
    --success-accent: var(--accent-green);
    --warning-accent: var(--accent-orange);
    --info-accent: var(--accent-info); /* Keeping Bootstrap info blue */


    /* Fonts */
    --font-heading-main: 'Anton', sans-serif; /* Default for H1 unless overridden */
    --font-heading-sub: 'Montserrat', sans-serif; /* For H2, H3 */
    --font-heading-decorative: 'Birthstone', cursive; /* For smaller, stylistic headings */
    --font-paragraph-decorative: 'Tangerine', cursive; /* For short, emphatic paragraphs */
    --font-body: 'Crimson Text', serif; /* For general paragraphs and lists */
    --font-poppins: 'Poppins', sans-serif; /* For specific elements that need sans-serif, e.g. lead in hero */
}

/* Base Body Styles - GLOBAL DARK BACKGROUND */
body {
    font-family: var(--font-body);
    color: var(--text-on-dark); /* Default text color is light */
    line-height: 1.7;
    background-color: var(--bg-dark-main); /* Overall dark background */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading-sub);
    font-weight: 700;
    color: var(--text-on-dark); /* Headings default to light text */
    line-height: 1.2;
}
/* General H1 style, overridden by .hero-content h1 for the main heading */
h1 {
    font-family: var(--font-heading-main);
    font-size: 4.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
h2 {
    font-size: 2.8rem;
    font-weight: 800;
}
h3 {
    font-size: 2.2rem;
    font-weight: 700;
}
h4 {
    font-size: 1.8rem;
    font-weight: 700;
}
h5 {
    font-size: 1.6rem;
    font-weight: 700;
}

p {
    font-family: var(--font-body); /* All paragraphs now use Crimson Text */
    font-weight: 400;
    font-size: 1.15rem; /* Slightly larger for readability on dark */
    color: var(--text-on-dark);
}
.lead {
    font-family: var(--font-poppins); /* Keep lead paragraphs in Poppins for now unless explicitly changed */
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-on-dark);
}

ul li { /* Ensure list items also use Crimson Text */
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--text-on-dark);
}

/* Specific text color classes for dark background */
.text-on-dark { color: var(--text-on-dark) !important; }
.text-light-p { color: var(--text-light-p) !important; }
.text-white { color: var(--text-on-dark) !important; } /* Re-map Bootstrap's text-white */
.text-muted { color: var(--text-light-p) !important; } /* Re-map Bootstrap's text-muted */
.text-white-75 { color: var(--text-white-75) !important; }
.text-white-50 { color: var(--text-white-50) !important; }


/* Navbar */
.navbar {
    background-color: var(--bg-darker-section) !important; /* Navbar is very dark */
}
.navbar-brand .text-white { /* Nav brand text */
    color: var(--text-on-dark) !important;
    font-family: var(--font-heading-sub);
    font-weight: 800;
}
.navbar-nav .nav-link {
    font-weight: 600;
    color: var(--text-on-dark) !important;
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--accent-orange) !important;
}


/* Customizing Bootstrap Buttons with our New Palette */
.btn-primary, .custom-btn-primary {
    background-color: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
    color: var(--text-on-dark) !important; /* Button text on dark accent button */
    font-weight: 700;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    padding: 0.85rem 2.2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover, .custom-btn-primary:hover {
    background-color: #e6700c !important;
    border-color: #e6700c !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Outline Primary Button */
.btn-outline-primary, .custom-btn-outline-primary {
    color: var(--accent-teal) !important;
    border-color: var(--accent-teal) !important;
    background-color: transparent !important;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    padding: 0.85rem 2.2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.btn-outline-primary:hover, .custom-btn-outline-primary:hover {
    background-color: var(--accent-teal) !important;
    color: var(--bg-dark-main) !important; /* Text becomes dark on teal hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Success Button (used for Cinema Booking) */
.btn-success, .custom-btn-success {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: var(--bg-dark-main) !important; /* Button text is dark on green */
    font-weight: 700;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    padding: 0.85rem 2.2rem;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-success:hover, .custom-btn-success:hover {
    background-color: #71b11e !important;
    border-color: #71b11e !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* New CTA Button Style */
.book-now-cta .custom-btn-cta {
    background-color: var(--text-on-dark) !important; /* Light button on orange */
    color: var(--accent-orange) !important; /* Text is orange */
    border: none !important;
    font-weight: 700;
    padding: 1.2rem 3rem;
    border-radius: 50px;
    font-size: 1.4rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.book-now-cta .custom-btn-cta:hover {
    background-color: var(--bg-dark-card) !important; /* Darker on hover */
    color: var(--accent-orange) !important; /* Text stays orange */
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}


/* Hero Section Styles */
.hero-section {
    position: relative;
    /* !!! THIS IS THE LINE FOR YOUR HERO BACKGROUND IMAGE (for fallback if video fails) !!! */
    /* Only use this if the video isn't there, or for a background image fallback */
    /* background: url('images/hero_background.jpg') no-repeat center center/cover; */
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Ensures text aligns center within the section, good fallback */
    color: var(--text-on-dark);
    padding: 4rem 0;
    overflow: hidden;
}

.hero-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0; /* Keep video behind overlay and content */
    transform: translate(-50%, -50%);
    object-fit: cover; /* Ensures video covers the entire section */
}

.hero-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly lighter overlay than previous */
    z-index: 1; /* Keep overlay between video and content */
}

.hero-content {
    position: relative;
    z-index: 2; /* Ensure content is on top */
    padding: 2.5rem;
    max-width: 1100px;
    margin-left: auto; /* Centers the .hero-content block itself */
    margin-right: auto; /* Centers the .hero-content block itself */
    text-align: center; /* Crucial for centering text and inline elements inside */
}

.hero-content h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 4.8rem;
    letter-spacing: 0.08em;
    margin-bottom: 1.8rem;
    text-shadow: 3px 3px 8px rgba(0,0,0,0.9);
    color: var(--text-on-dark);
    text-align: center; /* Explicitly center h1 */
    text-transform: none;
}

.hero-content p {
    font-family: var(--font-poppins);
    font-size: 1.85rem;
    margin-bottom: 3rem;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
    color: var(--text-on-dark);
    text-align: center; /* Explicitly center p */
    font-weight: 300;
}

.hero-content .btn {
    font-size: 1.4rem;
    padding: 1.1rem 2.8rem;
    border-radius: 50px;
}

.hero-content .custom-btn-outline-dark {
    color: var(--text-on-dark) !important;
    border-color: var(--text-on-dark) !important;
    background-color: transparent !important;
}
.hero-content .custom-btn-outline-dark:hover {
    background-color: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
    color: var(--text-on-dark) !important;
}

/* Responsive adjustments for font size and padding */
@media (max-width: 991.98px) {
    .hero-section { min-height: 550px; }
    .hero-content h1 { font-size: 3.8rem; }
    .hero-content p { font-size: 1.6rem; }
}

@media (max-width: 767.98px) {
    .hero-section { min-height: 450px; padding: 2rem 0; }
    .hero-content h1 { font-size: 2.8rem; margin-bottom: 1rem; }
    .hero-content p { font-size: 1.4rem; margin-bottom: 2rem; }
    .hero-content .btn { font-size: 1.2rem; padding: 0.8rem 2rem; }
}

@media (max-width: 575.98px) {
    .hero-section { min-height: 400px; }
    .hero-content { padding: 1.5rem; }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 1.2rem; }
}

/* Section Backgrounds - NEW */
.bg-dark-section {
    background-color: var(--bg-dark-section) !important;
    color: var(--text-on-dark) !important;
}
.bg-dark-section-alt {
    background-color: var(--bg-darker-section) !important;
    color: var(--text-on-dark) !important;
}
.bg-darker-section {
    background-color: var(--bg-darker-section) !important;
    color: var(--text-on-dark) !important;
}
.bg-dark-card {
    background-color: var(--bg-dark-card) !important;
    color: var(--text-on-dark) !important;
}
.rounded-corners-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    overflow: hidden;
}

/* Feature Icons and Text Colors */
.feature-icon {
    color: var(--accent-teal);
    margin-bottom: 1.2rem;
    font-size: 4.2rem;
}
/* Re-mapping accent text colors */
.text-primary-accent { color: var(--accent-teal) !important; }
.text-success-accent { color: var(--accent-green) !important; }
.text-warning-accent { color: var(--accent-orange) !important; }
.text-info-accent { color: var(--accent-info) !important; }
.text-accent-orange-price { color: var(--accent-orange) !important; }


/* Operating Hours Card Backgrounds - now using dark cards */
.operating-hours .card-body h5 {
    font-family: var(--font-heading-sub);
    font-weight: 700;
    font-size: 1.7rem;
}
.operating-hours .card-text.fs-5 {
    font-family: var(--font-heading-sub);
    font-weight: 700;
}


/* Specific styling for the PlayStation 5 section heading to use Birthstone */
.ps5-section h2 {
    font-family: var(--font-heading-decorative) !important;
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--accent-teal) !important;
    font-weight: 400;
}
/* This class was used on the h2 of the PS5 section, but the element selector above is more specific. */
/* Keeping this for general use if needed elsewhere, but it's not overriding ps5-section h2 anymore */
.text-accent-blue { /* Used for the h2 in ps5 section which is now overridden */
    color: var(--accent-teal) !important;
}


/* Our Commitment Section - Applying Tangerine to the lead paragraph */
.our-commitment-lead {
    font-family: var(--font-paragraph-decorative);
    font-size: 2.2rem;
    line-height: 1.3;
    color: var(--accent-orange) !important; /* Tangerine stands out with orange */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    font-weight: 700;
}


/* Card hover effect */
.custom-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.75rem;
    overflow: hidden;
    border: none;
    background-color: var(--bg-dark-card); /* Cards also use a dark background */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Stronger shadow on dark bg */
}

.custom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45);
}

.custom-card .card-img-top {
    height: 240px;
    object-fit: cover;
}
.custom-card .card-body h5 {
    color: var(--text-on-dark); /* Card titles are light */
    font-weight: 700;
    font-family: var(--font-heading-sub);
    font-size: 1.6rem;
}
.custom-card .card-body p {
    color: var(--text-light-p); /* Card body text is lighter grey */
    font-size: 1.05rem; /* Slightly smaller than general p but still good */
}


/* Cinema Booking Card */
.booking-card {
    background-color: var(--bg-darker-section-alt); /* Deepest dark for this prominent card */
    color: var(--text-on-dark);
    border-radius: 1rem !important;
    overflow: hidden;
}
.booking-card .card-body {
    padding: 3rem !important;
}
.booking-card h2, .booking-card h4 {
    color: var(--text-on-dark) !important;
    font-family: var(--font-heading-sub);
    font-weight: 700;
}
.booking-card .list-group-item {
    background-color: transparent !important;
    border: none;
    color: var(--text-light-p); /* List items in cinema card */
    font-size: 1.1rem;
    padding-left: 0;
}
.booking-card .list-group-item i {
    color: var(--accent-teal);
    margin-right: 0.75rem;
}
.booking-card .card-text.text-light-p {
    color: var(--text-light-p) !important;
}
.booking-card img {
    border-radius: 1rem 0 0 1rem !important;
}
@media (max-width: 767.98px) {
    .booking-card img {
        border-radius: 1rem 1rem 0 0 !important;
    }
}


/* Event Cards */
.event-card {
    background-color: var(--bg-dark-card); /* Event cards also dark */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}
.event-card .card-body {
    padding: 2rem;
}
.event-card .card-title {
    font-family: var(--font-heading-decorative);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--accent-orange); /* Event titles pop with orange */
    margin-bottom: 1rem;
    line-height: 1.1;
}
.event-card .card-text strong {
    color: var(--accent-teal); /* Highlight event themes with teal */
}
.event-card .fs-1 {
    font-size: 4rem !important;
}


/* Video Gallery */
.video-gallery .card-title {
    font-family: var(--font-heading-sub);
    font-weight: 700;
    color: var(--text-on-dark);
}
.video-gallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Custom styles for Location Carousel */
.carousel-location-img {
    height: 400px; /* Adjust as needed */
    object-fit: cover;
    object-position: center;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background for captions */
    padding: 10px 20px;
    border-radius: 8px;
    bottom: 20px; /* Position above the bottom edge */
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%; /* Limit width on larger screens */
    color: var(--text-on-dark);
}

.carousel-caption h5 {
    font-family: var(--font-heading-sub);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--accent-orange); /* Caption headings stand out */
}

.carousel-caption p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 0;
    color: var(--text-light-p); /* Caption paragraphs are lighter */
}

/* Make sure indicators and controls are visible on dark background */
.carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: var(--accent-orange); /* Active indicator is orange */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1); /* Makes the icons white on dark background */
}


/* Newsletter Signup */
.newsletter-section {
    background-color: var(--bg-darker-section) !important;
}
.newsletter-section .form-control {
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.8rem 1.2rem;
    font-size: 1.1rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-on-dark);
}
.newsletter-section .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.newsletter-section .form-control:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 0.25rem rgba(255, 127, 17, 0.4);
    background-color: rgba(255, 255, 255, 0.2);
}
.newsletter-section .btn {
    border-radius: 0.5rem;
}

/* Footer */
.footer {
    background-color: var(--bg-darker-section) !important;
    font-family: var(--font-body); /* Footer text can be Crimson */
}
.footer .fab, .footer .bi {
    transition: color 0.3s ease, transform 0.2s ease;
}
.footer .fab:hover, .footer .bi:hover {
    color: var(--accent-orange) !important;
    transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    h1 {
        font-size: 3.5rem;
    }
    h2 {
        font-size: 2.3rem;
    }
    .hero-section {
        min-height: 550px;
    }
    .hero-content h1 { /* Apply Times New Roman responsiveness */
        font-size: 3.5rem;
    }
    .hero-content p {
        font-size: 1.4rem;
    }
    .hero-content .btn {
        font-size: 1.2rem;
        padding: 0.9rem 2.2rem;
    }
    .booking-card img {
        height: 250px;
    }
    .ps5-section h2, .event-card .card-title {
        font-size: 3rem;
    }
    .our-commitment-lead {
        font-size: 1.8rem;
    }
    .carousel-location-img {
        height: 300px; /* Adjust height for medium screens */
    }
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 2.5rem;
        letter-spacing: 0.03em;
    }
    h2 {
        font-size: 2rem;
    }
    p {
        font-size: 1.05rem; /* Ensure Crimson Text is still readable */
    }
    .lead {
        font-size: 1.1rem;
    }
    .hero-section {
        min-height: 450px;
        padding: 2rem 0;
    }
    .hero-content h1 { /* Apply Times New Roman responsiveness */
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1.1rem;
    }
    .hero-content .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
        font-size: 1rem;
    }
    .hero-content .btn:last-child {
        margin-bottom: 0;
    }
    .navbar-brand img {
        width: 60px;
        height: 60px;
    }
    .navbar-brand span {
        font-size: 1.1rem;
    }
    .feature-icon {
        font-size: 3rem;
    }
    .booking-card .card-body {
        padding: 2rem !important;
    }
    .ps5-section h2, .event-card .card-title {
        font-size: 2.2rem;
    }
    .our-commitment-lead {
        font-size: 1.4rem;
    }
    .book-now-cta .custom-btn-cta {
        font-size: 1.2rem;
        padding: 0.9rem 2.2rem;
    }
    .carousel-location-img {
        height: 250px; /* Adjust height for small screens */
    }
    .carousel-caption {
        font-size: 0.8rem;
        padding: 8px 15px;
    }
    .carousel-caption h5 {
        font-size: 1.2rem;
    }
}

@media (max-width: 575.98px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    .hero-section {
        min-height: 400px;
    }
    .hero-content h1 { /* Apply Times New Roman responsiveness */
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 0.95rem;
    }
    .hero-content .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
        font-size: 1rem;
    }
    .hero-content .btn:last-child {
        margin-bottom: 0;
    }
    .ps5-section h2, .event-card .card-title {
        font-size: 1.8rem;
    }
    .our-commitment-lead {
        font-size: 1.2rem;
    }
    .book-now-cta .custom-btn-cta {
        font-size: 1rem;
        padding: 0.75rem 1.8rem;
    }
    .carousel-location-img {
        height: 200px; /* Further adjust height for very small screens */
    }
}

/* Animations - No Change Needed */
.animated-section .animate-fade-in-up,
.animated-section .animate-fade-in-left,
.animated-section .animate-fade-in-right {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animated-section.is-visible .animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.animated-section .animate-fade-in-left {
    transform: translateX(-20px);
}
.animated-section.is-visible .animate-fade-in-left {
    opacity: 1;
    transform: translateX(0);
}

.animated-section .animate-fade-in-right {
    transform: translateX(20px);
}
.animated-section.is-visible .animate-fade-in-right {
    opacity: 1;
    transform: translateX(0);
}


/* Animation Delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }

/* --- Contact Page Specific Styles --- */

/* Page Hero Section (similar to Home page hero, but simpler) */
.page-hero-section {
    background-color: var(--bg-dark-section); /* Use a dark background */
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.page-hero-section h1 {
    font-family: var(--font-heading-main); /* Anton for the contact page main heading */
    font-size: 3.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: var(--text-on-dark);
}
.page-hero-section .lead {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-light-p);
}


/* Contact Card Styling (for both form and info/map) */
.contact-card {
    background-color: var(--bg-dark-card); /* Dark background for the cards */
    color: var(--text-on-dark);
    border-radius: 1rem;
    padding: 2.5rem;
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4); /* Stronger shadow on dark bg */
}
.contact-card h2 {
    font-family: var(--font-heading-sub);
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--primary-deep-blue-accent); /* Accent color for card headings */
}
.contact-card p.text-light-p {
    color: var(--text-light-p);
}

/* Form Styling within Contact Card */
.contact-card .form-label {
    font-weight: 600;
    color: var(--text-on-dark) !important; /* Label text is light */
    margin-bottom: 0.5rem;
}
.contact-card .form-control {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white on dark */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-on-dark); /* Input text is light */
    padding: 0.8rem 1.2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}
.contact-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Placeholder text is lighter */
}
.contact-card .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly brighter on focus */
    border-color: var(--accent-orange); /* Orange border on focus */
    box-shadow: 0 0 0 0.25rem rgba(255, 127, 17, 0.4); /* Orange shadow on focus */
    color: var(--text-on-dark);
}
.contact-card textarea.form-control {
    min-height: 120px; /* Make textarea taller */
    resize: vertical; /* Allow vertical resizing */
}


/* Contact Info Blocks */
.contact-info-block h4 {
    font-family: var(--font-heading-sub);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--text-on-dark);
}
.contact-info-block i {
    font-size: 1.8rem;
}
.contact-info-block a.text-white {
    transition: color 0.3s ease;
}
.contact-info-block a.text-white:hover {
    color: var(--accent-orange) !important;
}

/* Google Map Embed Container */
.map-container {
    position: relative;
    padding-bottom: 75%; /* 4:3 aspect ratio (height is 75% of width) */
    height: 0;
    overflow: hidden;
    border-radius: 1rem; /* Match card border-radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem; /* Inherit parent border-radius */
}

/* Footer specific for contact page: Remove inline styles and integrate */
.footer.bg-dark { /* This targets the old footer style */
    background-color: var(--bg-darker-section) !important;
}

/* Responsive adjustments for Contact Page */
@media (max-width: 991.98px) {
    .page-hero-section h1 {
        font-size: 3rem;
    }
    .page-hero-section .lead {
        font-size: 1.3rem;
    }
    .contact-card {
        padding: 2rem;
    }
    .contact-card h2 {
        font-size: 2rem;
    }
    .contact-info-block h4 {
        font-size: 1.5rem;
    }
    .map-container {
        padding-bottom: 65%; /* Adjust map aspect ratio for smaller screens */
    }
}

@media (max-width: 767.98px) {
    .page-hero-section h1 {
        font-size: 2.5rem;
    }
    .page-hero-section .lead {
        font-size: 1.1rem;
    }
    .contact-card {
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    .contact-card h2 {
        font-size: 1.8rem;
    }
    .contact-info-block h4 {
        font-size: 1.3rem;
    }
    .map-container {
        padding-bottom: 50%; /* Further adjust map aspect ratio for small screens */
    }
}
/* --- Our Spaces Page Specific Styles --- */

/* Space Card Styling */
.space-card {
    background-color: var(--bg-dark-card); /* Dark background for the cards */
    color: var(--text-on-dark);
    border-radius: 1rem;
    padding: 2.25rem; /* Increased padding for more space inside the card */
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow on dark bg */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.space-card:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* More pronounced shadow on hover */
}

.space-card .card-img-top {
    /* Removed fixed height, letting it scale with width */
    width: 100%;
    max-height: 280px; /* Set a max height for larger images */
    object-fit: cover;
    border-radius: 0.75rem; /* Rounded corners for images */
    margin-bottom: 1.5rem; /* Increased margin below image */
}

.space-card .card-title {
    font-family: var(--font-heading-sub); /* Use Montserrat for card titles */
    font-weight: 700;
    font-size: 2.2rem; /* Significantly larger title */
    color: var(--accent-teal); /* Teal accent for titles */
    margin-bottom: 1rem; /* More space below title */
    line-height: 1.2;
}

.space-card .card-text {
    font-family: var(--font-body); /* Crimson Text for paragraphs */
    font-size: 1.15rem; /* Slightly larger body text */
    color: var(--text-light-p); /* Lighter grey for body text */
    margin-bottom: 2rem; /* More space below text before button */
}

/* Responsive adjustments for smaller screens to maintain layout */
@media (max-width: 991.98px) { /* On tablets and smaller (md and below) */
    .space-card {
        padding: 1.75rem;
    }
    .space-card .card-title {
        font-size: 2rem;
    }
    .space-card .card-text {
        font-size: 1.05rem;
    }
    .space-card .card-img-top {
        max-height: 250px;
    }
}

@media (max-width: 767.98px) { /* On mobile devices */
    .space-card {
        padding: 1.25rem;
    }
    .space-card .card-title {
        font-size: 1.6rem;
    }
    .space-card .card-text {
        font-size: 1rem;
    }
    .space-card .card-img-top {
        max-height: 200px;
    }
}
/* --- Book Now Page Specific Styles --- */

/* Booking Card (reused for both calendar and form) */
.booking-card {
    background-color: var(--bg-dark-card); /* Dark background for the cards */
    color: var(--text-on-dark);
    border-radius: 1rem;
    padding: 2.5rem;
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4); /* Stronger shadow on dark bg */
}

.booking-card h2 {
    font-family: var(--font-heading-sub);
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--primary-accent); /* Accent color for card headings */
}

.booking-card p.text-light-p {
    color: var(--text-light-p);
}

/* Form elements within booking card */
.booking-card .form-label {
    font-weight: 600;
    color: var(--text-on-dark) !important; /* Label text is light */
    margin-bottom: 0.5rem;
}
.booking-card .form-control,
.booking-card textarea.form-control {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white on dark */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-on-dark); /* Input text is light */
    padding: 0.8rem 1.2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}
.booking-card .form-control::placeholder,
.booking-card textarea.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6); /* Placeholder text is lighter */
}
.booking-card .form-control:focus,
.booking-card textarea.form-control:focus {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly brighter on focus */
    border-color: var(--accent-orange); /* Orange border on focus */
    box-shadow: 0 0 0 0.25rem rgba(255, 127, 17, 0.4); /* Orange shadow on focus */
    color: var(--text-on-dark);
}
.booking-card textarea.form-control {
    min-height: 100px; /* Make textarea taller */
    resize: vertical; /* Allow vertical resizing */
}

/* Calendar Grid Styling */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns for days of the week */
    gap: 5px; /* Space between days */
    text-align: center;
    font-family: var(--font-poppins);
    margin-top: 1rem;
}

.day-name {
    font-weight: 600;
    padding: 0.5rem 0;
    color: var(--text-on-dark);
}

.calendar-days {
    display: contents; /* Allows children to participate in grid layout directly */
}

.calendar-day {
    padding: 0.75rem 0.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    font-weight: 500;
    color: var(--text-on-dark); /* Default day text color */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px; /* Ensure consistent height for days */
}

.calendar-day.empty {
    background-color: transparent;
    cursor: default;
}

/* Availability Colors */
.day-available {
    background-color: rgba(76, 175, 80, 0.1); /* Light green for available */
    border: 1px solid var(--success-accent);
    color: var(--success-accent);
}
.day-available:hover {
    background-color: var(--success-accent);
    color: var(--bg-dark-main);
    transform: scale(1.05);
}

.day-booked {
    background-color: rgba(220, 53, 69, 0.1); /* Light red for booked */
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    cursor: not-allowed;
}
.day-booked:hover {
    background-color: rgba(220, 53, 69, 0.15); /* Slight hover for visual feedback, but still not allowed */
}

.day-special {
    background-color: rgba(255, 165, 0, 0.1); /* Light orange for special events */
    border: 1px solid var(--accent-orange);
    color: var(--accent-orange);
}
.day-special:hover {
    background-color: var(--accent-orange);
    color: var(--bg-dark-main);
    transform: scale(1.05);
}

.day-today {
    border: 2px solid var(--primary-accent); /* Highlight today's date with teal border */
    font-weight: bold;
}

.day-selected {
    background-color: var(--primary-accent) !important; /* Teal for selected date */
    color: var(--bg-dark-main) !important; /* Dark text on selected date */
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}

/* Legend Styling */
.legend-item {
    display: flex;
    align-items: center;
    margin-right: 1.5rem;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-right: 0.75rem;
    border: 1px solid transparent; /* Default border */
}

.legend-available { background-color: var(--success-accent); border-color: var(--success-accent); }
.legend-booked { background-color: var(--danger-color); border-color: var(--danger-color); }
.legend-special { background-color: var(--accent-orange); border-color: var(--accent-orange); }

/* Space Selection Cards (Scrollable) */
.space-selection-container {
    max-height: 400px; /* Max height for scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 15px; /* Space for scrollbar */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-radius: 0.75rem;
    padding: 1rem;
}

/* Custom scrollbar for dark theme */
.space-selection-container::-webkit-scrollbar {
    width: 8px;
}

.space-selection-container::-webkit-scrollbar-track {
    background: var(--bg-darker-section);
    border-radius: 10px;
}

.space-selection-container::-webkit-scrollbar-thumb {
    background: var(--primary-accent);
    border-radius: 10px;
}

.space-selection-container::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}


.space-option-card {
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
}

.space-option-card:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--primary-accent);
}

.space-option-card .form-check-input:checked + .form-check-label {
    color: var(--primary-accent) !important;
    font-weight: 600;
}

.space-option-card .form-check-input:checked ~ p {
    color: var(--primary-accent) !important;
}

.space-option-card .form-check-input {
    margin-top: 0.3rem;
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.1);
}
.space-option-card .form-check-input:checked {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
}
.space-option-card .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25);
}

.text-light-p-sm {
    font-size: 0.95rem;
    color: var(--text-light-p);
}


/* Responsive adjustments for Booking Page */
@media (max-width: 991.98px) {
    .booking-card {
        padding: 2rem;
    }
    .booking-card h2 {
        font-size: 2rem;
    }
    .calendar-day {
        min-height: 40px;
        font-size: 0.9rem;
    }
    .space-selection-container {
        max-height: 300px;
    }
    .space-option-card .form-check-label {
        font-size: 0.95rem;
    }
    .text-light-p-sm {
        font-size: 0.85rem;
    }
}

@media (max-width: 767.98px) {
    .booking-card {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    .booking-card h2 {
        font-size: 1.8rem;
    }
    .calendar-grid {
        gap: 3px;
    }
    .calendar-day {
        min-height: 35px;
        font-size: 0.85rem;
        padding: 0.5rem 0.1rem;
    }
    .legend-item {
        margin-right: 1rem;
        font-size: 0.9rem;
    }
    .legend-color {
        width: 16px;
        height: 16px;
    }
    .space-selection-container {
        max-height: 250px;
    }
    .space-option-card .form-check-label {
        font-size: 0.9rem;
    }
    .text-light-p-sm {
        font-size: 0.8rem;
    }
}
/* --- About Us Page Specific Styles --- */

/* About Card Styling (reused for Who We Are & Impact sections) */
.about-card {
    background-color: var(--bg-dark-card); /* Dark background for the cards */
    color: var(--text-on-dark);
    border-radius: 1rem;
    padding: 2rem;
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow on dark bg */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px); /* Subtle lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* More pronounced shadow on hover */
}

.about-card i {
    font-size: 3.5rem; /* Large icons */
    margin-bottom: 1rem;
    display: block; /* Ensure icon takes full width for centering */
    text-align: center; /* Center icons */
}

.about-card h3 {
    font-family: var(--font-heading-sub); /* Montserrat for card titles */
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--text-on-dark); /* Card titles are light */
    margin-bottom: 0.75rem;
    text-align: center; /* Center titles */
}

.about-card p {
    font-family: var(--font-body); /* Crimson Text for paragraphs */
    font-size: 1.05rem;
    color: var(--text-light-p); /* Lighter grey for body text */
    text-align: center; /* Center paragraphs */
}

/* Video Placeholder Styling */
.ratio.rounded {
    border-radius: 1rem !important; /* Ensure video containers are rounded */
    overflow: hidden; /* Hide overflow for rounded corners */
}

/* Specific text color for small paragraph under videos */
.text-light-p-sm {
    font-size: 0.9rem;
    color: var(--text-light-p);
}

/* Responsive adjustments for About Us Page */
@media (max-width: 991.98px) {
    .about-card {
        padding: 1.5rem;
    }
    .about-card i {
        font-size: 3rem;
    }
    .about-card h3 {
        font-size: 1.6rem;
    }
    .about-card p {
        font-size: 1rem;
    }
}

@media (max-width: 767.98px) {
    .about-card {
        padding: 1.25rem;
        margin-bottom: 1.5rem; /* Add vertical spacing when stacked */
    }
    .about-card i {
        font-size: 2.8rem;
    }
    .about-card h3 {
        font-size: 1.4rem;
    }
    .about-card p {
        font-size: 0.95rem;
    }
    .text-light-p-sm {
        font-size: 0.8rem;
    }
}
/* --- Booking Page Hero Background Video Style --- */
/* Ensure the section has relative positioning for the video to be absolute within it */
.page-hero-section {
    min-height: 400px; /* Adjust height as needed for hero section */
    position: relative; /* Essential for positioning the video absolutely within it */
    overflow: hidden; /* Hide video overflow */
    display: flex; /* Helps center content vertically */
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content */
    padding-top: 5rem; /* Add padding to push content down if needed */
    padding-bottom: 5rem; /* Add padding to push content up if needed */
}

.booking-hero-video { /* This class is applied to the <video> tag in book.html */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire area without distortion */
    z-index: -1; /* Puts the video behind other content */
    filter: brightness(0.8); /* Slightly darken the video for better text contrast, adjust as needed */
}

.booking-hero-overlay { /* This class is applied to the overlay div in book.html */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* Semi-transparent dark overlay */
    z-index: 0; /* Ensures overlay is above the video but below content */
}

/* Ensure content within this specific hero is positioned correctly on top */
.page-hero-section .container {
    position: relative;
    z-index: 1; /* Ensures text and other content appear above the overlay */
}

/* Responsive adjustments for Booking Page Hero Section */
@media (max-width: 767.98px) {
    .page-hero-section {
        min-height: 300px; /* Smaller height on mobile */
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}
/* Custom styles for School Activities Carousel */
.carousel-img {
    height: 200px; /* Increased from 120px - Adjust this to your desired height */
    object-fit: cover;
    object-position: center;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 8px;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    color: var(--text-on-dark);
}

.carousel-caption h5 {
    font-family: var(--font-heading-sub);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--accent-orange);
}

.carousel-caption p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    margin-bottom: 0;
    color: var(--text-light-p);
}

/* Ensure indicators and controls are visible on dark background */
.carousel-indicators {
    bottom: 5px;
}

.carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin: 0 4px;
}

.carousel-indicators .active {
    background-color: var(--accent-orange);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}

/* Responsive adjustments for carousel */
@media (max-width: 991.98px) {
    .carousel-img {
        height: 150px; /* Increased from 90px for tablets */
    }
    .carousel-caption {
        padding: 6px 10px;
        bottom: 6px;
    }
    .carousel-caption h5 {
        font-size: 0.95rem;
    }
    .carousel-caption p {
        font-size: 0.7rem;
    }
}

@media (max-width: 767.98px) {
    .carousel-img {
        height: 120px; /* Increased from 70px for mobile */
    }
    .carousel-caption {
        padding: 4px 8px;
        max-width: 95%;
        bottom: 3px;
    }
    .carousel-caption h5 {
        font-size: 0.8rem;
        margin-bottom: 1px;
    }
    .carousel-caption p {
        font-size: 0.65rem;
    }
    .carousel-indicators {
        bottom: 2px;
    }
}