.contact-form { background: linear-gradient(to bottom right, #F9B208, #E72E77); /* Gradient background */ padding: 30px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); max-width: 500px; width: 100%; text-align: left; } .form-row { display: flex; gap: 15px; margin-bottom: 20px; } .form-field { flex: 1; } .form-field label { display: block; margin-bottom: 8px; font-weight: bold; color: black; } .form-field input, .form-field textarea { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 15px; background-color: white; /* Field background */ color: black; /* Text color */ transition: border-color 0.3s; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: #E72E77; /* Pink focus */ } .form-field textarea { height: 120px; } .submit-button { display: block; width: 100%; padding: 12px; background-color: #28a745; /* Green button color */ color: white; border: none; border-radius: 8px; /* Rounded corners */ font-size: 16px; font-weight: bold; /* Bold text */ text-transform: uppercase; /* Full caps */ cursor: pointer; transition: background-color 0.3s; } .submit-button:disabled { background-color: #ddd; cursor: not-allowed; } .submit-button:hover:not(:disabled) { background-color: #218838; /* Darker green on hover */ }