div#loading {
    width: 100%;
    height: 100%;
    display: none;
    background-image: url('https://storage.googleapis.com/eunoic-2.appspot.com/files/visuals/gifs/loading.gif');
    background-repeat: no-repeat;
    position: absolute;
    }

#banner-container {
    position: fixed; /* Fixed position relative to the viewport */
    top: 0; /* Align to the top of the viewport */
    left: 0; /* Align to the left of the viewport */
    width: 100%; /* Span the full width of the viewport */
    z-index: 1000; /* High z-index to ensure it floats above other content */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: Adds shadow for better visibility */
    }
/* Smooth dropdown animation (cannot be achieved with Tailwind transitions alone) */
.dropdown-content {
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Mobile menu slide animation (Tailwind transform alone isn't sufficient) */
.mobile-menu {
    transition: transform 0.3s ease;
}