/* Turn white background to black on scroll */

/* =============================
   Default Section Styling
   ============================= */
.scroll-change-section,
.scroll-change-section-other {
    transition: background 0.5s ease-in-out, 
                color 0.5s ease-in-out, 
                opacity 0.5s ease-in-out;
}

/* Inner Containers: Border & Shadow */
.scroll-change-section-internal {
    transition: box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out;
    border: 1px solid transparent; /* Prevent layout shift */
    box-shadow: 6px 6px 0px 2px #181818;
}

/* =============================
   Scroll Effects for Default Sections
   ============================= */
.scroll-change-section.scrolled {
    background: linear-gradient(180deg, #111111 0%, #000000 100%) !important;
    color: white !important;
}

/* Inner Elements - Apply Border & Shadow */
.scroll-change-section.scrolled .scroll-change-section-internal {
    border-color: white !important;
    box-shadow: 6px 6px 0px 2px white !important;
}

/* Ensure All Text and Elements Inside Turn White */
.scroll-change-section.scrolled * {
    color: white !important;
}

/* =============================
   Scroll Effects for Alternate Sections
   ============================= */
.scroll-change-section-other.scrolled {
    background: linear-gradient(100deg, #333333 0%, #1A1A1A 100%) !important;
    color: white !important;
}

/* Inner Elements - Apply Border & Shadow */
.scroll-change-section-other.scrolled .scroll-change-section-internal {
    border-color: white !important;
    box-shadow: 6px 6px 0px 2px white !important;
}

/* Ensure All Text and Elements Inside Turn White */
.scroll-change-section-other.scrolled * {
    color: white !important;
}