.nos-hero-section {
        height: 100vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        text-align: center;
    }
    .nos-hero-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.6);
    }
    .nos-hero-content {
        position: relative;
        z-index: 10;
        padding: 1rem;
        color: var(--off-white-color);
    }
    .nos-hero-title {
        font-size: 3.75rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    }
    .nos-hero-subtitle {
        margin-top: 1rem;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--highlight-color);
    }
    .nos-hero-button {
        margin-top: 2rem;
        display: inline-block;
        background-color: var(--highlight-color);
        color: var(--text-color);
        font-weight: bold;
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        font-size: 1.125rem;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }
    .nos-hero-button:hover {
        transform: scale(1.05);
        background-color: #9ca57d;
    }

    .nos-content-card {
        display: block;
        position: relative;
        width: 100%;
        height: 55vw;
        overflow: hidden;
        background: #333;
    }
    .nos-content-card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease-in-out;
    }
    .nos-content-card:hover .nos-content-card-img {
        transform: scale(1.1);
    }
    .nos-content-card-overlay {
        position: absolute;
        inset: 0;
        transition: background-color 0.3s ease;
    }
    .nos-content-card-title-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nos-content-card-title {
        color: var(--off-white-color);
        font-family: "Bebas Neue", sans-serif;
        font-size: 2.5rem;
        text-align: center;
        padding: 1rem;
        letter-spacing: 0.05em;
        transition: transform 0.3s ease;
        color: white;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    }
    .nos-content-card:hover .nos-content-card-title {
        transform: scale(1.1);
    }

html:not(.dark) #card-album .nos-content-card-overlay {
    background-color: rgba(94, 111, 82, 0.6);
}
html:not(.dark) #card-video .nos-content-card-overlay {
    background-color: rgba(127, 61, 56, 0.6);
}
html:not(.dark) #card-event .nos-content-card-overlay {
    background-color: rgba(170, 142, 85, 0.6);
}
html:not(.dark) #card-gallery .nos-content-card-overlay {
    background-color: rgba(181, 131, 90, 0.6);
}
html:not(.dark) #card-lineup .nos-content-card-overlay {
    background-color: rgba(139, 111, 71, 0.6);
}

html:not(.dark) #card-album:hover .nos-content-card-overlay {
    background-color: rgba(94, 111, 82, 0.5);
}
html:not(.dark) #card-video:hover .nos-content-card-overlay {
    background-color: rgba(127, 61, 56, 0.5);
}
html:not(.dark) #card-event:hover .nos-content-card-overlay {
    background-color: rgba(170, 142, 85, 0.5);
}
html:not(.dark) #card-gallery:hover .nos-content-card-overlay {
    background-color: rgba(181, 131, 90, 0.5);
}
html:not(.dark) #card-lineup:hover .nos-content-card-overlay {
    background-color: rgba(139, 111, 71, 0.5);
}

    html.dark .nos-content-card-overlay {
        background-color: rgba(0, 0, 0, 0.6);
    }
    html.dark .nos-content-card:hover .nos-content-card-overlay {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .nos-footer {
        background-color: var(--secondary-color);
        border-top: 1px solid rgba(174, 184, 141, 0.5);
        padding: 1.5rem 1rem;
        text-align: center;
        color: var(--light-cream-color);
    }
    html.dark .nos-footer {
        border-color: #374151;
        color: var(--footer-text-color, #9ca3af);
    }

    .nos-hidden {
        display: none !important;
    }

    @media (min-width: 768px) {
        .nos-navbar-menu-desktop {
            display: flex;
        }
        .nos-navbar-mobile-controls {
            display: none;
        }
        .nos-hero-title {
            font-size: 6rem;
        }
        .nos-hero-subtitle {
            font-size: 1.25rem;
        }
        .nos-content-card {
            height: 80vh;
        }
        .nos-content-card-title {
            font-size: 5rem;
        }
    }

    .nos-nos-wrapper {
        height: 100vh;
        overflow: hidden;
        position: relative;
    }
    .nos-nos-hero-section {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center;
        position: relative;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .nos-nos-overlay-left,
    .nos-nos-overlay-right {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }
    #nos-scene {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    #nos-scene img {
        position: absolute;
        max-width: none;
        will-change: transform;
    }

    .nos-nos-background {
        width: 65%;
        object-fit: cover;
        z-index: 2;
        left: -195px;
        bottom: -70px;
    }

    .nos-nos-character-left {
        width: 35%;
        bottom: 0px;
        left: 5%;
        z-index: 5;
    }
    .nos-nos-character-right {
        width: 39%;
        bottom: 0px;
        right: 0%;
        z-index: 5;
    }

    .nos-nos-foreground {
        width: 58%;
        height: 101%;
        object-fit: cover;
        z-index: 4;
        right: 1px;
    }

    .nos-nos-element-1 {
        width: 20%;
        top: 20%;
        left: 10%;
        z-index: 5;
    }
    .nos-nos-element-2 {
        width: 20%;
        top: 30%;
        right: 25%;
        z-index: 5;
    }
    .nos-nos-element-3 {
        width: 15%;
        bottom: 5%;
        left: 30%;
        z-index: 5;
    }
    .nos-nos-element-4 {
        width: 20%;
        top: 15%;
        right: 15%;
        z-index: 6;
    }
    .nos-nos-element-5 {
        width: 11%;
        bottom: 11%;
        right: 10%;
        z-index: 6;
    }
    .nos-nos-element-6 {
        width: 20%;
        top: 40%;
        left: 10%;
        z-index: 5;
    }
    .nos-nos-element-7 {
        width: 20%;
        bottom: 30%;
        right: 35%;
        z-index: 5;
    }

    .nos-nos-logo {
        width: 20%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        pointer-events: none;
    }

    @media (max-width: 768px) {
        .nos-nos-wrapper {
            height: 50vh;
        }

        .nos-nos-logo {
            width: 35%;
            top: 25vh;
        }

        .nos-nos-element-1 {
            width: 18%;
            top: 15%;
            left: 10%;
        }
        .nos-nos-element-2 {
            width: 18%;
            top: 25%;
            right: 12%;
        }
        .nos-nos-element-3 {
            width: 18%;
            bottom: 20%;
            left: 15%;
        }
        .nos-nos-element-4 {
            width: 18%;
            top: 10%;
            right: 8%;
        }
        .nos-nos-element-5 {
            width: 18%;
            bottom: 15%;
            right: 10%;
        }
        .nos-nos-element-6 {
            width: 18%;
            top: 45%;
            left: 5%;
        }
        .nos-nos-element-7 {
            width: 18%;
            bottom: 28%;
            right: 22%;
        }
    }

    @media (max-width: 480px) {
        .nos-nos-character-left {
            width: 67%;
            left: 7%;
            bottom: 0px;
        }
        .nos-nos-character-right {
            width: 71%;
            right: -16%;
            bottom: -12px;
        }

        .nos-nos-foreground {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 4;
            right: -147px;
            bottom: 0px;
        }
        .nos-nos-background {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            left: -183px;
            bottom: -70px;
        }

        .nos-nos-logo {
            width: 40%;
            top: 25vh;
        }
        .nos-nos-element-1 {
            width: 22%;
            top: 10%;
            left: 5%;
        }
        .nos-nos-element-2 {
            display: none;
        }
        .nos-nos-element-3 {
            width: 22%;
            bottom: 15%;
            left: 8%;
        }
        .nos-nos-element-4 {
            width: 22%;
            top: 8%;
            right: 5%;
        }
        .nos-nos-element-5 {
            display: none;
        }
        .nos-nos-element-6 {
            width: 22%;
            top: 50%;
            left: 3%;
        }
        .nos-nos-element-7 {
            display: none;
        }
    }