@import url(./styles.css);

@media (max-width: 768px) {

  .contact-container {
    padding: var(--18px);
    width: var(--320px);
    height: 100%;
  }

  #contact-form {
    gap: var(--12px);
  }

  .name-fields {
    flex-direction: column;
    gap: var(--10px);
  }

  .form-query-type {
    flex-direction: column;
  }

  .form-group label, .query-type label {
    font-size: var(--14px);
  }

  .form-group textarea {
    min-height: 9rem;
  }

  .error-message {
    font-size: var(--12px);
    margin-bottom: var(--10px);
  }

  .success-state {
    width: 90%;
    top: 2%;
  }

  @keyframes slideDown {
    0% {
      top: -100px;
      opacity: 0;
    }
    100% {
      top: 2%;
      opacity: 1;
    }
  }
}