/* form.css */

/* 1) Container: center & constrain width */
#leadForm {
  max-width: 700px;
  margin: 2rem auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #fff;
}

/* 2) Header: centered, Bangers font */
#leadForm .form-header {
  text-align: center;
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: #009900;
  text-shadow: 2px 2px 0 #ffff00;
}

/* 3) Sub-text below header */
#leadForm .form-subtext {
  text-align: center;
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}

/* 4) Inputs & textarea: full width of form, but nicely padded & not massive */
#leadForm input,
#leadForm textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 4a) Make text fields a bit shorter in height */
#leadForm input[type="text"],
#leadForm input[type="tel"],
#leadForm input[type="email"] {
  height: auto; /* allows padding-controlled height */
}

/* 4b) Textarea: vertical resizing only, with a comfortable default height */
#leadForm textarea {
  resize: vertical;
  min-height: 100px;
}

/* 5) Button: centered, consistent padding */
#leadForm button {
  align-self: center;
  padding: 0.75rem 2rem;
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  background-color: #009900;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 5a) Button hover */
#leadForm button:hover {
  background-color: #007a00;
}

/* 6) Responsive: stack nicely on small screens */
@media (max-width: 600px) {
  #leadForm {
    padding: 1rem;
    gap: 0.75rem;
  }
  #leadForm button {
    width: 100%;
    justify-content: center;
  }
}