#navbarCollapse {
    position: absolute;
    top: 100%; /* justo debajo del navbar */
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #f8f9fa; /* mismo fondo que la navbar-light bg-light */
}

.navbar {
    position: relative;
}

.navbar-brand {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente si es necesario */
}

.responsive-logo {
    width: 55%;
    height: auto; /* Mantiene la proporción */
}

/* Media query para dispositivos móviles */
@media (max-width: 767px) {
    .responsive-logo {
        width: 50%; /* 50% en móviles */
    }
}

@media (min-width: 992px) {
    #header-carousel .carousel-item img {
        height: 600px; /* o la altura que prefieras */
        object-fit: cover;
    }
}

@media (min-width: 992px) {
    #inicio {
        margin-top: 43px;
    }
}

/* Evitar el desplazamiento horizontal en pantallas pequeñas */
@media (max-width: 991px) {
    body, html {
        overflow-x: hidden; /* Desactiva el scroll horizontal global */
    }

    .navbar-nav .dropdown-menu {
        right: 0; /* Asegura que el submenú no quede cortado a la izquierda */
        margin-right: 0px; /* Añade un pequeño margen a la derecha */
        word-break: break-word; /* Permite que las palabras largas se ajusten */
        white-space: normal; /* Permite que el texto se envuelva */
        max-width: 100%; /* Asegura que el submenú no se desborde */
        overflow-wrap: break-word; /* Ajuste de texto */
        display: block; /* Asegura que el submenú sea un bloque */
        box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
    }

    /* Asegura que ningún otro elemento del menú cause scroll horizontal */
    .navbar, .navbar-nav, .dropdown-menu {
        width: 100%;
        overflow: hidden;
    }
}

.scroll-container {
    max-height: 200px;
    overflow-y: scroll;
}