.datos-info{
    width: 100%;
}

.datosInfo-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: url(../../img/contacto/hojas1.png) bottom left no-repeat , url(../../img/contacto/hojas2.png) top right no-repeat;
   
    background-size: 130px;
    padding: 100px 0;
    margin-top: 25px;
}

.datosInfo-container h2{
    text-align: center;
    color: #180270;
    font-weight: 800;
    font-size: 1.5rem;
}

.datosInfo-ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
    list-style: none;
    padding: 0px
}

.datosInfo-li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1rem;
    
}

.datosInfo-li h3{
    text-align: center;
    color: #FFBD14;
    font-weight: 700;
    font-size: 1.2rem;
}

.datosInfo-li p,a{
    flex-wrap: wrap;
    color: #180270;
    font-weight: 400;
    text-align: center;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}


.datosInfo-li .datos-info-correo{
    width: 360px ;
    max-width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;

}

.datosInfo-li a .fa-square-facebook{
    color: #0400ff;
}

.datosInfo-li a .fa-square-whatsapp{
    color: #20e22a;
}

.datosInfo-li a .fa-square-instagram{
    color: #c71fa3;
}

.datosInfo-li a .fa-envelope{
    color: #0a0000;
}

.datosInfo-li a i{
    font-size: 2.2rem;
}

.datosInfo-li a i:hover{
    opacity: 0.7;
    scale: 1.1;
}

@media screen and (min-width: 768px){
    .datosInfo-ul{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .datosInfo-li{
       width: 350px;
    }
}

@media screen and (min-width: 1100px){
    .datosInfo-li{
        width: 500px;
     }
}