.contact {
  position: relative;
  padding: 108px 0 148px;
}

.contact__circle {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-90%);
  pointer-events: none;
  z-index: -1;
}

.contact__col--first {
  justify-content: center;
}

.contact__heading {
  font-size: 48px;
  line-height: 1.2;
  font-family: var(--font-playfair);
  color: var(--black);
  margin-bottom: 33px;
}

.contact__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 33px;
}

.contact__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact__item-title {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--black);
}

.contact__item-link {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--black);
}

.contact__socials {
  display: flex;
  gap: 8px;
}

.contact__social {
  display: flex;
}

.contact__social:hover rect {
  fill: var(--green);
}

.contact__social:hover path {
  fill: var(--white);
}

.contact__form {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  box-shadow: 0px 16px 32px 0px #0000001A;
  border-radius: 16px;
}

@media (max-width: 991px) {
  .contact {
    padding: 80px 0 110px;
  }
}

@media (max-width: 768px) {
  .contact {
    padding: 60px 0 90px;
  }

  .contact__circle {
    transform: translateX(-50%);
    width: 90%;
  }

  .contact__heading {
    margin-bottom: 16px;
  }

  .contact__heading {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .contact__item-title {
    font-size: 13px;
  }

  .contact__item-link {
    font-size: 14px;
  }

  .contact__form {
    border-radius: 12px;
  }
}