#footer {
  padding: 20px;
  background-color: unset;
}

/* --- Core Styles for HTML/Body to support fullscreen elements --- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
    position: relative; /* Needed for body to correctly contain fixed elements in some contexts */
    width: 100%; /* Ensure full width */
}

body {
    /* We want the body to primarily hold the .content-wrapper, which will be centered */
    display: flex; /* Use flexbox on body to center its child vertically */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* --- Video Background Container Styling --- */
.vid-bg {
    position: fixed; /* Fixes the video to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2; /* Puts it behind everything else */
    background-color: #000; /* Fallback background color if video fails to load/play */
	opacity: 0.7;
}

.vid-bg video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the video visually */
    object-fit: cover; /* Ensures the video covers the entire container */
    filter: brightness(0.7); /* Adjust brightness (0.7 = 70% brightness) */
}

/* --- Video Overlay for Mid-Page Fade Effect --- */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Sits on top of the video, but behind the content */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,      /* Starts with a light overlay at the very top */
        rgba(0, 0, 0, 0.2) 40%,     /* Stays light until 40% down the screen */
        rgba(0, 0, 0, 0.8) 70%,     /* Fades to 80% opaque black by 70% down */
        rgba(0, 0, 0, 1) 100%       /* Fully opaque black at the bottom */
    );
    /* The 100% opaque black at the bottom should match your background-color of the card/footer area
       for a seamless blend. Adjust the percentage stops (40%, 70%) and opacities (0.2, 0.8, 1)
       to fine-tune the fade to your liking. */
}

/* --- Content Wrapper to ensure content is on top and centered --- */
.content-wrapper {
    position: relative; /* Crucial for z-index to work */
    z-index: 1; /* Ensures your content is on top of the video and overlay */
    width: 100%; /* Take full available width */
    max-width: 800px; /* Limit content width as before for readability */
    flex-shrink: 0; /* Prevent content-wrapper from shrinking */
    box-sizing: border-box; /* Include padding in element's total width and height */
    padding: 20px; /* Add some overall padding to ensure content isn't flush with edges */
    /* Removed min-height from here, as body flex handles vertical centering of this wrapper */
}

/* Optional: Re-add animation if desired, applied directly to the main card */
#nrfk-alert {
    animation: fadeIn 1.5s ease-out; /* Smooth fade-in effect for the main content card */
}

/* --- Keyframe for fade-in animation (ensure this is present if using animation) --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 15px; /* Adjust padding on smaller screens */
    }
}