/* SADC color palette */
:root {
  --sadc-blue: #00205B;
  --sadc-green: #007A33;
  --sadc-yellow: #FFD100;
  --sadc-white: #ffffff;
}

body {
  font-family: Arial,'Times New Roman';
  font-size: 16px;
  background-color: #f4f6f9;
  padding: 2em;
}

label.control-label {
  font-weight: 600;
  color: var(--sadc-blue);
  margin-bottom: 0.3em;
  display: block;
  font-size: 1.8rem;
}

input.form-control {
  border: 2px solid var(--sadc-green);
  border-radius: 6px;
  padding: 10px 15px;
  width: 100%;
  font-size: 1.8rem;
  color: var(--sadc-blue);
  background-color: var(--sadc-white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input.form-control::placeholder {
  color: #888;
  opacity: 0.8;
}


 .btn-submit {
      background-color: var(--sadc-blue);
      color: var(--sadc-white);
      border: none;
      padding: 10px;
      width: 100%;
      border-radius: 6px;
      font-size: 1.8rem;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease-in-out;
    }

    .btn-submit:hover {
      background-color: var(--sadc-green);
    }

    .note {
      margin-top: 1rem;
      font-size: 1.05rem;
      color: #666;
      text-align: center;
    }
textarea.form-control {
  border: 2px solid var(--sadc-green);
  border-radius: 12px; /* more rounded edges */
  padding: 12px 16px;
  width: 100%;
  min-height: 120px; /* enough space for input */
  font-size: 1.8rem;
  color: var(--sadc-blue);
  background-color: var(--sadc-white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); /* soft inner shadow */
}

textarea.form-control:focus {
  border-color: var(--sadc-yellow);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.2);
  outline: none;
}

input.form-control:focus,
textarea.form-control:focus {
  border-color: var(--sadc-yellow);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.2);
  outline: none;
}
select.form-control {
  border: 2px solid var(--sadc-green);
  border-radius: 12px;
  padding: 10px 14px;
  width: 100%;
  font-size: 1.5rem;
  color: var(--sadc-blue);
  background-color: var(--sadc-white);
  appearance: none; /* Remove native styling in some browsers */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L5%205.5L9%201%22%20stroke%3D%22%2300205B%22%20stroke-width%3D%222%22/%3E%3C/svg%3E"); 
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select.form-control:focus {
  border-color: var(--sadc-yellow);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.2);
  outline: none;
}