.edu-exp-form-container {
display: flex;
flex-direction: column;
background: var(--pure-white);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 900px;
width: 80%;
font-family: Arial, sans-serif;
margin: 0 auto;
}


.edu-exp-form-container h2 {
color: var(--dark-gray); 
font-family: Arial, sans-serif;
font-size: var(--font-size-h4); 
font-weight:var(--font-weight-semibold);
margin-bottom:8px;
}

.edu-exp-form-container h1 {
color: var(--strong-blue); 
font-size: var(--font-size-h3); 
font-weight:var(--font-weight-semibold); 
font-family: Arial, sans-serif;
margin-bottom:16px;
}

.edu-exp-form-container button {
background-color: var(--strong-blue);
color: white;
padding: 0.75rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
max-width: 150px; /* Set a maximum width for the button */
}

.edu-exp-form-container button:hover {
background-color: var(--hover-butn-for-strong-blue);
}

.edu-exp-form-container label {
display: block;
margin-bottom: 0.5rem;
color: var(--dark-gray);
font-weight: bold;
}

.edu-exp-form-container .required::after {
content: " *";
color: red;
}

.edu-exp-form-container input,
.edu-exp-form-container select,
.edu-exp-form-container textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

.hidden {
display: none;
}

.error-message {
display: none;
color: red;
font-size: 1em;
margin-bottom: 25px;
}

.fetch-error {
margin-top: 1rem;
padding: 1rem;
color:#b00020;
font-size: 1.2em;
background-color: #ffe6e6; 
height: 50px; /* Reserve space for error messages to prevent layout shifts */
border-radius: 6px;
border: 1px solid #f5c2c2;
}

.success-message {
color: var(--strong-blue); 
font-size: var(--font-size-h5); 
font-weight:var(--font-weight-semibold); 
font-family: var(--font-family-montserrat);
margin-top:var(--margin-xs);
margin-left:var(--margin-xs);
}

.general-error-heading {
color: red;
font-size: 1em;
height: 20px; 
}

/* ========== LARGE DESKTOPS (min-width: 1920px) ========== */
@media (min-width: 1920px) {
    .edu-exp-form-container {
      font-size: 20px;
      padding: 3rem;
      width: 80%;
      max-width: 1000px;
    }
  
    .edu-exp-form-container h1 {
      font-size: 30px;
    }
  
    .edu-exp-form-container h2 {
      font-size: 24px;
    }
  
    .edu-exp-form-container label,
    .edu-exp-form-container input,
    .edu-exp-form-container select,
    .edu-exp-form-container textarea {
      font-size: 20px;
    }

    .edu-exp-form-container button {
      font-size: 20px;
      padding: 16px;
      max-width: 200px;
    }

    .error-message {
      font-size: 20px;
    }

    .fetch-error {
     font-size: 20px;
    }

    .general-error-heading {
      font-size: 20px;
    }
  
    .success-message {
      font-size: 24px;
    }
  }

/* ========== STANDARD LAPTOPS (max-width: 1280px) ========== */
@media (max-width: 1280px) {
    .edu-exp-form-container {
      font-size: 16px;
      padding: 1.5rem;
      width: 80%;
      max-width: 850px;
    }
  
    .edu-exp-form-container h1 {
      font-size: 26px;
    }
  
    .edu-exp-form-container h2 {
      font-size: 20px;
    }
  
    .edu-exp-form-container label,
    .edu-exp-form-container input,
    .edu-exp-form-container select,
    .edu-exp-form-container textarea {
     font-size: 16px;
    }

    .edu-exp-form-container button {
      font-size: 16px;
      padding: 10px;
      max-width: 130px;
    }

    .error-message {
     font-size: 16px;
    }

    .fetch-error {
     font-size: 16px;
    }

    .general-error-heading {
     font-size: 16px;
    }
  
    .success-message {
      font-size: 20px;
    }
  }

/* ========== SMALL LAPTOPS (max-width: 1024px) ========== */
@media (max-width: 1024px) {
    .edu-exp-form-container {
      font-size: 15px;
      padding: 1.5rem;
      width: 80%;
      max-width: 650px;
    }
  
    .edu-exp-form-container h1 {
      font-size: 24px;
    }
  
    .edu-exp-form-container h2 {
      font-size: 18px;
    }
  
    .edu-exp-form-container label,
    .edu-exp-form-container input,
    .edu-exp-form-container select,
    .edu-exp-form-container textarea {
     font-size: 15px;
    }

    .edu-exp-form-container button {
      font-size: 15px;
      padding: 10px;
      max-width: 120px;
    }

    .error-message {
    font-size: 15px;
    }

    .fetch-error {
        font-size: 15px;
    }

    .general-error-heading {
        font-size: 15px;
    }
  
    .success-message {
      font-size: 18px;
    }
  }