* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

button,
input {
  outline: none;
  border: none;
  background-color: transparent;
}

button {
  cursor: pointer;
}

ul {
  list-style: none;
}

body {}

html {
  scroll-behavior: smooth;
}

& h1 {
  color: #494949;
  font-family: var(--title-font);
  font-size: 72px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;


  @media(max-width: 992px) {
    color: #494949;
    font-family: var(--title-font);
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
  }

}

h2 {
  color: #494949;
  text-align: center;
  font-family: var(--title-font);
  font-size: 60px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;

  @media(max-width: 992px) {
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
  }
}

.container {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;

  @media(max-width: 1750px) {
    padding-left: 60px;
    padding-right: 60px;
  }

  @media(max-width: 1300px) {
    padding-left: 20px;
    padding-right: 20px;
  }


  @media(max-width: 992px) {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.mobile-menu__navigation {

  display: none;

  @media(max-width: 1150px) {
    left: -100%;
    opacity: 1;
    transition: all .3s ease-in;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    background: #E7EEEF;
    width: 100%;
    height: 100dvh;

    & .mobile-menu__navigation-inner {
      padding-top: 92px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      padding-bottom: 40px;

      & .logo-mob {
        position: absolute;
        left: 16px;
        top: 11px;
        height: 27px;
        max-width: 105px;
        width: 100%;

        & img {
          object-fit: contain;
          width: 100%;
          height: 100%;
        }
      }

      & .close-menu {
        position: absolute;
        top: 17px;
        right: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
      }

      & .menu-items {
        align-items: center;
        flex-direction: column;
        gap: 32px;


        & li {
          text-align: center;

          & .sub-menu {
            position: relative;
            align-items: center;

          }

          &.menu-item-has-children {
            &>a {
              &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 7px;
                transform: translateX(14px);
                background-image: url('../img/arr.svg');
                background-repeat: no-repeat;
                background-size: contain;
                width: 9px;
                height: 7px;

              }
            }

            &:has(.sub-menu.visible) {
              &>a {
                &::after {
                  transform: rotate(180deg) translateX(26px);

                }
              }
            }
          }
        }
      }
    }

    &.active {
      left: 0;
      opacity: 1;
      transition: all .3s ease-in;
    }
  }


}

.burger {
  display: none;

  @media(max-width: 1150px) {
    display: block;
    width: 40px;
    height: 40px;

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  @media(max-width: 992px) {
    display: block;
    width: 35px;
    height: 35px;

    & svg {
      width: 100%;
      height: 100%;
    }
  }
}

.thx-modal {
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 17;

  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  & .thx-modal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1114px;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    background: #E7EEEF;
    position: relative;

    @media(max-width: 992px) {
      width: 95%;
      height: 312px;
    }

    & .thx-close {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;

      @media(max-width: 992px) {
        width: 20px;
        height: 20px;

        & svg {
          width: 100%;
          height: 100%;
        }
      }
    }

    & .thx-text {
      color: #494949;
      text-align: center;
      font-family: var(--text-font);
      font-size: 48px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;

      @media(max-width: 992px) {
        font-size: 22px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
      }
    }

    & .back-to {
      border-radius: 12px;
      background: #E4C34A;
      padding: 10px 17px;
      color: #494949;
      text-align: center;
      font-family: var(--third-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: fit-content;
      margin-left: auto;
      margin-right: auto;
      margin-top: 60px;

      @media(max-width: 992px) {
        margin-top: 40px;
      }
    }
  }

  &.active {
    display: flex;
  }
}

.desktop-menu {
  @media(max-width: 1150px) {
    display: none;
  }
}

:root {
  --title-font: "Rubik", sans-serif;
  --text-font: "Golos Text", sans-serif;
  --third-font: "Roboto", sans-serif;
}

header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 12;

  & .nav-inner {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;

    @media(max-width: 1024px) {
      padding-bottom: 0;
    }
  }

  & .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media(max-width: 992px) {
      align-items: flex-end;
    }

    & .logo {
      height: 60px;
      max-width: 220px;
      width: 100%;
      display: block;

      @media(max-width: 992px) {
        max-width: 127px;
        height: 33px;
      }

      & img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        object-position: left;
      }
    }

    & .header-right {
      max-width: 980px;
      width: 100%;
      gap: 170px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      @media(max-width: 1500px) {
        gap: 40px;
      }

      @media(max-width: 992px) {
        gap: 8px;
        align-items: flex-end;
      }

      & .menu-verhnee-container {}



      & .header-contacts {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        & .header-phone {

          color: #494949;
          font-family: var(--text-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          white-space: nowrap;

          @media(max-width: 992px) {
            font-size: 10px;
            font-style: normal;
            line-height: 140%;
          }

        }

        & .header-email {
          color: #494949;
          font-family: var(--text-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;

          @media(max-width: 992px) {
            font-size: 10px;
            font-style: normal;
            line-height: 140%;
          }
        }
      }
    }
  }

  & .menu-items .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
  }

  & .menu-items .sub-menu.visible {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 1;
    visibility: visible;
  }

}

.mobile-contacts-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;

  & .phone-menu-mob {
    color: #494949;
    text-align: center;
    font-family: var(--text-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
  }

  & .email-menu-mob {
    color: #494949;
    text-align: center;
    font-family: var(--text-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
  }
}

.menu-items {
  display: flex;
  align-items: center;
  gap: 60px;

  @media(max-width: 1300px) {
    gap: 25px;
  }

  & li {
    position: relative;

    & a {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18.004px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      transition: color .3s ease-in;
      white-space: nowrap;

      @media(max-width: 992px) {
        font-weight: 700;
      }

      &:hover {
        color: #00B3B3;
      }
    }
  }

  & .sub-menu {
    position: absolute;
    transform: translateY(8px);

    & li {
      & a {
        transition: color .3s ease-in;

        &:hover {
          color: #00B3B3;
        }
      }
    }
  }
}

.nf-section {
  height: 80dvh;

  & .container {
    height: 100%;
  }

  & .nf-inner {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;

    @media(max-width: 992px) {
      align-items: center;
    }

    & .num {
      color: #494949;
      font-family: var(--title-font);
      font-size: 233.188px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      text-transform: uppercase;
      position: relative;
      z-index: 2;

      @media(max-width: 992px) {
        font-size: 60px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    & .nf-info {
      position: relative;
      z-index: 2;

      & .nf-title {
        color: #494949;
        font-family: var(--text-font);
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 60px;

        @media(max-width: 992px) {
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          margin-bottom: 40px;
        }
      }

      & .nf-link {
        border-radius: 12px;
        background: #E4C34A;
        padding: 10px 17px;
        max-width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #494949;
        text-align: center;
        font-family: var(--third-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        @media(max-width: 992px) {
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
  }
}

.mainscreen-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

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

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.mainscreen {
  padding-top: 240px;
  margin-bottom: 50px;
  position: relative;
  height: 88dvh;

  @media(max-width: 1600px) {
    padding-top: 130px;
  }

  @media(max-width: 1024px) {
    height: initial;
    padding-top: 126px;
  }




  & .ms-info {
    position: relative;
    z-index: 2;

    & h1 {

      margin-bottom: 40px;
      max-width: 1110px;

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

    }

    & p {
      color: #494949;
      font-family: var(--third-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      max-width: 687px;

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

.filters {
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;

  @media(max-width: 1760px) {
    gap: 5px;
  }

  @media(max-width:992px) {
    gap: 20px;
    margin-bottom: 19px;
  }

  & .filters-columns {
    display: flex;
    gap: 24px 72px;
    flex-wrap: wrap;

    @media(max-width: 1760px) {
      gap: 25px 42px;
    }

    @media(max-width: 1150px) {
      gap: 5px;
    }

    @media(max-width:992px) {
      gap: 20px 8px;
    }

    @media(max-width:600px) {
      gap: 20px 8px;
    }

    & .filters-col {
      display: flex;
      gap: 25px;

      @media(max-width: 1760px) {
        gap: 5px;
      }

      @media(max-width:992px) {
        gap: 8px;
      }

      @media(max-width: 992px) {
        flex-wrap: wrap;
      }

      & li {
        & a {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #494949;
          text-align: center;
          font-family: var(--text-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          border-radius: 12px;
          background-color: #E7EEEF;
          padding: 10px 17px;
          white-space: nowrap;
          transition: all .3s;

          @media(max-width: 1760px) {
            font-size: 15px;
          }


          &:hover {
            background-color: #E4C34A;
            color: #494949;
            transition: all .3s;
          }


          @media(max-width: 992px) {
            padding: 8px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }
        }
      }
    }
  }

  & .filter-item {
    color: #494949;
    text-align: center;
    font-family: var(--text-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 12px;
    background-color: #E7EEEF;
    padding: 10px 17px;
    white-space: nowrap;

    @media(max-width: 1760px) {
      font-size: 15px;
    }

    @media(max-width: 992px) {
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
  }

  & .filter-item.active {
    background-color: #E4C34A !important;

  }
}

.section-hp__portfolio {
  margin-bottom: 100px;

  @media(max-width: 992px) {
    margin-bottom: 60px;
  }

  & .hp__portfolio-slider {
    & .splide__slide {
      max-width: 580px;
      width: 100%;
      height: 347px;

      @media(max-width: 992px) {
        height: 121px;
        max-width: 204px;
      }

      & .portfolio-item {
        width: 100%;
        height: 100%;



        & .portfolio-thumb {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          left: 0;
          top: 0;


          & img {
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}

.services-hp {
  margin-bottom: 120px;

  & h2 {
    text-align: center;
    margin-bottom: 50px;

    @media(Max-width:992px) {
      margin-bottom: 40px;
    }
  }
}

.services-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 65px;

  @media(max-width: 1600px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media(max-width: 992px) {
    gap: 40px;
  }

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

  & .service-item {
    height: 357px;
    display: flex;
    flex-direction: column;

    @media(max-width: 1600px) {
      height: 280px;
    }

    @media(max-width: 992px) {
      height: 227px;
    }

    @media(max-width: 600px) {
      height: initial;
    }

    & .service-item__body {
      margin-bottom: auto;

      @media(max-width: 992px) {
        margin-bottom: 0;
      }
    }

    & h3 {
      color: #494949;
      font-family: var(--text-font);
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 15px;

      @media(max-width:992px) {
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    & p {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      margin-bottom: 28px;

      @media(max-width:992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
      }
    }

    & .service-order-btn {
      border-radius: 12px;
      background: #494949;
      padding: 10px 17px;
      color: #FFF;
      text-align: center;
      font-family: var(--third-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      max-width: fit-content;
      transition: all .3s ease-in;

      &:hover {
        transition: all .3s ease-in;
        background-color: #E4C34A;
        color: #494949;
      }
    }
  }
}

.single-news__navigation {
  max-width: 1255px;
  width: 100%;
  margin-top: 95px;
  display: flex;
  justify-content: space-between;
  gap: 20px;

  @media(max-width: 992px) {
    margin-top: 40px;
  }

  & .single-news__btn {
    max-width: 547px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media(max-width: 1200px) {
      max-width: 400px;
    }

    & .single-news__text {
      display: flex;
      align-items: center;
      gap: 5px;

      @media(max-width: 992px) {
        flex-direction: column;
      }

      & span {
        color: #494949;
        font-family: var(--text-font);
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        @media(max-width: 992px) {
          font-size: 10px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }

      & svg {
        @media(max-width: 992px) {
          max-width: 56px;
        }
      }
    }

    & .single-news__thumb {
      height: 223px;
      width: 100%;

      @media(max-width: 992px) {
        height: 87px;
      }

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }

  & .single-news__btn-prev {
    & .single-news__text {
      text-align: right;

      @media(max-width: 992px) {
        flex-direction: column;
        align-items: flex-end;

      }
    }

    @media(max-width: 992px) {
      align-items: flex-end;
    }
  }

  & .single-news__btn-next {
    & .single-news__text {
      text-align: left;

      @media(max-width: 992px) {
        flex-direction: column-reverse;
        align-items: flex-start;
      }
    }

    @media(max-width: 992px) {
      align-items: flex-start;
    }
  }
}

.about-hp {
  margin-bottom: 90px;
  display: flex;
  align-items: center;
  justify-content: center;

  @media(max-width: 992px) {
    flex-direction: column-reverse;
    margin-bottom: 40px;

  }

  & .about-hp__image {
    max-width: 885px;
    width: 100%;
    height: 888px;
    display: flex;

    @media(max-width: 1400px) {
      width: 50%;
    }

    @media(max-width: 992px) {
      width: 100%;
      height: 272px;
      max-width: 100%;
    }

    & img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  & .about-hp__info {
    padding: 98px 121px 111px 105px;
    background-color: #E7EEEF;
    max-width: 1055px;
    width: 100%;
    height: 888px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media(max-width: 1700px) {
      padding: 48px 60px 55px 52px;
    }

    @media(max-width: 992px) {
      padding-left: 16px;
      padding-right: 16px;
      height: auto;
      padding-top: 40px;
      padding-bottom: 20px;
    }

    & h2 {
      text-align: left;
      margin-bottom: 60px;

      @media(max-width: 992px) {
        margin-bottom: 21px;
      }
    }

    & .about-hp__text {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;

      @media(max-width: 600px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
      }

      & strong {
        font-weight: 700;

        @media(max-width: 600px) {
          font-size: 14px;
          font-style: normal;
          line-height: 150%;
        }
      }
    }
  }
}

.partners-lider {
  margin-bottom: 66px;

  @media(max-width: 992px) {
    margin-bottom: 40px;
  }

  & .splide__slide {
    height: 93px;
    max-width: 350px;
    width: 100%;

    & img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }
}

.advantages {
  padding-top: 96px;
  padding-bottom: 115px;
  background-color: #E7EEEF;

  @media(max-width: 992px) {
    padding-top: 40px;
    padding-bottom: 50px;
  }
}

.advantages-items {
  margin-top: 45px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(6, 1fr);

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

  @media(max-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
  }

  & .advantages-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    & .advantages-item__icon {
      height: 72px;

      @media(max-width: 992px) {
        height: 42px;
      }

      & img {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
    }

    & .advantages-item__text {
      color: #494949;
      text-align: center;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;

      @media(max-width: 992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        max-width: 140px;
      }
    }
  }
}

.portfolio {
  height: initial;
  padding-top: 13px;
  min-height: 0;
  display: flex;
  flex-direction: column;

  & h1 {
    margin-bottom: 60px;

    @media(max-width: 992px) {
      margin-bottom: 22px;
    }
  }
}



.portfolio-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  height: auto;
  min-height: 0;

  @media(max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media(max-width: 600px) {
    grid-template-columns: repeat(1, 1fr);
  }

  & .portfolio-item {
    /* height: 329px; */
    /* aspect-ratio: 1.7 / 1; */

    @media(max-width: 600px) {
      /* height: 170px; */
      aspect-ratio: initial;
    }

    & .portfolio-link {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;

      & .hover-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 2;
        background-color: #1E2121;

        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all .3s ease;


      }

      & .hover-bg__text {
        color: #fff;
        font-family: var(--text-font);
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 3;
        margin: 0 auto;
        transition: all .3s ease;
        opacity: 0;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;

        @media(max-width: 600px) {
          font-size: 16px;
        }
      }

      &:hover {
        & .hover-bg {
          opacity: .7;
          transition: all .3s ease;
        }

        & .hover-bg__text {
          opacity: 1;
          transition: all .3s ease;
        }
      }



      & .portfolio-thumb {
        width: 100%;
        height: 100%;
         aspect-ratio: 1.7 / 1;

        & img {
          object-fit: cover;
          width: 100%;
          height: 100%;
         
        }
      }
    }
  }
}

.load-more {
  margin-left: auto;
  margin-right: auto;
  margin-top: 37px;
  border-radius: 12px;
  background: #494949;
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: fit-content;
  font-family: var(--text-font);
}

.breads {
  margin-top: 207px;
  margin-bottom: 20px;
  position: relative;
  z-index: 4;

  @media(max-width: 992px) {
    margin-top: 86px;
  }

  & .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 5px;
    font-family: var(--text-font);
    color: #BED6DA;
    font-family: var(--text-font);
    font-size: 18.004px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    & a {
      font-family: var(--text-font);
      color: #BED6DA;
      font-family: var(--text-font);
      font-size: 18.004px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    & span {
      color: #494949;

      font-size: 18.004px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      font-family: var(--text-font);
    }
  }
}

.single-portfolio {
  & .h1 {
    color: #494949;
    margin-top: 20px;
    margin-bottom: 61px;

    @media(max-width: 992px) {
      margin-bottom: 22px;
    }
  }

  & .single-portfolio__text {
    color: #494949;
    font-family: var(--third-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 37px;
  }

  & .portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 50px;

    @media(max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }

    & .portfolio-gallery__item {
      height: 336px;
      width: 100%;

      @media(max-width: 600px) {
        height: 89px;
      }

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.about-page {
  & h1 {
    margin-bottom: 61px;

    @media(max-width: 992px) {
      margin-bottom: 22px;
    }
  }

  & .about-page-description {
    color: #494949;

    /* Текст */
    font-family: var(--text-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    max-width: 723px;

    @media(max-width: 992px) {
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
    }
  }

  & .about-page__skills {
    display: flex;
    margin-top: 60px;

    @media(max-width: 992px) {
      flex-direction: column-reverse;
      margin-top: 40px;
    }

    &.reverce {
      flex-direction: row-reverse;
      margin-bottom: 100px;

      @media(max-width: 992px) {
        flex-direction: column-reverse;
        margin-bottom: 40px;
      }


      & .about-page__skills-info {
        padding-right: 142px;
        padding-left: 20px;
        display: flex;
        justify-content: flex-end;
        padding-top: 120px;
        padding-bottom: 117px;
        height: 560px;

        @media(max-width: 1500px) {
          padding-right: 90px;
          padding-top: 90px;
          padding-bottom: 90px;
          justify-content: center;
        }

        @media(max-width: 1050px) {
          padding: 20px;
        }

        @media(max-width: 992px) {
          height: initial;
        }
      }
    }
  }

  & .about-page__skills-image {
    height: 560px;
    width: 50%;

    @media(max-width: 992px) {
      width: 100%;
      height: 272px;
    }

    & img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  & .about-page__skills-info {
    padding-top: 120px;
    padding-bottom: 108px;
    padding-left: 142px;
    background: #E7EEEF;
    padding-right: 20px;
    width: 50%;
    height: 560px;

    @media(max-width: 1500px) {
      padding-left: 90px;
      padding-top: 90px;
      padding-bottom: 90px;
    }

    @media(max-width: 1050px) {
      padding: 20px;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    @media(max-width: 992px) {
      width: 100%;
      height: initial;
    }

    & .about-page__skills-title {
      color: #494949;
      font-family: var(--text-font);
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 20px;

      @media(max-width: 992px) {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    & .about-page__skills-description {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      max-width: 688px;

      @media(max-width: 992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%
      }

      & strong {
        margin-bottom: 20px;
        color: #494949;
        font-family: var(--text-font);
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: block;

        @media(max-width: 992px) {
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }
    }
  }

  & .about-advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1386px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;

    @media(max-width: 992px) {
      grid-template-columns: repeat(1, 1fr);
      margin-bottom: 40px;
      margin-top: 40px;
    }

    & li {
      display: flex;
      flex-direction: column;

      & p {
        color: #494949;
        font-family: var(--text-font);
        font-size: 120px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;

        @media(max-width: 1200px) {
          font-size: 100px;
        }

        @media(max-width: 992px) {
          font-size: 40px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }

      & span {
        color: #494949;
        font-family: var(--text-font);
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        max-width: 403px;

        @media(max-width: 992px) {
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }
    }
  }
}

.mus-section {
  & h1 {
    margin-bottom: 68px;

    @media(max-width: 992px) {
      margin-bottom: 20px;
    }
  }

  .mus-head {
    background: #E7EEEF;
    padding-top: 100px;
    padding-bottom: 60px;

    @media(max-width: 992px) {
      padding-top: 40px;
      padding-bottom: 20px;
    }

    & .mus-head__inner {




      & h2 {
        margin-bottom: 66px;
        color: #494949;
        font-family: var(--title-font);
        font-size: 60px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
        text-transform: uppercase;
        text-align: left;

        @media(max-width: 992px) {
          color: #494949;
          font-size: 24px;
          font-style: normal;
          font-weight: 800;
          line-height: normal;
          margin-bottom: 20px;
        }
      }

      & .mus-head__descr {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        max-width: 668px;

        @media(max-width: 992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
        }
      }
    }
  }

  & .mus-gallery__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;

    @media(max-width: 1050px) {
      overflow-x: auto;
      overflow-y: hidden;
    }


    & li {
      height: 378px;
      width: 100%;

      @media(max-width: 1050px) {
        height: 154px;
        min-width: 257px;
      }

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }


}

.mus-sub__wrapper {
  padding-top: 100px;
  padding-bottom: 100px;
  background: #E7EEEF;

  @media(max-width: 992px) {
    padding-top: 40px;
    padding-bottom: 60px;
  }



  & .mus-subservices {
    max-width: 1679px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;

    @media(max-width: 992px) {
      grid-template-columns: repeat(1, 1fr);
    }

    & li {
      display: flex;
      flex-direction: column;

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

      & h3 {
        color: #494949;
        font-family: var(--text-font);
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 15px;

        @media(max-width: 992px) {
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }

      & p {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        height: 189px;
        margin-bottom: 56px;

        @media(max-width: 1200px) {
          height: initial;
          margin-bottom: 30px;
        }

        @media(max-width: 992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
          height: initial;
          margin-bottom: 28px;
        }
      }

      & button {
        border-radius: 12px;
        background-color: #494949;
        padding: 10px 31px;
        color: #FFF;
        text-align: center;
        font-family: var(--third-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        max-width: fit-content;
        transition: all .3s;

        &:hover {
          background-color: #E4C34A;
          color: #494949;
          transition: all .3s;
        }
      }
    }
  }
}

.maket-section {
  & h1 {
    margin-bottom: 68px;

    @media(max-width: 992px) {
      margin-bottom: 20px;
    }
  }

  & .maketing-top {
    display: flex;

    @media(max-width: 1180px) {
      flex-direction: column-reverse;
    }

    & .maketing-top__image {
      width: 45%;
      height: 915px;

      @media(max-width: 1180px) {
        width: 100%;
        height: 450px;
      }

      @media(max-width: 992px) {
        height: 320px;
      }


      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    & .maketing-top__info {
      padding-top: 98px;
      padding-bottom: 102px;
      padding-left: 105px;
      padding-right: 20px;
      background-color: #E7EEEF;
      height: 915px;
      width: 55%;

      @media(max-width: 1180px) {
        width: 100%;
        height: initial;
      }

      @media(max-width: 1500px) {
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 60px;
      }

      @media(max-width: 1300px) {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
      }

      & h2 {
        text-align: left;
        margin-bottom: 60px;

        @media(max-width: 992px) {
          margin-bottom: 22px;
        }

        & span {
          color: #E4C34A;
        }
      }
    }

    & .maketing-top__description {
      max-width: 829px;
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      /* 27px */

      @media(max-width: 992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
      }
    }
  }

  & .mus-sub__wrapper {
    background: transparent;

    & .mus-subservices {
      & li {
        & button {
          border-radius: 12px;
          background-color: #E4C34A;
          padding: 10px 31px;
          color: #494949;
          text-align: center;
          font-family: var(--third-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          max-width: fit-content;

          &:hover {
            background-color: #494949;
            color: #fff;
            transition: all .3s;
          }
        }
      }
    }
  }

  & .maketing-structure__image {
    height: 798px;
    width: 100%;
    margin-bottom: 76px;
    margin-top: 76px;

    @media(max-width: 992px) {
      margin-top: 60px;
      margin-bottom: 60px;
      height: 265px;
    }

    & img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }
}

.print-section {
  & h1 {
    margin-bottom: 68px;

    @media(max-width: 992px) {
      margin-bottom: 20px;
    }
  }

  & .print-top {
    display: flex;

    @media(max-width: 992px) {
      flex-direction: column-reverse;
    }

    & .print-top__image {
      width: 40%;
      height: 587px;

      @media(max-width: 992px) {
        flex-direction: column;
        width: 100%;
        height: 272px;
      }

      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    & .print-top__info {
      width: 60%;
      background: #E7EEEF;
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 161px;
      padding-right: 20px;
      height: 587px;

      @media(max-width: 1500px) {
        padding-bottom: 80px;
        padding-top: 80px;
        padding-left: 100px;
      }

      @media(max-width: 992px) {
        height: initial;
        width: 100%;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
      }

      & h2 {
        margin-bottom: 60px;
        text-align: left;

        & span {
          color: #E4C34A;
        }

        @media(max-width: 992px) {
          margin-bottom: 22px;
        }
      }

      & .print-top__info-text {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;

        & ul {
          list-style: disc;
          padding-left: 25px;

          & li {
            color: #494949;
            font-family: var(--text-font);
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
          }
        }
      }

      & .order-print {
        border-radius: 12px;
        background-color: #494949;
        padding: 10px 17px;
        max-width: fit-content;
        color: #FFF;
        text-align: center;
        font-family: var(--third-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-top: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s ease-in;

        @media(max-width: 1200px) {
          margin-top: 30px;
        }

        &:hover {
          transition: all .3s ease-in;
          background-color: #E4C34A;
          color: #494949;
        }

        @media(max-width: 992px) {
          margin-top: 28px;
        }
      }
    }
  }

  & .print-top__tech {
    margin-top: 100px;
    margin-bottom: 100px;

    @media(max-width: 992px) {
      margin-top: 40px;
      margin-bottom: 40px;
    }

    & .print-top__tech-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      max-width: 1398px;

      @media(max-width: 769px) {
        flex-direction: column;
      }

      & h2 {
        text-align: left;

        @media(max-width: 768px) {
          padding-left: 76px;
        }
      }

      & .print-top__text-list {
        display: flex;
        flex-direction: column;
        gap: 40px;

        & li {
          display: flex;
          gap: 53px;

          @media(max-width: 1200px) {
            max-width: 430px;
          }

          @media(max-width: 992px) {
            gap: 30px;
          }

          & h3 {
            color: #494949;
            font-family: var(--title-font);
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: uppercase;

            @media(max-width: 992px) {
              font-size: 22px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
            }
          }

          & p.print-top__text-list__descr {
            color: #494949;
            font-family: var(--text-font);
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            max-width: 443px;
            width: 100%;

            @media(max-width: 992px) {
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: 150%;
            }
          }
        }
      }
    }
  }

  & .print-bottom {
    background: #E7EEEF;
    padding-top: 100px;
    padding-bottom: 100px;

    @media(max-width: 992px) {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    & .print-bottom__title {
      color: #494949;
      font-family: var(--text-font);
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 20px;

      @media(max-width: 992px) {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    & .print-bottom__inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      max-width: 1436px;

      @media(max-width: 992px) {
        flex-direction: column;
      }

      & .print-bottom__text {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;

        @media(max-width: 992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
        }

        & strong {
          color: #494949;
          font-family: var(--text-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: 150%;

          @media(max-width: 992px) {
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%;
          }
        }
      }
    }
  }
}

.news {
  & h1 {
    margin-bottom: 61px;

    @media(max-width: 992px) {
      margin-bottom: 20px;
    }
  }
}

.news-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 58px 20px;

  @media(max-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }

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

  & .news-item {
    & .news-link {
      display: flex;
      flex-direction: column;
      gap: 20px;

      &:hover {
        & .new-title {
          color: #00B3B3;
          transition: all .3s ease-in;
        }
      }

      & .news-thumb {
        height: 344px;
        width: 100%;

        @media(max-width:600px) {
          height: 181px;
        }

        & img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }

      & .new-title {
        color: #494949;
        font-family: var(--text-font);
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -moz-box;
        -moz-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-clamp: 1;
        box-orient: vertical;
        transition: all .3s ease-in;
        @media(max-width: 600px) [ font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        ]
      }

      & .news-short {
        color: #1E2121;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -moz-box;
        -moz-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        box-orient: vertical;

        @media(max-width: 600px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
        }
      }
    }
  }
}

.single-news {
  & h2 {
    text-align: left;
  }

  & .single-news__content {
    margin-top: 25px;
    max-width: 1397px;

    & h4 {
      color: #494949;
      font-family: var(--text-font);
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;

      @media(max-width :992px) {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    & p {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;

      @media(max-width :992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
      }
    }

    & strong {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: 150%;

      @media(max-width :992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
      }
    }

    & h5 {
      color: #494949;
      font-family: var(--text-font);
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;

      @media(max-width :992px) {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }

    & ul {
      list-style: disc;
      padding-left: 20px;

      & li {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;

        @media(max-width :992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
        }
      }
    }

    & img {}
  }
}

.contacts-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
  margin-top: 61px;
  margin-bottom: 60px;
  padding-top: 0;

  @media(max-width: 1400px) {
    gap: 40px;
  }

  @media(max-width: 992px) {
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 40px;
    margin-top: 40px;
  }

  & .contacts-item {
    display: flex;
    flex-direction: column;

    & strong {
      color: #494949;
      font-family: var(--text-font);
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 14px;

      @media(max-width: 992px) {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 8px;
      }
    }

    & address {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;

      @media(max-width: 992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
      }
    }

    & a {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;

      & strong {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;

        @media(max-width: 992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 700;
          line-height: 160%;
        }
      }

      & .label {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;

        @media(max-width: 992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 700;
          line-height: 160%;
        }
      }

      & span {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;

        @media(max-width: 992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 160%;
        }
      }
    }

    & span {
      color: #494949;
      font-family: var(--text-font);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;

      @media(max-width: 992px) {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
      }

      /* 27px */
    }
  }
}

& .contacts-map__frame {
  height: 637px;
  width: 100%;

  @media(max-width: 992px) {
    height: 202px;
  }

  &>div {
    width: 100%;
    height: 100%;

    & iframe {}
  }
}

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 16;
  background: linear-gradient(0deg, rgba(33, 33, 33, 0.30) 0%, rgba(33, 33, 33, 0.30) 100%);
  filter: blur(4.900000095367432px);
  display: none;

  &.active {
    display: block;
  }
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 17;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;

  & .modal-inner {
    max-width: 1114px;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 70px;
    position: relative;
    border-radius: 20px;
    background: #E7EEEF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    @media(max-width: 992px) {
      width: 90%;
      padding: 20px 16px;
      align-items: flex-start;
    }

    & .close-modal {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      z-index: 2;

      @media(max-width: 992px) {
        width: 20px;
        height: 20px;

        & svg {
          width: 100%;
          height: 100%;
        }
      }
    }

    & .modal-title {
      color: #494949;
      text-align: center;
      font-family: var(--text-font);
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 40px;

      @media(max-width: 992px) {
        font-size: 20px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
      }
    }

    & .modal-form {
      max-width: 546px;
      width: 100%;

      & label {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        margin-bottom: 8px;

        @media(max-width: 992px) {
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
        }

        /* 27px */
      }

      & .wpcf7-submit {
        border-radius: 12px;
        background: #E4C34A;
        padding: 10px 39px;
        color: #494949;
        text-align: center;
        font-family: var(--third-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: block;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        margin-top: 40px;

        &:disabled {
          opacity: .5;
        }

        @media(max-width: 992px) {
          margin-left: 0;
          margin-top: 20px;
          font-size: 16px;
        }
      }

      & .wpcf7-form-control-wrap {
        margin-bottom: 20px;
        height: 50px;
        display: block;

        @media(max-width: 992px) {
          margin-bottom: 8px;
        }

        & input {
          border-radius: 12px;
          background: #FFF;
          padding: 20px;
          color: #494949;
          font-family: var(--text-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
          height: 50px;
          width: 100%;

          @media(max-width: 992px) {
            height: 40px;
          }
        }
      }
    }
  }

  &.active {
    display: flex;
  }
}


.wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  position: relative;
}

.wpcf7-list-item {
  margin-left: 0;

}


.wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.wpcf7-acceptance .wpcf7-list-item-label::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5px;
  background: #FFF;
}


.wpcf7-acceptance input[type="checkbox"]:checked+.wpcf7-list-item-label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00B3B3;
  transform: rotate(-45deg);
}


.wpcf7-list-item-label {
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  padding-left: 30px;
  color: #494949;
  font-family: var(--text-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;

  & a {
    font-family: var(--text-font);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #00B3B3;
    text-decoration: underline;
  }
}


footer {
  padding-bottom: 80px;
  padding-top: 80px;
  position: relative;
  z-index: 13;

  @media(max-width: 992px) {
    padding-bottom: 40px;
    padding-top: 40px;
  }

  & .footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 50px;

    @media(max-width: 992px) {
      gap: 24px;
    }

    & .footer-logo {
      display: flex;
      min-width: 140px;

      @media(max-width: 992px) {
        height: 38px;
      }

      & img {
        object-fit: contain;
        width: 100%;
        height: 100%;
        object-position: top;

        @media(max-width: 992px) {
          object-position: left;
          max-width: fit-content;
        }
      }
    }

    @media(max-width: 992px) {
      flex-direction: column;
    }

    & .footer-left {
      display: flex;
      gap: 72px;

      @media(max-width: 992px) {
        gap: 20px;
      }

      @media(max-width: 992px) {
        flex-direction: column;
      }

      & .footer-menu__wrap {
        display: flex;
        flex-direction: column;
        gap: 40px;
        max-width: 545px;

        @media(max-width: 992px) {
          gap: 24px;
        }

        & .footer-disclaimer {
          color: #1E2121;
          font-family: var(--text-font);
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;

          @media(max-width:992px) {
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
        }

        & .footer-menu {

          & ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;

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

            & li {
              & a {
                color: #494949;
                font-family: var(--text-font);
                font-size: 18.004px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                transition: color .3s ease-in;

                @media(max-width:992px) {
                  font-size: 16px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;
                }

                &:hover {
                  color: #00B3B3;
                }
              }

              &:last-child {
                & a {
                  text-decoration: underline;
                }
              }
            }
          }

        }
      }
    }

    & .footer-contacts {
      display: flex;
      flex-direction: column;
      gap: 23px;

      @media(max-width: 992px) {
        gap: 10px;
      }

      & .footer-contact {
        & .label {
          color: #494949;
          font-family: var(--text-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: 160%;

          @media(max-width:992px) {
            font-size: 14px;
            font-style: normal;
            line-height: 160%;
          }
        }

        & span {
          color: #494949;
          font-family: var(--text-font);
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 160%;

          @media(max-width:992px) {
            font-size: 14px;
            font-style: normal;
            line-height: 160%;
          }
        }
      }

      & address {
        color: #494949;
        font-family: var(--text-font);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 160%;

        @media(max-width:992px) {
          font-size: 14px;
          font-style: normal;
          line-height: 160%;
        }
      }
    }

    & .footer-copy {
      display: flex;
      align-items: flex-end;

      & svg {
        max-width: 100%;
      }
    }
  }
}