/* Nested Dropdown Menu CSS */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none; /* Hide by default */
}

/* Show sub-menu on hover of the parent li */
@media screen and (min-width: 992px) {
    .navbar .dropdown-submenu:hover > .dropdown-menu,
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
@media screen and (max-width: 991px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* For mobile/touch devices, ensure it works with Bootstrap's data-bs-toggle */
.dropdown-submenu > .dropdown-toggle::after {
    display: none; /* Hide default caret if any */
}

/* Alignment for RTL if needed */
.dropdown-menu.dropdown-menu-end {
    left: auto;
    right: 100%;
}

@media (max-width: 991px) {
    .dropdown-submenu > .dropdown-menu {
        position: static;
        margin-left: 1rem;
        display: block; /* Show all levels on mobile */
        border: none;
        box-shadow: none;
        background: transparent;
    }
}