body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #e9ecef !important; color: #333; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; } .container { background-color: #e9ecef; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: 100%; max-width: 900px; margin: 20px auto; } .mt-5, .my-5 { margin-top: 18rem; } h1, h2 { color: #4a4a4a; text-align: center; margin-bottom: 25px; } .form-group { margin-bottom: 20px; } label { display: block; font-weight: 600; margin-bottom: 8px; color: #555; } input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; transition: border-color 0.3s; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus { outline: none; border-color: #007bff; } button, .btn { display: inline-block; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; text-align: center; text-decoration: none; font-weight: bold; transition: background-color 0.3s, transform 0.2s; } .btn-primary { background-color: #007bff; color: #fff; } .btn-primary:hover { background-color: #0056b3; } .btn-danger { background-color: #dc3545; color: #fff; } .btn-danger:hover { background-color: #c82333; } .btn-warning { background-color: #ffc107; color: #212529; } .btn-warning:hover { background-color: #e0a800; } /* Responsividade */ @media (max-width: 768px) { .container { padding: 20px; } } /* ... código CSS existente ... */ .form-bg { background-image: url('logo.png'); /* Substitua pelo caminho da sua imagem */ background-size: cover; /* Faz a imagem cobrir a área mantendo a proporção */ background-position: center; /* Centraliza horizontalmente e alinha no topo */ background-repeat: no-repeat; width: 129%; /* Ocupa a largura total */ height: 38%; /* Define uma altura fixa para a área da imagem */ margin-bottom: -150px; /* Puxa o conteúdo abaixo para cima, sobrepondo a imagem */ position: absolute; /* Para z-index se necessário */ z-index: 0; /* Garante que fique "por trás" do formulário */ } .container { background-color: #ebeced; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top: 260px; /* Ajusta o formulário para subir e se posicionar sobre a imagem */ position: absolute; /* Necessário para o z-index */ z-index: 1; /* Garante que o formulário fique acima da imagem de fundo */ max-width: 800px; /* Limita a largura máxima do formulário para não ficar muito esticado */ /* Você pode ajustar o max-width conforme a sua preferência */ } /* Se você tiver um ou com margin/padding padrão, talvez precise remover */ body, html { margin: 0; padding: 0; overflow-x: hidden; /* Evita rolagem horizontal indesejada */ }