

.container_formulario {
     width: 100%;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background-image: url("../image/banner2.jpg");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed; 
}

.container_formulario img{
     position: absolute;
     left: 20px;
     top: 20px;
}

form {
     width: 300px;
     max-width: 600px;
     justify-content: center;
     align-items: center;
     background: white;
     padding: 30px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form h2{
     text-align: center;
}

input {
     /* display: block é melhor que flex para inputs individuais */
     display: block; 
     width: 100%;
     margin-bottom: 15px; /* Espaçamento levemente maior para respiro */
     padding: 12px;
     border-radius: 5px;
     border: 1px solid #13aa4a;
     background-color: #ffffff;
     
     /* Garante que o padding não aumente o tamanho total do input */
     box-sizing: border-box; 
     
     /* Transição suave para o foco */
     transition: all 0.3s ease;
     outline: none;
}

input:focus {
     /* Em vez de tirar a borda, vamos destacá-la */
     border: 1px solid #13aa4a;
     box-shadow: 0 0 8px rgba(19, 170, 74, 0.4); /* Brilho suave em volta */
     background-color: #f9fffb;
}

button {
     width: 100%;
     padding: 10px;
     background: #25d366;
     color: white;
     border: none;
     cursor: pointer;
     border-radius: 10px;
}

button:hover{
     background: #13aa4a;
}