/* Arquivo: style.css */
* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background: rgb(215, 106, 158);
    background: linear-gradient(90deg, rgba(215, 106, 158, 1) 4%, rgba(95, 108, 195, 1) 100%);
    background-size: cover;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95.5vh;
}

.formulario-container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(72, 36, 102, 0.1);
    padding: 7% 2%;
    width: 90%;
    max-width: 500px;
}

.formulario-container h2 {
    font-size: clamp(1.75em, 1em + 3vw, 2.5em);
    color: #423977;
    text-align: center;
    padding-bottom: 5%;
    margin-top: 35px; /* Adiciona espaço para evitar o corte do título */
}

.formulario-contato {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px; /* Espaço entre os campos */
}

.formulario-contato input,
.formulario-contato select,
.formulario-contato textarea {
    font-size: clamp(0.75em, 0.75em + 1.5vw, 1.3em);
    padding: 12px;
    border: 2px solid #AD7FCB;
    border-radius: 10px;
    color: #423977;
    width: 100%;
}

.formulario-contato textarea {
    resize: none;
    height: 150px;
}

/* Estilos dos botões */
.botoes-container {
    display: flex;
    gap: 10px; /* Espaço entre os botões */
    margin-top: 15px;
}

.botoes-container .botao-contato {
    flex: 1; /* Ambos os botões terão o mesmo tamanho */
    text-align: center;
    border: none;
    background-color: #AD7FCB;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    font-size: clamp(0.75em, 0.75em + 1.5vw, 1.3em);
    padding: 15px;
    text-decoration: none;
}

.botoes-container .botao-contato:hover {
    background-color: #8B5FBF;
}

.botao-voltar {
    background-color: #C76BA5;
}

.botao-voltar:hover {
    background-color: #A25487;
}