
.formcontainer {
  max-width: 1080px;
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  justify-content: center;  /* Horizontally center the content */
  align-items: center;
  flex-direction: column;   /* Stack form elements vertically */
}

/* Form Input and Textarea */
input, textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
  background-color: #2a2a2a;
  color: #fff;

  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  background-image:
    linear-gradient(#2a2a2a, #2a2a2a),  /* Inner background */
    linear-gradient(to right, #525252, #dddddd);  /* Border gradient */
}

/* Prevent textarea from resizing */
textarea {
  resize: none;
}


/* Prevent textarea from resizing */
textarea {
  resize: none;
}

/* Label Styling */
label {
  color: #fff;
  font-size: calc(1em + 0.2vw); /* Adjust label font size responsively */
}

/* Dropdown Styling */
#inquiry-type1, #inquiry-type2, #inquiry-type3 {
  width: 100%;
  height: 50px;
  font-size: 18px;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/* Message Section */
.form-message {
  margin-top: 10px;
  font-size: calc(0.8em + 0.3vw);
  color: white;
  text-align: center;
  display: none;
}

/* Submit Button */
#pay-now-submit-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 30px;
  background: linear-gradient(90deg, #f3e3c3, #eec063);
  color: #000;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

/* Hover effect for submit button */
#pay-now-submit-button:hover {
  background: linear-gradient(90deg, #eec063, #f3e3c3);
  color: #000;
}

/* Disabled state for button */
#pay-now-submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .formcontainer {
    max-width: 95%;
    padding: 3vw; /* Adjust padding for tablets */
  }

  input, textarea {
    font-size: calc(0.85em + 0.5vw); /* Slightly smaller font size for tablets */
  }

  label {
    font-size: calc(1em + 0.2vw); /* Adjust label font size */
  }

  #pay-now-submit-button {
    font-size: 16px; /* Adjust button font size for tablets */
  }
}

@media (max-width: 768px) {
  .formcontainer {
    max-width: 95%;
    padding: 4vw; /* Increase padding on smaller tablets */
  }

  input, textarea {
    font-size: calc(0.8em + 0.5vw); /* Reduce font size for smaller devices */
  }

  label {
    font-size: calc(1em + 0.1vw); /* Adjust label size for smaller screens */
  }

  #pay-now-submit-button {
    font-size: 14px; /* Smaller button text on tablets */
  }
}

@media (max-width: 480px) {
  .formcontainer {
    max-width: 95%;
    padding: 5vw; /* Further increase padding on mobile */
  }

  input, textarea {
    font-size: calc(0.7em + 0.5vw); /* Adjust font size for mobile */
  }

  label {
    font-size: 1rem; /* Set label font size to a fixed size for better readability on mobile */
  }

  #pay-now-submit-button {
    font-size: 14px; /* Keep button text smaller for mobile */
  }
}

    