.contact {
  padding: 80px 0;
  min-height: 100vh;
  scroll-margin-top: 10px;
  opacity: 0;
  transform: translateY(20px); 
  transition: opacity 0.6s ease, transform 0.6s ease; 
  }
  

.is-visible {
  opacity: 1; /* Fade in */
  transform: translateY(0); /* Move to original position */
}

  .section__title {
    font-size: 2rem;
    text-align: center;
    color: #1e3c71;
    margin-bottom: 0.5rem;
  }
  
  /* Subtitle styling */
  .section__subtitle {
    font-size: 1rem;
    text-align: center;
    color: #0e2f67;
    display: block;
    margin-bottom: 2rem;
  }
  
  .contact__form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align the form items */
    gap: 1rem; /* Space between items */
  }
  
  .contact__content {
    width: 100%;
    max-width: 400px; /* Max width for inputs */
  }
  
  .content__label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold; 
    opacity: 0;
    transform: translateY(20px); 
    transition: opacity 1s ease, transform 1s ease;
  }
  
  .contact__input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    font-size: 1rem; /* Font size for inputs */
    opacity: 0;
    transform: translateY(20px); 
    transition: opacity 1s ease, transform 1s ease;
  }
  
  .contact__input:focus {
    outline: none;
    border-color: #1c3a6e; /* Change border color on focus */
  }

  /* Responsive Styles */
  @media (max-width: 971px) {
    .contact__content {
      max-width: 90%; /* Reduce max width */
    }
  }
  
  @media (max-width: 767px) {
    .contact__content {
      max-width: 85%; /* Further reduce max width */
    }
  }
  
  @media (max-width: 467px) {
    .contact__content {
      max-width: 80%; /* Further reduce max width */
    }
  }
  
  @media (max-width: 250px) {
    .contact__content {
      max-width: 90%; /* Allow more space on very small screens */
    }
  }