/* Header */

/* Estilos para pantallas pequeñas y tablets */
@media (max-width: 991px) {
    .container {
        flex-direction: column; /* Apilar el logo y el menú verticalmente */
        align-items: center; /* Centrar en pantallas pequeñas */
    }

    .logo img {
        height: 60px; /* Ajustar tamaño del logo */
    }

    /* Menú colapsado */
    .navbar-collapse {
        display: none; /* Ocultar inicialmente */
    }

    .navbar-collapse.show {
        display: flex; /* Mostrar al hacer clic */
        flex-direction: column; /* Apilar enlaces */
        align-items: center; /* Centrar enlaces */
        width: 100%; /* Ocupa todo el ancho */
    }

    .navbar-collapse a {
        margin: 10px 0; /* Espaciado entre enlaces */
    }

    /* Estilos del botón "hamburguesa" */
    .navbar-toggler {
        border: none; /* Sin borde */
        background-color: transparent; /* Fondo transparente */
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%281%2C1%2C1%2C0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Icono hamburguesa */
        width: 30px;
        height: 30px;
    }
}

/* Menú visible en pantallas grandes */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important; /* Mostrar el menú */
    }

    .navbar-collapse a {
        margin: 0 15px; /* Espacio entre enlaces */
    }

    /* Ocultar botón hamburguesa en pantallas grandes */
    .navbar-toggler {
        display: none;
    }
}

/*** Logos clientes ***/
@media (max-width: 1200px) {
    .logo-circle {
        width: 120px; /* Reduce el tamaño de los logos */
        height: 120px;
    }
}

@media (max-width: 992px) {
    .logo-circle {
        width: 100px; /* Tamaño más pequeño en pantallas más pequeñas */
        height: 100px;
    }
}

@media (min-width: 992px) { /* Solo aplica para pantallas grandes */
    .experience .container {
        padding-left: 20%; /* Ajusta el padding a la izquierda */
        padding-right: 20%; /* Ajusta el padding a la derecha */
    }
}


/*** Footer ***/
@media (max-width: 768px) {
    footer .container {
        flex-direction: column; /* Cambiar a columna */
        align-items: center; /* Alinear al centro */
    }

    .footer-separator {
        display: none; /* Ocultar la línea */
    }

    /* Márgenes superiores entre redes sociales, enlaces y logo */
    footer .container > div:first-child {
        margin-bottom: 20px; /* Margen inferior después de redes sociales */
    }

    footer .d-flex.align-items-center {
        justify-content: center; /* Centrar enlaces */
        width: 100%; /* Ocupa todo el ancho */
    }

    footer .d-flex.flex-column.align-items-end {
        align-items: center; /* Centrar enlaces */
        width: 100%;
    }

    footer .d-flex.flex-column.align-items-end a {
        margin-top: 10px; /* Espaciado entre enlaces */
        margin-bottom: 10px;
        text-align: center; /* Texto centrado */
        display: block; /* Comportamiento en bloque */
        width: 100%; /* Ocupa todo el ancho */
    }

    footer .container > div:last-child {
        margin-top: 20px; /* Margen superior para el logo */
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    footer .container {
        flex-direction: row; /* Asegúrate de que se mantenga en fila */
        justify-content: space-between; /* Distribuye el espacio entre los elementos */
        align-items: center; /* Alinear elementos verticalmente al centro */
    }

    .footer-separator {
        display: block; /* Muestra la línea en este rango */
    }

    footer .container > div {
        margin: 0 10px; /* Espaciado entre columnas */
    }
}