*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;

}


body{

background:#f5f0fa;

color:#444;

}



/* HEADER */

.contact-header{

height:90px;

background:white;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}



.contact-header h1{

font-family:Georgia,serif;

color:#886891;

font-size:38px;

}


.contact-header i{

color:#b88fc2;

}




/* CONTENIDO */

.contact-container{

padding:60px 10%;

}



.titulo{

text-align:center;

margin-bottom:40px;

}



.titulo h2{

font-size:42px;

color:#6a4e72;

font-family:Georgia,serif;

}



.titulo p{

color:#886891;

font-size:18px;

}





.contact-content{

display:flex;

gap:40px;

}




/* INFORMACION */


.contact-info{

background:#886891;

color:white;

padding:40px;

border-radius:25px;

flex:1;

}



.contact-info h3{

font-size:25px;

margin-bottom:30px;

}



.item{

display:flex;

gap:20px;

align-items:center;

margin-bottom:25px;

}



.item i{

font-size:30px;

color:#f6d9ff;

}



.item h4{

margin-bottom:5px;

}





/* FORMULARIO */


.contact-form{

background:white;

padding:40px;

border-radius:25px;

box-shadow:0 10px 25px rgba(136,104,145,.15);

flex:1;

}



.contact-form h3{

color:#6a4e72;

font-size:25px;

margin-bottom:25px;

}



form{

display:flex;

flex-direction:column;

gap:15px;

}



input,
textarea{

padding:15px;

border:1px solid #ddd;

border-radius:15px;

outline:none;

font-size:15px;

}



textarea{

height:130px;

resize:none;

}



button{

background:#886891;

color:white;

border:none;

padding:15px;

border-radius:30px;

font-size:16px;

cursor:pointer;

}



button:hover{

background:#6a4e72;

}




/* REDES */


.social{

text-align:center;

padding:30px;

}



.social h2{

color:#6a4e72;

}



.icons{

margin-top:20px;

}



.icons a{

font-size:40px;

margin:0 15px;

}



.icons .fa-facebook{

color:#1877F2;

}



.icons .fa-instagram{

color:#d6249f;

}



.icons .fa-tiktok{

color:black;

}





.volver{

text-align:center;

padding:30px;

}



.volver a{

background:#886891;

color:white;

padding:14px 35px;

border-radius:30px;

text-decoration:none;

}