/* Oculta el contenedor en pantallas más grandes */
@media (min-width: 770px) {
    .mobile-menu-container {
        display: none; /* Oculta todo el contenedor en pantallas más grandes */
    }
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    /* Contenedor del menú */
    .mobile-menu-container {
        position: fixed; /* Fija el contenedor en la parte superior */
        top: 0; /* Coloca el contenedor en la parte superior */
        left: 0; /* Alinea el contenedor al borde izquierdo */
        right: 0; /* Alinea el contenedor al borde derecho */
        display: flex; /* Usa flexbox para alinear los elementos horizontalmente */
        justify-content: space-between; /* Espacia el ícono y el logo a los extremos */
        align-items: center; /* Alinea los elementos verticalmente en el centro */
        background-color: rgba(128, 128, 128, 0.5); /* Fondo gris transparente */
        padding: 10px; /* Añade un poco de espaciado interno */
        z-index: 200; /* Asegura que el contenedor esté sobre otros elementos */
    }

    /* Contenedor del ícono del menú y el logo */
    #menu-icon {
        display: flex; /* Usa flexbox para alinear los elementos internos */
        justify-content: space-between; /* Espacia el ícono y el logo a los extremos */
        align-items: center; /* Alinea los elementos verticalmente en el centro */
        width: 100%; /* Asegura que el contenedor ocupe todo el ancho del contenedor padre */
    }

    /* Estilos para el ícono del menú */
    #menu-icon img:first-child {
        width: 40px; /* Ajusta el tamaño del ícono del menú */
        height: auto; /* Mantiene la proporción original de la imagen */
    }

    /* Estilos para el logo */
    #logo {
        height: 30px; /* Ajusta el tamaño del logo según sea necesario */
        width: auto; /* Mantiene la proporción original del logo */
    }

    /* Estilos para la imagen del logo */
    #logo img {
        display: block; /* Asegura que la imagen se muestre correctamente */
        height: 30px; /* Ajusta el tamaño del logo según sea necesario */
        width: auto; /* Mantiene la proporción original del logo */
    }

    #main-nav {
        position: fixed; /* Cambia a fixed para mantener el menú en la parte superior */
        top: 6.5rem; /* Coloca el menú debajo del contenedor del ícono y el logo */
        right: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        z-index: 100; /* Asegura que el menú esté debajo del contenedor del ícono y el logo */
        transition: all 0.3s ease; /* Agrega una transición suave */
        display: none; /* Oculta el menú por defecto */
    }

    #main-nav.show {
        display: block; /* Muestra el menú cuando se le añada la clase 'show' */
    }

    #main-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex; /* Alinea los elementos verticalmente en pantallas pequeñas */
        flex-direction: column;
    }

    #main-nav ul li {
        border-bottom: 1px solid #ddd;
    }

    #main-nav a {
        display: block;
        padding: 15px;
        text-decoration: none;
        color: #000;
        text-align: center;
    }

    #main-nav a:hover {
        background-color: #f4f4f4;
    }
}