/* upper */
.contacts-page-upper {
  display: grid;
  gap: 100px;
  grid-template-columns: 2fr 1.5fr;
  padding-top: 70px;
  transition: all 0.4s ease;

  /* left side */
  .contacts-page-upper-left {
    .h3 {
      padding-bottom: 16px;
    }
    .contacts-page-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: 32px 0 70px;
      transition: margin 0.4s ease;
    }
    .contacts-input {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .contacts-input .body1 {
      padding: 13px 16px;
      height: 50px;
      border-radius: 4px;
      border: 1px solid var(--border1);
      color: var(--grey1);
      outline: none;
      transition: border-color 0.4s ease, height 0.4s ease,
        margin-bottom 0.4s ease;
    }
    .contacts-input textarea.body1 {
      height: 150px;
      resize: none;
    }
    .contacts-input .body1:hover {
      border-color: var(--blue1);
    }
    .contacts-input .body1:focus {
      border-color: var(--blue1);
      color: var(--black1);
    }
    .contacts-input .body1:not(:placeholder-shown) {
      color: var(--black1);
      border-color: var(--blue1);
    }
    .error-message.success {
      color: var(--greenSuccess);
    }
    .error-message.error.caption1 {
      color: var(--redError);
    }
  }
  /* right side */
  .contacts-page-upper-right {
    .h3 {
      color: var(--black1);
      padding-bottom: 32px;
      transition: padding-bottom 0.4s ease;
    }

    .border-line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 16px 0;
      background: var(--border1);
      transition: margin 0.4s ease;
    }
  }
  .contacts-page-upper-contacts {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--black1);
    padding: 16px 0;
    transition: all 0.4s ease;

    img {
      height: 50px;
      width: 50px;
      -o-object-fit: cover;
      object-fit: cover;
      -o-object-position: center;
      object-position: center;
      transition: all 0.4s ease;
    }
  }
  .h5 {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .h5 a {
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s ease;
  }
  .h5 a:hover {
    border-bottom: 1px solid var(--black1);
  }
  .caption1 {
    color: var(--grey1);
  }
}
/* middle part */
.contacts-page-middle {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
  padding: 50px 0 0;
  transition: gap 0.4s ease, padding 0.4s ease;

  .contacts-page-middle-title {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .h3 {
      color: var(--black1);
    }
    .body1 {
      color: var(--grey1);
    }
  }
  .contacts-page-middle-map {
    border-radius: 16px;
    overflow: hidden;
  }
  .contacts-page-middle-map iframe {
    height: 400px;
    transition: height 0.4s ease;
  }
}

@media (max-width: 870px) {
  .contacts-page-upper {
    display: flex;
    flex-direction: column-reverse;
    gap: 50px;
    padding-top: 32px;
  }
}

@media (max-width: 768px) {
  /* upper right */
  .contacts-page-upper {
    .contacts-page-upper-left {
      .contacts-page-form {
        margin: 24px 0 0;
        gap: 12px;
      }
      .contacts-input .body1 {
        height: 45px;
      }
      .contacts-input textarea.body1 {
        height: 120px;
        margin-bottom: 4px;
      }
    }

    .contacts-page-upper-right {
      .h3 {
        padding-bottom: 24px;
      }
      .border-line {
        margin: 12px 0;
      }
    }
  }
  .contacts-page-upper-contacts {
    gap: 16px;

    img {
      height: 40px;
      width: 40px;
    }
  }
  /* middle */
  .contacts-page-middle {
    gap: 24px;
    padding: 50px 0 0;

    .contacts-page-middle-map iframe {
      height: 200px;
    }
  }
}