/* Your unchanged styles */
header .menu-item-596 > .sub-menu {
    overflow: visible !important;
    height: unset !important;
}

header #menu-item-4578, header #menu-item-4577 {
    padding-top: 25px;
    padding-bottom: 26px;
}

/* --- Slide-Down Animation (Applied to both) --- */

/* This is the initial, hidden state of the sub-menus */
header li#menu-item-4578 > .sub-menu,
header li#menu-item-4577 > .sub-menu {
    /* All positioning and style rules go here */
    display: flex;
    position: fixed;
    top: 74px; /* Adjust as needed */
    left: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: var(--banner-color);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);

    /* Animation properties (initial state) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); 
    
    /* Define the transition for all properties */
    transition: transform 300ms ease-in-out, opacity 300ms ease-in-out, visibility 300ms;
}

/* This is the final, visible state when you hover either parent li */
li#menu-item-4578:hover > .sub-menu,
li#menu-item-4577:hover > .sub-menu {
    /* Animation properties (final state) */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

header li#menu-item-4578 > .sub-menu li,
header li#menu-item-4577 > .sub-menu li {
    margin: 0 30px;
}

/* @media (max-width: 1239px) {
    header li.menu-item-4578 > .sub-menu,
    header li.menu-item-4577 > .sub-menu {
        display: block !important;
    }
} */