@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@import url(/css/estilos.css);

.contenedor{
    display: flex;
    flex-direction: column;
    top: 10vh;
    position: relative;
    gap: 2rem;
    margin-bottom: 6%;
}

.contenedorform{
    display: flex;
    position: relative;
    height: 800px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.formulario{
    gap: 20px;
    display: flex;
    flex-direction: column;
    height: 80%;
    width: 50%;
    background: radial-gradient(circle at center, rgba(255, 115, 0, 0.1) 1%, rgba(255, 115, 0, 0.4) 10%, rgba(0, 0, 0, 0.6)90%) ;
    padding: 5% 5%;
    color: rgb(255, 255, 255);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.formtop{
    display: flex;
    position: relative;
}

.formtop .nombre, .formtop .telefono, .formbottom{
    width: 50%;
    display: flex;
    flex-direction: column;
    padding-right: 2%;
}

.formtop input, .formbottom input{
    border: none;
    border-bottom: 1px solid rgb(255, 255, 255);  
    background: none;
    outline: 0;
    height: 30px;
    color: rgb(255, 255, 255);
}

.formmiddle{
    width: 100%;
    height: 50%;
}

.formmiddle textarea{
    padding: 5% 0;
    width: 100%; 
    height: 90%;
    color: rgb(255, 255, 255);
    border: none;
    border-bottom: 1px solid rgb(255, 255, 255);  
    background: none;
    outline: 0;
}

.contacto{
    color: rgb(255, 255, 255);
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 70%;
    background-color: rgba(110, 110, 110, 0.548);
    justify-content: space-around;
}

.contacto h2{
    font-size: 2.5rem;
    font-family: Tahoma, sans-serif;
    margin-left: 10%;
}

.contacto i{
    padding: 1%;
    font-size: 25px;
}

.textocontacto{
    margin-left: 10%;
    display: flex;
    gap: 1rem;
}

.iconos{
    margin-top: -5px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#whatsapp{
    color: rgb(37, 211, 102);
}

.textocontacto .texto{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.texto a{
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.contactoimg{
    width: 400px;
    height: 200px;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-family: Georgia;
}

.contacto img{
    width: 200px;
}

.formulario #button{
    margin-top: 5%;
    margin-left: 40%;
    width: 20%;
    min-height: 8%;
    background: none;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(255,255,255);
}