.contact {
  padding: 3em 1em 5em;
}

.contact-title .suptitle {
  color: var(--black);
  margin-bottom: 1em;
}

.contact-title .suptitle::before {
  background-color: var(--black);
}

.contact-title h1 {
  font-size: 6.5em;
  line-height: 1.1;
  max-width: 5em;
}

.contact-title {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 5em;
}

.contact-title__box {
  width: calc(70% - 2em / 2);
}

.contact-title__description {
  width: calc(30% - 2em / 2);
  max-width: 14em;
}

.contact-title__description p {
  font-weight: 600;
}

.contact-title__description p b,
.contact-title__description p strong {
  color: var(--purple);
}

.contact-info__image {
  margin-top: 142px;
}

.contact-info__image img {
  display: block;
  width: 100%;
  border-radius: 0.8em;
}

.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5em;
}

.contact-info {
  width: calc(43% - 2.5em / 2);
}

.contact-form {
  width: calc(57% - 2.5em / 2);
}

.contact-info__list {
  list-style: none;
  padding: 0;
  margin: 3em 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3em;
}

.contact-info__list li {
  width: calc(50% - 3em / 2);
  font-weight: 600;
}

.contact-info__list li h6 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-2);
  margin-bottom: 1em;
}

.contact-info__list li p,
.contact-info__list li a {
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.contact-info__list li a:hover {
  color: var(--purple);
}

.contact-form__title {
  height: 142px;
}

.contact-form__title h4 {
  margin-bottom: 0.2em;
}

.contact-form__title p {
  color: var(--gray-1);
  font-size: 16px;
  font-weight: 600;
}

.form-input--checkbox,
.form-input {
  margin-bottom: 1.4em;
}

.form-input--checkbox label,
.form-input label {
  color: var(--black);
  font-weight: 600;
  display: block;
  font-size: 0.8em;
  margin-bottom: 0.8em;
  line-height: 1;
}

.form-input textarea,
.form-input input {
  width: 100%;

  background-color: var(--gray-4);
  color: var(--black);
  border-radius: 0.3em;
  min-height: 2.5em;
  margin-bottom: 0;
  padding: 0.8em 1em;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 150%;
  outline: none;
  border: 1px solid #ccc;
}

.form-input textarea {
  height: 10em;
  resize: none;
}

.form-input--checkbox br,
.form-input br {
  display: none;
}

.form-input-button input {
  background-color: var(--purple);
  color: var(--white);
  border-radius: 0.3em;
  min-height: 2.5em;
  margin-bottom: 0;
  padding: 0.8em 2em;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 150%;
  outline: none;
  border: 1px solid var(--purple);
  transition: all 0.3s ease-out;
}

.form-input-button input:hover {
  color: var(--purple);
  background-color: var(--white);
}

.wpcf7-not-valid-tip {
  font-size: 0.7em;
}

.form-input--checkbox .wpcf7-checkbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7em;
  width: 100%;
}

.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  width: calc(33.33% - 0.7em / 1.5);
  border: 1px solid #ccc;
  border-radius: 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  background-color: var(--gray-4);
}

.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item label {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item input {
  width: 18px;
  height: 18px;
  margin-right: 0.5em;
  appearance: none;
  background-color: var(--white);
  border-radius: 0.2em;
  border: 1px solid #ccc;
  position: relative;
}

.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item input::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;

  background-color: var(--purple);
  border-radius: 0.1em;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item input:checked {
  border-color: var(--purple);
}
.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item input:checked::before {
  opacity: 1;
}

.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item.is-checked {
  border-color: var(--purple);
}
/* 
.form-input--checkbox .wpcf7-checkbox .wpcf7-list-item.is-checked label {
  color: var(--white);
} */

.wpcf7-response-output {
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: var(--gray-4);
  border-radius: 0.6em;
  padding: 1em 2em !important;
  text-align: center;
  font-weight: 500;
}

.contact-map {
  margin-top: 0em;
  padding-bottom: 0em;
}

.contact-map iframe {
  height: 70vh !important;
  filter: grayscale(1);
}

@media only screen and (max-width: 1440px) {
  .contact-title h1 {
    font-size: 6em;
  }

  .form-input--checkbox .wpcf7-checkbox .wpcf7-list-item input::before {
    width: 8px;
    height: 8px;
  }

  .form-input--checkbox .wpcf7-checkbox .wpcf7-list-item input {
    width: 14px;
    height: 14px;
  }
}

@media only screen and (max-width: 991px) {
  .contact-title h1 {
    font-size: 5.2em;
  }

  .contact-title {
    flex-direction: column;
    padding-bottom: 2em;
  }

  .contact-form,
  .contact-title__box {
    width: 100%;
  }
  .contact-title__description {
    max-width: 100%;
    width: 100%;
  }

  .contact-title__description p {
    max-width: 20em;
  }

  .contact-details {
    flex-direction: column;
  }

  .contact-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
  }
  .contact-info__image {
    margin-top: 0;
    width: calc(50% - 2em / 2);
  }
  .contact-info__list {
    margin-top: 0;
    width: calc(50% - 2em / 2);
  }
  .contact-form__title {
    height: auto;
    margin-bottom: 2em;
  }
}

@media only screen and (max-width: 991px) {
  .contact-info__image {
    margin-top: 0;
    width: 100%;
  }
  .contact-info__list {
    margin-top: 0;
    width: 100%;
  }
  .contact-info__list {
    gap: 2em;
  }
  .contact-info__list li {
    width: calc(50% - 2em / 2.5);
    font-weight: 600;
  }
}

@media only screen and (max-width: 479px) {
  .form-input--checkbox .wpcf7-checkbox .wpcf7-list-item {
    width: calc(50% - 0.7em / 2);
  }

  .contact-info__list li p,
  .contact-info__list li a,
  .contact-form__title p {
    font-size: 14px;
  }
}