.contact-page-container {
  display: flex;
  justify-content: space-between;
  padding: 0px 15px;
  gap: 32px;
  margin-top: 79px;
  @media (max-width: 880px) {
    flex-direction: column;
    margin-top: 52px;
  }
  & .contact-page-container-inner {
    display: flex;
    flex-direction: column;
    gap: 112px;
    width: 50%;
    @media (max-width: 880px) {
      width: 100%;
    }
    & .contact-first-container {
      display: flex;
      gap: 24px;
      @media (max-width: 880px) {
        flex-direction: column;
      }
      & img {
        width: 160px;
        height: 160px;
        border-radius: 50%;
      }
      & .contact-title-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        max-width: 381px;
        & h1 {
          font-family: "Playfair-Display", sans-serif;
          font-weight: 400;
          font-size: 56px;
          color: #070707;
          margin: 0;
          @media (max-width: 780px) {
            font-size: 36px;
          }
        }
        & p {
          font-family: "Inter-Display", sans-serif;
          font-size: 14px;
          font-weight: 400;
          color: #4f4f4f;
          margin: 0;
        }
      }
    }
    & .contacts {
      display: flex;
      gap: 32px;
      flex-direction: column;
      & .contact {
        display: flex;
        gap: 16px;
        align-items: center;
        & p {
          margin: 0;
          & a {
            font-family: "Inter-Display", sans-serif;
            font-size: 18px;
            font-weight: 400;
            color: #070707;
            text-decoration: none;
          }
        }
      }
      @media (max-width: 780px) {
        display: none;
      }
    }
  }
  & .contact-form-container {
    max-width: 50%;
    width: 100%;
    @media (max-width: 880px) {
      max-width: 100%;
    }
    & div.wpcf7 {
      & form {
        & input {
          border-radius: 12px;
          padding: 22px 24px;
          border: 1px solid #c7c7c7;
          transition: transform 0.8s ease;
          width: 100%;
          font-family: "Inter-Display", sans-serif;
          font-size: 16px;
          font-weight: 500;
          color: #070707;
        }
        & .wpcf7-list-item {
          margin: 0;
          & label {
            font-family: "Inter-Display", sans-serif;
            font-size: 12px;
            font-weight: 400;
            color: #4F4F4F;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            & a {
              color: #4F4F4F;
            }
            & input[type="checkbox"] {
              padding: unset;
              border-radius: 4px;
              width: 24px;
              height: 24px;
              position: relative;
              @media (max-width: 880px) {
                width: 30px;
                height: 25px;
              }
            }
            & input[type="checkbox"]:checked {
              background-color: #566955;
            }
            & input[type="checkbox"]:checked::before {
              content: "\2713";
              color: white;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 5px;
              height: 10px;
            }
          }
        }
        & input:focus-visible {
          transition: transform 0.8s ease;
          border: 1px solid #566955;
        }
        & input[aria-invalid="true"] {
          transition: transform 0.8s ease;
          border: 1px solid #ff4e4e;
        }
        & input::placeholder {
          font-family: "Inter-Display", sans-serif;
          font-size: 16px;
          font-weight: 500;
          color: #070707;
        }
        & span.wpcf7-not-valid-tip[aria-hidden="true"] {
          font-family: "Inter-Display", sans-serif;
          font-size: 14px;
          font-weight: 500;
          padding: 14px 0px 0px 24px;
        }
        & textarea {
          border-radius: 12px;
          border: 1px solid #c7c7c7;
          width: 100%;
          padding: 22px 24px;
        }
        & textarea:focus-visible {
          transition: transform 0.8s ease;
          border: 1px solid #566955;
        }
        & textarea[aria-invalid="true"] {
          transition: transform 0.8s ease;
          border: 1px solid #ff4e4e;
        }
        & textarea::placeholder {
          border-radius: 12px;
          font-family: "Inter-Display", sans-serif;
          font-size: 16px;
          font-weight: 500;
          color: #070707;
        }
        & .contact-form-button {
          margin-top: 40px;
          & p {
            margin: 0;
            & button {
              background-color: #566955;
              transition: background-color 0.3s, border-color 0.3s;
              border-radius: 12px;
              display: flex;
              align-items: center;
              gap: 14px;
              padding: 25px 36px;
              & span {
                font-family: "Inter-Display", sans-serif;
                color: #FFFFFF;
                font-size: 16px;
                font-weight: 500;
              }
              &:hover {
                background-color: #729e70;
                transition: 0.3s;
              }
            }
          }
        }
      }
    }
  }
  & .contacts-mobile {
    display: none;
    @media (max-width: 780px) {
      display: flex;
      gap: 32px;
      flex-direction: column;
      & .contact {
        display: flex;
        gap: 16px;
        align-items: center;
        & p {
          margin: 0;
          & a {
            font-family: "Inter-Display", sans-serif;
            font-size: 18px;
            font-weight: 400;
            color: #070707;
            text-decoration: none;
          }
        }
      }
    }
  }
}