.submenu {
    display: none;
}
.menu-open .submenu {
    display: block;
}
.menu-item > div span,
.menu-item * {
    user-select: none;
}

#toggle-nav {
    opacity: 0;
    transition: .2s all ease-in-out;
}
#main-nav:hover #toggle-nav {
    opacity: 1;
}

#main-nav.collapsed {
    width: auto !important;
}
#main-nav.collapsed .menu-item a div > i,
#main-nav.collapsed .menu-item a div > i svg path {
    fill: #ffffff !important;
    color: white !important;
    margin: 0;
}
#main-nav.collapsed .menu-item a div > span,
#main-nav.collapsed .menu-item a > i {
    display: none;
}

#main-nav.collapsed .menu-item {
    position: relative;
}
#main-nav.collapsed .submenu {
    padding: 16px;
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: all 2s ease;
}
#main-nav.collapsed .menu-item:hover a + .submenu {
    visibility: visible;
    display: block;
    position: absolute;
    opacity: 1;
    transform: translateX(0);
    left: 100%; 
    top: 0;
    background-color: #2d3748; 
    width: 200px; 
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem; 
    animation: fadeSlideIn 0.3s ease forwards;
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0; 
        transform: translateX(-10px); 
    }
    100% {
        opacity: 1; 
        transform: translateX(0); 
    }
}


#main-nav.collapsed .menu-item a + .submenu {
    animation: fadeSlideOut 0.3s ease forwards;
}


@keyframes fadeSlideOut {
    0% {
        opacity: 1; 
        transform: translateX(0); 
    }
    100% {
        opacity: 0; 
        transform: translateX(-10px); 
    }
}