/*-----------------------------------*\
  #FORM PAGE
\*-----------------------------------*/

/* Form Container */
.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--section-padding);
  }
  
  .form-title {
    font-size: var(--fs-3);
    font-family: var(--ff-poppins);
    color: var(--st-patricks-blue);
    text-align: center;
    margin-bottom: 40px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  /* Form Input and Textarea Styles */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    width: 100%;
    padding: 15px;
    font-size: var(--fs-7);
    font-family: var(--ff-poppins);
    color: var(--purple-navy);
    border: 3px solid var(--ksu-purple);
    background-color: var(--platinum);
    box-sizing: border-box;
    transition: var(--transition-1);
    border-radius: 0; /* No border radius */
  }
  
  /* Larger Textarea */
  textarea {
    height: 150px;
    resize: none;
  }
  
  input:focus,
  textarea:focus {
    border-color: var(--chrome-yellow);
    outline: none;
  }
  
  /* Submit Button */
  .btn-submit {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: var(--fs-8);
    font-weight: var(--fw-700);
    color: var(--white);
    background-color: var(--razzmatazz);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition-2);
  }
  
  .btn-submit:is(:hover, :focus) {
    background-color: var(--chrome-yellow);
    color: var(--white);
  }
  
  /* Responsive Form Layout */
  @media (min-width: 768px) {
    .form-container {
      max-width: 600px;
    }
  
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
      font-size: var(--fs-6);
      padding: 20px;
    }
  }
  
  /* Error and Success Messages */
  .error-message,
  .success-message {
    font-size: var(--fs-7);
    padding: 15px;
    border: 3px solid;
    margin-bottom: 20px;
    display: none;
  }
  
  .error-message {
    color: var(--winter-sky);
    background-color: hsla(335, 87%, 53%, 0.1);
    border-color: var(--winter-sky);
  }
  
  .success-message {
    color: var(--ksu-purple);
    background-color: hsla(275, 54%, 33%, 0.1);
    border-color: var(--ksu-purple);
  }
  
  .error-message.active,
  .success-message.active {
    display: block;
  }