.container-form {
  position: relative;
  background: #c4112e;
  padding: 20px; /* Slightly larger padding */
  border-radius: 6px; /* Slightly rounded corners */
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

.header {
  text-align: center;
  margin-bottom: 18px; /* Medium spacing */
}

.required {
  color: #ffee06;
  font-weight: bold;
  margin-left: 4px; /* Medium spacing for asterisk */
}

#logo img {
  max-width: 100%;
  height: auto;
}

#online {
  font-size: 1.5rem; /* Reduced font size */
  color: rgb(255, 255, 255);
}

.container-form header {
  font-size: 1.4rem; /* Slightly larger font size for header */
  color: #333;
  font-weight: 500;
  text-align: center;
}

.container-form .form {
  margin-top: 25px; /* Adjusted spacing */
}

.form .input-box {
  width: 100%;
  margin-top: 18px; /* Medium spacing */
}

.input-box label {
  font-size: 0.78rem; /* Smaller font for inputs and labels */
  color:#FFFFFF;
}

.form :where(.input-box input, .select-box) {
  position: relative;
  height: 35px; /* Medium input height */
  width: 100%;
  outline: none;
  font-size: 0.78rem; /* Smaller font for inputs and labels */
  color:#111111;
}

.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.form .column {
  display: flex;
  column-gap: 12px; /* Medium gap between columns */
}

.address :where(input, .select-box) {
  margin-top: 12px; /* Medium spacing for address fields */
}

.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  font-size: 0.78rem; /* Smaller font for inputs and labels */
}

.form button {
  height: 50px; /* Medium button height */
  width: 50%;
  color:#000000;
  font-size: 0.78rem; /* Smaller font for inputs and labels */
  font-weight: 400;
  margin-top: 25px; /* Medium spacing above the button */
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgb(255 214 0);
  display: block;
  margin: 25px auto 0; /* Centering the button */
  border-radius: 8px; /* Added border radius */
}

.form button:hover {
  background:#F58F0E;
}

/* Responsive adjustments */
@media screen and (max-width: 500px) {
  .form .column {
    flex-wrap: wrap;
    column-gap: 0;
  }
  .form :where(.gender-option, .gender) {
    row-gap: 12px; /* Medium row gap */
  }
}