/* estilos quienes somos */

.quienes-somos {
    width: 100%;
    /* max-width: 1140px; */
    height: 500px;
    margin: 0 auto;
    background-image: url(../img/bg-digimain.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border-radius: 8px;
}

.qs__container {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1140px;
    margin: 0 auto;
    /* border: 2px solid green; */
    height: 100%;   

}

.qs__img-box,
.qs__text-box {
    /* border: 2px solid purple; */
    display: flex;
    height: 100%;

    transition: opacity 1s ease, transform 1s ease;
}
.qs__text-box {
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    /* border: 2px solid purple; */
    transform: translateX(40px);
    opacity: 0;
}

.qs__img-box{
    justify-content: center;
    align-items: center;
    /* border: 2px solid yellow; */
    overflow: hidden;
    padding: 5px;
    transform: translateX(-50px);
    opacity: 0;
}

.qs__box--entry {
    opacity: 1;
    transform: translateX(0);
}

.qs__img {
    height: auto;
    width: 80%;
    max-width: 360px;
    /* object-fit: contain; */
}

/* fonts */
.qs__text-box h2,
.qs__text-box p {
    color:rgb(255, 255, 255);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.qs__text-box h2 {
    font-size: 35px;
}
.qs__text-box p {
    /* font-weight: bold; */
    font-size: 18px;
}

@media (max-width: 768px) {
    .quienes-somos {
        height: 400px;
    }
    .qs__container {
        grid-template-columns: none;
        grid-template-rows: repeat(2, 1fr);
    }

    .qs__img {
        width: auto;
        height: 100%;
    }

    .qs__text-box {
        text-align: center;
        overflow: hidden;
        transform: translateX(-0px);
    }

    .qs__img-box {
        transform: translateX(-0px);
    }

    /* fonts */
    .qs__text-box h2 {
    
        font-size: 30px;
    }
    .qs__text-box p {
        
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .qs__container {
        grid-template-rows: 1fr 2fr;
    }
    .qs__text-box {
        overflow: visible;
        
    }
    .qs__text-box p {
        margin-bottom: 0;
    }
}