.categories-dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    background-color: #4CAF50; /* Fondo blanco para el menú */
    width: 520px; /* Ajusta el ancho según sea necesario */
    max-height: 400px; /* Altura máxima */
    overflow-y: auto; /* Permite el desplazamiento vertical */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 5px; /* Opcional: para bordes redondeados */
    border: 1px solid #4CAF50; /* Agrega un borde para diferenciarlo si es necesario */
}

.categories-dropdown-menu li {
    border-bottom: 1px solid #e0e0e0; /* Borde entre categorías */
    background-color: transparent; /* Asegura que el fondo sea transparente */
}

.categories-dropdown-menu li a {
    color: #333333;
    padding: 12px 20px; /* Espacio entre los elementos */
    text-decoration: none;
    display: block;
    font-size: 14px; /* Tamaño de fuente más pequeño */
    transition: background-color 0.3s, color 0.3s;
    background-color: transparent; /* Asegura que no haya fondo verde o de otro color */
}

.categories-dropdown-menu li a:hover {
    background-color: #4CAF50; /* Color de fondo al pasar el cursor */
    color: #000000;
}

.sub-menu {
    display: none; /* Los submenús están ocultos por defecto */
    list-style: none;
    padding-left: 20px; /* Sangría para los submenús */
    background-color: #4CAF50; /* Asegura que el fondo de los submenús sea blanco */
}

.menu-item:hover > .sub-menu {
    display: block; /* Muestra el submenú cuando el padre está en hover */
}

.categories-dropdown a {
    text-decoration: none;
    color: black;
    padding: 12px 20px; /* Ajusta el padding para hacerlo más pequeño */
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    background-color: transparent; /* Asegura que no haya fondo verde o de otro color */
}

.categories-dropdown a:hover {
    background-color: #f1f1f1; /* Color de fondo al pasar el cursor */
}
body {
    font-family: 'Oswald', sans-serif;
}
