/*  */

:root {
  --black: #140f05;
  --yellow: #eeb43c;
  --yellow-hover: #ffc857;
  --grey: #afafae;
  --white: #f8f5f2;

  --background-img: linear-gradient(
    77.55deg,
    #140f05 13.23%,
    rgba(20, 15, 5, 0) 70.24%
  );

  --background-img_2: linear-gradient(
    62.37deg,
    rgba(0, 0, 0, 0.8) 23.57%,
    rgba(0, 0, 0, 0) 62.95%
  );

  --background-img_3: linear-gradient(
    180deg,
    rgba(20, 15, 5, 0) 65.83%,
    #140f05 100%
  );
}

/* Typography */

._h1 {
  font-weight: 600;
  font-size: 6rem;
  line-height: 110%;
  letter-spacing: 0%;

  @media (max-width: 767px) {
    font-size: 3.4rem;
  }
}
._h2 {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 110%;
  letter-spacing: 0%;

  @media (max-width: 767px) {
    font-size: 2.4rem;
  }
}
._h3 {
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 140%;
  letter-spacing: 0%;

  @media (max-width: 767px) {
    font-size: 1.6rem;
  }
}
._h4 {
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 140%;
  letter-spacing: 3%;

  @media (max-width: 767px) {
    font-size: 1.6rem;
  }
}
._p1 {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 140%;
  letter-spacing: 0%;

  @media (max-width: 767px) {
    font-size: 1.6rem;
  }
}
._p2 {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 140%;
  letter-spacing: 0%;
}
._btn-typo {
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 140%;
  letter-spacing: 0%;

  @media (max-width: 767px) {
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 3%;
  }
}
._menu {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 110%;
  letter-spacing: 3%;
}

/* Buttons */

._btn-def {
  background-color: var(--yellow);

  &:hover {
    background-color: var(--yellow-hover);
  }
  &:active {
    background-color: var(--yellow);
  }
}

._btn-sec {
  background-color: var(--yellow);

  &:hover {
    background-color: var(--white);
  }
  &:active {
    background-color: var(--yellow);
  }
}

/* STYLE - - - PAGE */

/* section-one */

.section-one {
  position: relative;
  .section-one_img {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--background-img);
      z-index: 1;

      @media (max-width: 767px) {
        background: var(--background-img_2);
      }
    }

    img {
      position: absolute;
      inset: 0;

      @media (max-width: 767px) {
        object-fit: cover;
        object-position: -95rem;
      }
    }
  }

  ._container-section__one {
    position: relative;
    z-index: 2;
    padding: 10rem 16rem;

    height: 62rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media (max-width: 767px) {
      padding: 5rem 1.6rem;

      height: 60rem;
    }
  }

  .block-text {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    color: var(--white);

    @media (max-width: 767px) {
      gap: 2rem;
    }

    h1 {
      text-transform: uppercase;
    }

    sup {
      font-size: 3.4rem;

      @media (max-width: 767px) {
        font-size: 2rem;
      }
    }

    /* section copy --- services*/

    p {
      max-width: 58rem;

      @media (max-width: 767px) {
      }
    }
  }

  .section-one_btn {
    display: flex;
    align-items: center;
    gap: 2rem;

    padding: 1.4rem 1.75rem 1.4rem 2.4rem;
    width: fit-content;

    @media (max-width: 767px) {
      margin-top: 33rem;
      justify-content: space-between;
      width: 100%;
    }
  }
}

/* section-two */

.section-two {
  .section-two_header {
    display: flex;
    justify-content: space-between;
    align-items: end;

    a {
      display: flex;
      gap: 6rem;

      padding: 1.4rem 1.6rem 1.4rem 2.4rem;
      color: var(--black);
      height: fit-content;

      @media (max-width: 767px) {
        display: none;
      }
    }
  }

  .section-two_block {
    margin-top: 11rem;

    display: flex;
    gap: 17rem;

    @media (max-width: 767px) {
      flex-direction: column-reverse;
      gap: 4rem;

      margin-top: 6rem;
    }

    .section-two_block-img {
      position: relative;

      &::before {
        content: "";
        background: url(/src/img/img-3.png);

        position: absolute;
        top: -3rem;
        left: -3rem;

        width: 38rem;
        height: 29rem;

        @media (max-width: 767px) {
          width: 23rem;
          height: 16rem;

          top: -1rem;
          left: -1rem;
        }
      }

      img {
        width: 62rem;
        height: 41rem;

        position: relative;
        z-index: 2;

        @media (max-width: 767px) {
          width: 33.5rem;
          height: 22rem;
        }
      }
    }

    a {
      color: var(--black);
      display: none;
      gap: 6rem;

      padding: 1.4rem 1.6rem 1.4rem 2.4rem;

      @media (max-width: 767px) {
        display: flex;
        width: fit-content;
        gap: 2.5rem;

        padding: 1.4rem 1.2rem 1.4rem 1.6rem;
      }
    }

    .section-two_block-content {
      display: flex;
      flex-direction: column;
      justify-content: end;
      gap: 2rem;

      @media (max-width: 767px) {
        gap: 1.5rem;
      }

      h3 {
        text-transform: uppercase;
      }
    }
  }
}

/* section-three */

.section-three {
  .section-three__header {
    display: flex;
    justify-content: space-between;
    align-items: end;

    h2 {
      width: 81rem;

      @media (max-width: 767px) {
        font-size: 2.8rem;
      }
    }

    a {
      color: var(--black);
      display: flex;
      gap: 6rem;

      padding: 1.4rem 1.6rem 1.4rem 2.4rem;

      height: fit-content;

      @media (max-width: 767px) {
        display: none;
      }
    }
  }

  .section-three__block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
    align-items: stretch;
    margin-top: 8rem;

    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 2rem;

      margin-top: 6rem;
    }

    .block_card {
      height: 100%;
      background-color: var(--black);

      display: flex;
      flex-direction: column;

      .block_card-img {
        position: relative;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--background-img_3);
          z-index: 1;
        }

        img {
          height: 30rem;

          @media (max-width: 767px) {
            height: 20rem;
          }
        }
      }

      .block_card-content {
        padding: 3rem;

        min-height: 44rem;

        display: flex;
        flex-grow: 1;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
        gap: 2rem;

        @media (max-width: 767px) {
          min-height: 35rem;

          padding: 2rem;
        }

        hgroup {
          display: flex;
          flex-direction: column;
          gap: 2rem;

          h4 {
            color: var(--white);
            text-transform: uppercase;
          }
          p {
            color: var(--white);
          }
        }

        a {
          padding: 1.85rem;
          border-radius: 50%;
          width: fit-content;
        }
      }
    }
  }

  .section-three__block-copy {
    margin-top: unset;
  }

  .section-three__btn {
    display: none;

    @media (max-width: 767px) {
      display: flex;
      justify-content: space-between;

      color: var(--black);
      margin-top: 4rem;
      padding: 1.4rem 1.2rem 1.4rem 1.6rem;
      width: 100%;
    }
  }
}

/* section-four */

.section-four {
  position: relative;
  padding-bottom: 18rem;
  margin-top: 18rem;

  @media (max-width: 767px) {
    padding-bottom: 12rem;
    margin-top: 12rem;
  }

  .section-four_back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(20, 15, 5, 1);
      opacity: 50%;
      z-index: 1;
    }
  }
  .section-four__core {
    position: relative;
    z-index: 2;
    h2 {
      text-align: center;
      color: var(--white);
    }
  }

  .section-four__container {
    margin-top: 10rem;

    @media (max-width: 767px) {
      display: flex;
      margin-top: 6rem;
    }
  }
  .block-impuls {
    @media (max-width: 767px) {
      display: flex;
    }
    .box-number {
      display: flex;
      gap: 39rem;

      color: var(--grey);

      @media (max-width: 767px) {
        flex-direction: column;
        gap: 7rem;
      }

      span {
        height: 3.2rem;
        width: 2rem;

        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .box-progress {
      position: relative;
      margin-top: 1.2rem;

      @media (max-width: 767px) {
        display: flex;
        flex-direction: column;
        margin-top: unset;
        margin-left: 3rem;
      }

      span {
        background-color: var(--grey);
        width: 1rem;
        height: 1rem;
        border-radius: 50%;

        position: absolute;
        top: -0.3rem;
        z-index: 2;
      }

      .dot_01 {
        left: 17.5rem;

        @media (max-width: 767px) {
          top: 4.6rem;
          top: 15%;
          left: -0.35rem;
        }
      }
      .dot_02 {
        left: 60rem;

        @media (max-width: 767px) {
          top: 9.4rem;
          top: 40%;
          left: -0.35rem;
        }
      }
      .dot_03 {
        left: 100rem;

        @media (max-width: 767px) {
          top: 18.8rem;
          top: 70%;
          left: -0.35rem;
        }
      }
      .dot_04 {
        left: 141rem;

        @media (max-width: 767px) {
          top: 30.4rem;
          top: 98%;
          left: -0.35rem;
        }
      }
      .progress-bar {
        width: 100%;
        height: 0.3rem;
        background-color: var(--grey);
        position: relative;

        @media (max-width: 767px) {
          height: 36.5rem;
          width: 0.3rem;
        }
      }
    }
  }
  .block-content {
    color: var(--white);
    margin-top: 2.4rem;

    display: flex;
    gap: 4rem;

    @media (max-width: 767px) {
      flex-direction: column;
      margin-top: unset;
      margin-left: 3rem;
      justify-content: space-between;
    }

    p {
      width: 37rem;

      @media (max-width: 767px) {
        width: unset;
      }
    }
  }

  .progress-bar-fill {
    height: 100%;
    width: 0;
    background-color: var(--yellow);
    position: absolute;
    left: 0;
    top: 0;
    transition: width 1.5s linear;
  }
  .progress-bar-fill.moving {
    box-shadow: 0 -0.1rem 0.1rem var(--yellow), 0 0.1rem 0.1rem var(--yellow);
  }
  .active-dot {
    background-color: var(--yellow) !important;
    width: 2rem !important;
    height: 2rem !important;
    transform: translateY(-0.5rem);
    transition: all 0.3s ease;

    @media (max-width: 767px) {
      width: 1.5rem !important;
      height: 1.5rem !important;
      transform: translateX(-0.2rem);
    }
  }

  .active-number {
    color: var(--white) !important;
    font-size: 3.2rem !important;
    transition: all 0.3s ease;

    @media (max-width: 767px) {
      font-size: 2rem !important;
    }
  }
}

/* section-five */

.section-five {
  h2 {
    text-align: center;
  }

  .section-five_block {
    margin-top: 8rem;

    display: flex;
    justify-content: space-between;
    gap: 12.5rem;

    @media (max-width: 767px) {
      margin-top: 6rem;

      gap: 4rem;

      width: 100%;

      overflow-x: scroll;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    div {
      width: 22rem;
      height: 22rem;

      @media (max-width: 767px) {
        width: 120px;
        height: 120px;
      }

      img {
        @media (max-width: 767px) {
          width: 120px;
          height: 120px;
        }
      }
    }
  }
}

/* section-six */

.section-six {
  position: relative;
  background-color: var(--black);

  .section-six_img {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 97rem;
      height: 100%;
      background: var(--background-img);
      z-index: 1;

      @media (max-width: 767px) {
        width: 38rem;
      }
    }

    img {
      position: absolute;
      top: 0;
      right: 0;

      width: 96rem;
      height: 100%;

      @media (max-width: 767px) {
        object-position: 50rem;
      }
    }
  }

  /* copy  style */
  .section-six_img__copy {
    img {
      @media (max-width: 767px) {
        object-position: 20rem;
        object-fit: cover;
      }
    }
  }

  ._container-section__six {
    position: relative;
    z-index: 2;
    padding: 10rem 16rem;

    @media (max-width: 767px) {
      padding: 5rem 1.6rem;
    }
  }

  .block-text {
    color: var(--white);
    max-width: 110rem;

    h1 {
      text-transform: uppercase;
    }
  }

  /* copy style */
  .block-text__copy {
    max-width: 90rem;
  }

  .section-six_btn {
    display: flex;
    align-items: center;
    gap: 2rem;

    padding: 1.4rem 1.75rem 1.4rem 2.4rem;

    margin-top: 20rem;

    @media (max-width: 767px) {
      margin-top: 33rem;
      justify-content: space-between;
      width: 100%;
    }
  }
}

/* section-seven */

.section-seven {
  .section-seven__container {
    display: flex;
    gap: 20rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 6rem;
    }

    h2 {
      white-space: nowrap;
    }
    .section-seven__block {
      h3 {
        text-transform: uppercase;

        margin-bottom: 6rem;

        @media (max-width: 767px) {
          margin-bottom: 4rem;
        }
      }

      div {
        display: flex;
        flex-direction: column;
        gap: 6rem;

        @media (max-width: 767px) {
          gap: 4rem;
        }
        hgroup {
          display: flex;
          flex-direction: column;
          gap: 2rem;

          h4 {
            display: flex;
            gap: 2rem;

            text-transform: uppercase;

            span {
            }
          }

          p {
          }
        }
      }
    }
  }
}

/* section-eight */

.section-eight {
  .section-eight__container {
    display: flex;
    gap: 17rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 6rem;
    }
  }
  h2 {
  }
  .section-eight__container-content {
    width: 150rem;

    @media (max-width: 767px) {
      width: unset;
    }
  }
  h3 {
    margin-bottom: 6rem;
    text-transform: uppercase;

    @media (max-width: 767px) {
      margin-bottom: 4rem;
    }
  }
  .contacts__block {
    margin-bottom: 4rem;

    display: flex;
    gap: 7rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 1.5rem;
    }

    a {
      pointer-events: none;

      display: flex;
      align-items: center;
      gap: 2rem;

      color: black;

      @media (max-width: 767px) {
        pointer-events: unset;
      }
    }
  }

  .section-eight__container-form {
    margin-top: 4rem;
  }
  .form-page {
    margin-top: 2rem;

    .form-page__block {
      input {
        outline: unset;
        padding: 1.4rem 2rem;
        background-color: unset;

        width: 100%;

        border-bottom: 1px solid var(--grey);

        &:hover {
          border-bottom-color: var(--yellow);
        }
        &:focus {
          border-bottom-color: var(--yellow);
        }
        .field-label {
          color: var(--yellow);
        }
        &::placeholder {
          font-weight: 400;
          font-size: 1.8rem;
          line-height: 140%;
          letter-spacing: 0%;

          color: var(--grey);

          @media (max-width: 767px) {
            font-size: 1.6rem;
          }
        }
      }

      .field-name {
        position: relative;
        width: 100%;
        &:hover {
          .field-label {
            color: var(--yellow);
          }
        }

        .field-label {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 2rem;

          font-size: 1.6rem;
          font-family: "Open Sans";
          color: var(--grey);

          .field-input:focus + & {
            color: var(--yellow);
          }
        }

        .field-input:not(:placeholder-shown) + .field-label {
          transition: 0.3s ease;
          font-size: 1.1rem;
          top: 10%;
        }
      }
      .field-tel {
        position: relative;
        width: 100%;

        &::placeholder {
          color: var(--grey);

          font-weight: 400;
          font-size: 1.8rem;
          line-height: 140%;
          letter-spacing: 0%;

          @media (max-width: 767px) {
            font-size: 1.6rem;
          }
        }
        .field-label {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 2rem;

          font-size: 1.6rem;
          font-family: "Open Sans";
          color: var(--grey);
          display: none;
        }
        .field-input {
          &:hover {
            &::placeholder {
              color: var(--yellow);
            }
          }
          &:focus {
            &::placeholder {
              color: var(--yellow);
            }
          }
        }
        .field-input:focus + .field-label {
          color: var(--yellow);
        }

        .field-input:not(:placeholder-shown) + .field-label {
          transition: 0.3s ease;
          font-size: 1.1rem;
          top: 10%;
          display: block;
        }
      }
      .field-mail {
        position: relative;
        width: 100%;

        &:hover {
          .field-label {
            color: var(--yellow);
          }
        }

        .field-label {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 2rem;

          font-size: 1.6rem;
          font-family: "Open Sans";
          color: var(--grey);

          .field-input:focus + & {
            color: var(--yellow);
          }
        }

        .field-input:not(:placeholder-shown) + .field-label {
          transition: 0.3s ease;
          font-size: 1.1rem;
          top: 10%;
        }
      }
    }
  }
  .form-page__block {
    display: flex;
    gap: 3.2rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 1.5rem;
    }
  }
  .btn-form__page {
    margin-top: 4rem;
    padding: 1.5rem 2.4rem;

    display: flex;
    align-items: center;
    gap: 2rem;

    @media (max-width: 767px) {
      margin-top: 2rem;
      padding: 1.4rem 1.6rem;
      width: 100%;

      justify-content: space-between;
    }
  }
}

/* section-nine */

.section-nine {
  .section__nine__core {
    display: flex;
    gap: 17rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 6rem;
    }
  }

  .section-nine__container {
    display: flex;
    flex-direction: column;
    gap: 6rem;
  }
  ._h2 {
    white-space: nowrap;
  }
  .section-nine__container_law {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
  .section-nine__container-confession {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    div {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      p {
        display: flex;
        gap: 2rem;
      }
    }
  }
}

/* section-ten */

.section-ten {
  .section-ten__core {
    display: flex;
    gap: 17rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 6rem;
    }
  }
  .section-ten__container {
    width: 260rem;

    display: flex;
    flex-direction: column;
    gap: 6rem;

    @media (max-width: 767px) {
      gap: 4rem;
      width: unset;
    }
    h3 {
      text-transform: uppercase;
    }
  }
  .section-ten__block {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    p {
      display: flex;
      gap: 2rem;
    }
  }
}

/* section-eleven */

.section-eleven {
  .section-eleven__core {
    display: flex;
    gap: 21rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 6rem;
    }
  }
  .section-eleven__container {
    width: 100rem;

    display: flex;
    flex-direction: column;
    gap: 6rem;

    @media (max-width: 767px) {
      gap: 4rem;
      width: unset;
    }
    h3 {
      text-transform: uppercase;
    }
  }
  .section-eleven__block {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    @media (max-width: 767px) {
      gap: 2rem;
    }

    p {
      display: flex;
      gap: 2rem;
    }
  }
}

/* section-twelve */

.section-twelve {
  .section-twelve__contacts {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    @media (max-width: 767px) {
      gap: 2rem;
    }
  }
  .block-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 3rem;
    }

    h2 {
    }

    .block-contacts_box {
      display: flex;
      gap: 15rem;

      grid-column: span 2;

      @media (max-width: 767px) {
        flex-direction: column;
        gap: 2rem;
      }

      div {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        @media (max-width: 767px) {
          gap: 1rem;
        }
        a {
          pointer-events: none;
          color: var(--black);
          text-transform: uppercase;

          @media (max-width: 767px) {
            pointer-events: unset;
          }
        }
      }
    }
  }
  .block-mail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 3rem;
    }

    a {
      text-transform: uppercase;
      grid-column: span 2;
      pointer-events: none;
      color: var(--black);

      @media (max-width: 767px) {
        pointer-events: unset;
      }
    }
  }
  .block-legal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 3rem;
    }

    h2 {
      width: 30rem;

      @media (max-width: 767px) {
        width: unset;
      }
    }

    .block-legal_box {
      grid-column: span 2;

      display: flex;
      gap: 33rem;

      @media (max-width: 767px) {
        gap: unset;
        gap: 6rem;
      }
      hgroup {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        @media (max-width: 767px) {
          gap: 1rem;
        }

        h3 {
          text-transform: uppercase;
        }
      }
    }
  }
  .block-adress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 3rem;
    }

    hgroup {
      grid-column: span 2;

      display: flex;
      flex-direction: column;
      gap: 2rem;

      @media (max-width: 767px) {
        gap: 1rem;
      }

      h3 {
        text-transform: uppercase;
      }
    }
  }
  .block-time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 767px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 3rem;
    }

    hgroup {
      grid-column: span 2;
      width: 60rem;

      display: flex;
      flex-direction: column;
      gap: 2rem;

      @media (max-width: 767px) {
        width: unset;
        gap: 1rem;
      }

      h3 {
        text-transform: uppercase;
      }
    }
  }
}

/* section-map */

.section-map {
  ._container {
    padding-inline: unset;
  }
  .map {
  }
}

/* section-error */

.section-error {
  position: relative;
  .eror-img__opacity {
    width: 50rem;
    height: 44rem;

    opacity: 5%;

    position: absolute;

    top: 10rem;
    right: -25rem;
    rotate: -68deg;

    @media (max-width: 767px) {
      display: none;
    }
  }
  .eror-img__opacity-2 {
    width: 80rem;
    height: 50rem;

    opacity: 5%;

    position: absolute;

    top: 80rem;
    left: -34rem;

    @media (max-width: 767px) {
      display: none;
    }
  }
  .eror-img__opacity-3 {
    width: 22rem;
    height: 12rem;

    opacity: 5%;

    position: absolute;

    top: 65rem;
    right: 3rem;

    @media (max-width: 767px) {
      display: none;
    }
  }

  .section-error__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .block-error {
    display: flex;
    align-items: center;

    position: relative;

    @media (max-width: 767px) {
      gap: 12rem;
    }

    p {
      font-family: Open Sans;
      font-weight: 600;
      font-size: 44rem;
      line-height: 140%;
      letter-spacing: 0%;
      text-transform: uppercase;

      @media (max-width: 767px) {
        font-size: 20rem;
      }
    }
  }
  .block-error__img {
    width: 42rem;
    height: 40rem;

    position: relative;

    @media (max-width: 767px) {
      width: 19rem;
      height: 16.6rem;

      position: absolute;

      left: 50%;
      transform: translateX(-50%);
    }

    &::after {
      content: "";
      background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(76, 58, 21, 0.4) 0%,
        rgba(76, 58, 21, 0) 100%
      );

      filter: blur(10px);
      width: 12rem;
      height: 2rem;

      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);

      z-index: 2;

      @media (max-width: 767px) {
        width: 6rem;
        height: 1rem;
        filter: blur(6px);
      }
    }

    &::before {
      content: "";
      background: rgba(20, 15, 5, 1);

      filter: blur(50px);
      width: 34rem;
      height: 3rem;

      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);

      z-index: 2;

      @media (max-width: 767px) {
        width: 16rem;
        height: 1rem;

        filter: blur(35px);
      }
    }
  }
  .block-error__img-2 {
    width: 3.5rem;
    height: 3.6rem;

    position: absolute;
    top: 48rem;
    left: 58rem;

    z-index: 3;

    @media (max-width: 767px) {
      width: 2rem;
      height: 2rem;

      top: 21rem;
      left: 23rem;
    }
    img {
    }
  }
  .eror-text {
    @media (max-width: 767px) {
      margin-top: 8rem;
    }
  }
  a {
    color: var(--black);
    margin-top: 3rem;
    padding: 1.5rem 1.7rem 1.5rem 2.4rem;

    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

/* modal-windows */

/* modal */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(1.2rem);

  justify-content: center;
  align-items: center;

  .close-modal {
    position: absolute;

    top: 3rem;
    right: 3rem;

    cursor: pointer;

    @media (max-width: 767px) {
      top: 1.6rem;
      right: 1.6rem;

      svg {
        width: 1.6rem;
        height: 1.6rem;
      }
    }

    &:hover {
      svg {
        path {
          stroke: currentColor;
          color: var(--black);
        }
      }
    }
  }
}

/* modal__one */

#modal__one {
  .modal-content {
    padding: 10rem;
    margin-inline: 1.6rem;
    background-color: var(--white);
    width: fit-content;

    position: relative;

    @media (max-width: 767px) {
      padding: 6rem 1.6rem;
    }
  }

  .modal-content__container {
    display: flex;
    flex-direction: column;
    gap: 6rem;

    @media (max-width: 767px) {
      gap: 2rem;
    }
    hgroup {
      display: flex;
      flex-direction: column;
      gap: 4rem;

      @media (max-width: 767px) {
        gap: 2rem;
      }
    }
  }
  .form-modal {
    display: flex;
    flex-direction: column;
    gap: 5.6rem;

    @media (max-width: 767px) {
      flex-direction: column;
      gap: 2rem;
    }

    .data-person {
      display: flex;
      gap: 3.2rem;

      @media (max-width: 767px) {
        flex-direction: column;
        gap: 2rem;
      }

      input {
        outline: unset;
        padding: 1.4rem 2rem;
        background-color: unset;

        width: 100%;

        border-bottom: 1px solid var(--grey);

        &:hover {
          border-bottom-color: var(--yellow);
        }
        &:focus {
          border-bottom-color: var(--yellow);
        }
        .field-label {
          color: var(--yellow);
        }
      }

      .field-name {
        position: relative;
        width: 100%;
        &:hover {
          .field-label {
            color: var(--yellow);
          }
        }

        .field-label {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 2rem;

          font-size: 1.6rem;
          font-family: "Open Sans";
          color: var(--grey);

          .field-input:focus + & {
            color: var(--yellow);
          }
        }

        .field-input:not(:placeholder-shown) + .field-label {
          transition: 0.3s ease;
          font-size: 1.1rem;
          top: 10%;
        }
      }
      .field-tel {
        position: relative;
        width: 100%;

        &:hover {
          .field-label {
            color: var(--yellow);
          }
        }
        &::placeholder {
          color: var(--grey);

          font-family: "Open Sans";
          font-weight: 400;
          font-style: Regular;
          font-size: 1.6rem;
          letter-spacing: 0%;
        }

        &:hover {
          &::placeholder {
            color: var(--yellow);
          }
        }
        &:focus {
          &::placeholder {
            color: var(--yellow);
          }
        }

        .field-label {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 2rem;

          font-size: 1.6rem;
          font-family: "Open Sans";
          color: var(--grey);
          display: none;

          .field-tel:focus + & {
            color: var(--yellow);
          }
        }

        .field-tel:not(:placeholder-shown) + .field-label {
          transition: 0.3s ease;
          font-size: 1.1rem;
          top: 10%;
          display: block;
        }
      }
    }

    .block-textarea {
      position: relative;
      width: 100%;

      &:hover {
        textarea {
          &::placeholder {
            color: var(--yellow);
          }
        }

        .field-label {
          color: var(--yellow);
        }
      }

      .field-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 2rem;

        font-size: 1.6rem;
        font-family: "Open Sans";
        color: var(--grey);

        @media (max-width: 767px) {
          top: 45%;
        }

        textarea:focus + & {
          color: var(--yellow);
        }
      }
      textarea:not(:placeholder-shown) + .field-label {
        transition: 0.3s ease;
        font-size: 1.1rem;
        top: 0%;
        display: block;
      }
      textarea {
        resize: none;
        background-color: unset;
        outline: unset;

        padding: 0 2rem 0.8rem;
        margin-top: 1.4rem;
        border-bottom: 1px solid var(--grey);
        width: 100%;
        height: 4rem;

        &:hover {
          border-bottom-color: var(--yellow);
        }
        &:focus {
          border-bottom-color: var(--yellow);

          &::placeholder {
            color: var(--yellow);
          }
        }
        &::placeholder {
          color: var(--grey);

          font-family: "Open Sans";
          font-weight: 400;
          font-style: Regular;
          font-size: 1.6rem;
          letter-spacing: 0%;
        }
      }
    }
  }
  .block-under {
    display: flex;
    align-items: center;
    gap: 11rem;

    @media (max-width: 767px) {
      flex-direction: column-reverse;
      gap: 2rem;
    }

    button {
      display: flex;
      align-items: center;
      gap: 2rem;

      padding: 1.5rem 1.75rem 1.5rem 2.4rem;

      @media (max-width: 767px) {
        justify-content: space-between;
        width: 100%;
      }
    }

    p {
      color: var(--grey);
    }
  }
}

/* modal__two */

#modal__two {
  .modal-content {
    background-color: var(--white);
    padding: 14rem 20rem;

    position: relative;

    @media (max-width: 767px) {
      margin-inline: 1.6rem;
      padding: 10rem 1.6rem;
    }
  }

  hgroup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;

    text-align: center;
  }
}

/* возврат в начало страницы */

.back-header {
  position: fixed;
  bottom: 28rem;
  right: 10rem;
  padding: 1.4rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;

  @media (max-width: 767px) {
    display: none;
  }
}