#screen-loader {
    background: black;
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed; /* Use fixed to ensure it covers the viewport even when scrolling */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1; /* Initial state */
    visibility: visible; /* Ensure it's visible initially */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#screen-loader.hidden {
    opacity: 0; /* Fade out */
    visibility: hidden; /* Ensure it's removed from interaction */
}

#screen-loader > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#screen-loader > div > img {
    max-width: 90%;
}

#screen-loader > div > span {
    color: white;
}