// Стилизация БЭМ-блока page.
// Общие стили тегов.
// Подключение шрифтов.
// Типографика.

// stylelint-disable plugin/selector-bem-pattern

// Сделаем viewport великим снова! (привет, IE10) http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@at-root {
  @-ms-viewport {
    // stylelint-disable-line
    width: device-width;
  }
}

/* stylelint-disable */
// @font-face {
//   font-family: 'FONTNAME';
//   src: url('../fonts/FONTNAME.woff2') format('woff2'),
//        url('../fonts/FONTNAME.woff') format('woff');
//   font-weight: 400;
//   font-style: normal;
//   font-display: swap;
// }
/* stylelint-enable */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: local(""),
    url("../fonts/inter-v12-latin_cyrillic-300.woff2") format("woff2"),
    url("../fonts/inter-v12-latin_cyrillic-300.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("../fonts/inter-v12-latin_cyrillic-regular.woff2") format("woff2"),
    url("../fonts/inter-v12-latin_cyrillic-regular.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: local(""),
    url("../fonts/inter-v12-latin_cyrillic-500.woff2") format("woff2"),
    url("../fonts/inter-v12-latin_cyrillic-500.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: local(""),
    url("../fonts/inter-v12-latin_cyrillic-600.woff2") format("woff2"),
    url("../fonts/inter-v12-latin_cyrillic-600.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: local(""),
    url("../fonts/inter-v12-latin_cyrillic-700.woff2") format("woff2"),
    url("../fonts/inter-v12-latin_cyrillic-700.woff") format("woff");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("../fonts/fira-sans-v16-latin_cyrillic-regular.woff2") format("woff2"),
    url("../fonts/fira-sans-v16-latin_cyrillic-regular.woff") format("woff");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  src: local(""),
    url("../fonts/fira-sans-v16-latin_cyrillic-600.woff2") format("woff2"),
    url("../fonts/fira-sans-v16-latin_cyrillic-600.woff") format("woff");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  src: local(""),
    url("../fonts/fira-sans-v16-latin_cyrillic-700.woff2") format("woff2"),
    url("../fonts/fira-sans-v16-latin_cyrillic-700.woff") format("woff");
}

:root {
  --m-color-1: #8bc53f;
  --m-color-2: #02307a;
  --m-color-3: #ff3030;
  --m-color-4: #1f1f28;
  --container-width: calc(290px + 15px * 2);

  @media (min-width: $screen-xxl) {
    --container-width: calc(1185px + 15px * 2);
  }

  @media (min-width: $screen-xl) {
    --container-width: calc(1080px + 15px * 2);
  }

  @media (min-width: $screen-md) {
    --container-width: calc(738px + 15px * 2);
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
  width: var(--container-width);
}

.page {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%; // stylelint-disable-line
  min-width: 320px;
  min-height: 100%;

  &__inner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  &__content {
    flex-grow: 1;

    > :last-child {
      margin-bottom: 0;
    }
  }

  &__footer-wrapper {
    flex-shrink: 0;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex; // Исправляем баг в IE для min-height and flexbox (flex-direction:column)
  flex-direction: column; // и прижимаем footer в IE 10-11
  min-height: 100%;
  margin: 0;
  word-break: break-word;
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
  text-align: left;
  color: $text-color;
  background-color: $body-bg;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[tabindex="-1"]:focus {
  outline: none !important; // stylelint-disable-line
}

// Коррекция для кликабельных элементов с указанной ролью в iOS
[role="button"] {
  cursor: pointer;
}

// Мы любим Сафари (на самом деле, нет).
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; // stylelint-disable-line
}

// area,
// summary,
a,
button,
[role="button"],
input,
label,
select,
textarea {
  touch-action: manipulation; // Стилевая коррекция 300ms задержки (для поддерживающих браузеров)
  margin: 0; // Убираем margin в Firefox и Safari
}

button,
input {
  overflow: visible; // Покажем торчащее в Edge
  text-transform: none; // Уберём наследование text transform в Firefox
}

// Коррекция проблем стилизации для Safari
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; // stylelint-disable-line
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

// Коррекция для Mobile Safari (https://github.com/twbs/bootstrap/issues/11266)
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox; // stylelint-disable-line
}

textarea {
  overflow: auto; // Удаление верт. скролла в IE.
  resize: vertical; // Правильное изменение размеров
}

svg {
  a &,
  button & {
    pointer-events: none; // Мы любим Edge, это браузер! (почти)
  }

  &:not(:root) {
    overflow: hidden; // Скрыть выступающее за границы в IE
  }
}

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

a {
  color: $link-color;
  background-color: transparent;
  transition: color 0.3s;

  &:hover,
  &:focus {
    color: $link-color--hover;
  }

  // &:visited {
  //   color: $link-color--hover;
  // }
}

hr {
  box-sizing: content-box; // Проблема Firefox
  height: 0; // Проблема Firefox
  margin-top: $typo-margin-vertical * 2;
  margin-bottom: $typo-margin-vertical * 2;
  border: 0;
  border-top: 1px solid $border-color;
  overflow: visible; // Проблема Edge и IE
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-family: $font-family;
  font-weight: 700;
  line-height: 1.2;
  color: currentColor;
}

h1 {
  font-size: $font-size-h1;
} // stylelint-disable-line
h2 {
  font-size: 22px;

  @media (min-width: $screen-xxl) {
    font-size: $font-size-h2;
  }

  @media (min-width: $screen-xl) {
    font-size: 26px;
  }
} // stylelint-disable-line
h3 {
  font-size: $font-size-h3;
} // stylelint-disable-line
h4 {
  font-size: $font-size-h4;
} // stylelint-disable-line
h5 {
  font-size: $font-size-h5;
} // stylelint-disable-line
h6 {
  font-size: $font-size-h6;
} // stylelint-disable-line

p,
ul,
ol,
dl,
table,
blockquote,
pre,
address,
figure {
  margin-top: 0;
  margin-bottom: $typo-margin-vertical;
}

p {
  // http://clagnut.com/blog/2395
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
}

address {
  font-style: normal;
}

ul,
ol {
  margin-bottom: $typo-margin-vertical;
  padding-left: 1.5em;

  ul,
  ol {
    margin-top: 0;
    margin-bottom: 0;
  }
}

li {
  line-height: inherit;
}

// dt {
//   font-weight: 700;
// }

// dd {
//   margin-left: 0;

//   @media (min-width: $screen-sm) {
//     margin-left: 1.5rem;
//   }

//   & + dt {
//     margin-top: ($line-height / 2);
//   }
// }

// .small,
small {
  font-size: $font-size-sm;
}

sub,
sup {
  font-size: $font-size-sm;
}

// .mark,
// mark {
//   background: rgba($color-warning, 0.3);
//   padding: 0.1em 0.3em;
// }

b,
strong {
  font-weight: bolder;
}

// abbr[title] {
//   text-decoration: underline dotted;
// }

blockquote {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

// samp,
code,
kbd,
pre {
  font-family: $font-family--monospace;
}

code {
  padding: 0.06em 0.3em;
  color: $text-color;
  background-color: rgba(#000, 0.08);
  border-radius: $border-radius;
}

kbd {
  padding: 0.06em 0.3em;
  color: $text-color;
  background-color: $gray-lightest;
  border-radius: $border-radius;

  kbd {
    padding: 0;
  }
}

pre {
  display: block;
  width: 100%;
  margin-bottom: $typo-margin-vertical;
  overflow-x: auto;
  tab-size: 2;
  background-color: rgba(#000, 0.08);

  code {
    background: transparent;
  }
}

/* ----- .feedback ----- */

.feedback {
  $block-name: &;

  &__list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__list-item {
  }

  &__content {
    text-decoration: none;
    text-decoration-skip-ink: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #fff;
    transition: color $transition-time, outline-color $transition-time;

    &:not(span):focus,
    &:not(span):hover {
      color: #fff;
      text-decoration: underline;
    }
  }
}

/* ----- .ico ----- */

.ico {
  $block-name: &;

  position: relative;
  padding-left: 28px;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: center/contain no-repeat;
  }

  &--address {
    &::before {
      background-image: url(../img/ico-address.svg);
    }
  }

  &--address-g {
    &::before {
      background-image: url(../img/ico-address-g.svg);
    }
  }

  // &--mail {
  //   background-image: url(../img/email.svg);
  // }

  &--phone {
    &::before {
      background-image: url(../img/ico-phone.svg);
    }
  }

  &--phone-g {
    &::before {
      background-image: url(../img/ico-phone-g.svg);
    }
  }

  &--mail-g {
    &::before {
      background-image: url(../img/ico-mail-g.svg);
    }
  }

  &--call {
    &::before {
      background-image: url(../img/ico-call.svg);
    }
  }
}

/* ----- .simple-menu ----- */

.simple-menu {
  $block-name: &;

  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;

  &__item {
  }

  &__i-link {
    text-decoration: none;
    text-decoration-skip-ink: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #fff;
    transition: color $transition-time;

    &:focus,
    &:hover {
      color: #fff;
      text-decoration: underline;
    }
  }
}

.link {
  border: none;
  background-color: transparent;
  text-decoration: none;
  text-decoration-skip-ink: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  color: #fff;
  cursor: pointer;
  transition: color $transition-time;

  &:focus,
  &:hover {
    color: #fff;
    text-decoration: underline;
  }
}

/* ----- .search ----- */

.search {
  $block-name: &;

  &__inner {
  }

  &__form {
    display: flex;
    align-items: center;
    position: relative;

    &:focus-within {
      #{$block-name}__form-btn {
        svg {
        }
      }
    }

    .field-text {
      margin-bottom: 0;
      width: 100%;

      @media (min-width: $screen-xxl) {
        width: 540px;
      }

      @media (min-width: $screen-xl) {
        width: 480px;
      }
    }

    .field-text__input {
      box-sizing: border-box;
      padding-right: 48px;
    }
  }

  &__form-field {
  }

  &__form-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: 1px solid transparent;
    width: 40px;
    height: calc(100% - 10px);
    background-color: var(--m-color-1);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    border-radius: $border-radius;
    transition: background-color $transition-time, border-color $transition-time;

    @media (min-width: $screen-xl) {
      width: 51px;
    }

    &:focus,
    &:hover {
      background-color: #fff;
      border-color: var(--m-color-1);

      svg {
        path {
          stroke: var(--m-color-1);
        }
      }
    }

    svg {
      transition: fill $transition-time;

      @media (max-width: ($screen-xl - 1)) {
        width: auto;
        height: 20px;
      }

      path {
        transition: stroke $transition-time;
      }
    }
  }
}

/* ----- .buttons-list ----- */

.buttons-list {
  $block-name: &;

  display: flex;
  gap: 15px 30px;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;

  &__item {
    &--person {
      img {
        width: auto;
        height: 30px;
      }
    }
  }

  &__i-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font: 400 12px/120% "Inter", sans-serif;
    color: var(--m-color-4);
    text-decoration: none;
    transition: color $transition-time;

    &:focus,
    &:hover {
      color: var(--m-color-1);

      svg {
        path {
          stroke: var(--m-color-1);
        }
      }
    }

    svg {
      path {
        transition: stroke $transition-time;
      }
    }

    svg,
    img {
      margin-bottom: 5px;
    }
  }

  &--type-1 {
    gap: 18px;

    #{$block-name}__i-link {
      font-size: 0;
      color: transparent;

      svg {
        margin-bottom: 0;
        width: auto;
        height: 24px;
      }
    }
  }
}

/* ----- .top-banner ----- */

.top-banner {
  $block-name: &;

  margin: 35px 0 40px;

  @media (min-width: $screen-xxl) {
    margin-top: 80px;
    margin-bottom: 75px;
  }

  @media (min-width: $screen-xl) {
    margin-top: 60px;
    margin-bottom: 60px;
    padding-bottom: 190px;
  }

  @media (min-width: $screen-md) {
    padding-bottom: 118px;
    background: url(../img/top-banner.jpg) center bottom/1920px auto no-repeat;
  }

  &__inner {
    @media (min-width: $screen-xl) {
      display: flex;
    }
  }

  &__first {
    @media (min-width: $screen-xxl) {
    }

    @media (min-width: $screen-xl) {
      width: 370px;
    }
  }

  &__title {
    margin: 0;
    font: 600 30px/120% "Fira Sans", sans-serif;
    text-transform: uppercase;
    color: var(--m-color-2);

    @media (min-width: $screen-xxl) {
      font-size: 55px;
    }

    @media (min-width: $screen-xl) {
      font-size: 42px;
    }
  }

  &__second {
    @media (min-width: $screen-xxl) {
      margin-left: 230px;
      padding-top: 8px;
    }

    @media (min-width: $screen-xl) {
      margin-left: 180px;
      width: 355px;
    }

    @media (max-width: ($screen-xl - 1)) {
      margin-top: 25px;
    }
  }

  &__desc {
    font: 300 14px/160% "Inter", sans-serif;

    @media (min-width: $screen-xxl) {
      font-size: 18px;
    }

    @media (min-width: $screen-xl) {
      max-width: inherit;
      font-size: 15px;
    }

    @media (min-width: $screen-md) {
      max-width: 260px;
    }

    p {
      margin-bottom: 0;
    }

    p + p {
      margin-top: 5px;

      @media (min-width: $screen-xl) {
        margin-top: 10px;
      }
    }

    #{$block-name}__desc-first {
      font-weight: 600;
      font-size: 16px;
      line-height: 120%;
      color: var(--m-color-3);

      @media (min-width: $screen-xxl) {
        font-size: 23px;
      }

      @media (min-width: $screen-xl) {
        font-size: 18px;
      }
    }
  }
}

/* ----- .def-block ----- */

.def-block {
  $block-name: &;

  margin: 50px 0;

  @media (min-width: $screen-xxl) {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  @media (min-width: $screen-xl) {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  &__inner {
  }

  &__first {
    margin-bottom: 30px;

    @media (min-width: $screen-xxl) {
      margin-bottom: 55px;
    }

    @media (min-width: $screen-xl) {
      margin-bottom: 50px;
    }
  }

  &__second {
    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }
}

/* ----- .def-title ----- */

.def-title {
  $block-name: &;

  margin: 0;
  font: 500 26px/120% "Inter", sans-serif;
  color: var(--m-color-2);
  text-align: center;

  @media (min-width: $screen-xxl) {
    font-size: 50px;
  }

  @media (min-width: $screen-xl) {
    font-size: 38px;
  }

  span {
    display: inline-block;
    padding: 0 5px 4px 5px;
    border-radius: 7px;
    background-color: var(--m-color-2);
    color: #fff;

    @media (min-width: $screen-xxl) {
    }

    @media (min-width: $screen-xl) {
      padding: 0 10px 8px 10px;
      border-radius: 10px;
      line-height: 46px;
    }
  }

  &--type-1 {
    font-size: 22px;

    @media (min-width: $screen-xxl) {
      font-size: 35px;
    }

    @media (min-width: $screen-xl) {
      font-size: 27px;
    }

    span {
      padding-bottom: 2px;

      @media (min-width: $screen-xl) {
        padding-bottom: 3px;
      }
    }
  }
}

h1.def-title {
  margin-bottom: 30px;
}

/* ----- .colored-catalog ----- */

.colored-catalog {
  $block-name: &;

  display: flex;
  flex-wrap: wrap;

  &__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--m-color-1) url(../img/c-c-bg-1.png) center/cover no-repeat;
    color: var(--m-color-2);
    text-decoration: none;

    @media (min-width: $screen-xl) {
      padding: 37px 30px;
    }

    @media (min-width: $screen-md) {
      width: calc(100% / 2 - (20px * 1 / 2));
    }

    & + & {
      margin-top: 20px;

      @media (min-width: $screen-md) {
        margin-top: 0;
        margin-left: 20px;
      }
    }

    .btn {
    }

    &--type-1 {
      background-color: #ffd127;
      background-image: url(../img/c-c-bg-2.png);
    }
  }

  &__l-name {
    font-weight: 500;
    font-size: 22px;
    font-family: "inter", sans-serif;

    @media (min-width: $screen-xxl) {
      font-size: 35px;
    }

    @media (min-width: $screen-xl) {
      font-size: 27px;
    }
  }
}

/* ----- .application ----- */

.application {
  $block-name: &;

  margin-top: 50px;
  margin-bottom: 50px;

  @media (min-width: $screen-xxl) {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  @media (min-width: $screen-xl) {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  &__inner {
    padding: 30px 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.07);
    background: url(../img/a-bg-1-mob.png) center/cover no-repeat;

    @media (min-width: $screen-xxl) {
      padding: 42px 60px;
    }

    @media (min-width: $screen-md) {
      padding: 40px;
      background-image: url(../img/a-bg-1.svg);
    }
  }

  &__first {
    margin-bottom: 25px;

    @media (min-width: $screen-xl) {
      margin-bottom: 30px;
    }
  }

  &__title {
    text-align: left;
  }

  &__second {
  }

  &__desc {
    font: 300 14px/160% "Inter", sans-serif;

    @media (min-width: $screen-xxl) {
      max-width: 620px;
      font-size: 18px;
    }

    @media (min-width: $screen-xl) {
      font-size: 15px;
    }

    @media (min-width: $screen-md) {
      max-width: 488px;
    }

    p {
      margin-bottom: 0;
    }

    p + p {
      margin-top: 10px;
    }
  }

  &__third {
    margin-top: 25px;

    @media (min-width: $screen-xl) {
      margin-top: 30px;
    }

    .btn {
    }
  }
}

/* ----- .products-list  ----- */

.products-list {
  $block-name: &;

  display: flex;
  flex-wrap: wrap;
  margin: -10px -10px 0;

  &__item {
    display: flex;
    flex-direction: column;
    padding: 25px;
    border: 1px solid #eeeeee;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(2, 48, 122, 0.1);
    background-color: #fff;
    text-decoration: none;
    color: var(--m-color-4);
    line-height: 120%;
    font-family: $font-family;
    margin: 10px;
    transition: box-shadow $transition-time;

    @media (min-width: $screen-xl) {
      width: calc(100% / 4 - (28px * 3 / 4));
    }

    @media (min-width: $screen-md) {
      width: calc(100% / 2 - (42px * 1 / 2));
    }

    &:focus,
    &:hover {
      box-shadow: 0 0 4px rgba(2, 48, 122, 0.1);
      color: var(--m-color-4);

      #{$block-name}__i-title {
        color: var(--m-color-2);
      }
    }
  }

  &__i-title {
    order: 2;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 14px;
    transition: color $transition-time;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    @media (min-width: $screen-xxl) {
      font-size: 16px;
    }
  }

  &__i-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    order: 3;
    margin-top: auto;
  }

  &__i-price {
    font-weight: 600;
    font-size: 18px;
    color: var(--m-color-1);
  }

  &__i-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 98px;

    .btn-ico {
    }
  }

  &__i-photo {
    order: 1;
    margin-bottom: 20px;
    aspect-ratio: 16/12.5;

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

  &--type-1 {
    #{$block-name}__item {
      padding: 20px 15px;
    }

    #{$block-name}__i-title {
      margin-bottom: 0;
      text-align: center;
      font-weight: 600;

      @media (min-width: $screen-xxl) {
        font-size: 14px;
      }
    }

    #{$block-name}__i-photo {
      height: 110px;
    }
  }

  &--type-x3 {
    #{$block-name}__item {
      @media (min-width: $screen-xl) {
        width: calc(100% / 3 - (31px * 2 / 3));
      }
    }
  }
}

.btn-ico {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: $border-radius;
  cursor: pointer;

  &.active,
  &:focus,
  &:hover {
    svg {
      path {
        fill: var(--m-color-1);
        stroke: var(--m-color-1);
      }
    }
  }

  svg {
    pointer-events: none;

    path {
      fill: transparent;
      transition: fill $transition-time, stroke $transition-time;
    }
  }
}

/* ----- .advan-list ----- */

.advan-list {
  $block-name: &;
  $border: 3px;

  display: flex;
  flex-wrap: wrap;
  gap: 30px 15px;
  position: relative;
  padding: 20px 15px;
  border: solid $border transparent;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(2, 48, 122, 0.07);
  background-color: #fff;
  background-clip: padding-box;

  @media (min-width: $screen-xxl) {
    gap: 70px 20px;
    padding: 55px 40px;
  }

  @media (min-width: $screen-xl) {
    gap: 50px 15px;
    padding: 40px;
  }

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: -$border;
    border-radius: inherit;
    background: linear-gradient(100.6deg, #02307a 1.67%, #8bc53f 84.17%);
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 2 - (20px * 1 / 2));
    text-align: center;
    line-height: 120%;
    font-family: $font-family;

    @media (min-width: $screen-xxl) {
    }

    @media (min-width: $screen-xl) {
      width: calc(100% / 4 - (20px * 3 / 4));
    }

    @media (min-width: $screen-md) {
      width: calc(100% / 3 - (20px * 2 / 3));
    }
  }

  &__i-title {
    order: 2;
    margin-top: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--m-color-2);

    @media (min-width: $screen-xxl) {
      margin-bottom: 15px;
      font-size: 18px;
    }

    @media (min-width: $screen-xl) {
      margin-bottom: 10px;
      font-size: 16px;
    }
  }

  &__i-desc {
    @media (min-width: $screen-xxl) {
      font-size: 14px;
    }

    @media (min-width: $screen-xl) {
      order: 3;
      margin-bottom: 0;
      font-weight: 300;
      font-size: 12px;
    }

    @media (max-width: ($screen-xl - 1)) {
      display: none;
    }
  }

  &__i-ico {
    order: 1;
    margin-bottom: 15px;

    svg {
      width: auto;
      height: 50px;
    }
  }

  &--type-1 {
    gap: 25px !important;
    padding: 0 !important;
    border: none;
    box-shadow: none;

    &::before {
      content: none;
    }

    #{$block-name}__item {
      width: 100% !important;

      @media (min-width: $screen-md) {
        width: calc(100% / 3 - (25px * 2 / 3)) !important;
      }
    }

    #{$block-name}__i-desc {
      display: block !important;
      order: 2;
      margin-bottom: 0;
      font-size: 14px;

      @media (min-width: $screen-xl) {
        font-size: 16px;
      }
    }

    #{$block-name}__i-ico {
      margin-bottom: 8px;

      @media (min-width: $screen-xl) {
        margin-bottom: 10px;
      }

      svg {
        width: auto;
        height: 30px;
      }
    }
  }
}

/* ----- .big-text ----- */

.big-text {
  $block-name: &;

  font: 300 15px/160% $font-family;
  text-align: center;

  @media (min-width: $screen-xxl) {
    font-size: 20px;
  }

  @media (min-width: $screen-xl) {
    font-size: 16px;
  }

  p {
    margin-bottom: 0;
  }

  p + p {
    margin-top: 0.75em;
  }
}

/* ----- .lr-block  ----- */

.lr-block {
  $block-name: &;

  margin-top: 50px;
  margin-bottom: 50px;

  @media (min-width: $screen-xl) {
    display: flex;
  }

  &__left {
    @media (min-width: $screen-xl) {
      padding: 40px 20px 0 0;
      width: 50%;
    }
  }

  &__right {
    @media (min-width: $screen-xl) {
      width: 50%;
    }

    @media (max-width: ($screen-xl - 1)) {
      margin-top: 40px;
    }
  }

  &__img {
    padding: 20px;
    border: 1px solid var(--m-color-1);
    border-radius: 20px;
    aspect-ratio: 16/11.8;
    line-height: 0;

    @media (min-width: $screen-xxl) {
      padding: 40px;
    }

    @media (min-width: $screen-xl) {
      padding: 35px;
    }

    img {
      border-radius: 20px;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

/* ----- .note-block ----- */

.note-block {
  $block-name: &;

  margin-top: 50px;
  margin-bottom: 50px;
  padding: 20px;
  border-radius: 20px;
  background-color: var(--m-color-1);
  color: #fff;

  @media (min-width: $screen-xl) {
    padding: 30px 40px;
  }

  @media (min-width: $screen-md) {
    display: flex;
    align-items: center;
    padding: 30px;
  }

  &__ico {
    line-height: 0;

    @media (max-width: ($screen-md - 1)) {
      text-align: center;
    }

    svg {
      width: auto;
      height: 40px;

      @media (min-width: $screen-md) {
        height: 60px;
      }
    }
  }

  &__desc {
    font: 300 14px/160% $font-family;

    @media (min-width: $screen-xxl) {
      font-size: 18px;
    }

    @media (min-width: $screen-xl) {
      padding-left: 40px;
    }

    @media (min-width: $screen-md) {
      padding-left: 30px;
      font-size: 15px;
    }

    @media (max-width: ($screen-md - 1)) {
      margin-top: 20px;
    }

    p {
      margin-bottom: 0;
    }

    p + p {
      margin-top: 0.75em;
    }
  }
}

/* ----- .text-flow  ----- */

.text-flow {
  $block-name: &;

  font: 300 14px/160% $font-family;
  color: var(--m-color-4);

  @media (min-width: $screen-xxl) {
    font-size: 16px;
  }

  > * {
    margin-top: 20px;
    margin-bottom: 20px;

    @media (min-width: $screen-xxl) {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    @media (min-width: $screen-xl) {
      margin-top: 25px;
      margin-bottom: 25px;
    }
  }

  :first-child {
    margin-top: 0;
  }

  :last-child {
    margin-bottom: 0;
  }

  h1,
  h2 {
    color: var(--m-color-2);
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 600;

    @media (min-width: $screen-xxl) {
      margin-top: 40px;
    }

    @media (min-width: $screen-xl) {
      margin-top: 35px;
    }
  }

  h2 + *,
  h3 + *,
  h4 + *,
  h5 + *,
  h6 + * {
    margin-top: 0;
  }

  ul {
    padding-left: 0;
    list-style: none;

    li {
      position: relative;
      padding-left: 20px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--m-color-1);

        @media (min-width: $screen-xxl) {
          top: 8px;
        }

        @media (min-width: $screen-xl) {
        }
      }
    }

    li + li {
      margin-top: 8px;
    }
  }
}

.of-h {
  overflow: hidden !important;
}

/* ----- .c-catalog ----- */

.c-catalog {
}

.c-catalog__inner {
  display: flex;
}

.c-catalog__left {
  @media (min-width: $screen-xl) {
    width: 280px;
  }

  @media (max-width: ($screen-xl - 1)) {
    display: none;
  }
}

.c-catalog__l-item {
}

.c-catalog__l-item + .c-catalog__l-item {
  @media (max-width: ($screen-xl - 1)) {
    margin-top: 20px;
  }
}

.c-catalog__l-item img {
  @media (max-width: ($screen-xl - 1)) {
    max-width: 100%;
  }
}

.c-catalog__right {
  @media (min-width: $screen-xl) {
    padding-left: 20px;
    width: calc(100% - 280px);
  }
}

.c-catalog__r-first {
  .def-title {
    margin-bottom: 15px;
    text-align: left;
  }
}

.c-catalog__r-first + * {
  margin-top: 30px !important;
}

.c-catalog__r-second {
  margin-top: 40px;
}

.c-catalog__r-third {
  margin-top: 50px;

  @media (min-width: $screen-xxl) {
    margin-top: 70px;
  }

  @media (min-width: $screen-xl) {
    margin-top: 60px;
  }
}

.c-catalog__r-third-first {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.c-catalog__r-third-first-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 15px;

  a {
    font: 600 16px/120% $font-family;
    color: #8c959c;
    text-decoration: none;
    transition: color $transition-time;

    &:focus,
    &:hover {
      color: var(--m-color-1);

      svg {
        path {
          stroke: var(--m-color-1);
        }
      }
    }

    svg {
      margin-left: 10px;

      path {
        transition: stroke $transition-time;
      }
    }
  }
}

.c-catalog__r-third-first-right {
}

.c-catalog__r-fourth {
  margin-top: 50px;

  @media (min-width: $screen-xxl) {
    margin-top: 70px;
  }

  @media (min-width: $screen-xl) {
    margin-top: 60px;
  }
}

/* ----- .d-down ----- */

.d-down {
  $block-name: &;

  display: flex;
  align-items: center;
  font: 400 16px/120% $font-family;

  &:focus,
  &:hover {
    #{$block-name}__left-list {
      opacity: 1;
      visibility: visible;
    }
  }

  &__left {
    position: relative;
    min-width: 60px;
  }

  &__left-value,
  &__left-list {
    padding: 13px;
    border: 1px solid #c0c0c0;
    border-radius: $border-radius;
  }

  &__left-value {
    text-align: center;
  }

  &__left-list {
    position: absolute;
    border-top: none;
    width: 100%;
    background-color: #fff;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity $transition-time, visibility $transition-time;

    a {
      display: block;
      color: var(--m-color-4);
      text-decoration: none;
      transition: color $transition-time;

      &:focus,
      &:hover {
        color: var(--m-color-1);
      }
    }

    a + a {
      margin-top: 10px;
    }
  }

  &__right {
    margin-left: 12px;
  }
}

/* ----- .v-menu ----- */

.v-menu {
}

.v-menu__list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  font: 400 16px/140% "Inter", sans-serif;
}

.v-menu__l-item-menu-wrapper > .v-menu__list {
  padding-top: 15px;
}

.v-menu__l-item {
}

.v-menu__l-item.active .v-menu__l-item-menu-wrapper {
  display: block;
}

.v-menu__list--level-2 > .v-menu__l-item.active > .v-menu__l-item-link,
.v-menu__list--level-2
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-link {
  text-shadow: 0 0 1px #02307a;
  // font-weight: 700;
}

.v-menu__list--level-3 > .v-menu__l-item.active > .v-menu__l-item-link,
.v-menu__list--level-3
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-link {
  font-weight: 500;
}

.v-menu__list--level-2 .v-menu__l-item.active > .v-menu__l-item-link,
.v-menu__list--level-2
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-link {
  color: #02307a;
}

.v-menu__l-item-link {
  display: block;
  text-decoration: none;
  color: #1f1f28;
  transition: color 0.35s, text-shadow 0.35s;
}

.v-menu__l-item-link:hover,
.v-menu__l-item-link:focus {
  text-shadow: 0 0 1px #02307a;
  color: #02307a;
}

.v-menu__l-item-block {
  position: relative;
}

.v-menu__l-item-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 0;
  padding: 0;
  border: none;
  width: 25px;
  height: 100%;
  background-color: transparent;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

.v-menu__l-item-toggle::before,
.v-menu__l-item-toggle::after {
  content: "";
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background-color: #494f54;
  transition: transform 0.35s;
}

.v-menu__l-item-toggle::before {
  transform: translateX(1.4px) rotate(45deg);
}

.v-menu__l-item-toggle::after {
  transform: translateX(-1.4px) rotate(-45deg);
}

.v-menu__l-item.active
  > .v-menu__l-item-block
  > .v-menu__l-item-toggle::before {
  transform: translateX(1.4px) rotate(-45deg);
}

.v-menu__l-item.active > .v-menu__l-item-block > .v-menu__l-item-toggle::after {
  transform: translateX(-1.4px) rotate(45deg);
}

.v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::before,
.v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::after {
  background-color: #fff;
}

.v-menu__list--level-2
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::before,
.v-menu__list--level-2
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::after {
  background-color: #02307a;
}

.v-menu__l-item-menu-wrapper {
  height: 0;
  opacity: 0;
  overflow: hidden;
  will-change: opacity, height;
  transition: height 0.35s, opacity 0.35s;
}

.v-menu__l-item.active > .v-menu__l-item-menu-wrapper {
  opacity: 1;
}

.v-menu__list--level-2 > .v-menu__l-item > .v-menu__l-item-menu-wrapper {
  padding-left: 22px;
  padding-right: 22px;
}

.v-menu__list--level-1 {
}

.v-menu__list--level-1 .v-menu__l-item + .v-menu__l-item {
  margin-top: 15px;
}

.v-menu__list--level-1 > .v-menu__l-item > .v-menu__l-item-link,
.v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-link {
  padding: 8px 20px;
  border-radius: 10px;
  background-color: #8bc53f;
  font-weight: 600;
  font-size: 23px;
  line-height: 120%;
  color: #fff;
}

.v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-link,
.v-menu__l-item-block .v-menu__l-item-link {
  padding-right: 35px;
}

.v-menu__list--level-1 > .v-menu__l-item--yellow > .v-menu__l-item-link,
.v-menu__list--level-1
  > .v-menu__l-item--yellow
  > .v-menu__l-item-block
  .v-menu__l-item-link {
  background-color: #ffd127;
}

.v-menu__list--level-1 > .v-menu__l-item > .v-menu__l-item-menu-wrapper {
  padding-left: 22px;
}

.v-menu__list--level-2 {
}

.v-menu__list--level-2 .v-menu__l-item + .v-menu__l-item {
  margin-top: 15px;
}

.v-menu__list--level-3 {
}

.v-menu__list--level-3 .v-menu__l-item + .v-menu__l-item {
  margin-top: 10px;
}

.v-menu--type-1 .v-menu__list--level-1 > .v-menu__l-item > .v-menu__l-item-link,
.v-menu--type-1
  .v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-link {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--m-color-4);
  font-size: 14px;

  @media (max-width: ($screen-lg - 1)) {
    font-size: 16px;
  }
}

.v-menu--type-1
  .v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::before,
.v-menu--type-1
  .v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::after {
  background-color: var(--m-color-4);
}

.v-menu--type-1 .v-menu__l-item-link {
  font-size: 13px;

  @media (max-width: ($screen-lg - 1)) {
    font-size: 15px;
  }
}

.v-menu--type-1 .v-menu__list--level-4 > .v-menu__l-item > .v-menu__l-item-link,
.v-menu--type-1
  .v-menu__list--level-4
  > .v-menu__l-item
  > .v-menu__l-item-block
  .v-menu__l-item-link {
  font-size: 12px;

  @media (max-width: ($screen-lg - 1)) {
    font-size: 13px;
  }
}

.v-menu--type-1 .v-menu__list--level-2 .v-menu__l-item + .v-menu__l-item {
  margin-top: 10px;
}

.v-menu--type-1 .v-menu__list--level-3 .v-menu__l-item + .v-menu__l-item {
  margin-top: 6px;

  @media (max-width: ($screen-lg - 1)) {
    margin-top: 8px;
  }
}

.v-menu--type-1 .v-menu__l-item-menu-wrapper > .v-menu__list {
  padding-top: 10px;
}

.v-menu--type-1
  .v-menu__list--level-2
  .v-menu__l-item-menu-wrapper
  > .v-menu__list {
  padding-top: 5px;
}

.v-menu--type-1
  .v-menu__list--level-1
  > .v-menu__l-item
  > .v-menu__l-item-menu-wrapper {
  padding-left: 15px;
}

.v-menu--type-1
  .v-menu__list--level-2
  > .v-menu__l-item
  > .v-menu__l-item-menu-wrapper {
  padding-left: 0;
  padding-right: 0;
}

.v-menu--type-1
  .v-menu__list--level-3
  > .v-menu__l-item
  > .v-menu__l-item-menu-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}

.v-menu--type-1 .v-menu__l-item-toggle {
  right: 5px;
}

.v-menu--type-1
  .v-menu__list
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-link,
.v-menu--type-1 .v-menu__list > .v-menu__l-item.active > .v-menu__l-item-link {
  color: #02307a;
}

.v-menu--type-1
  .v-menu__list
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::before,
.v-menu--type-1
  .v-menu__list
  > .v-menu__l-item.active
  > .v-menu__l-item-block
  .v-menu__l-item-toggle::after {
  background-color: #02307a;
}

.v-menu--type-1 .v-menu__list--level-1 > .v-menu__l-item + .v-menu__l-item {
  margin-top: 20px;
}
