/* Multi-level Dropdown CSS */
.group:hover .group-hover\:visible {
    visibility: visible;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* Ensure nested dropdowns appear to the right */
.group\/sub:hover .group-hover\/sub\:visible {
    visibility: visible;
}
.group\/sub:hover .group-hover\/sub\:opacity-100 {
    opacity: 1;
}

/* Add a small invisible bridge to prevent menu from closing when moving cursor */
.group > div::before,
.group\/sub > div::before {
    content: "";
    position: absolute;
    top: -0.5rem; /* Adjust based on margin-top */
    left: 0;
    width: 100%;
    height: 1rem;
    background: transparent;
}

.group\/sub > div::before {
    top: 0;
    left: -0.5rem;
    width: 1rem;
    height: 100%;
}