@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  border: unset;
}

textarea {
  resize: none;
}

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  background-color: #fff;
  transition: background-color var(--animation-duration);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.icon--phone {
  -webkit-mask-image: url("../i/phone.svg");
          mask-image: url("../i/phone.svg");
}
.icon--login {
  -webkit-mask-image: url("../i/login.svg");
          mask-image: url("../i/login.svg");
}
.icon--cross {
  -webkit-mask-image: url("../i/cross.svg");
          mask-image: url("../i/cross.svg");
}
.icon:hover {
  border: unset;
}

a:hover > .icon,
.button:hover > .icon,
.icon:hover {
  background-color: var(--color-yellow);
}

.icon.icon--black {
  background-color: var(--color-black, #000);
}

a:hover > .icon.icon--black,
.button:hover > .icon.icon--black,
.icon.icon--black:hover {
  background-color: var(--color-white, #fff);
}

.header {
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) calc(50% + 720px), var(--color-black) calc(50% + 720px), var(--color-black) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  height: var(--header-height);
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
}
.header__logo-container {
  flex: 0 0 193px;
  margin-right: 94px;
}
@media screen and (max-width: 1024px) {
  .header__logo-container {
    flex: 0 0 130px;
    margin-right: 32px;
  }
}
@media screen and (max-width: 879px) {
  .header__logo-container {
    margin-right: 0;
  }
}
.header__logo {
  transition-duration: 0.2s;
}
.header__logo:hover {
  opacity: 0.8;
}
.header__link {
  display: flex;
}
.header__link:hover, .header__link--active {
  color: var(--color-yellow);
  font-weight: 500;
}
.header__phone {
  font-size: 20px;
  white-space: nowrap;
  margin-left: auto;
  display: flex;
  align-self: center;
  transform: translateY(-1px);
}
.header__user {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: url("../i/user.svg") center no-repeat #F2F2F2;
  transition: background-color var(--animation-duration);
}
.header__user:hover {
  background-color: var(--color-yellow);
}
.header__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 24px;
}
.header__controls .button__text {
  transform: translateY(-2px);
}
.header__menu {
  transform: translateY(-2px);
}
.header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  --logo-width: 270px;
  background: url("../i/header-bg.svg") no-repeat var(--logo-width);
  background-size: cover;
}
@media screen and (max-width: 1439px) {
  .header .wrapper {
    --logo-width: 250px ;
  }
}
@media screen and (max-width: 1024px) {
  .header .wrapper {
    --logo-width: 161px;
  }
}
@media screen and (max-width: 879px) {
  .header .wrapper {
    --logo-width: 151px;
  }
}

.container {
  /*&__header {
    position: fixed;
    z-index: 30;
    top:0;
    left: 0;
    right: 0;
  }*/
}
.container__content {
  margin-top: var(--header-height);
}

.content-wrapper {
  margin-top: var(--header-height);
}

.menu {
  display: flex;
  gap: 20px;
}

.burger {
  width: 24px;
  height: 4px;
  background: var(--color-red);
  border: 4px solid var(--color-black);
  border-bottom: 14px solid var(--color-black);
  border-top: 14px solid var(--color-black);
  cursor: pointer;
  position: relative;
  box-sizing: content-box;
  transition: background-color var(--animation-duration);
}
.burger::after, .burger::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  transition-duration: var(--animation-duration);
}
.burger::before {
  top: -8px;
  background-color: var(--color-yellow);
}
.burger::after {
  bottom: -8px;
  background-color: var(--color-cyan);
}
.burger.active {
  background-color: var(--color-black);
}
.burger.active::before {
  transform: rotate(45deg) translate(5.5px, 5.5px);
  background-color: var(--color-yellow);
}
.burger.active::after {
  transform: rotate(-45deg) translate(5.5px, -5.5px);
  background-color: var(--color-yellow);
}

.popup-menu {
  position: fixed;
  z-index: 20;
  width: 0;
  height: calc(100dvh - var(--header-height));
  visibility: hidden;
  transition: all 0.3s ease;
  top: var(--header-height);
  right: 0;
  display: flex;
  padding: 40px 0;
  color: var(--color-black);
  background: #fff;
  overflow: auto;
  /*@include media-up($screen-md) {
    border: 1px solid #000;
    height: auto;
    padding: 24px 48px 28px 24px;
    right: -169px;
    width: 169px;
    height: auto;
  }*/
}
@media screen and (min-width: 1240px) {
  .popup-menu {
    display: none;
  }
}
.popup-menu.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  width: 100vw;
  /*@include media-up($screen-md) {
    right: 0;
    width: 169px;
  }*/
}
.popup-menu .links {
  font-size: 16px;
  flex: 0;
}
.popup-menu .links__col:not(:last-of-type) {
  padding-bottom: 32px;
}
@media screen and (max-width: 879px) {
  .popup-menu .links__col:not(:last-of-type) {
    border-bottom: 1px solid var(--color-black);
  }
}
.popup-menu .links__item:hover {
  color: var(--color-cyan);
  text-decoration: underline;
}
.popup-menu__phone {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
.popup-menu__contact-button {
  margin-top: auto;
  justify-content: center;
  width: 100%;
}
.popup-menu .wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 40px;
}

.footer-wrapper {
  background-color: var(--color-cyan);
  padding-top: 56px;
  padding-bottom: 56px;
}
@media screen and (max-width: 1439px) {
  .footer-wrapper {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
@media screen and (max-width: 879px) {
  .footer-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.footer-logo {
  transition: opacity var(--animation-duration);
}
.footer-logo:hover {
  opacity: 0.8;
}

.footer-menu {
  background-color: var(--color-black);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  padding: 56px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}
@media screen and (max-width: 879px) {
  .footer-menu {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 20px;
  }
}
.footer-menu__link:hover {
  color: var(--color-blue);
}
@media screen and (min-width: 880px) {
  .footer-menu__contacts {
    text-align: right;
  }
}
@media screen and (max-width: 879px) {
  .footer-menu__contacts {
    order: -1;
  }
}
.footer-menu__phone {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 32px;
  display: inline-block;
}
@media screen and (min-width: 880px) and (max-width: 1024px) {
  .footer-menu__phone {
    font-size: 24px;
    margin-bottom: 16px;
  }
}
.footer-menu__logos {
  flex: 1 0 100%;
}
.footer-menu .email__label {
  margin-bottom: 8px;
}
.footer-menu .email__email {
  text-decoration: underline;
  font-size: 20px;
}
.footer-menu .logos {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  height: 50px;
}
@media screen and (max-width: 879px) {
  .footer-menu .logos {
    flex: 1;
    width: 100%;
    gap: 16px;
    justify-content: space-between;
  }
  .footer-menu .logos__item {
    height: 50px;
  }
}
.footer-menu .logos img {
  height: 50px;
}

.credits {
  border-top: 1px solid #fff;
  color: var(--color-white, #fff);
  background-color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  min-height: 88px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
@media screen and (max-width: 1024px) {
  .credits {
    justify-content: left;
    padding: 32px 20px;
  }
}
@media screen and (max-width: 879px) {
  .credits {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
.credits__link {
  color: var(--color-blue);
}
.credits__link:first-child {
  flex: 1;
}
.credits__link:hover {
  text-decoration: underline;
}
.credits__item {
  flex: 1;
}
@media screen and (max-width: 1024px) {
  .credits__item {
    flex: 1 0 100%;
    order: 2;
  }
}

.anchors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 22px;
  margin-top: auto;
}
@media screen and (max-width: 1439px) {
  .anchors {
    gap: 18px;
  }
}
@media screen and (max-width: 879px) {
  .anchors {
    gap: 16px;
    flex-direction: column;
    margin-top: 56px;
  }
}
.anchors__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 164px;
}
.anchors__item .panel__content {
  --panel-content-padding: 24px;
}
.anchors__item.panel--red:hover {
  background-color: var(--color-red-light);
}
.anchors__item.panel--yellow:hover {
  background-color: var(--color-yellow-light);
}
.anchors__item.panel--cyan:hover {
  background-color: var(--color-cyan-light);
}
.anchors__item.panel--green:hover {
  background-color: var(--color-green-light);
}
.anchors__image {
  height: 56px;
  width: 56px;
}
.anchors__bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.anchors__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .anchors__title {
    font-size: 24px;
  }
}
.anchors__arrow {
  height: 40px;
  width: 40px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M20 8.33325V31.6666" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M31.6673 20L20.0007 31.6667L8.33398 20" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
}

@font-face {
  font-family: "Quantico";
  src: local("Quantico"), url("../f/Quantico-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Mulish";
  src: local("Mulish"), url("../f/Mulish-VariableFont_wght.ttf") format("truetype");
}
.button {
  display: flex;
  align-self: center;
  gap: 8px;
  transition: color var(--animation-duration);
  background: none;
  border: none;
  color: var(--color-black);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  white-space: nowrap;
  padding: 12px 16px;
  border: 1px solid var(--main-black-231-f-20, #231F20);
  box-shadow: 4px 4px 0px 0px #231F20;
  transition: box-shadow var(--animation-duration), background-color var(--animation-duration), color var(--animation-duration);
}
.button:focus:not(.button--active):not(.button--no-decoration) {
  box-shadow: 2px 2px 0px 0px #231F20;
  outline: none;
}
.button:hover, .button:active {
  box-shadow: none;
}
@media screen and (max-width: 1024px) {
  .button {
    padding: 10px 16px;
    font-size: 16px;
  }
}
.button--no-decoration {
  padding: unset !important;
  border: unset !important;
  box-sizing: unset !important;
  box-shadow: none;
  color: inherit;
  background: none;
}
.button--no-decoration:hover {
  text-decoration: underline;
}
.button--dot::before {
  content: "";
  display: block;
  background-color: var(--color-black);
  border-radius: 50%;
  height: 7px;
  width: 7px;
  margin: 0 5px;
  margin-top: 7px;
}
.button--red {
  background: var(--color-red);
}
.button--orange {
  background: var(--color-orange);
}
.button--yellow {
  background: var(--color-yellow);
}
.button--green {
  background: var(--color-green);
}
.button--cyan {
  background: var(--color-cyan);
}
.button--blue {
  background: var(--color-blue);
}
.button--purple {
  background: var(--color-purple);
}
.button--pink {
  background: var(--color-pink);
}
.button--brown {
  background: var(--color-brown);
}
.button--grey {
  background: var(--color-grey);
}
.button--black {
  background: var(--color-black);
}
.button--yellow-1c {
  background: var(--color-yellow-1c);
}
.button--white {
  background: var(--color-white);
}
.button--active-red.button--active, .button--active-red:hover {
  background: var(--color-red);
}
.button--active-orange.button--active, .button--active-orange:hover {
  background: var(--color-orange);
}
.button--active-yellow.button--active, .button--active-yellow:hover {
  background: var(--color-yellow);
}
.button--active-green.button--active, .button--active-green:hover {
  background: var(--color-green);
}
.button--active-cyan.button--active, .button--active-cyan:hover {
  background: var(--color-cyan);
}
.button--active-blue.button--active, .button--active-blue:hover {
  background: var(--color-blue);
}
.button--active-purple.button--active, .button--active-purple:hover {
  background: var(--color-purple);
}
.button--active-pink.button--active, .button--active-pink:hover {
  background: var(--color-pink);
}
.button--active-brown.button--active, .button--active-brown:hover {
  background: var(--color-brown);
}
.button--active-grey.button--active, .button--active-grey:hover {
  background: var(--color-grey);
}
.button--active-black.button--active, .button--active-black:hover {
  background: var(--color-black);
}
.button--active-yellow-1c.button--active, .button--active-yellow-1c:hover {
  background: var(--color-yellow-1c);
}
.button--active-white.button--active, .button--active-white:hover {
  background: var(--color-white);
}
.button--white {
  background: #fff;
  color: var(--color-black);
}
.button--black {
  background: var(--color-black);
  color: #fff;
}
.button--bg {
  padding: 18px 30px;
  min-width: 255px;
  justify-content: center;
  text-transform: uppercase;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
}
@media screen and (max-width: 879px) {
  .button--bg {
    width: 100%;
    padding: 18px 0;
  }
}
.button--sm {
  padding: 5px 12px 6px 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.button--active {
  box-shadow: none;
}
.button.active {
  box-shadow: none;
}
@media screen and (max-width: 879px) {
  .button--mobile-full-width {
    width: 100%;
    justify-content: center;
  }
}
.button--full-width {
  width: 100%;
  justify-content: center;
}
.button--no-shadow {
  box-shadow: unset !important;
}
.button:disabled {
  background-color: var(--color-grey) !important;
  box-shadow: none !important;
  cursor: default !important;
}

.checkbox {
  display: inline-block;
  position: relative;
  font-size: 16px;
}
.checkbox__label {
  padding-right: 40px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.checkbox__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.checkbox__label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 32px;
  height: 20px;
  background-color: var(--color-black);
  border-radius: 12px;
  transition: background-color var(--animation-duration) ease;
}
.checkbox__label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  transition: right var(--animation-duration) ease;
}
.checkbox__input:checked + .checkbox__label::after {
  right: 4px;
}
.checkbox__input:checked + .checkbox__label::before {
  background-color: var(--color-blue);
}

@media screen and (max-width: 879px) {
  .checkbox__label {
    padding-right: 0;
    padding-left: 40px;
  }
  .checkbox__label::before {
    right: unset;
    left: 0;
  }
  .checkbox__label::after {
    right: unset;
    left: 16px;
  }
}
.custom-select {
  position: relative;
  display: inline-block;
}
.custom-select--is-open .custom-select__options-container {
  display: block;
}
.custom-select--is-open .custom-select__arrow::before {
  transform: rotate(180deg);
}

.custom-select__box {
  display: flex;
  align-items: center;
  background-color: #fff;
  outline: 1px solid var(--color-black);
  border: unset;
  padding: 16px 38px 16px 24px;
  width: 100%;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 879px) {
  .custom-select__box {
    padding-left: 16px;
  }
}

.custom-select__selected-option {
  flex-grow: 1;
}

.custom-select__arrow {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  background-color: var(--color-black);
  padding: 0;
  cursor: pointer;
}
.custom-select__arrow::before {
  content: "";
  -webkit-mask: url("../i/arrow-select.svg") center no-repeat;
          mask: url("../i/arrow-select.svg") center no-repeat;
  background-color: #fff;
  height: 100%;
  width: 100%;
  display: block;
  transition: background-color var(--animation-duration), transform var(--animation-duration);
}
.custom-select__arrow:hover::before {
  background-color: var(--color-yellow);
}

.custom-select__options-container {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
}

.custom-select__option {
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  color: #fff;
  background-color: var(--color-black);
  transition: color var(--animation-duration);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}
.custom-select__option:hover {
  color: var(--color-yellow);
}

.paginator {
  display: flex;
  gap: 8px;
  font-size: 16px;
  margin: 0 auto;
}
.paginator button {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.paginator__first, .paginator__last {
  font-weight: 600;
  line-height: 130%;
  padding: 5px 12px;
  background-color: var(--color-black);
  color: #fff;
  transition: color var(--animation-duration);
}
.paginator__first:hover, .paginator__last:hover {
  color: var(--color-yellow);
}
@media screen and (max-width: 879px) {
  .paginator__first, .paginator__last {
    font-size: 0 !important;
    height: 32px;
    width: 32px;
    padding: 0;
  }
  .paginator__first::before, .paginator__last::before {
    content: "";
    -webkit-mask: url("../i/paginator-chevron.svg") center no-repeat;
            mask: url("../i/paginator-chevron.svg") center no-repeat;
    background-color: #fff;
    height: 32px;
    width: 32px;
    display: block;
    transition: background-color var(--animation-duration);
  }
  .paginator__first:hover::before, .paginator__last:hover::before {
    background-color: var(--color-yellow);
  }
}
.paginator__last::before {
  transform: rotate(180deg);
}
.paginator__page {
  height: 32px;
  width: 32px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
.paginator__page--active {
  background-color: var(--color-yellow);
  outline: 1px solid var(--color-black);
}
.paginator button.paginator__page:hover {
  outline: 1px solid var(--color-black);
}

.search {
  position: relative;
  width: 100%;
  max-width: 492px;
  display: flex;
}
@media screen and (max-width: 879px) {
  .search {
    max-width: unset;
  }
}
.search__input {
  background-color: #fff;
  outline: 1px solid var(--color-black);
  border: unset;
  padding: 16px 38px 16px 24px;
  width: 100%;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.search__input::-moz-placeholder {
  color: #4F4C4D;
}
.search__input::placeholder {
  color: #4F4C4D;
}
@media screen and (max-width: 879px) {
  .search__input {
    padding-left: 16px;
  }
}
.search__submit {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  background-color: var(--color-black);
  padding: 0;
  cursor: pointer;
}
.search__submit::before {
  content: "";
  -webkit-mask: url("../i/search.svg") center no-repeat;
          mask: url("../i/search.svg") center no-repeat;
  background-color: #fff;
  height: 100%;
  width: 100%;
  display: block;
  transition: background-color var(--animation-duration);
}
.search__submit:hover::before {
  background-color: var(--color-yellow);
}

.tooltip {
  position: relative;
}
.tooltip__icon {
  border: unset;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="%23231F20"/><path d="M12 16V12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8H12.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
  cursor: pointer;
}
@media screen and (max-width: 879px) {
  .tooltip__icon {
    height: 18px;
    width: 18px;
    background-size: cover;
  }
}
.tooltip__icon:hover + .tooltip__text, .tooltip__icon:active + .tooltip__text {
  display: block;
}
.tooltip__text {
  width: 205px;
  background: var(--color-black);
  color: #fff;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  position: absolute;
  left: 0;
  bottom: 30px;
  display: none;
  opacity: 0;
  transition-duration: var(--animation-duration);
}
.tooltip__text:hover {
  display: block;
  opacity: 1;
}
.tooltip__text::before {
  content: "";
  width: calc(100% + 10px);
  height: calc(100% + 30px);
  position: absolute;
  left: -5px;
  top: -5px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 375px;
  font-size: 20px;
  font-family: "Mulish", sans-serif;
  color: var(--color-black);
}

:root {
  --animation-duration: .2s;
  --animation-slow-duration: .4s;
  --wrapper-h-padding: 44px;
  --header-height: 72px;
}
@media screen and (max-width: 1024px) {
  :root {
    --header-height: 64px;
  }
}

:root {
  --color-red: #E26655;
  --color-red-dark: #c83622;
  --color-red-light: #eda196;
  --color-orange: #EC6400;
  --color-orange-dark: #a04400;
  --color-orange-light: #ff8d3a;
  --color-yellow: #FCCB26;
  --color-yellow-dark: #d3a303;
  --color-yellow-light: #fddd71;
  --color-green: #00B04C;
  --color-green-dark: #00642b;
  --color-green-light: #00fd6d;
  --color-cyan: #00ABEA;
  --color-cyan-dark: #00739e;
  --color-cyan-light: #38c9ff;
  --color-blue: #008ECB;
  --color-blue-dark: #00587f;
  --color-blue-light: #19baff;
  --color-purple: #800080;
  --color-purple-dark: #340034;
  --color-purple-light: #cd00cd;
  --color-pink: #FFC0CB;
  --color-pink-dark: #ff748c;
  --color-pink-light: white;
  --color-brown: #A52A2A;
  --color-brown-dark: #681a1a;
  --color-brown-light: #d14a4a;
  --color-grey: #F2F2F2;
  --color-grey-dark: #cccccc;
  --color-grey-light: white;
  --color-black: #231F20;
  --color-black-dark: black;
  --color-black-light: #4c4345;
  --color-yellow-1c: #ffdd00;
  --color-yellow-1c-dark: #b39b00;
  --color-yellow-1c-light: #ffe74d;
  --color-white: #ffffff;
  --color-white-dark: #d9d9d9;
  --color-white-light: white;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--animation-duration);
}

img {
  max-width: 100%;
  max-height: 100%;
}

.wrapper {
  max-width: 1440px;
  min-width: 375px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--wrapper-h-padding);
}
@media screen and (max-width: 1439px) {
  .wrapper {
    --wrapper-h-padding: 26px;
  }
}
@media screen and (max-width: 879px) {
  .wrapper {
    --wrapper-h-padding: 16px;
  }
}
.wrapper + .wrapper {
  margin-top: 72px;
}
@media screen and (max-width: 1024px) {
  .wrapper + .wrapper {
    margin-top: 64px;
  }
}
@media screen and (max-width: 879px) {
  .wrapper + .wrapper {
    margin-top: 56px;
  }
}

.panel--black .button {
  box-shadow: 4px 4px 0px 0px #fff;
  transition: box-shadow var(--animation-duration), background-color var(--animation-duration);
}
.panel--black .button:focus:not(.button--active):not(.button--no-decoration) {
  box-shadow: 2px 2px 0px 0px #fff;
  outline: none;
}
.panel--black .button:hover, .panel--black .button:active {
  box-shadow: none;
}

@media screen and (max-width: 374px) {
  .hide-sm {
    display: none;
  }
}

@media screen and (min-width: 375px) and (max-width: 879px) {
  .hide-md {
    display: none;
  }
}

@media screen and (max-width: 1239px) {
  .hide-bg {
    display: none;
  }
}

@media screen and (min-width: 880px) {
  .show-sm {
    display: none;
  }
}

@media screen and (min-width: 1240px) {
  .show-md {
    display: none;
  }
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.container__content .section:last-child:first-child {
  flex: 1;
}

.section {
  padding: 56px 0 88px;
  color: var(--color-black);
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
@media screen and (max-width: 1439px) {
  .section {
    padding: 48px 0 72px;
  }
}
@media screen and (max-width: 879px) {
  .section {
    padding: 40px 0 72px;
  }
}
.section--main {
  padding-bottom: 56px;
}
.section--main:not(.section--no-min-height) {
  min-height: calc(720px - var(--header-height));
}
@media screen and (max-width: 1439px) {
  .section--main {
    padding-bottom: 48px;
  }
}
@media screen and (max-width: 879px) {
  .section--main {
    padding-bottom: 56px;
  }
}
.section--main .section__title {
  margin-bottom: auto;
}
.section--red {
  background-color: var(--color-red);
}
.section--orange {
  background-color: var(--color-orange);
}
.section--yellow {
  background-color: var(--color-yellow);
}
.section--green {
  background-color: var(--color-green);
}
.section--cyan {
  background-color: var(--color-cyan);
}
.section--blue {
  background-color: var(--color-blue);
}
.section--purple {
  background-color: var(--color-purple);
}
.section--pink {
  background-color: var(--color-pink);
}
.section--brown {
  background-color: var(--color-brown);
}
.section--grey {
  background-color: var(--color-grey);
}
.section--black {
  background-color: var(--color-black);
}
.section--yellow-1c {
  background-color: var(--color-yellow-1c);
}
.section--white {
  background-color: var(--color-white);
}
.section--black {
  background-color: var(--color-black);
  color: #fff;
}
.section--black h2.section__title {
  color: #fff;
  border-color: #fff !important;
}
.section--black .panel:not([class*=panel--shadow-]):not(a:hover) {
  box-shadow: 4px 4px 0px 0px #fff;
}
.section--grey {
  background-color: var(--color-grey);
}
.section h1.section__title {
  font-size: 56px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1024px) {
  .section h1.section__title {
    font-size: 40px;
  }
}
@media screen and (max-width: 879px) {
  .section h1.section__title {
    font-size: 28px;
  }
}
.section h2.section__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 130%;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 28px;
  margin-bottom: 48px;
}
@media screen and (max-width: 1024px) {
  .section h2.section__title {
    font-size: 32px;
    padding-bottom: 16px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 879px) {
  .section h2.section__title {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
.section h3.section__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 130%;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 16px;
  margin-bottom: 40px;
}
@media screen and (max-width: 1024px) {
  .section h3.section__title {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 879px) {
  .section h3.section__title {
    font-size: 18px;
  }
}
.section__subtitle {
  font-size: 32px;
  font-weight: 500;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .section__subtitle {
    font-size: 24px;
  }
}
@media screen and (max-width: 879px) {
  .section__subtitle {
    font-size: 20px;
  }
}
.section .wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.section--collapsed {
  padding-bottom: 0;
}
@media screen and (max-width: 879px) {
  .section--collapsed + .section {
    padding-top: 0;
  }
}

.panel {
  --tab-width-rev: 0px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-black);
  box-shadow: 4px 4px 0px 0px var(--color-black);
  --head-height: 44px;
  color: var(--color-black);
  background: #fff;
  font-size: 20px;
  line-height: normal;
  position: relative;
  --panel-content-padding: 32px;
  transition: box-shadow var(--animation-duration), background-color var(--animation-duration), opacity var(--animation-duration) !important;
}
@media screen and (max-width: 1439px) {
  .panel {
    --panel-content-padding: 24px;
  }
}
@media screen and (max-width: 1024px) {
  .panel {
    --panel-content-padding: 20px;
  }
}
@media screen and (max-width: 879px) {
  .panel {
    font-size: 16px;
  }
}
.panel--no-shadow {
  box-shadow: none !important;
}
.panel--clickable {
  cursor: pointer;
}
.panel--clickable:hover {
  box-shadow: none;
}
.panel__head {
  height: var(--head-height);
  --tab-width: 100px;
  position: relative;
}
@media screen and (max-width: 1439px) {
  .panel__head {
    --head-height: 40px;
  }
}
@media screen and (max-width: 879px) {
  .panel__head {
    --head-height: 32px;
  }
}
.panel__head::before, .panel__head::after {
  content: "";
  display: block;
  border-top: calc(var(--head-height) - 1px) solid #fff;
  border-left: calc(var(--head-height) / 2) solid transparent;
  height: 0;
}
.panel__head::before {
  margin-left: var(--tab-width);
  position: relative;
  z-index: 1;
}
.panel__head::after {
  border-top: var(--head-height) solid var(--color-black);
  position: absolute;
  right: 0;
  left: calc(var(--tab-width) - 1px);
  top: 0;
  z-index: 0;
}
.panel__head--red::before {
  border-top-color: var(--color-red);
}
.panel__head--orange::before {
  border-top-color: var(--color-orange);
}
.panel__head--yellow::before {
  border-top-color: var(--color-yellow);
}
.panel__head--green::before {
  border-top-color: var(--color-green);
}
.panel__head--cyan::before {
  border-top-color: var(--color-cyan);
}
.panel__head--blue::before {
  border-top-color: var(--color-blue);
}
.panel__head--purple::before {
  border-top-color: var(--color-purple);
}
.panel__head--pink::before {
  border-top-color: var(--color-pink);
}
.panel__head--brown::before {
  border-top-color: var(--color-brown);
}
.panel__head--grey::before {
  border-top-color: var(--color-grey);
}
.panel__head--black::before {
  border-top-color: var(--color-black);
}
.panel__head--yellow-1c::before {
  border-top-color: var(--color-yellow-1c);
}
.panel__head--white::before {
  border-top-color: var(--color-white);
}
.panel__head--black::before {
  border-top-color: var(--color-black);
}
.panel__head--reverse {
  --tab-width-rev: 225px;
}
@media screen and (max-width: 879px) {
  .panel__head--reverse {
    --tab-width-rev: 25px;
  }
}
.panel__head--reverse::before {
  margin-right: var(--tab-width-rev);
  margin-left: 0;
  transition-duration: var(--animation-duration);
}
.panel__head--reverse::after {
  left: 0;
  right: calc(var(--tab-width-rev) - 1px);
  transition-delay: var(--animation-duration);
}
.panel__head--reverse::after, .panel__head--reverse::before {
  border-right: calc(var(--head-height) / 2) solid transparent;
  border-left: unset;
}
.panel__head .panel__top {
  position: absolute;
  width: 100%;
  top: 0;
  height: calc(var(--head-height) - 1px);
  z-index: 1;
  align-items: center;
  padding-left: var(--panel-content-padding);
  padding-right: var(--panel-content-padding);
}
@media screen and (max-width: 879px) {
  .panel__head .panel__top {
    justify-content: center;
    align-items: flex-start;
  }
}
.panel__head-icon {
  position: absolute;
  --offset: 24px;
  left: var(--offset);
  top: var(--offset);
  height: 40px;
  width: 40px;
}
@media screen and (max-width: 1439px) {
  .panel__head-icon {
    --offset: 16px;
  }
}
.panel__content {
  padding: var(--panel-content-padding);
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  position: relative;
}
.panel__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 16px;
}
@media screen and (max-width: 1439px) {
  .panel__title {
    font-size: 20px;
  }
}
.panel__text {
  padding-right: 75px;
}
.panel__text:not(:first-child):last-child {
  margin-top: auto;
}
@media screen and (max-width: 879px) {
  .panel__text {
    padding-right: 0;
  }
}
@media screen and (max-width: 1024px) {
  .panel__text {
    font-size: 16px;
  }
}
.panel__list {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
}
@media screen and (max-width: 1439px) {
  .panel__list {
    font-size: 18px;
  }
}
.panel__link {
  margin-top: auto;
  text-decoration: underline;
}
@media screen and (max-width: 1439px) {
  .panel__link {
    font-size: 16px;
  }
}
.panel__link:hover {
  text-decoration: none;
}
@media screen and (max-width: 879px) {
  .panel a.panel__link::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}
.panel__image {
  --square: 80px;
  width: var(--square);
  position: absolute;
  right: var(--panel-content-padding);
  bottom: var(--panel-content-padding);
}
@media screen and (max-width: 1439px) {
  .panel__image {
    --square: 64px;
  }
}
@media screen and (max-width: 879px) {
  .panel__image {
    --square: 56px;
  }
  .panel__image--logo {
    max-height: 40px;
  }
}
.panel__top, .panel__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
@media screen and (max-width: 879px) {
  .panel__top {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 879px) {
  .panel__top {
    flex-direction: column;
    align-items: flex-start;
  }
}
.panel__top + .panel__bottom {
  margin-top: auto;
}
@media screen and (min-width: 880px) {
  .panel__top + .panel__bottom {
    flex-wrap: nowrap;
  }
}
.panel__top .panel__image {
  position: initial;
}
.panel__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.panel__bottom .panel__link + .products__price {
  margin-top: 8px;
}
.panel__bottom .panel__link + .products__price:not(:first-child):last-child {
  margin-top: auto;
}
.panel__close {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 16px;
  width: 16px;
  z-index: 1;
}
.panel__close > .icon {
  height: 100%;
  width: 100%;
}
.panel--red {
  background: var(--color-red);
}
.panel--orange {
  background: var(--color-orange);
}
.panel--yellow {
  background: var(--color-yellow);
}
.panel--green {
  background: var(--color-green);
}
.panel--cyan {
  background: var(--color-cyan);
}
.panel--blue {
  background: var(--color-blue);
}
.panel--purple {
  background: var(--color-purple);
}
.panel--pink {
  background: var(--color-pink);
}
.panel--brown {
  background: var(--color-brown);
}
.panel--grey {
  background: var(--color-grey);
}
.panel--black {
  background: var(--color-black);
}
.panel--yellow-1c {
  background: var(--color-yellow-1c);
}
.panel--white {
  background: var(--color-white);
}
.panel--shadow-red {
  box-shadow: 4px 4px 0px 0px var(--color-red);
}
.panel--shadow-orange {
  box-shadow: 4px 4px 0px 0px var(--color-orange);
}
.panel--shadow-yellow {
  box-shadow: 4px 4px 0px 0px var(--color-yellow);
}
.panel--shadow-green {
  box-shadow: 4px 4px 0px 0px var(--color-green);
}
.panel--shadow-cyan {
  box-shadow: 4px 4px 0px 0px var(--color-cyan);
}
.panel--shadow-blue {
  box-shadow: 4px 4px 0px 0px var(--color-blue);
}
.panel--shadow-purple {
  box-shadow: 4px 4px 0px 0px var(--color-purple);
}
.panel--shadow-pink {
  box-shadow: 4px 4px 0px 0px var(--color-pink);
}
.panel--shadow-brown {
  box-shadow: 4px 4px 0px 0px var(--color-brown);
}
.panel--shadow-grey {
  box-shadow: 4px 4px 0px 0px var(--color-grey);
}
.panel--shadow-black {
  box-shadow: 4px 4px 0px 0px var(--color-black);
}
.panel--shadow-yellow-1c {
  box-shadow: 4px 4px 0px 0px var(--color-yellow-1c);
}
.panel--shadow-white {
  box-shadow: 4px 4px 0px 0px var(--color-white);
}
.panel--black {
  background: var(--color-black);
  color: #fff;
}
.panel--white {
  background-color: #fff;
}
.panel--sm .panel__head {
  --head-height: 32px;
}
.panel--sm .panel__content {
  padding: 16px;
  font-size: 14px;
}
.panel--compact {
  grid-auto-rows: auto;
  min-height: unset;
}
.panel--compact .panel__content {
  gap: 16px;
  padding: 16px var(--panel-content-padding);
}
.panel--compact .products__item {
  min-height: unset;
  height: auto;
}
.panel--compact .products__text {
  padding-right: 70px;
}
.panel--compact .products__image {
  position: absolute;
  right: var(--panel-content-padding);
  bottom: 16px;
}
.panel--no-price .products__text {
  padding-right: 90px;
}
.panel--no-price .products__image {
  max-height: 80px;
  max-width: 80px;
}

button.panel {
  cursor: pointer;
  align-items: unset;
  text-align: left;
  font-family: inherit;
}

button.panel:hover,
a.panel:hover {
  box-shadow: none;
  cursor: pointer;
}
button.panel:hover .panel__link,
a.panel:hover .panel__link {
  text-decoration: none;
}

button.active,
a.active {
  box-shadow: none;
}

.button-panel {
  padding: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  gap: 20px;
}
@media screen and (max-width: 1024px) {
  .button-panel {
    font-size: 24px;
    padding: 35px;
  }
}
@media screen and (max-width: 879px) {
  .button-panel {
    flex-direction: column;
    gap: 28px;
    font-size: 20px;
    padding: 24px 20px;
  }
  .button-panel__button {
    width: 100%;
    justify-content: center;
  }
}
.button-panel__button {
  font-size: 16px;
  text-transform: uppercase;
}
@media screen and (max-width: 879px) {
  .button-panel__button {
    width: 100%;
  }
}
.button-panel__text {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 879px) {
  .button-panel__text {
    align-self: flex-start;
  }
}
@media screen and (max-width: 1024px) {
  .button-panel__image {
    max-width: 60px;
  }
}

.modal {
  position: fixed;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  overflow: auto;
}
.modal.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.modal__bg {
  position: absolute;
  background: #000;
  opacity: 0.4;
  width: 100%;
  height: 100%;
}
.modal__container {
  background: #fff;
  position: relative;
  padding: 64px;
  width: 100%;
  flex: 1;
  max-width: 714px;
}
@media screen and (max-width: 879px) {
  .modal__container {
    padding: 32px;
  }
}
.modal__close {
  position: absolute;
  right: 32px;
  top: 32px;
  height: 32px;
  width: 32px;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0px;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: #231F20;
  -webkit-mask: url("../i/modal-cross.svg");
          mask: url("../i/modal-cross.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
}
.modal__close:hover {
  background-color: var(--color-yellow);
}
@media screen and (max-width: 1439px) {
  .modal__close {
    width: 24px;
    height: 24px;
  }
}
.modal__title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 32px;
  line-height: 130%;
}
@media screen and (max-width: 1024px) {
  .modal__title {
    padding-right: 32px;
    font-size: 24px;
  }
}
.modal__title--small {
  font-size: 28px;
}
@media screen and (max-width: 1439px) {
  .modal__title--small {
    font-size: 20px;
  }
}
@media screen and (max-width: 879px) {
  .modal__title--small {
    font-size: 20px;
  }
}
.modal__content {
  font-size: 20px;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .modal__content {
    font-size: 16px;
  }
}
.modal__content p + p {
  margin-top: 32px;
}
.modal .form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: stretch;
}
.modal .form__submit {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.modal .form__tip {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.modal .form__link {
  text-decoration: underline;
}
.modal .form__textarea {
  height: 110px;
}
.modal .form__line {
  align-self: center;
}
.modal .form__line a {
  color: var(--color-cyan);
}

.input,
.select,
.textarea {
  padding: 18px 24px;
  color: inherit;
  font-family: inherit;
  border: 1px solid var(--color-black);
  background: var(--white-ffffff, #FFF);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.input::-moz-placeholder, .select::-moz-placeholder, .textarea::-moz-placeholder {
  color: #231F20;
  opacity: 0.7;
}
.input::placeholder,
.select::placeholder,
.textarea::placeholder {
  color: #231F20;
  opacity: 0.7;
}
.input--error,
.select--error,
.textarea--error {
  border-color: var(--color-red);
  color: var(--color-red);
}
.input--error::-moz-placeholder, .select--error::-moz-placeholder, .textarea--error::-moz-placeholder {
  color: var(--color-red);
  opacity: 0.7;
}
.input--error::placeholder,
.select--error::placeholder,
.textarea--error::placeholder {
  color: var(--color-red);
  opacity: 0.7;
}

input:required:-moz-placeholder-shown {
  border: 1px solid red; /* Red border only if the input is empty */
}

input:required:placeholder-shown {
  border: 1px solid red; /* Red border only if the input is empty */
}

.links {
  flex: 1;
  display: flex;
  gap: 62px;
}
@media screen and (max-width: 1024px) {
  .links {
    gap: 40px;
  }
}
@media screen and (max-width: 879px) {
  .links {
    gap: 32px;
    flex-direction: column;
  }
}
.links__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  line-height: 1.5em;
}
@media screen and (max-width: 879px) {
  .links__col {
    gap: 12px;
    line-height: normal;
  }
  .links__col:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}

ul.ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
ul.ul li {
  position: relative;
  line-height: 130%;
  padding-left: 24px;
}
@media screen and (max-width: 879px) {
  ul.ul li {
    font-size: 16px;
  }
}
ul.ul li::before {
  content: "";
  display: block;
  background-color: var(--color-black);
  border-radius: 50%;
  height: 7px;
  width: 7px;
  position: absolute;
  left: 8px;
  top: calc(0.5em + 1px);
}
@media screen and (max-width: 879px) {
  ul.ul li::before {
    height: 6px;
    width: 6px;
    top: 0.5em;
  }
}

.section--black ul.ul li::before {
  background-color: #fff;
}

.contact-big {
  display: flex;
  flex-direction: column;
  margin-top: 72px;
  padding: 64px 604px 64px 64px;
  height: 376px;
  background-color: var(--color-yellow);
  color: var(--color-black);
  position: relative;
}
@media screen and (max-width: 1439px) {
  .contact-big {
    height: 300px;
    padding: 48px 380px 48px 48px;
  }
}
@media screen and (max-width: 879px) {
  .contact-big {
    height: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
  }
}
.contact-big__title {
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 16px;
}
@media screen and (max-width: 1439px) {
  .contact-big__title {
    font-size: 32px;
    margin-bottom: 14px;
  }
}
@media screen and (max-width: 879px) {
  .contact-big__title {
    font-size: 24px;
    margin-bottom: 16px;
  }
}
.contact-big__text {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  max-width: 518px;
}
@media screen and (max-width: 1439px) {
  .contact-big__text {
    font-size: 16px;
  }
}
.contact-big__text + .contact-big__image + .contact-big__button {
  margin-top: auto;
  align-self: flex-start;
}
.contact-big__image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 476px;
  max-height: unset;
}
@media screen and (max-width: 1439px) {
  .contact-big__image {
    width: 371px;
  }
}
@media screen and (max-width: 879px) {
  .contact-big__image {
    position: relative;
    width: 214px;
    align-self: flex-end;
  }
}
.contact-big__button {
  align-self: flex-start;
}

.section .contact-big:first-child {
  margin-top: 24px;
}

.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media screen and (max-width: 879px) {
  .cols {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
  }
}
.cols__button {
  margin-top: 32px;
}

@media screen and (max-width: 1024px) {
  .cols--licenses {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 880px) {
  .cols--products-zeta .cols__item {
    display: flex;
    flex-direction: column;
  }
  .cols--products-zeta .cols__item .swiper {
    flex: 1;
  }
  .cols--products-zeta .cols__item .swiper .products {
    height: 100%;
  }
}
.block-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 879px) {
  .block-group {
    grid-template-columns: 1fr;
  }
}
.block-group__item {
  border: none;
  outline: 1px solid var(--color-black);
}
@media screen and (min-width: 880px) {
  .block-group--3 .block-group__item:nth-child(3) {
    grid-area: 1/2/3;
  }
}
@media screen and (max-width: 879px) {
  .block-group--3 .block-group__item:nth-child(3) {
    min-height: 344px;
  }
}
.block-group--3 .block-group__item:nth-child(2) {
  grid-row-start: 2;
}
.block-group--3 .block-group__item:nth-child(3) {
  grid-row: span 2;
}
.block-group--4 {
  grid-template-rows: repeat(2, minmax(128px, auto));
}
.block-group .block-group__item {
  min-height: 216px;
}
@media screen and (max-width: 1439px) {
  .block-group .block-group__item {
    min-height: 168px;
  }
}
@media screen and (max-width: 879px) {
  .block-group .block-group__item {
    min-height: 196px;
  }
  .block-group .block-group__item:nth-child(3) {
    order: 3;
  }
}

.select {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.select::before {
  content: "";
  position: absolute;
  font-size: 24px;
  top: 50%;
  transform: translateY(-50%);
  right: 1em;
  width: 1em;
  height: 1em;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5V19" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 12L12 19L5 12" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
  pointer-events: none;
}
.select select {
  width: 100%;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  font-size: inherit;
}
.select select::-ms-expand {
  display: none;
}

@media screen and (min-width: 880px) {
  .hide-md-up {
    display: none !important;
  }
}

@media screen and (max-width: 879px) {
  .hide-md-down {
    display: none !important;
  }
}

.anchor {
  padding-top: 50px;
  margin-top: -50px;
}

.about {
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 1024px) {
  .about {
    gap: 16px;
  }
}
@media screen and (max-width: 1024px) {
  .about {
    flex-direction: column;
  }
}
.about__bank-info {
  flex: 1 0 100%;
  max-width: 436px;
  min-width: 312px;
}
@media screen and (max-width: 1024px) {
  .about__bank-info {
    max-width: 312px;
  }
}
@media screen and (max-width: 1024px) {
  .about__bank-info {
    max-width: unset;
  }
}
.about__bank-info-text {
  padding: 0;
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
}
@media screen and (max-width: 1024px) {
  .about__bank-info-text {
    font-size: 16px;
  }
}
.about__title {
  font-size: 28px;
}
@media screen and (max-width: 1439px) {
  .about__title {
    font-size: 24px;
  }
}
@media screen and (max-width: 879px) {
  .about__title {
    font-size: 20px;
  }
}

.addresses {
  flex: 1;
}
.addresses__item {
  display: flex;
  gap: 60px;
  justify-content: space-between;
}
@media screen and (max-width: 879px) {
  .addresses__item {
    flex-direction: column;
    gap: 12px;
  }
}
.addresses__item + .addresses__item {
  margin-top: 24px;
}
@media screen and (max-width: 879px) {
  .addresses__item + .addresses__item {
    margin-top: 18px;
  }
}
.addresses__item--separator + .addresses__item {
  margin-top: 42px;
  padding-top: 42px;
  border-top: 1px solid #fff;
}
@media screen and (max-width: 1439px) {
  .addresses__item--separator + .addresses__item {
    margin-top: 24px;
    padding-top: 24px;
  }
}
.addresses__details {
  flex: 1;
  max-width: 431px;
}
@media screen and (max-width: 1439px) {
  .addresses__details {
    max-width: 312px;
  }
}
@media screen and (max-width: 879px) {
  .addresses__details {
    max-width: unset;
  }
}
.addresses__contact {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.addresses__contact--email {
  text-decoration: underline;
}
.addresses__contact:last-of-type:not(:first-child) {
  margin-bottom: 16px;
}
@media screen and (max-width: 1439px) {
  .addresses__contact {
    font-size: 20px;
  }
}
@media screen and (max-width: 879px) {
  .addresses__contact {
    font-size: 16px;
  }
}
.addresses__details {
  display: flex;
  flex-direction: column;
  align-self: center;
}
@media screen and (max-width: 879px) {
  .addresses__details {
    align-self: flex-start;
  }
}

.map {
  height: 584px;
  margin-top: 54px;
  position: relative;
}
@media screen and (max-width: 1439px) {
  .map {
    height: 420px;
  }
}

.tags__list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 785px;
}
@media screen and (max-width: 879px) {
  .tags__list--top {
    display: none;
  }
}
.tags__link:hover {
  color: var(--color-yellow);
}

.blog {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media screen and (max-width: 1439px) {
  .blog {
    gap: 40px;
  }
}
@media screen and (max-width: 879px) {
  .blog {
    gap: 28px;
  }
}
.blog .custom-select {
  display: none;
}
@media screen and (max-width: 879px) {
  .blog .custom-select {
    display: block;
  }
}

.article__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 1439px) {
  .article__list {
    gap: 20px;
  }
}
@media screen and (max-width: 879px) {
  .article__item {
    min-height: 300px;
  }
}
.article__info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 12px;
}
@media screen and (max-width: 879px) {
  .article__info {
    justify-content: flex-start;
  }
}
.article__date, .article__time {
  color: var(--color-blue, #008ECB);
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}
.article__tags-list {
  margin-left: auto;
}
@media screen and (max-width: 879px) {
  .article__tags-list {
    margin-left: unset;
    flex: 100%;
  }
}
.article__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 130%;
  margin: 20px 0 12px;
}
@media screen and (max-width: 1439px) {
  .article__title {
    font-size: 24px;
    margin-top: 16px;
  }
}
@media screen and (max-width: 879px) {
  .article__title {
    font-size: 20px;
  }
}
.article__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  max-height: 52px;
  font-size: 20px;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .article__text {
    font-size: 16px;
  }
}
@media screen and (max-width: 879px) {
  .article__text {
    font-size: 14px;
  }
}
.article__link {
  color: var(--color-blue, #008ECB);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px; /* 120% */
  text-decoration-line: underline;
  margin-top: 24px;
  align-self: flex-start;
}
@media screen and (max-width: 1439px) {
  .article__link {
    font-size: 20px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 879px) {
  .article__link {
    font-size: 16px;
    margin-top: auto;
  }
}
.article__link:hover {
  text-decoration: none;
}

.section__title--search {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 879px) {
  .section__title--search {
    position: relative;
    margin-bottom: 96px !important;
  }
  .section__title--search .search {
    position: absolute;
    bottom: -84px;
  }
}

.post {
  display: flex;
  justify-content: flex-start;
  gap: 18px;
}
@media screen and (max-width: 879px) {
  .post {
    flex-direction: column;
    gap: 28px;
  }
}
.post__sidebar {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (max-width: 879px) {
  .post__sidebar {
    flex: 0;
  }
}
.post__sidebar .tags__list {
  margin-top: 12px;
}
.post__content {
  max-width: 836px;
  line-height: 130%;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
}
.post__content p {
  margin-block-start: 1em;
  margin-block-end: 1em;
}
.post__content img {
  max-width: 100%;
  max-height: 100%;
}
.post__content p + img {
  margin-top: 48px;
}
@media screen and (max-width: 1024px) {
  .post__content p + img {
    margin-top: 40px;
  }
}

.post__content h3,
.post__content b,
.post__content .post__content__price {
  font-weight: bold;
}
.post__content i {
  font-style: italic;
}
.post__content h3 {
  font-size: 28px;
}

.tags__list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 785px;
}
@media screen and (max-width: 879px) {
  .tags__list--top {
    display: none;
  }
}
.tags__link:hover {
  color: var(--color-yellow);
}

.blog {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media screen and (max-width: 1439px) {
  .blog {
    gap: 40px;
  }
}
@media screen and (max-width: 879px) {
  .blog {
    gap: 28px;
  }
}
.blog .custom-select {
  display: none;
}
@media screen and (max-width: 879px) {
  .blog .custom-select {
    display: block;
  }
}

.article__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 1439px) {
  .article__list {
    gap: 20px;
  }
}
@media screen and (max-width: 879px) {
  .article__item {
    min-height: 300px;
  }
}
.article__info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 12px;
}
@media screen and (max-width: 879px) {
  .article__info {
    justify-content: flex-start;
  }
}
.article__date, .article__time {
  color: var(--color-blue, #008ECB);
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
}
.article__tags-list {
  margin-left: auto;
}
@media screen and (max-width: 879px) {
  .article__tags-list {
    margin-left: unset;
    flex: 100%;
  }
}
.article__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 130%;
  margin: 20px 0 12px;
}
@media screen and (max-width: 1439px) {
  .article__title {
    font-size: 24px;
    margin-top: 16px;
  }
}
@media screen and (max-width: 879px) {
  .article__title {
    font-size: 20px;
  }
}
.article__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  max-height: 52px;
  font-size: 20px;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .article__text {
    font-size: 16px;
  }
}
@media screen and (max-width: 879px) {
  .article__text {
    font-size: 14px;
  }
}
.article__link {
  color: var(--color-blue, #008ECB);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px; /* 120% */
  text-decoration-line: underline;
  margin-top: 24px;
  align-self: flex-start;
}
@media screen and (max-width: 1439px) {
  .article__link {
    font-size: 20px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 879px) {
  .article__link {
    font-size: 16px;
    margin-top: auto;
  }
}
.article__link:hover {
  text-decoration: none;
}

.section__title--search {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 879px) {
  .section__title--search {
    position: relative;
    margin-bottom: 96px !important;
  }
  .section__title--search .search {
    position: absolute;
    bottom: -84px;
  }
}

@media screen and (min-width: 880px) {
  .cases {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }
}
.cases__item {
  min-height: 288px;
}
@media screen and (max-width: 1439px) {
  .cases__item {
    min-height: 266px;
  }
}
@media screen and (min-width: 880px) {
  .cases__item {
    width: calc(33.3333333333% - 12px);
  }
}

@media screen and (max-width: 879px) {
  .swiper .cases__item {
    width: 100%;
    max-width: 344px;
  }
}

.cases__item:visibile:nth-child(n+7) {
  display: none;
}
.cases--filtered[data-filtered-by=red] .cases__item:not([data-case-category=red]) {
  display: none;
}
.cases--filtered[data-filtered-by=orange] .cases__item:not([data-case-category=orange]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow] .cases__item:not([data-case-category=yellow]) {
  display: none;
}
.cases--filtered[data-filtered-by=green] .cases__item:not([data-case-category=green]) {
  display: none;
}
.cases--filtered[data-filtered-by=cyan] .cases__item:not([data-case-category=cyan]) {
  display: none;
}
.cases--filtered[data-filtered-by=blue] .cases__item:not([data-case-category=blue]) {
  display: none;
}
.cases--filtered[data-filtered-by=purple] .cases__item:not([data-case-category=purple]) {
  display: none;
}
.cases--filtered[data-filtered-by=pink] .cases__item:not([data-case-category=pink]) {
  display: none;
}
.cases--filtered[data-filtered-by=brown] .cases__item:not([data-case-category=brown]) {
  display: none;
}
.cases--filtered[data-filtered-by=grey] .cases__item:not([data-case-category=grey]) {
  display: none;
}
.cases--filtered[data-filtered-by=black] .cases__item:not([data-case-category=black]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow-1c] .cases__item:not([data-case-category=yellow-1c]) {
  display: none;
}
.cases--filtered[data-filtered-by=white] .cases__item:not([data-case-category=white]) {
  display: none;
}
.cases .panel__head {
  --head-height: 52px;
}

.case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media screen and (max-width: 1024px) {
  .case {
    gap: 12px;
  }
}
.case__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__title {
    font-size: 20px;
  }
}
.case__image {
  max-height: 22px;
  max-width: 72px;
  position: absolute;
  top: 20px;
  left: 24px;
  width: var(--tab-width);
}
.case__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__text {
    font-size: 14px;
  }
}

.case-info {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 64px;
}
@media screen and (max-width: 1439px) {
  .case-info {
    grid-template-columns: auto minmax(240px, 1fr);
  }
}
@media screen and (max-width: 879px) {
  .case-info {
    grid-template-rows: repeat(2, auto);
    grid-row-gap: 64px;
  }
}
.case-info__title {
  grid-area: 1/1/2/2;
}
@media screen and (max-width: 879px) {
  .case-info__title {
    grid-area: 1/1/2/3;
  }
}
.case-info__meta {
  grid-area: 2/1/3/2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.case-info__meta-data {
  margin-bottom: 32px;
}
.case-info__logos-list {
  display: flex;
  gap: 12px;
  align-items: center;
}
.case-info__img {
  grid-area: 1/2/3/3;
  text-align: right;
}
@media screen and (max-width: 879px) {
  .case-info__img {
    grid-area: 2/2/3/3;
  }
  .case-info__img img {
    max-width: 192px;
  }
}

.meta {
  display: flex;
  gap: 24px;
}
.meta__date, .meta__time, .meta__views {
  display: flex;
  align-items: center;
}
.meta__date::before, .meta__time::before, .meta__views::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.meta__date::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z" stroke="currentColor" stroke-width="1.5"/><path d="M7 4V2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M17 4V2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M2.5 9H21.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z" fill="currentColor"/><path d="M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z" fill="currentColor"/><path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="currentColor"/><path d="M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z" fill="currentColor"/><path d="M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z" fill="currentColor"/><path d="M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z" fill="currentColor"/></svg>') no-repeat center;
  background-size: cover;
}
.meta__time::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 8V12L14.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
  background-size: cover;
}
.meta__views::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M3.27489 15.2957C2.42496 14.1915 2 13.6394 2 12C2 10.3606 2.42496 9.80853 3.27489 8.70433C4.97196 6.49956 7.81811 4 12 4C16.1819 4 19.028 6.49956 20.7251 8.70433C21.575 9.80853 22 10.3606 22 12C22 13.6394 21.575 14.1915 20.7251 15.2957C19.028 17.5004 16.1819 20 12 20C7.81811 20 4.97196 17.5004 3.27489 15.2957Z" stroke="currentColor" stroke-width="1.5"/><path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="1.5"/></svg>') no-repeat center;
  background-size: cover;
}

.container__content {
  counter-reset: case;
}

.section--case-item .section__title {
  counter-increment: case;
}
.section--case-item .section__title::after {
  content: counter(case);
  --square: 64px;
  line-height: var(--square);
  width: var(--square);
  height: var(--square);
  flex: 0 0 var(--square);
  text-align: center;
  font-family: "Quantico", sans-serif;
  color: var(--color-black);
  background-color: var(--color-yellow);
  font-size: 40px;
}
@media screen and (max-width: 1439px) {
  .section--case-item .section__title::after {
    --square: 48px;
    font-size: 32px;
  }
}

.section__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.section__title[data-counter] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.section__title[data-counter]::after {
  content: attr(data-counter);
  --square: 64px;
  line-height: var(--square);
  width: var(--square);
  height: var(--square);
  flex: 0 0 var(--square);
  text-align: center;
  font-family: "Quantico", sans-serif;
  color: var(--color-black);
  background-color: var(--color-yellow);
  font-size: 40px;
}
@media screen and (max-width: 1439px) {
  .section__title[data-counter]::after {
    --square: 48px;
    font-size: 32px;
  }
}

.section--black .section__title::after {
  background-color: #fff;
}

.text-wrapper {
  font-weight: 500;
  line-height: 130%;
  width: 846px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1439px) {
  .text-wrapper {
    width: 696px;
  }
}
@media screen and (max-width: 879px) {
  .text-wrapper {
    width: auto;
  }
}
.text-wrapper + .text-wrapper {
  margin-top: 40px;
}
.text-wrapper p {
  margin: 1em 0;
}

.text-wrapper {
  --wrapper-width: 846px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1439px) {
  .text-wrapper {
    --wrapper-width: 696px;
  }
}
@media screen and (max-width: 879px) {
  .text-wrapper {
    --wrapper-width: auto;
  }
}
.text-wrapper--links {
  position: relative;
  width: 100%;
  gap: 20px;
}
.text-wrapper__links {
  position: absolute;
  width: calc((100% - var(--wrapper-width) - 24px) / 2);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.text-wrapper__links .button {
  align-self: flex-start;
}
@media screen and (max-width: 1024px) {
  .text-wrapper__links {
    position: relative;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .text-wrapper__links .link-list__header {
    flex: 1 0 100%;
  }
}
.text-wrapper__text {
  width: var(--wrapper-width);
  margin: 0 auto;
}

* + .section__title {
  margin-top: 64px;
}

.case__subtitle {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 24px;
}
@media screen and (max-width: 1439px) {
  .case__subtitle {
    font-size: 20px;
  }
}
.case__list {
  font-size: 20px;
}
@media screen and (max-width: 1439px) {
  .case__list {
    font-size: 16px;
  }
}

.screenshots {
  margin-top: 64px;
  align-items: center;
}
.screenshots__item {
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid var(--color-black);
}
@media screen and (min-width: 880px) {
  .screenshots {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
  }
  .screenshots__item {
    display: block !important;
    width: auto;
  }
}
@media screen and (max-width: 879px) {
  .screenshots__img {
    margin: 0 auto;
  }
}

.button-panel {
  margin-top: 64px;
}

.tooltip--atol {
  position: absolute;
  left: 33.1%;
  top: 1%;
}

@media screen and (min-width: 880px) {
  .cases {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }
}
.cases__item {
  min-height: 288px;
}
@media screen and (max-width: 1439px) {
  .cases__item {
    min-height: 266px;
  }
}
@media screen and (min-width: 880px) {
  .cases__item {
    width: calc(33.3333333333% - 12px);
  }
}

@media screen and (max-width: 879px) {
  .swiper .cases__item {
    width: 100%;
    max-width: 344px;
  }
}

.cases__item:visibile:nth-child(n+7) {
  display: none;
}
.cases--filtered[data-filtered-by=red] .cases__item:not([data-case-category=red]) {
  display: none;
}
.cases--filtered[data-filtered-by=orange] .cases__item:not([data-case-category=orange]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow] .cases__item:not([data-case-category=yellow]) {
  display: none;
}
.cases--filtered[data-filtered-by=green] .cases__item:not([data-case-category=green]) {
  display: none;
}
.cases--filtered[data-filtered-by=cyan] .cases__item:not([data-case-category=cyan]) {
  display: none;
}
.cases--filtered[data-filtered-by=blue] .cases__item:not([data-case-category=blue]) {
  display: none;
}
.cases--filtered[data-filtered-by=purple] .cases__item:not([data-case-category=purple]) {
  display: none;
}
.cases--filtered[data-filtered-by=pink] .cases__item:not([data-case-category=pink]) {
  display: none;
}
.cases--filtered[data-filtered-by=brown] .cases__item:not([data-case-category=brown]) {
  display: none;
}
.cases--filtered[data-filtered-by=grey] .cases__item:not([data-case-category=grey]) {
  display: none;
}
.cases--filtered[data-filtered-by=black] .cases__item:not([data-case-category=black]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow-1c] .cases__item:not([data-case-category=yellow-1c]) {
  display: none;
}
.cases--filtered[data-filtered-by=white] .cases__item:not([data-case-category=white]) {
  display: none;
}
.cases .panel__head {
  --head-height: 52px;
}

.case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media screen and (max-width: 1024px) {
  .case {
    gap: 12px;
  }
}
.case__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__title {
    font-size: 20px;
  }
}
.case__image {
  max-height: 22px;
  max-width: 72px;
  position: absolute;
  top: 20px;
  left: 24px;
  width: var(--tab-width);
}
.case__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__text {
    font-size: 14px;
  }
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.wrapper.cases {
  flex-direction: row !important;
}
@media screen and (max-width: 879px) {
  .wrapper.cases {
    display: flex;
    flex-direction: column !important;
    justify-content: stretch;
    gap: 16px;
  }
}
@media screen and (max-width: 879px) {
  .wrapper.cases__item {
    width: 100%;
    flex: 1;
  }
}
.wrapper.cases--filtered .button-panel {
  display: none;
}
.wrapper.cases .button-panel {
  width: 100%;
}

.cases-wrapper {
  margin: 40px 0;
}

/*@include media-up($screen-md) {
  .cases-wrapper:nth-child(odd) .cases__item:nth-child(1) {
    width: calc(100%/3*2 - 6px);
  }
  .cases-wrapper:nth-child(even) {
    .cases__item:nth-child(5) {
      width: calc(100%/3*2 - 6px);
    }
  }
}*/
.paginator + .button-panel {
  margin-top: 48px;
}

@media screen and (min-width: 880px) {
  .cases {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }
}
.cases__item {
  min-height: 288px;
}
@media screen and (max-width: 1439px) {
  .cases__item {
    min-height: 266px;
  }
}
@media screen and (min-width: 880px) {
  .cases__item {
    width: calc(33.3333333333% - 12px);
  }
}

@media screen and (max-width: 879px) {
  .swiper .cases__item {
    width: 100%;
    max-width: 344px;
  }
}

.cases__item:visibile:nth-child(n+7) {
  display: none;
}
.cases--filtered[data-filtered-by=red] .cases__item:not([data-case-category=red]) {
  display: none;
}
.cases--filtered[data-filtered-by=orange] .cases__item:not([data-case-category=orange]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow] .cases__item:not([data-case-category=yellow]) {
  display: none;
}
.cases--filtered[data-filtered-by=green] .cases__item:not([data-case-category=green]) {
  display: none;
}
.cases--filtered[data-filtered-by=cyan] .cases__item:not([data-case-category=cyan]) {
  display: none;
}
.cases--filtered[data-filtered-by=blue] .cases__item:not([data-case-category=blue]) {
  display: none;
}
.cases--filtered[data-filtered-by=purple] .cases__item:not([data-case-category=purple]) {
  display: none;
}
.cases--filtered[data-filtered-by=pink] .cases__item:not([data-case-category=pink]) {
  display: none;
}
.cases--filtered[data-filtered-by=brown] .cases__item:not([data-case-category=brown]) {
  display: none;
}
.cases--filtered[data-filtered-by=grey] .cases__item:not([data-case-category=grey]) {
  display: none;
}
.cases--filtered[data-filtered-by=black] .cases__item:not([data-case-category=black]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow-1c] .cases__item:not([data-case-category=yellow-1c]) {
  display: none;
}
.cases--filtered[data-filtered-by=white] .cases__item:not([data-case-category=white]) {
  display: none;
}
.cases .panel__head {
  --head-height: 52px;
}

.case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media screen and (max-width: 1024px) {
  .case {
    gap: 12px;
  }
}
.case__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__title {
    font-size: 20px;
  }
}
.case__image {
  max-height: 22px;
  max-width: 72px;
  position: absolute;
  top: 20px;
  left: 24px;
  width: var(--tab-width);
}
.case__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__text {
    font-size: 14px;
  }
}

.anchors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 22px;
  margin-top: auto;
}
@media screen and (max-width: 1439px) {
  .anchors {
    gap: 18px;
  }
}
@media screen and (max-width: 879px) {
  .anchors {
    gap: 16px;
    flex-direction: column;
    margin-top: 56px;
  }
}
.anchors__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 164px;
}
.anchors__item .panel__content {
  --panel-content-padding: 24px;
}
.anchors__item.panel--red:hover {
  background-color: var(--color-red-light);
}
.anchors__item.panel--yellow:hover {
  background-color: var(--color-yellow-light);
}
.anchors__item.panel--cyan:hover {
  background-color: var(--color-cyan-light);
}
.anchors__item.panel--green:hover {
  background-color: var(--color-green-light);
}
.anchors__image {
  height: 56px;
  width: 56px;
}
.anchors__bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.anchors__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .anchors__title {
    font-size: 24px;
  }
}
.anchors__arrow {
  height: 40px;
  width: 40px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M20 8.33325V31.6666" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M31.6673 20L20.0007 31.6667L8.33398 20" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
}

.section {
  position: relative;
}

.section > .panel__head {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  --head-height: 72px;
}
@media screen and (max-width: 1439px) {
  .section > .panel__head {
    --head-height: 56px;
  }
}
@media screen and (max-width: 879px) {
  .section > .panel__head {
    --head-height: 40px;
  }
}
.section > .panel__head::before {
  margin-left: 33.3333333333%;
}
.section > .panel__head::after {
  left: calc(33.3333333333% - 1px);
}

.button-panel {
  margin-top: 72px;
}

.scroll-top-button {
  border: 1px solid var(--color-black, #000);
  cursor: pointer;
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><path d="M25 39L25 11" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 25L25 11L39 25" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
  text-decoration: none;
}
.scroll-top-button--yellow {
  background-color: var(--color-yellow);
}
.scroll-top-button--cyan {
  background-color: var(--color-cyan);
}
.scroll-top-button--red {
  background-color: var(--color-red);
}
.scroll-top-button--green {
  background-color: var(--color-green);
}
.scroll-top-button:hover {
  opacity: 0.8;
}

.section h2.section__title.section__title--with-button {
  display: flex;
  justify-content: space-between;
}

.cols + .block-group {
  margin-top: 64px;
}

.dashboard {
  display: flex;
  gap: 48px;
}
@media screen and (max-width: 1439px) {
  .dashboard {
    gap: 32px;
  }
}
@media screen and (max-width: 879px) {
  .dashboard {
    flex-direction: column;
    gap: 18px;
  }
}
.dashboard__products {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media screen and (max-width: 1439px) {
  .dashboard__products {
    gap: 56px;
  }
}
@media screen and (max-width: 879px) {
  .dashboard__products {
    order: 2;
    gap: 48px;
  }
}
.dashboard__aside {
  flex: 1 0 100%;
}
@media screen and (min-width: 1440px) {
  .dashboard__aside {
    max-width: 412px;
  }
}
@media screen and (min-width: 880px) and (max-width: 1439px) {
  .dashboard__aside {
    max-width: 298px;
  }
}

.products {
  /*&__top {
    display: flex;
    justify-content: space-between;
    gap: 56px;
    flex: 1;
    @include media-down($screen-lg) {
      gap: 16px;
    }
    @include media-down($screen-md) {
      flex-direction: column;
    }
  }*/
}
.products__block-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 32px;
  font-weight: 600;
  line-height: 130%;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--color-black);
  position: relative;
}
@media screen and (max-width: 1439px) {
  .products__block-title {
    font-size: 24px;
    padding-bottom: 18px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 879px) {
  .products__block-title {
    margin-bottom: 78px;
  }
}
@media screen and (min-width: 880px) {
  .products__block-title .checkbox {
    margin-left: auto;
  }
}
@media screen and (max-width: 879px) {
  .products__block-title .checkbox {
    position: absolute;
    left: 0;
    bottom: -56px;
  }
}
.products__block-logo {
  max-height: 33px;
  max-width: 72px;
}
.products__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (max-width: 1439px) {
  .products__list {
    gap: 12px;
  }
}
.products__list:not(.products__list--show-inactive) .inactive {
  display: none;
}
.products__item {
  min-height: 164px;
}
.products__item .panel__content {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 879px) {
  .products__item .panel__content {
    gap: 16px;
  }
}
.products__title {
  font-size: 24px;
  font-weight: 600;
}
@media screen and (max-width: 1439px) {
  .products__title {
    font-size: 20px;
  }
}
@media screen and (min-width: 880px) {
  .products__status-info {
    text-align: right;
  }
}
.products__status {
  font-size: 16px;
  color: var(--color-green);
  padding-left: 16px;
  position: relative;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
}
.products__status::before {
  content: "";
  display: block;
  background-color: var(--color-green);
  border-radius: 50%;
  height: 8px;
  width: 8px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.products__status--inactive {
  color: var(--color-red);
}
.products__status--inactive::before {
  background-color: var(--color-red);
}
.products__date {
  font-size: 16px;
  margin-top: 8px;
  font-weight: 400;
  white-space: nowrap;
}
.products__link-list {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 8px;
  flex-wrap: wrap;
}
.products__link {
  color: var(--color-cyan);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
}
.products__link:hover {
  text-decoration: none;
}
.products__subscribe {
  margin-left: auto;
}

.subscribe-button {
  border: unset;
  background-color: var(--color-black);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 40px;
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--animation-duration), background-color var(--animation-duration);
}
@media screen and (max-width: 879px) {
  .subscribe-button {
    width: 100%;
  }
}
.subscribe-button:hover, .subscribe-button:active {
  background-color: #fff;
  color: var(--color-black);
  outline: 1px solid var(--color-black);
}

.aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 1439px) {
  .aside {
    gap: 20px;
  }
}
@media screen and (max-width: 879px) {
  .aside {
    gap: 16px;
  }
}
.aside__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-black);
}
@media screen and (max-width: 1439px) {
  .aside__title {
    font-size: 24px;
  }
}
.aside__logout {
  align-self: flex-end;
  font-size: 24px;
  margin: 10px 0;
}
@media screen and (max-width: 1439px) {
  .aside__logout {
    font-size: 20px;
    margin: 4px 0;
  }
}

.profile__info {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.profile__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-black);
  background: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.6654 28V25.3333C26.6654 23.9188 26.1035 22.5623 25.1033 21.5621C24.1031 20.5619 22.7465 20 21.332 20H10.6654C9.25088 20 7.89432 20.5619 6.89413 21.5621C5.89393 22.5623 5.33203 23.9188 5.33203 25.3333V28" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.0013 14.6667C18.9468 14.6667 21.3346 12.2789 21.3346 9.33333C21.3346 6.38781 18.9468 4 16.0013 4C13.0558 4 10.668 6.38781 10.668 9.33333C10.668 12.2789 13.0558 14.6667 16.0013 14.6667Z" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat #F2F2F2;
}
.profile__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
}
@media screen and (max-width: 1439px) {
  .profile__row {
    flex-direction: column;
  }
}
.profile__row + .profile__row {
  margin-top: 12px;
}
.profile__label {
  font-weight: 600;
}
.profile__value {
  font-weight: 400;
  opacity: 0.8;
}
.profile__edit-button {
  margin-top: 32px;
  flex: 1;
  width: 100%;
}

@media screen and (min-width: 880px) {
  .cases {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }
}
.cases__item {
  min-height: 288px;
}
@media screen and (max-width: 1439px) {
  .cases__item {
    min-height: 266px;
  }
}
@media screen and (min-width: 880px) {
  .cases__item {
    width: calc(33.3333333333% - 12px);
  }
}

@media screen and (max-width: 879px) {
  .swiper .cases__item {
    width: 100%;
    max-width: 344px;
  }
}

.cases__item:visibile:nth-child(n+7) {
  display: none;
}
.cases--filtered[data-filtered-by=red] .cases__item:not([data-case-category=red]) {
  display: none;
}
.cases--filtered[data-filtered-by=orange] .cases__item:not([data-case-category=orange]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow] .cases__item:not([data-case-category=yellow]) {
  display: none;
}
.cases--filtered[data-filtered-by=green] .cases__item:not([data-case-category=green]) {
  display: none;
}
.cases--filtered[data-filtered-by=cyan] .cases__item:not([data-case-category=cyan]) {
  display: none;
}
.cases--filtered[data-filtered-by=blue] .cases__item:not([data-case-category=blue]) {
  display: none;
}
.cases--filtered[data-filtered-by=purple] .cases__item:not([data-case-category=purple]) {
  display: none;
}
.cases--filtered[data-filtered-by=pink] .cases__item:not([data-case-category=pink]) {
  display: none;
}
.cases--filtered[data-filtered-by=brown] .cases__item:not([data-case-category=brown]) {
  display: none;
}
.cases--filtered[data-filtered-by=grey] .cases__item:not([data-case-category=grey]) {
  display: none;
}
.cases--filtered[data-filtered-by=black] .cases__item:not([data-case-category=black]) {
  display: none;
}
.cases--filtered[data-filtered-by=yellow-1c] .cases__item:not([data-case-category=yellow-1c]) {
  display: none;
}
.cases--filtered[data-filtered-by=white] .cases__item:not([data-case-category=white]) {
  display: none;
}
.cases .panel__head {
  --head-height: 52px;
}

.case {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media screen and (max-width: 1024px) {
  .case {
    gap: 12px;
  }
}
.case__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__title {
    font-size: 20px;
  }
}
.case__image {
  max-height: 22px;
  max-width: 72px;
  position: absolute;
  top: 20px;
  left: 24px;
  width: var(--tab-width);
}
.case__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .case__text {
    font-size: 14px;
  }
}

.tools {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  max-width: 1041px;
  position: relative;
  color: var(--color-black);
}
@media screen and (max-width: 879px) {
  .tools {
    display: flex;
    flex-direction: column;
    margin-top: 100px;
  }
}
.tools__item {
  position: relative;
}
.tools__item:nth-child(1) {
  grid-area: 1/1/2/2;
}
.tools__item:nth-child(2) {
  grid-area: 1/2/2/3;
}
.tools__item:nth-child(3) {
  grid-area: 1/3/2/4;
}
.tools__item:nth-child(4) {
  grid-area: 1/4/2/5;
}
.tools__item:nth-child(5) {
  grid-area: 2/1/3/3;
}
.tools__item:nth-child(6) {
  grid-area: 2/3/3/5;
}
.tools__item > .button {
  width: 100%;
}
@media screen and (max-width: 879px) {
  .tools__item {
    display: flex;
    flex-direction: column-reverse;
  }
}
.tools__panel {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 100%;
  background: #fff;
  font-size: 14px;
  line-height: 130%;
  transition: opacity var(--animation-duration);
}
@media screen and (max-width: 879px) {
  .tools__panel {
    position: unset;
  }
}
.tools__panel .panel {
  border-bottom: none;
}
.tools__panel:not(.tools__panel--active) {
  visibility: hidden;
  height: 0;
  opacity: 0;
}
.tools::after {
  content: "";
  --square: 136px;
  --rotate: -155deg;
  height: var(--square);
  width: var(--square);
  transform: rotate(var(--rotate));
  position: absolute;
  left: calc(100% + 40px);
  bottom: 30px;
  -webkit-mask: url("../i/tip-arrow.svg") center no-repeat;
          mask: url("../i/tip-arrow.svg") center no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--color-yellow);
}
@media screen and (max-width: 1439px) {
  .tools::after {
    --square: 104px;
    --rotate: -200deg;
    left: unset;
    right: 180px;
    bottom: calc(100% + 20px);
  }
}
.tools::before {
  content: "Используем в работе";
  font-size: 24px;
  font-weight: 400;
  color: var(--color-black);
  position: absolute;
  left: calc(100% + 60px);
  bottom: 0;
  white-space: nowrap;
}
@media screen and (max-width: 1439px) {
  .tools::before {
    left: unset;
    right: 0;
    bottom: calc(100% + 27px);
    font-size: 20px;
    line-height: normal;
  }
}

.steps {
  -moz-column-count: 2;
       column-count: 2;
  gap: 24px;
  margin: 0 0 72px;
  color: var(--color-black);
}
@media screen and (max-width: 1024px) {
  .steps {
    gap: 20px;
  }
}
@media screen and (max-width: 879px) {
  .steps {
    gap: 12px;
    -moz-column-count: 1;
         column-count: 1;
  }
}
.steps__item {
  height: 112px;
  background-color: #fff;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  padding-right: 20px;
}
@media screen and (max-width: 879px) {
  .steps__item {
    gap: 12px;
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 879px) {
  .steps__item {
    gap: 8px;
  }
}
.steps__item-number {
  flex: 0 1 112px;
  font-size: 72px;
  line-height: 112px;
  max-width: 112px;
  text-align: center;
  font-family: "Quantico", sans-serif;
  background-color: var(--color-yellow);
}
@media screen and (max-width: 879px) {
  .steps__item-number {
    font-size: 40px;
    flex: 1 0 48px;
  }
}
.steps__item-text {
  display: flex;
  align-items: center;
  flex: 0 1 416px;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}
@media screen and (max-width: 1439px) {
  .steps__item-text {
    font-size: 15px;
  }
}
.steps__item-image {
  --square: 80px;
  height: var(--square);
  width: var(--square);
  margin-left: auto;
}
@media screen and (max-width: 1024px) {
  .steps__item-image {
    --square: 56px;
  }
}
@media screen and (max-width: 879px) {
  .steps__item-image {
    --square: 48px;
  }
}

.business-tip {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  margin: 0 0 58px 50%;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .business-tip {
    font-size: 24px;
  }
}
@media screen and (max-width: 879px) {
  .business-tip {
    font-size: 20px;
    margin: 0 0 5px;
  }
}
.business-tip::after {
  content: "";
  --square: 136px;
  height: var(--square);
  width: var(--square);
  transform: rotate(var(--rotate));
  position: absolute;
  left: -150px;
  transform: rotate(135deg);
  top: -20px;
  -webkit-mask: url("../i/tip-arrow.svg") center no-repeat;
          mask: url("../i/tip-arrow.svg") center no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--color-cyan);
}
@media screen and (max-width: 879px) {
  .business-tip::after {
    position: initial;
    display: block;
    transform: scaleY(-100%) rotate(-55deg);
    padding-left: 100%;
  }
}
.business-tip + .block-group {
  margin-top: 0;
}

.accounting-tip {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  position: relative;
  color: #fff;
  max-width: 580px;
  margin: 0 0 68px;
}
@media screen and (max-width: 1024px) {
  .accounting-tip {
    font-size: 24px;
  }
}
@media screen and (max-width: 879px) {
  .accounting-tip {
    font-size: 20px;
    margin: 0 0 5px;
  }
}
.accounting-tip::after {
  content: "";
  --square: 136px;
  height: var(--square);
  width: var(--square);
  transform: scaleY(-100%) rotate(-55deg);
  position: absolute;
  right: -80px;
  top: -20px;
  -webkit-mask: url("../i/tip-arrow.svg") center no-repeat;
          mask: url("../i/tip-arrow.svg") center no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--color-yellow);
}
@media screen and (max-width: 879px) {
  .accounting-tip::after {
    position: initial;
    display: block;
    padding-left: 100%;
  }
}

.accounting {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 879px) {
  .accounting {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .accounting__item {
    min-height: 256px;
  }
}
.accounting__item {
  min-height: 336px;
  grid-row: span 2;
}
@media screen and (max-width: 879px) {
  .accounting__item {
    min-height: 272px;
  }
  .accounting__item .panel__image {
    max-width: 96px;
  }
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.help {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 24px;
  max-height: 700px;
}
@media screen and (max-width: 1024px) {
  .help {
    max-height: 600px;
    gap: 20px;
  }
}
@media screen and (max-width: 879px) {
  .help {
    max-height: unset;
  }
}
.help__item {
  width: calc(50% - 12px);
}
@media screen and (min-width: 1025px) {
  .help__item {
    height: 216px;
  }
}
@media screen and (min-width: 880px) and (max-width: 1024px) {
  .help__item {
    height: 160px;
  }
}
@media screen and (max-width: 879px) {
  .help__item {
    width: auto;
    min-height: 172px;
  }
}
.help__title {
  margin-bottom: auto;
}
.help__text {
  margin-top: auto;
}
.help__block {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-right: 100px;
  flex: 1;
}
.help__image {
  top: var(--panel-content-padding);
  bottom: unset;
}

@media screen and (min-width: 1440px) {
  .wrapper--main-bg-image {
    background: url("../i/main-graphic.svg") center no-repeat;
    min-height: calc(720px - var(--header-height));
  }
}
.our-products + .swiper {
  margin-top: 76px;
}
@media screen and (max-width: 879px) {
  .our-products + .swiper {
    margin-top: 20px;
  }
}

.our-products {
  display: grid;
  grid-template-columns: minmax(auto, 516px) auto 1fr;
  gap: 30px;
  margin-bottom: 64px;
}
@media screen and (max-width: 1439px) {
  .our-products {
    grid-template-columns: minmax(auto, 338px) auto 1fr;
  }
}
@media screen and (max-width: 879px) {
  .our-products {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 20px;
  }
}
.our-products__title {
  font-size: 32px;
  font-weight: 500;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .our-products__title {
    font-size: 24px;
  }
}
@media screen and (max-width: 879px) {
  .our-products__title {
    font-size: 20px;
  }
}
.our-products__arrow {
  --square: 135px;
  width: var(--square);
  height: var(--square);
}
@media screen and (max-width: 1439px) {
  .our-products__arrow {
    --square: 104px;
  }
}
@media screen and (max-width: 879px) {
  .our-products__arrow {
    transform: rotate(230deg) scaleX(-100%);
    order: 4;
    margin: 0 auto;
  }
}
.our-products__button-title {
  margin-bottom: 32px;
  font-size: 20px;
}
@media screen and (max-width: 1439px) {
  .our-products__button-title {
    font-size: 16px;
    line-height: 26px;
  }
}
@media screen and (max-width: 879px) {
  .our-products__button-title {
    margin-bottom: 24px;
  }
}
.our-products__button {
  justify-content: center;
  text-transform: uppercase;
  width: 100%;
  margin-top: 64px;
}
.our-products__button--big {
  height: 118px;
  line-height: 118px;
  padding: 0;
  margin-top: 0;
}

.products {
  /*&__item.products__item--cross {
    &:nth-child(4n - 3), &:nth-child(4n - 4) {
      .panel__content {
        // background: url('../i/panel-zeta_white.svg') right var(--panel-content-padding) bottom var(--panel-content-padding) no-repeat;
        background: url('../i/panel-zeta.svg') right var(--panel-content-padding) bottom var(--panel-content-padding) no-repeat;
        background-size: 72px 20px;
      }
      //background-color: var(--color-black);
      //color: var(--color-white, #fff);

    }
    &:nth-child(4n - 2), &:nth-child(4n - 1) {
      .panel__content {
        background: url('../i/panel-zeta.svg') right var(--panel-content-padding) bottom var(--panel-content-padding) no-repeat;
        background-size: 72px 20px;
      }
      background-color: var(--color-white, #fff);
      color: var(--color-black);
    }
  }*/
}
@media screen and (min-width: 880px) {
  .products {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(192px, auto);
  }
}
@media screen and (min-width: 1440px) {
  .products {
    grid-auto-rows: minmax(224px, auto);
  }
}
@media screen and (min-width: 880px) {
  .products--small {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}
.products .panel__content {
  gap: 24px;
}
@media screen and (max-width: 879px) {
  .products .panel__content {
    gap: 8px;
  }
}
.products__title, .products__name {
  font-size: 24px;
  font-weight: 600;
}
@media screen and (max-width: 1439px) {
  .products__title, .products__name {
    font-size: 20px;
  }
}
.products__title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - var(--tab-width-rev));
  white-space: nowrap;
}
.products__title--wrap {
  white-space: unset;
}
.products__price {
  font-size: 24px;
  font-weight: 700;
  line-height: 130%;
  white-space: nowrap;
}
@media screen and (max-width: 1439px) {
  .products__price {
    font-size: 20px;
  }
}
.products__text {
  font-size: 16px;
  flex: 1;
}
.products__logo {
  max-width: 116px;
  max-height: 62px;
}
@media screen and (max-width: 1439px) {
  .products__logo {
    max-width: 95px;
    max-height: 39px;
  }
}
.products__image {
  max-height: 60px;
  max-width: 60px;
}
.products .bottom__block {
  width: 100%;
  margin-top: 24px;
}

@media screen and (min-width: 880px) {
  .products--methodics {
    grid-auto-rows: auto;
  }
  .products--methodics .panel__content {
    gap: 16px;
    padding: 16px var(--panel-content-padding);
  }
  .products--methodics .products__item {
    min-height: unset;
    min-height: 150px;
  }
  .products--solutions .products__item {
    min-height: unset;
    min-height: 208px;
  }
  .products--1c {
    grid-auto-rows: auto;
  }
  .products--1c .products__item {
    min-height: unset;
  }
}
.button-panel {
  margin-top: 56px;
}

.product-page {
  min-height: 648px;
}
@media screen and (max-width: 1439px) {
  .product-page {
    min-height: 461px;
  }
}
@media screen and (max-width: 879px) {
  .product-page {
    min-height: unset;
  }
}
.product-page a:not(.panel) {
  color: #fff;
  transition-duration: var(--animation-duration);
}
.product-page a:not(.panel):hover {
  color: var(--color-yellow);
}
.product-page .wrapper {
  display: grid;
  gap: 25px;
  grid-template-columns: minmax(auto, 706px) 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "title taglist" "subtitle taglist" "linklist linklist";
}
@media screen and (max-width: 879px) {
  .product-page .wrapper {
    grid-template-areas: "title" "subtitle" "linklist" "taglist";
  }
}
.product-page__title {
  grid-area: title;
  font-size: 48px;
  font-weight: 600;
  line-height: 130%;
  color: #fff;
  margin-bottom: 24px;
  max-width: 836px;
  width: 100%;
}
@media screen and (max-width: 1439px) {
  .product-page__title {
    font-size: 40px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 879px) {
  .product-page__title {
    font-size: 28px;
    margin-bottom: 16px;
  }
}
.product-page__subtitle {
  grid-area: subtitle;
  font-size: 32px;
  font-weight: 500;
  line-height: 130%;
  color: #fff;
  max-width: 836px;
  width: 100%;
}
@media screen and (max-width: 1439px) {
  .product-page__subtitle {
    font-size: 24px;
  }
}
@media screen and (max-width: 879px) {
  .product-page__subtitle {
    font-size: 16px;
  }
}
.product-page__tags {
  grid-area: taglist;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  overflow: auto;
}
@media screen and (max-width: 879px) {
  .product-page__tags {
    flex-direction: row;
    align-items: normal;
  }
}
.product-page__tags-item {
  padding: 5px 12px;
  white-space: nowrap;
}
.product-page__links {
  grid-area: linklist;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  grid-gap: 24px;
}
@media screen and (max-width: 1439px) {
  .product-page__links {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 879px) {
  .product-page__links {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}
.product-page__links > :nth-child(7) {
  grid-column: span 2;
}
@media screen and (max-width: 879px) {
  .product-page__links > :nth-child(7) {
    grid-column: unset;
  }
}
.product-page__links-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
@media screen and (max-width: 1439px) {
  .product-page__links-item {
    padding: 10px 16px;
  }
}
.product-page__links-item::after {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4.16797V15.8346" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.8307 10L9.9974 15.8333L4.16406 10" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 50% 50% no-repeat;
}
.product-page__image {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%, -50%);
}

.web-services {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media screen and (max-width: 879px) {
  .web-services {
    grid-template-columns: repeat(2, 1fr);
  }
}
.web-services__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid black;
  padding: 32px;
  text-align: center;
  box-sizing: border-box;
  height: 152px;
  filter: grayscale(100%);
  transition: filter var(--animation-duration);
  font-size: 16px;
}
@media screen and (max-width: 1439px) {
  .web-services__item {
    height: 109px;
    padding: 23px;
  }
}
.web-services__item img {
  max-width: 160px;
  max-height: 54px;
}
@media screen and (max-width: 1439px) {
  .web-services__item img {
    max-width: 115px;
    max-height: 39px;
  }
}
.web-services__item:hover {
  filter: grayscale(0);
}
.web-services__item:not(:last-child) {
  border-right: none;
}
.web-services__item:nth-child(6n) {
  border-right: 1px solid black;
}
.web-services__item:not(:nth-last-child(-n+6)) {
  border-bottom: none;
}
.web-services__item:nth-last-child(-n+6) {
  border-bottom: 1px solid black;
}
@media screen and (max-width: 879px) {
  .web-services__item:nth-child(2n) {
    border-right: 1px solid black;
  }
  .web-services__item:not(:nth-last-child(-n+3)) {
    border-bottom: none;
  }
}

.benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media screen and (max-width: 1439px) {
  .benefits {
    gap: 20px;
  }
}
@media screen and (max-width: 879px) {
  .benefits {
    grid-template-columns: 1fr;
  }
}
.benefits__item {
  cursor: pointer;
  height: 216px;
}
.benefits__item:hover {
  background-color: var(--color-red);
}
@media screen and (max-width: 1439px) {
  .benefits__item {
    height: 168px;
  }
}
@media screen and (max-width: 879px) {
  .benefits__item {
    height: auto;
  }
}

.tariffs {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tariffs .products__title {
  white-space: normal;
}

.section--reg {
  background-color: var(--color-grey);
}

.reg-form {
  margin: 40px auto 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: stretch;
  padding: 60px 40px;
  box-sizing: content-box;
}
@media screen and (max-width: 879px) {
  .reg-form {
    padding: 0;
  }
}
.reg-form__tip {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.reg-form__link {
  text-decoration: underline;
}
.reg-form__submit {
  width: 100%;
}

.anchors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 22px;
  margin-top: auto;
}
@media screen and (max-width: 1439px) {
  .anchors {
    gap: 18px;
  }
}
@media screen and (max-width: 879px) {
  .anchors {
    gap: 16px;
    flex-direction: column;
    margin-top: 56px;
  }
}
.anchors__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 164px;
}
.anchors__item .panel__content {
  --panel-content-padding: 24px;
}
.anchors__item.panel--red:hover {
  background-color: var(--color-red-light);
}
.anchors__item.panel--yellow:hover {
  background-color: var(--color-yellow-light);
}
.anchors__item.panel--cyan:hover {
  background-color: var(--color-cyan-light);
}
.anchors__item.panel--green:hover {
  background-color: var(--color-green-light);
}
.anchors__image {
  height: 56px;
  width: 56px;
}
.anchors__bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.anchors__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (max-width: 1439px) {
  .anchors__title {
    font-size: 24px;
  }
}
.anchors__arrow {
  height: 40px;
  width: 40px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M20 8.33325V31.6666" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M31.6673 20L20.0007 31.6667L8.33398 20" stroke="%23231F20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat;
}

.anchors--service {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}
@media screen and (max-width: 879px) {
  .anchors--service {
    display: flex;
  }
}
.anchors--service > :nth-child(1) {
  grid-column: 3/4;
}
.anchors--service > :nth-child(2) {
  grid-column: 2/3;
  grid-row: 2/3;
}
.anchors--service > :nth-child(3) {
  grid-column: 3/4;
  grid-row: 2/3;
}

.section--two-cols .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media screen and (max-width: 879px) {
  .section--two-cols .wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.section--two-cols .wrapper .section__col {
  display: flex;
  flex-direction: column;
}
.section--two-cols .wrapper .section__col > .section__title {
  border: unset;
}
.section--two-cols .wrapper .section__image {
  margin-top: auto;
  --size: 476px;
  height: var(--size);
  width: var(--size);
}
@media screen and (max-width: 879px) {
  .section--two-cols .wrapper .section__image {
    --size: 371px;
  }
}
@media screen and (max-width: 879px) {
  .section--two-cols .wrapper .section__image {
    display: none;
  }
}

.diffs {
  display: grid;
  --block-height: 200px;
  grid-template-rows: var(--block-height) var(--block-height) calc(var(--block-height) * 2);
  gap: 24px;
  margin-top: 32px;
}
@media screen and (max-width: 1439px) {
  .diffs {
    --block-height: 168px;
  }
}
@media screen and (max-width: 879px) {
  .diffs {
    --block-height: 212px;
  }
}
.diffs__item {
  --image-pos: 32px;
  background-repeat: no-repeat;
  background-position: right var(--image-pos) top var(--image-pos);
}
.diffs__item .panel__title {
  padding-right: 66px;
}
@media screen and (max-width: 1439px) {
  .diffs__item {
    --image-pos: 20px;
  }
}
.diffs__item:nth-child(1) {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="31" y="31" width="24" height="24" rx="1" fill="%23231F20" stroke="%23231F20" stroke-width="2"/><rect x="1" y="31" width="24" height="24" rx="1" fill="%23231F20" stroke="%23231F20" stroke-width="2"/><rect x="1" y="1" width="24" height="24" rx="1" fill="%2300ABEA" stroke="%23231F20" stroke-width="2"/></svg>');
}
.diffs__item:nth-child(2) {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="31" y="31" width="24" height="24" rx="1" fill="%23231F20" stroke="%23231F20" stroke-width="2"/><rect x="31" y="1" width="24" height="24" rx="1" fill="%2300ABEA" stroke="%23231F20" stroke-width="2"/><rect x="1" y="1" width="24" height="24" rx="1" fill="%2300ABEA" stroke="%23231F20" stroke-width="2"/></svg>');
}
.diffs__item:nth-child(3) {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="31" y="31" width="24" height="24" rx="1" fill="%23231F20" stroke="%23231F20" stroke-width="2"/><rect x="1" y="31" width="24" height="24" rx="1" fill="white" stroke="%23231F20" stroke-width="2"/><rect x="31" y="1" width="24" height="24" rx="1" fill="%23231F20" stroke="%23231F20" stroke-width="2"/><rect x="1" y="1" width="24" height="24" rx="1" fill="%23231F20" stroke="%23231F20" stroke-width="2"/></svg>');
}

.stages {
  display: grid;
  grid-auto-rows: minmax(296px, auto);
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  counter-reset: section;
  margin-bottom: 72px;
}
@media screen and (max-width: 1439px) {
  .stages {
    grid-auto-rows: minmax(264px, auto);
    gap: 18px;
    margin-bottom: 56px;
  }
}
@media screen and (max-width: 879px) {
  .stages {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
.stages__item {
  grid-column: span 2;
  /* Занимает ширину в две колонки */
}
.stages__item:nth-child(5) {
  grid-column: span 4;
  /* Занимает ширину в две колонки */
}
.stages__item:nth-child(5) .stages__item-number {
  background-color: #fff;
}
.stages__item:nth-child(5) .panel {
  transition: background-color var(--animation-duration);
}
.stages__item:nth-child(5) .panel::before {
  background-color: #fff;
}
.stages__item:nth-child(5) .panel:hover {
  color: var(--color-black);
}
@media screen and (max-width: 879px) {
  .stages__item:nth-child(5) .panel {
    min-height: 480px;
  }
}
.stages__item:nth-child(6), .stages__item:nth-child(7) {
  grid-column: span 3;
  /* Занимает ширину в две колонки */
}
.stages__item-number {
  --square: 80px;
  line-height: var(--square);
  width: var(--square);
  height: var(--square);
  text-align: center;
  font-family: "Quantico", sans-serif;
  color: var(--color-black);
  background-color: var(--color-yellow);
  font-size: 64px;
}
@media screen and (max-width: 1439px) {
  .stages__item-number {
    --square: 64px;
    font-size: 56px;
  }
}
.stages__item-number::before {
  counter-increment: section;
  content: counter(section);
}
.stages .panel {
  height: 100%;
}
.stages .panel::before {
  content: "";
  position: absolute;
  height: 80px;
  width: 80px;
  right: var(--panel-content-padding);
  top: var(--panel-content-padding);
  background-color: var(--color-yellow);
  transition-duration: var(--animation-slow-duration);
}
@media screen and (max-width: 1439px) {
  .stages .panel::before {
    height: 64px;
    width: 64px;
  }
}
.stages .panel:hover::before {
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}
.stages .panel__title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 879px) {
  .pricing {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}
.pricing__item {
  border: 0;
  outline: 1px solid var(--color-black);
  min-height: 336px;
}
@media screen and (max-width: 879px) {
  .pricing__item {
    min-height: 256px;
  }
}

.business-tips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(168px, auto));
  margin-top: 56px;
}
@media screen and (max-width: 1439px) {
  .business-tips {
    grid-template-rows: repeat(2, minmax(128px, auto));
  }
}
@media screen and (max-width: 879px) {
  .business-tips {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
    grid-auto-rows: 172px;
  }
}
.business-tips .panel {
  border: 0;
  outline: 1px solid var(--color-black);
}
@media screen and (min-width: 1440px) {
  .business-tips .panel__text {
    font-size: 24px;
  }
}
.business-tips .panel__title,
.business-tips .panel__text {
  max-width: 460px;
}
@media screen and (min-width: 375px) and (max-width: 1439px) {
  .business-tips .panel__title,
  .business-tips .panel__text {
    max-width: 328px;
  }
}

.disclaimer {
  font-weight: 500;
  line-height: 130%;
}

@media screen and (min-width: 880px) {
  .services1c {
    display: grid;
    gap: 24px;
  }
  .services1c--two-cols {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
@media screen and (max-width: 1439px) {
  .services1c {
    gap: 20px;
  }
}
.services1c__item {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 880px) {
  .services1c__item {
    min-height: 828px;
  }
}
.services1c__top {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  line-height: 130%;
  font-weight: 600;
  margin-bottom: 20px;
}
@media screen and (max-width: 1439px) {
  .services1c__top {
    font-size: 20px;
  }
}
@media screen and (max-width: 879px) {
  .services1c__top {
    flex-direction: column;
    gap: 12px;
  }
}
.services1c__price {
  font-weight: 700;
}
.services1c__info, .services1c__list, .services1c__tip {
  margin-bottom: 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media screen and (max-width: 879px) {
  .services1c__info {
    overflow: auto;
  }
}
.services1c__tip {
  border: 1px solid var(--color-black);
  background-color: var(--color-grey);
  padding: 24px;
}
.services1c__order-button {
  margin-top: auto;
  width: 100%;
}
@media screen and (max-width: 879px) {
  .services1c__tip {
    display: none !important;
  }
}
.services1c__info-panel {
  height: 100%;
}

.services {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media screen and (max-width: 879px) {
  .services {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    margin-top: 56px;
  }
}
@media screen and (min-width: 880px) {
  .services .panel {
    height: 190px;
  }
}
@media screen and (max-width: 879px) {
  .services .panel {
    height: 132px;
  }
}
.services .panel__text {
  margin-top: auto;
}

.section--two-cols .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media screen and (max-width: 879px) {
  .section--two-cols .wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.section--two-cols .wrapper .section__col {
  display: flex;
  flex-direction: column;
}
.section--two-cols .wrapper .section__col > .section__title {
  border: unset;
}
.section--two-cols .wrapper .section__image {
  margin-top: auto;
  --size: 476px;
  height: var(--size);
  width: var(--size);
}
@media screen and (max-width: 879px) {
  .section--two-cols .wrapper .section__image {
    --size: 371px;
  }
}
@media screen and (max-width: 879px) {
  .section--two-cols .wrapper .section__image {
    display: none;
  }
}

@media screen and (min-width: 880px) {
  .swiper {
    overflow: unset;
    margin-left: unset;
    margin-right: unset;
  }
  .swiper-wrapper {
    width: unset;
    height: unset;
  }
  .swiper-slide {
    height: unset;
    display: flex;
  }
  .swiper-pagination {
    display: none;
  }
}
@media screen and (max-width: 879px) {
  .swiper {
    width: 100%;
    /*&--screenshots {
      height: 190px;
      .swiper-slide {
        //width: 344px;
      }
      .swiper-wrapper {
        height: 210px;
        margin-left: 0;
      }
    }*/
  }
  .swiper.swiper-autoheight {
    padding-bottom: 26px;
  }
  .swiper--m .swiper-slide {
    width: 344px;
  }
  .swiper--m .swiper-wrapper {
    margin-left: 0;
  }
  .swiper--l .swiper-slide {
    width: 344px;
  }
  .swiper--l .swiper-wrapper {
    height: 400px;
    margin-left: 0;
  }
  .swiper:not(.swiper-autoheight) {
    padding-bottom: 30px;
  }
  .swiper-slide {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    transition-property: transform box-shadow !important;
    width: 312px;
  }
  .swiper-wrapper {
    margin-left: -14px;
  }
  .swiper-pagination {
    bottom: 0 !important;
  }
  .swiper-pagination-bullet {
    background: #fff;
    border: 1px solid var(--color-black);
    width: 8px;
    height: 8px;
    border-radius: 8px;
    opacity: 1;
    transition-duration: var(--animation-duration);
  }
  .swiper-pagination-bullet-active {
    width: 24px;
    background-color: var(--color-black);
  }
  .section--black .swiper-pagination-bullet {
    background: var(--color-black);
    border: 1px solid #fff;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    opacity: 1;
    transition-duration: var(--animation-duration);
  }
  .section--black .swiper-pagination-bullet-active {
    width: 24px;
    background-color: #fff;
  }
}
.vacancies {
  display: flex;
  flex-direction: column;
}
.vacancies__title {
  font-size: 32px;
  margin-bottom: 24px;
}
@media screen and (max-width: 1439px) {
  .vacancies__title {
    font-size: 24px;
    margin-right: 84px;
  }
}
@media screen and (max-width: 879px) {
  .vacancies__title {
    margin-bottom: 16px;
  }
}
.vacancies__text {
  font-size: 20px;
}
@media screen and (max-width: 1439px) {
  .vacancies__text {
    font-size: 16px;
    margin-top: 64px;
  }
}
.vacancies__link {
  color: var(--color-cyan);
  font-size: 24px;
}
@media screen and (max-width: 1439px) {
  .vacancies__link {
    font-size: 20px;
  }
}
.vacancies__link:hover {
  text-decoration: underline;
}
.vacancies__link + .vacancies__link {
  margin-top: 16px;
}
.vacancies__img {
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (max-width: 1439px) {
  .vacancies__img {
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
  }
}
@media screen and (max-width: 879px) {
  .vacancies__img {
    top: 20px;
    right: 20px;
    width: 64px;
    height: 64px;
  }
}
.vacancies__arrow {
  margin: 0 auto;
  max-width: 135px;
}
.vacancies__arrow--right {
  transform: scaleY(-1) rotate(-55deg);
}
.vacancies__arrow--left {
  transform: rotate(125deg);
}
@media screen and (max-width: 879px) {
  .vacancies .cols {
    gap: 40px;
  }
}

@media screen and (min-width: 880px) {
  .vacancies__item {
    min-height: 312px;
  }
}
.vacancies__item .cols {
  gap: 64px;
}
@media screen and (max-width: 879px) {
  .vacancies__item .cols {
    gap: 48px;
  }
}
@media screen and (max-width: 879px) {
  .vacancies__item .cols {
    gap: 40px;
  }
}
.vacancies__item .cols__item {
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 879px) {
  .vacancies__item .cols__item {
    position: initial;
  }
}
@media screen and (max-width: 879px) {
  .vacancies__item .cols__item--list {
    order: 2;
    margin-bottom: 12px;
  }
  .vacancies__item .cols__item--list .vacancies__title {
    margin-right: 0;
  }
}

.vacancy-info {
  margin-bottom: 32px;
}
.vacancy-info__button {
  margin: 40px 0;
}
.vacancy-info .section__title {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 879px) {
  .vacancy-info .section__title {
    flex-direction: column;
    gap: 10px;
  }
}
.vacancy-info .stack {
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 879px) {
  .vacancy-info .stack {
    gap: 16px;
  }
}
.vacancy-info .stack__item {
  height: 80px;
}
@media screen and (max-width: 1439px) {
  .vacancy-info .stack__item {
    height: 70px;
  }
}
@media screen and (max-width: 879px) {
  .vacancy-info .stack__item {
    height: 40px;
  }
}
.vacancy-info .section__subtitle {
  margin-top: 24px;
}

.vacancy-list {
  counter-reset: vacancy;
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-bottom: 64px;
}
.vacancy-list__item {
  counter-increment: vacancy;
}
.vacancy-list__item .section__title::after {
  content: counter(vacancy);
  --square: 64px;
  line-height: var(--square);
  width: var(--square);
  height: var(--square);
  flex: 0 0 var(--square);
  text-align: center;
  font-family: "Quantico", sans-serif;
  color: var(--color-black);
  background-color: var(--color-yellow);
  font-size: 40px;
}
@media screen and (max-width: 1439px) {
  .vacancy-list__item .section__title::after {
    --square: 48px;
    font-size: 32px;
  }
}
.vacancy-list__item .section__title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.vacancy-list__detail {
  width: 846px;
  margin: 0 auto;
}
@media screen and (max-width: 1439px) {
  .vacancy-list__detail {
    width: 696px;
  }
}
@media screen and (max-width: 879px) {
  .vacancy-list__detail {
    width: auto;
  }
}

.hidden {
  display: none;
}

.demo {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}
.demo__panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}
.demo__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.demo__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.demo p {
  line-height: 1.5em;
}

.fl {
  float: left;
  margin-right: 10px;
}

.fr {
  float: right;
  margin-left: 10px;
}

.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

p {
  margin: 1em 0;
}

/* Классы для отступов сверху */
.mt-0 {
  margin-top: 0 !important;
}

.mt-6 {
  margin-top: 6px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mt-18 {
  margin-top: 18px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mt-48 {
  margin-top: 48px !important;
}

.mt-64 {
  margin-top: 64px !important;
}

/* Классы для отступов снизу */
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-6 {
  margin-bottom: 6px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-18 {
  margin-bottom: 18px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

/* Классы для изменения размера шрифта */
.fs-16 {
  font-size: 16px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-32 {
  font-size: 32px !important;
}

.title-link {
  text-wrap: nowrap;
  margin-left: auto;
}
.title-link:hover {
  text-decoration: underline;
}

.blog__img {
  max-width: 300px;
  max-height: 300px;
}

code {
  display: inline-block;
  background: rgba(0, 19, 255, 0.15);
  padding: 2px 4px;
  border-radius: 5px;
}