.body-contact {
    width: 100%;
    background: #ffff;
    /*    background-image: linear-gradient(to right, #E0DEDA, #f5f5f5, #E0DEDA);}
*/ .section-contact {
   /*position: relative;*/
   width: 100%;
   display: grid;
   place-items: center;
}
.section-contact .contactForm{
    /* position: relative;*/
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
   gap:20px;
   padding:40px;
   width:90%;
   height: 96%;
   background: #fff;
/*   box-shadow: 1px 9px 20px -5px rgba(0, 0, 0, 0.59);   
*/}
.section-contact .contactForm .form{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 85%;
}
.section-contact .contactForm .form > form{
   width: 100%;
}
.section-contact .contactForm .form .texto h2{
   color: #000;
   font-size: 30px;
   margin-bottom: 10px;
   font-weight: 600;
}
.section-contact .contactForm .form .texto p {
   color: rgb(2, 23, 43);
   font-size: 16px;
   margin-top: 10px;
   line-height: 1.5;
   margin-bottom: 20px;
}
.section-contact .contactForm .form > form .inputBox {
   display: flex;
   flex-direction: column;
   margin-bottom: 15px;
       
}
.section-contact .contactForm .form > form .inputBox label {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    margin-bottom: 5px;
}
.section-contact .contactForm .form > form .inputBox > input[type="text"],
.section-contact .contactForm .form > form .inputBox > input[type="email"],
.section-contact .contactForm .form > form .inputBox > textarea {
   border: none;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;   padding: 10px;
   border-radius: 10px;
   color: #333;
   padding: 10px;
   resize: none;
}
.section-contact .contactForm .form > form .inputBox > input[type="text"]:focus,
.section-contact .contactForm .form > form .inputBox > input[type="email"]:focus,
.section-contact .contactForm .form > form .inputBox > textarea:focus {
   outline: 2px solid #120052;
}
.section-contact .contactForm .form > form > input[type="submit"] {
    background-color: #009aae;
   transform: scale(1.05); 
   display: inline-block;
   transition: all ease-in-out 0.5s;
   text-align: center;
   width: 250px;
   padding: 10px;
   border-radius: 10px;
   color: #fff;
   letter-spacing: 1px;
   border: none;
   cursor: pointer;
   box-shadow: 1px 9px 20px -5px rgba(0, 0, 0, 0.59);
}
.section-contact .contactForm .form > form input[type="submit"]:hover {
   transition: all ease-in-out 0.5s;
   background-color: #00c4d6;
   transform: scale(1.05); 
   display: inline-block;
   }
.section-contact .contactForm .info-contact{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.section-contact .contactForm .info-contact .imgBox{
   position: relative;
   width: 100%;
   height: 100%;
}
.section-contact .contactForm .info-contact .imgBox img{
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.section-contact .contactForm .info-contact .textBox{
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-direction: column;
}
.section-contact .contactForm .info-contact .textBox .infoContact{
   display: flex;
   justify-content: center;
   align-items: flex-start;
   margin-bottom: 10px;
}
.section-contact .contactForm .info-contact .textBox .infoContact .icon-contact-direc, 
.icon-contact-phone, .icon-contact-mail {
   font-size: 2em;
   margin-right: 10px;       
}
.section-contact .contactForm .info-contact .textBox .infoContact .icon-contact-direc {
   color: #216d21;
}
.section-contact .contactForm .info-contact .textBox .infoContact .icon-contact-phone {
   color: #0028ff;
}
.section-contact .contactForm .info-contact .textBox .infoContact .icon-contact-mail {
   color: #6f3460;
}
.section-contact .contactForm .info-contact .textBox .infoContact > a > p {
   color: rgb(2, 23, 43);
   transition: all ease-in-out 0.5s;
}
.section-contact .contactForm .info-contact .textBox .infoContact > a > p:hover{
   color:#c00000;
   transition: all ease-in-out 0.5s;
}
.section-contact .contactForm .info-contact .textBox .infoContact > a {
   text-decoration: none;
   cursor: pointer;
}
/*Redes Sociales*/
.section-contact .contactForm .info-contact .rrss .contac-face {
    color: #4267B2;
    transition: all ease-in-out 0.5s;
}
.section-contact .contactForm .info-contact .rrss .contac-inst {
   color: #E1306C;
   transition: all ease-in-out 0.5s;
}
.section-contact .contactForm .info-contact .rrss .contac-twi {
   color: #1D9BF0;
   transition: all ease-in-out 0.5s;
}
.section-contact .contactForm .info-contact .rrss a {
   padding: 20px;
   font-size: 2em;       
   transition: all ease-in-out 0.5s;
}
.section-contact .contactForm .info-contact .rrss .contac-face:hover,
.section-contact .contactForm .info-contact .rrss .contac-inst:hover,
.section-contact .contactForm .info-contact .rrss .contac-twi:hover{
    color: #a3a3a3;
    transition: all ease-in-out 0.5s;
}
/*Pantallas largas*/
@media only screen and (max-width: 1200px){
    .section-contact .contactForm {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}
@media only screen and (max-width:1080px){
    .section-contact .contactForm .info-contact .imgBox{
        width: 100%;
        height: 100%;
    }
    .section-contact .contactForm .info-contact .imgBox img{
        width:100%;
        height: 100%;
    }
}
/*Tablets y laptops*/
@media only screen and (max-width: 795px){
    .section-contact .contactForm .info-contact{
        height: 300px;
        padding: 20px;
    }
    .section-contact .contactForm .info-contact .imgBox{
        display:none;
    }
}
/*celulares*/
@media only screen and (max-width: 600px){
    .section-contact .contactForm .form{
        margin-left: 0;
        width: 100%;
    }
    .section-contact .contactForm .info-contact{
        margin-bottom:30px;
    }
}
@media only screen and (max-width: 393px) {
    .section-contact .contactForm {
        width: 100%;
    }
    .section-contact .contactForm {
        /* position: relative; */
        padding: 30px;
    }
}