/* CSS que aplica al Section de Nosotros */
/* Derechos reservados al Grupo 4 : Matias Abel Cortés, Héctor Salvador Guzmán, Bárbara Marisol Garro, Ceballos Jorge */


section {
    margin-top: 50px;
}

.container {
    display: flex;
    justify-content: center;
    flex-direction: column; 
    align-items: center; 
}

.section {
    display: flex;
    align-items: center;
    margin-bottom: 20px; 
}

.barra {
    display: flex;
    justify-content: center; 
}

.img_barra {
    text-align: center;
    margin: 0 10px; 
    position: relative;
    transition: transform 0.3s ease; 
}

.img_barra:hover {
    transform: scale(1.1); 
}

.nosotros_logo,
.lugar_logo {
    width: 100px; 
    height: auto; 
    display: block; 
    margin: auto; 
}

.title {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold; 
    text-decoration: none; 
    font-size: 20px;
    color: black; 
}

.linea_negra {
    border: 1px solid black; 
    margin-top: 20px; 
}

.title_nos {
    font-size: 50px;
    color: #166080;
    -webkit-text-stroke: 0.5px #ffa7e4;
    text-decoration: underline;
    margin-top: 20px;
    margin-bottom: 20px; 
}

.title_ubi {
    font-size: 50px;
    color: #ffa7e4;
    -webkit-text-stroke: 1px #166080;
    text-decoration: underline;
    margin-top: 20px;
    margin-bottom: 20px; 
}

.text-block, .image-block {
    flex: 1;
    padding: 20px;
}

.text-block {
    background-color: #acdfe2; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    padding: 20px;
    overflow: auto; 
    font-weight: bold;
    text-align: center; 
}

.image-block {
    text-align: center; 
    width: 5%;
}

.image-block img {
    max-width: 80%; 
    height: auto; 
    max-height: 200px; 
}

img {
    width: 100%;
    height: auto;
}

.reverse {
    flex-direction: row-reverse;
}

.maps_ubi{
    width: 950px;
    height: 550px;
}

/* Arreglo de media para la ubicación */

@media only screen and (max-width: 768px) {

    .maps_ubi{
        width: 400px;
        height: 200px;
    }

    .section {
        flex-direction: column; /* Apila los bloques verticalmente en dispositivos móviles */
    }

    .text-block, .image-block {
        width: 100%; /* Ajusta el ancho al 100% en dispositivos móviles */
    }

    .image-block img {
        width: 100%; /* Ajusta el ancho de la imagen al 100% del contenedor en dispositivos móviles */
        height: auto; /* Mantiene la proporción de aspecto */
    }

    .section, .reverse {
        flex-direction: column;
    }

    img {
        max-width: 100%;
    }

}