/* ===================================================================
   AQ Landing Page 
   =================================================================== */

body {
    background-color: #000;
    color: white;
}

/* Layer 1: The full-screen, fixed background */
.aq-landingpage-background {
    position: fixed; /* Pinned to the viewport, removed from flow */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Placed behind all other content */
}

.aq-landingpage-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
}

/* Layer 2: The scrollable content container */
.aq-landingpage-content {
    /* This container is now the main scrolling area */
    height: 100vh;
    overflow-y: auto;
}


.aq-landingpage-content header h1 {
    font-family: 'Anton', sans-serif;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    font-size: 5.8rem;
}

/* The Main Content Area */
.aq-landingpage-content main {
    /* Use min-height to ensure it fills the screen and centers the video */
    min-height: 100vh; 
    padding: -20vh 0; /* Vertical padding */
}

/* The Foreground Video Player */
.aq-landingpage-video-player {
    width: 90%; /* Takes up 90% of its container's width */
    max-width: 1400px; /* Prevents it from being too large on huge screens */
    background-color: #000;
}

.aq-landingpage-content .welcome-text{
    padding: 0 5rem;
}

.aq-landingpage-content .welcome-text a{
    background: #111;
    padding: 15px 40px !important;
}


/* ===================================================================
   Mobile Responsive Adjustments
   =================================================================== */

/* Apply these styles on screens smaller than 768px (tablets and phones) */
@media (max-width: 767.98px) {

    /* --- Header Adjustments --- */

    /* Reduce the main header title font size to prevent overflow */
    .aq-landingpage-content header h1 {
        font-size: 5rem;
        position: absolute;
        width: 50%;
        top: 5vh;
    }

    /* Adjust padding in the header for a more compact look */
    #header-row {
        padding: 12vh 1.5rem !important; /* Use !important to override inline Bootstrap classes */
    }

    /* Make the header columns full-width and stack them */
    #header-row .col-md-3 {
        width: 100%;
        text-align: center; /* Center the title and button */
        margin-bottom: 1.5rem; /* Add space between the text and the logo below it */
    }
    
    #header-row .col-auto {
        width: 100%;
        text-align: center; /* Center the logo */
    }

    /* --- Welcome Text & Button Adjustments --- */

    /* Remove horizontal padding to use the full screen width */
    .aq-landingpage-content .welcome-text {
        padding: 0;
    }

    /* Make the call-to-action button slightly smaller */
    .aq-landingpage-content .welcome-text a {
        padding: 12px 30px !important;
        font-size: 0.9rem;
    }

    /* --- Main Content Padding --- */
    
    /* Reduce the vertical padding in the main area to better fit content */
    .aq-landingpage-content main {
        /* Ensure the main area takes up at least the full height of the viewport */
        min-height: 50vh; 
        
        /* Adjust padding to give some space but allow vertical centering */
        padding: 5vh 1rem; /* Using 1rem for side padding on mobile */
    }
    /* --- Shrinking Header on Scroll (Mobile) --- */

    /* When the header is scrolled, make the padding even smaller */
    .aq-landingpage-content header.scrolled #header-row {
        padding: 1rem !important;
    }

    /* Adjust the logo size for the scrolled state on mobile */
    .aq-landingpage-content header.scrolled img {
        max-height: 40px; /* A smaller final size for the logo */
    }
}