.noadev-navbar-nav {
    gap: 1rem;

    .sub-menu, a {
        transition: all 0.3s ease;
    }

    .menu-item{
        position: relative;
    }
    .sub-menu{
        list-style: none;
        padding: 0;
        margin: 0;
        display: none; /* Ocultar submenÃºs por defecto */
        
        &.show {
            display: block;
        }        
    }
    .sub-menu .sub-menu {
        
        &.show{
            
        }
    }

    a{
        text-decoration: none;
    }

    .sub-menu a{
        
        font-size: 80%;

        &:hover{
          
        }
    }
}

.offcanvas:not(.show){
    .noadev-navbar-nav {  
    
        .sub-menu{
            position: absolute; /* PosiciÃ³n absoluta */
            bottom: 0; /* Debajo del elemento padre */
            transform: translateY(150%);
            left: 0; /* Alineado a la izquierda */
            background-color: #fff; /* Fondo blanco */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra */
            z-index: 1000; /* AsegÃºrate de que estÃ© por encima de otros elementos */
            min-width: 200px; /* Ancho mÃ­nimo */
            
            &.show {
                display: block; /* Mostrar submenús cuando la clase 'show' esté presente */
                position: absolute; /* Ajusta según tus necesidades */
                transform: translateY(100%);
                left: 0; /* Ajusta según tus necesidades */
                z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
            }        
        }
        .sub-menu .sub-menu {
            transform: translateY(0%) translateX(150%);
            top: 0; /* Alineado en la parte superior */
            right: 0%; 
            bottom: inherit;
            &.show{
                transform: translateY(0%) translateX(100%);
            }
        }
    
    
    }
}

