/* Ensure the html and body cover the full height and width */
html, body {
    max-height: 100vh;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Hero Section Full-Width */
.hero {
    position: relative;
    text-align: center;
    color: white;
    max-width: 100vw;
    margin-left: 0px;
    margin-top: auto; /* Adjust this value to pull the hero section up to align with the navbar */
}

    .hero img {
        width: 100%;
        height: auto;
        display: block;
        filter: brightness(60%);
    }

    /* Absolutely positioned text inside the hero */
    .hero h1,
    .hero p {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
        margin: 0;
        padding: 0;
    }

    .hero h1 {
        top: 75%;
        font-size: 3rem;
    }

    .hero p {
        top: 95%;
        font-size: 1.25rem;
    }

/* Focus Styles */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #090933;
}

/* Responsive font-size scaling */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}