/* Using CSS variables to make the palette easy to manage */
:root {
    --primary-color-rgb: 11, 36, 71; /* RGB version for transparent overlay */
    --accent-color: #A5D7E8;
    --text-primary: #F8F8FF;
    --text-secondary: #EBEBEB;
    --hover-color: #FFFFFF;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 1. Style the new background container and image */
.background-container {
    position: fixed; /* Fixes the image to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Pushes the entire container behind all other content */
}

.background-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This mimics 'background-size: cover' */
}

/* 2. Apply the overlay to the container, not the body */
.background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--primary-color-rgb), 0.85);
    z-index: 1; /* Sits on top of the image but below the content */
}

/* 3. The main content container no longer needs positioning context */
.container-fluid {
    color: var(--text-primary);
}

/* --- The rest of your styles remain IDENTICAL --- */

/* Style the countdown numbers with the accent color */
#countdown .display-2 {
    color: var(--accent-color);
}
/* Style the countdown labels with the secondary text color */
#countdown span {
    color: var(--text-secondary);
}
/* Style the social media icons */
.social-icons a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}
.social-icons a:hover {
    color: var(--hover-color);
}