/**
 * Fix for Elementor Mobile Menu Dropdown
 * Ensures submenus are visible when 'was-open' class is present
 */
.elementor-nav-menu--dropdown .menu-item-has-children.was-open > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: static !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 20px !important; /* Indent submenus */
}

/* Ensure arrows are clickable if they are covering the link */
.elementor-nav-menu--dropdown .sub-arrow {
    cursor: pointer;
    z-index: 10;
    /* Ensure arrow has size and hit area */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
}

/* Rotate arrow when open */
.elementor-nav-menu--dropdown .menu-item-has-children.was-open > a .sub-arrow,
.elementor-nav-menu--dropdown .menu-item-has-children.was-open > .sub-arrow {
    transform: rotate(180deg);
}

/* Optional: Animation for smooth toggle */
.elementor-nav-menu--dropdown ul.sub-menu {
    transition: all 0.3s ease;
}