﻿.contact {
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact p {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}

.contact-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact .button-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact > div > h2:nth-last-of-type(1) {
  margin-top: 2rem;
}

.contact-input {
  display: flex;
  padding: 0.75rem 1.625rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 100px;
  border: 2px solid var(--color-black, #000);
}

@media screen and (min-width: 768px) {
  .contact {
    flex-direction: row !important;
    justify-content: space-between;
    gap: 4rem;
  }

.contact p {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0.5rem;
}

  /* .contact h2 {
    font-size: 48px;
    line-height: 60px;
    margin-bottom: 1.5rem;
  } */

.contact h3 {
    font-size: 1.875rem;
    line-height: 2.375rem;
}

  .contact form {
    flex-direction: row;
  }

  .contact input {
    min-width: 300px;
  }

  .contact .button-group {
    gap: 1rem;
  }

  /* .contact > div > h2:nth-last-of-type(1) {
    margin-top: 40px;
  } */
}

@media screen and (min-width: 992px) {
}

@media screen and (min-width: 1200px) {
  .contact {
    display: flex;
    justify-content: space-between;
  }

  .contact-section {
    width: 50%;
  }
}

@media screen and (min-width: 1400px) {
  .contact aside {
    max-width: 380px;
  }

  .contact p {
    font-size: 1.875rem;
    line-height: 2.375rem;
    margin-bottom: 0.5rem;
}

  /* .contact h2 {
    font-size: 60px;
    line-height: 72px;
    margin-bottom: 0;
  } */

  .contact h3 {
    font-size: 1.875rem;
    line-height: 2.375rem;
    max-width: 313px;
  }

  /* .contact > div > h2:nth-last-of-type(1) {
    margin-top: 64px;
  } */

  .contact-section {
    width: 60%;
  }
}
