@font-face {
    font-family: 'Rubik Light';
    src: url('../fonts/Rubik/Rubik-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Variable/Rubik-Variable.woff2') format('woff2');
    font-weight: 100 1000;
    font-optical-sizing: auto;
    font-stretch: 0% 200%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Regular';
    src: url('../fonts/Rubik/Rubik-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Medium';
    src: url('../fonts/Rubik/Rubik-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Bold';
    src: url('../fonts/Rubik/Rubik-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cuprum-Regular';
    src: url('../fonts/Cuprum/Cuprum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;

    /* ! размеры глобальных контейнеров начало */

    --global-container-max-width: 1350px;

    /* максимальная ширина шапки */
    /* --menu-container-max-width: 1350px; */
    --menu-container-max-width: 1920px;

    /* ! размеры глобальных контейнеров конец */

    /* параметры основного баннера начало */

    --main-banner-container-max-width: 100%;
    --main-banner-container-max-height: 537px;

    --main-banner-horizontal-card-container-max-width: 439px;
    --main-banner-horizontal-card-container-max-height: 231px;

    --main-banner-vertical-card-container-max-width: 324px;
    --main-banner-vertical-card-container-max-height: 503px;

    --main-banner-card-container-border-radius: 12px;
    --main-banner-card-container-box-shadow: 0px 4px 4px 0px rgb(0, 176, 255);
    --main-banner-card-container-box-background-color: #ffffff;

    /* --main-banner-container-gradient: radial-gradient(351.00% 55.00% at 50% 50%,rgba(125, 215, 255, 0.67),rgba(0, 176, 255, 0) 100%); */
    --main-banner-container-gradient: radial-gradient(351.00% 55.00% at 50% 50%, rgba(125, 215, 255, 0.3), rgba(0, 176, 255, 0.3) 100%);

    /* --main-banner-container-gradient: radial-gradient(rgba(125, 215, 255, 0.67), rgba(0, 176, 255, 0));; */

    /* параметры основного баннера конец */

    /* семейства шрифтов начало */
    --font-family-rubik-regular: "Rubik Regular";
    --font-family-rubik: "Rubik";
    --font-family-rubik-light: "Rubik Light";
    --font-family-rubik-medium: "Rubik Medium";
    --font-family-rubik-bold: "Rubik Bold";
    --font-family-cuprum: "Cuprum-Regular";
    /* семейства шрифтов конец */

    /* цвета начало */

    /* цвета шрифтов начало */
    --font-color-black: #000000;
    --font-color-black-2: #030303;
    --font-color-gray-1: #2f2f2f;
    --font-color-gray-2: #565656;
    --font-color-gray-3: #474747;
    --font-color-gray-4: #ececec;
    --font-color-gray-5: #eeeeee;
    --font-color-gray-6: #cccccc;
    --font-color-gray-7: #9c9c9c;
    --font-color-gray-8: #807f7f;
    --font-color-gray-red: #d1d1d1;
    --font-color-green-1: #3a803a;
    --font-color-blue-1: #0193c3;
    --font-color-blue-2: #008cff;
    --font-color-blue-3: #0d9cdc;
    --font-color-blue-4: #43aaff;
    --font-color-blue-5: #00b0ff;
    --font-color-blue-6: #09a0dd;
    --font-color-blue-7: #ceedff;
    --font-color-blue-8: #0ea2df;
    --font-color-blue-9: #009be0;

    /* цвета шрифтов конец */

    /* цвета градиента начало */
    --gradient-color-blue: rgba(125, 215, 255, 0.67);
    --gradient-color-deep-blue: rgba(0, 176, 255, 0);
    /* цвета градиента конец */

    /* цвета фонов начало */
    --background-color-white: #ffffff;
    --background-color-gray-1: #727272;
    --background-color-gray-2: #cccbcb;
    --background-color-red-1: #ff0000;
    --background-color-red-2: #d32a2a;
    --background-color-green: #38e040;
    --background-color-dark-blue: #40424a;
    --background-color-blue-1: #e8f3fa;
    --background-color-blue-2: #b5e2fd;
    --background-color-blue-3: #008cff;
    --background-color-blue-4: #00b0ff0a;
    --background-color-blue-5: #e9f8ff;
    --background-color-blue-6: #a6e3ff;
    /* цвета фонов конец */

    /* цвета конец */

    --margin-from-header: 160px;

}

/* выключить подсветку фона при нажатии на смартфонах начало */

input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

/* выключить подсветку фона при нажатии на смартфонах конец */

/* глобально начало */
.global-container-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    margin: 0 auto;
    width: 100%;
}

.global-container-wrapper * {
    box-sizing: border-box;
}

.global-container-d-block {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-width: var(--global-container-max-width);
    padding: 1rem;
}

.global-container-flex {
    box-sizing: border-box;
    display: flex;
    column-gap: 28px;
    row-gap: 20px;
    margin: 0 auto;
}

.global-flex-wrap {
    flex-wrap: wrap;
}

.global-container-flex * {
    line-height: 1em;
}

.global-justify-content-center {
    justify-content: center;
}

.global-align-content-center {
    align-content: center;
}

.global-container--max-width {
    max-width: var(--global-container-max-width);
}

.global-border-radius-10px {
    border-radius: 10px;
}

.global-shadow-box {
    box-shadow: 1px 1px 10px 4px #ccc;
}

.global-position-relative {
    position: relative;
}

.global-p-1 {
    padding: 1rem;
}

.global-m-1 {
    margin: 1rem;
}

.global-line-height * {
    line-height: 1em;
}

.global-d-block {
    display: block;
}

.global-d-flex {
    display: flex;
}

.global-d-none {
    display: none;
}

.global-hidden {
    visibility: hidden;
}

.global-text-align-center {
    text-align: center;
}

b {
    font-weight: bold;
}

/* глобально конец */

/* техно демо начало */
.tecno-demo-fixed * {
    font-family: var(--font-family-rubik-light);
    position: fixed;
    /* top: 300px; */
    bottom: 10%;
    right: 15px;
    z-index: 10;
    display: flex;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 18px;
    justify-content: center;

    /* background-color: #f8d7da; */
    /* background-color: var(--background-color-red-1); */
    /* background-color: transparent; */

    /* background-color: var(--background-color-white); */
    color: #741f36;
    color: var(--background-color-white);

    cursor: pointer;
    padding: 1rem;
    height: auto;
    text-transform: uppercase;

    writing-mode: vertical-lr;
    text-orientation: upright;


    text-align: center;

    /* border: 2px solid #741f36; */

    border-radius: 10px;
    user-select: none;

    transform-origin: center;

    transition: 0.3s linear all;

    opacity: 0.7;

}

.tecno-demo-fixed a {
    background-color: none;
}

.tecno-demo-fixed:hover * {
    opacity: 1;
}

.tecno-demo-fixed-top {
    position: fixed;
    top: 330px;
    right: 0;

    /* background-color: #007fbd; */
    background-color: #f8d7da !important;

    width: 30px;
    height: 13px;
    z-index: 11;

    /* border: 2px solid white; */
    border: 2px solid #741f36;

    border-radius: 10px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tecno-demo-fixed-bottom {
    position: fixed;
    top: 530px;
    right: 0;

    /* background-color: #007fbd; */
    background-color: #f8d7da !important;

    width: 30px;
    height: 13px;
    z-index: 11;

    /* border: 2px solid white; */
    border: 2px solid #741f36;

    border-radius: 10px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


.tecno-demo__eye-slash-icon {
    display: block;
    content: "";
    width: 25px;
    height: 45px;
    background-size: 60px auto;
    background-repeat: no-repeat;
    background-image: url("../images/eye-slash-rotate-90.svg");
    background-position: center center;
}

.tecno-demo__eye-icon {
    display: block;
    content: "";
    width: 25px;
    height: 45px;
    background-size: 60px auto;
    background-repeat: no-repeat;
    background-image: url("../images/eye-rotate-90.svg");
    background-position: center center;
}

/* техно демо конец */

.table__color-palette {
    border-collapse: collapse;
    max-width: var(--global-container-max-width);
    width: 100%;
}

.table__color-palette * {
    font-family: var(--font-family-rubik);
    word-wrap: break-word;
    word-break: break-all;
}

.table__color-palette thead {
    border: 1px solid var(--font-color-gray-1);
}

.table__color-palette thead th {
    border: 1px solid var(--font-color-gray-1);
    padding: 1rem;
    text-align: center;
}

.table__color-palette tbody {
    border: 1px solid var(--font-color-gray-1);
}

.table__color-palette tbody tr {
    border: 1px solid var(--font-color-gray-1);
}

.table__color-palette tbody td {
    padding: 1rem;
    border: 1px solid var(--font-color-gray-1);
}

/* ! шрифты начало */
.font-rubik-bold {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik-bold);
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik-medium {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik-medium);
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik-regular {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik-regular);
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik-light {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik-light);
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik-blue-bold {
    color: var(--font-color-blue-1);
    font-family: var(--font-family-rubik);
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik-gray-2 {
    color: var(--font-color-gray-2);
    font-family: var(--font-family-rubik-light);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik-gray-3 {
    color: var(--font-color-gray-2);
    font-family: var(--font-family-rubik-light);
    font-size: 15px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0px;
    text-align: left;
}

.font-rubik-blue-2 {
    color: var(--font-color-blue-2);
}

.font-cuprum {
    margin: 0px;
    padding: 0px;
    font-family: var(--font-family-cuprum), sans-serif;
    color: var(--font-color-gray-2);
}

.font-weight-100 {
    font-weight: 100 !important;
}

.font-weight-200 {
    font-weight: 200 !important;
}

.font-weight-300 {
    font-weight: 300 !important;
}

.font-weight-350 {
    font-weight: 350 !important;
}

.font-weight-400 {
    font-weight: 400 !important;
}

.font-weight-450 {
    font-weight: 450 !important;
}

.font-weight-500 {
    font-weight: 500 !important;
}

.font-weight-550 {
    font-weight: 550 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
}

.font-weight-650 {
    font-weight: 650 !important;
}

.font-weight-700 {
    font-weight: 700 !important;
}

.font-weight-750 {
    font-weight: 750 !important;
}

.font-weight-800 {
    font-weight: 800 !important;
}

.font-weight-850 {
    font-weight: 850 !important;
}

.font-weight-900 {
    font-weight: 900 !important;
}

.font-weight-950 {
    font-weight: 950 !important;
}

.font-weight-1000,
.font-weight-bold {
    font-weight: 1000 !important;
}

.font-weight-all-100 * {
    font-weight: 100;
}

.font-weight-all-200 * {
    font-weight: 200;
}

.font-weight-all-300 * {
    font-weight: 300;
}

.font-weight-all-350 * {
    font-weight: 350;
}

.font-weight-all-400 * {
    font-weight: 400;
}

.font-weight-all-450 * {
    font-weight: 450;
}

.font-weight-all-500 * {
    font-weight: 500;
}

.font-weight-all-550 * {
    font-weight: 550;
}

.font-weight-all-600 * {
    font-weight: 600;
}

.font-weight-all-650 * {
    font-weight: 650;
}

.font-weight-all-700 * {
    font-weight: 700;
}

.font-weight-all-750 * {
    font-weight: 750;
}

.font-weight-all-800 * {
    font-weight: 800;
}

.font-weight-all-850 * {
    font-weight: 850;
}

.font-weight-all-900 * {
    font-weight: 900;
}

.font-weight-all-950 * {
    font-weight: 950;
}

.font-weight-all-1000 *,
.font-weight-all-bold * {
    font-weight: 1000;
}

.font-color-gray-1 {
    color: var(--font-color-gray-1);
}

.font-color-gray-2 {
    color: var(--font-color-gray-2);
}

.font-color-gray-3 {
    color: var(--font-color-gray-3);
}

.font-color-blue-1 {
    color: var(--font-color-blue-1);
}

.font-color-blue-2 {
    color: var(--font-color-blue-2);
}

.font-color-blue-3 {
    color: var(--font-color-blue-3);
}

.font-color-blue-4 {
    color: var(--font-color-blue-4);
}

.font-color-black {
    color: var(--font-color-black);
}

.font-rubik b {
    font-weight: 400;
}

/* ! шрифты конец */

/* ! внешние отступы начало */
.mb-12px {
    margin-bottom: 12px !important;
}

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

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

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

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

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

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

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

.mt-0 {
    margin-top: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

/* ! внешние отступы конец */

/* ! цвет фона начало */

.background-color-blue-1 {
    background-color: var(--background-color-blue-1);
}

.background-color-blue-2 {
    background-color: var(--background-color-blue-2);
}

/* ! цвет фона конец */

/* ! шапка начало */

.header-container-wrapper {
    /* Сброс всех значений до состояния по-умолчанию */
    all: initial;
}

.header-container-wrapper * {
    box-sizing: border-box;
}

.header-container-wrapper {
    position: relative;
    margin: 0 auto;
    left: 0;
    top: 0;
    width: 100%;
    position: fixed;

    --top-side-mobile-menu__top: 70px;
    z-index: 200;
}

.header-container {
    /* --header-paddings: 46px 64px 30px 64px; */
    --header-paddings: 16px 64px 16px 64px;
    --header-container__menu--max-width: 1039px;
    --header-container__menu--width: 100%;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--menu-container-max-width);
    width: 100%;
    background-color: var(--background-color-white);
    display: flex;
    column-gap: 28px;
    justify-content: center;
    padding: var(--header-paddings);
    /* padding: 16px 64px 16px 64px; */
    /* padding: 10px 64px 10px 64px; */
}

/* .margin-from-header {
    margin-top: var(--margin-from-header);
} */

.header-container__logo {
    display: block;
    content: "";
    max-width: 219px;

    /* max-width: 251px; */
    /* max-height: 54px; */

    /* width: 219px !important; */
    /* height: 54px !important; */

    width: 100% !important;

    /* background-image: url("../images/logoBank.png"); */
    background-image: url("../images/logo-belive.svg");

    /* object-fit: scale-down !important; */
    /* background-size: contain; */
    /* background-size: cover; */

    background-size: 219px auto;
    /* background-size: 251px auto; */

    background-repeat: no-repeat;
    /* cursor: pointer; */
}

.header-container__menu {
    max-width: var(--header-container__menu--max-width);
    width: var(--header-container__menu--width);
}

.header-container__menu-main-top {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    margin-bottom: 10px;
}

/* .menu-main-top__item {} */

.menu-main-top__item-link {
    color: var(--font-color-gray-2);
    font-family: var(--font-family-rubik);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.18em;
    text-decoration: none;
    border-bottom: 0.5px solid var(--font-color-gray-red);
    cursor: pointer;
    transition: 0.5s ease-in-out all;
}

.menu-main-top__item-link:visited {
    color: var(--font-color-gray-2);
}

.menu-main-top__item-link:hover {
    color: var(--font-color-blue-2);
    border-bottom: 0.5px solid var(--font-color-blue-3);
}

.menu-main-top__item-link.active {
    color: var(--font-color-blue-2);
    border-bottom: 0.5px solid var(--font-color-blue-3);
    font-weight: 400;
}

.header-container__menu-under-main-top {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 9px;
}

.menu-under-main-top__item-link {
    color: var(--font-color-gray-2);
    font-family: var(--font-family-rubik);
    text-decoration: none;
    font-size: 15px;
    font-weight: 300;
    line-height: 18px;
    cursor: pointer;
    transition: 0.5s ease-in-out all;
}

.menu-under-main-top__item-link:visited {
    color: var(--font-color-gray-2);
}

.menu-under-main-top__item-link:hover {
    color: var(--font-color-blue-2);
}

.menu-under-main-top__item-link.active {
    color: var(--font-color-blue-2);
}

.header-container__buttons {
    min-width: 240px;
    min-height: 52px;
    display: flex;
    column-gap: 20px;
    align-items: top;
    justify-content: right;
    /* padding-left: 20px; */
}

.header-container__buttons-search-btn {
    position: relative;
    content: "";
    display: block;
    max-height: 60px;
    min-width: 41px;

    /* box-shadow: 8px 0px 1px -7px rgba(0, 0, 0, 0.3); */
    box-shadow: 4px 0px 1px -3px rgba(0, 0, 0, 0.3);
    cursor: pointer;

}

.search-btn__icon-search {
    position: relative;
    content: "";
    display: block;
    max-height: 60px;
    min-width: 41px;
    height: 60px;

    background-image: url("../images/search.svg");
    background-repeat: no-repeat;

    background-size: 30px 30px;
    background-position: left center;
}

.search-btn__input-form {
    position: absolute;
    box-sizing: border-box;
    top: 65px;
    /* left: calc( 50% - 5vw); */
    max-width: 296px;
    /* margin: 0; */
    /* padding: 0; */
    /* left: calc(50%); */

    margin-left: auto;
    margin-right: auto;
    right: 20%;
    text-align: center;
}

.search-btn__input {
    max-width: 296px;
    box-sizing: border-box;
    max-height: 34px;
    width: 0;
    height: 34px;
    border-radius: 25px;
    font-family: var(--font-family-rubik);
    font-weight: 300;
    font-size: 18px;
    color: var(--font-color-gray-1);
    line-height: 21px;
    border: 1px solid var(--font-color-blue-1);
    padding: 0 1rem 0 41px;
    background-image: url("../images/search.svg");
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 9px center;
    transition: 0.3s width ease-out;
}

.search-btn__input:active {
    cursor: text;
}

.search-btn__input:focus {
    outline: none;
    border: 1px solid var(--font-color-blue-1);
    cursor: text;
    width: 100%;
    left: 0;
    right: 0;
}

.header-container__buttons-group {
    min-width: 150px;
    color: var(--font-color-black);
    font-family: var(--font-family-rubik);
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
}

.buttons-group__btn-inbank {
    display: flex;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
    min-height: 30px;
    margin-bottom: 5px;
    text-decoration: none;

    /* background-color: lightblue; */
    /* cursor: pointer; */
}

.buttons-group__btn-inbank:visited {
    text-decoration: none;
}

.buttons-group__btn-inbank:hover .buttons-group__btn-inbank-text {
    color: var(--font-color-blue-2);
}

.buttons-group__btn-inbank-logo {
    content: "";
    display: block;
    min-height: 24px;
    min-width: 24px;

    /* text-decoration: none !important; */

    background-image: url("../images/internetBank.svg");
    background-repeat: no-repeat;

    background-size: 24px 24px;
    background-position: left center;
}

.buttons-group__btn-inbank-text {
    transition: 0.5s ease-out all;
    color: var(--font-color-black);
}

.buttons-group__btn-feedback {
    display: flex;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
    min-height: 30px;
    /* background-color: lightpink; */
    /* cursor: pointer; */
    text-decoration: none;
}

.buttons-group__btn-feedback:visited {
    text-decoration: none;
}

.buttons-group__btn-feedback:hover .buttons-group__btn-feedback-text {
    color: var(--font-color-blue-2);
}

.buttons-group__btn-feedback-logo {
    content: "";
    display: block;

    min-height: 24px;
    min-width: 24px;

    background-image: url("../images/feedback.svg");
    background-repeat: no-repeat;

    background-size: 24px 24px;
    background-position: left center;
}

.buttons-group__btn-feedback-text {
    transition: 0.5s ease-out all;
    color: var(--font-color-black);
}

/* Контейнер меню начало */
.top-side-mobile-menu {
    width: 100%;
    /* height: 100%; */
    height: 80vh;
    /* position: fixed; */
    position: absolute;
    /* background-color: var(--font-color-gray-1); */
    /* background-color: var(--main-banner-card-container-box-background-color); */
    /* background-color: #eee; */
    /* background-color: var(--font-color-gray-1); */

    /* background-color: var(--background-color-dark-blue); */
    background-color: var(--background-color-blue-1);


    /* background-image: url("../images/background-gradient.svg"); */
    /* background-repeat: no-repeat; */
    /* background-position: left center; */
    /* background-size: 100% auto; */

    /* top: 0; */
    top: var(--top-side-mobile-menu__top);
    left: 0;
    /* overflow: hidden; */
    max-height: 0;
    transition: max-height .3s ease-out;
    /* transition: all .3s ease-out; */
    /* margin-top: 80px; */
    /* margin-top: var(--top-side-mobile-menu__margin-top); */
}

/* Контейнер меню конец */

/* ! Ссылки меню для мобильных основной раздел начало */

.top-side-mobile-menu__main {
    margin: 0;
    padding: 0;
    padding-bottom: 1rem;
    padding-top: 1rem;
    /* background-color: var(--main-banner-card-container-box-background-color); */
    /* background-color: var(--font-color-gray-1); */

    background-color: var(--background-color-dark-blue);
    background-color: var(--background-color-blue-1);
}

.top-side-mobile-menu__item {
    margin-left: 20px;
    margin-right: 20px;
}

.top-side-mobile-menu__item-link {
    display: block;
    padding: 10px 30px;
    color: var(--font-color-gray-2) !important;
    font-family: var(--font-family-rubik);
    text-decoration: none;
    border-bottom: 0.5px solid var(--font-color-gray-red);
    cursor: pointer;
    font-weight: 400;
    font-size: 17px;
    line-height: 20px;
}

.top-side-mobile-menu__item:nth-last-child(1) .top-side-mobile-menu__item-link {
    border: none;
}

.top-side-mobile-menu__item-link:visited {
    color: var(--font-color-gray-2);
}

.top-side-mobile-menu__item-link:hover {
    /* color: var(--font-color-blue-2) !important;
    background-color: var(--background-color-white);
    border-radius: var(--main-banner-card-container-border-radius); */

    color: var(--font-color-gray-1) !important;
    font-weight: 500;
    box-shadow: 0 1px 4px 0 var(--font-color-blue-4) !important;
    border-radius: var(--main-banner-card-container-border-radius);
    background-color: var(--background-color-white);
}


.top-side-mobile-menu__item .active {
    color: var(--font-color-gray-1) !important;
    font-weight: 500;
    box-shadow: 0 1px 4px 0 var(--font-color-blue-4) !important;
    border-radius: var(--main-banner-card-container-border-radius);
    background-color: var(--background-color-white);
}

/* ! Ссылки меню для мобильных основной раздел конец */

/* ! Ссылки меню для мобильных подразделы начало */

.top-side-mobile-menu__under-main-container {
    margin: 0;
    padding: 1rem;
    /* background-color: var(--background-color-dark-blue); */
    background-color: var(--background-color-blue-1);
}

.top-side-mobile-menu__under-main {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--main-banner-card-container-box-background-color) !important;
    border-radius: var(--main-banner-card-container-border-radius);
    box-shadow: 0 2px 7px 0 var(--font-color-gray-6);
}

.top-side-mobile-menu__under-main-item-link {
    display: block;
    padding: 10px 30px;
    color: var(--font-color-gray-2);
    font-family: var(--font-family-rubik);
    text-decoration: none;
    cursor: pointer;
    font-weight: 350;
    font-size: 15px;
    line-height: 18px;
}

.top-side-mobile-menu__under-main-item-link:visited {
    color: var(--font-color-gray-2);
}

.top-side-mobile-menu__under-main-item-link:hover {
    /* color: var(--font-color-gray-2); */

    font-weight: 500;
    box-shadow: 0 1px 4px 0 var(--font-color-blue-4);
    font-family: var(--font-family-rubik);
    color: var(--font-color-blue-5);
    background-color: var(--background-color-white);
    border-radius: 10px;
    padding: 10px 30px 10px 15px;
    margin: 0 1rem 0.5rem 1rem;
}


.top-side-mobile-menu__under-main-item-link.active {
    font-weight: 500;
    box-shadow: 0 1px 4px 0 var(--font-color-blue-4);
    font-family: var(--font-family-rubik);
    color: var(--font-color-blue-5);
    background-color: var(--background-color-white);
    border-radius: 10px;
    padding: 10px 30px 10px 15px;
    margin: 0 1rem 0.5rem 1rem;
}

/* ! Ссылки меню для мобильных подразделы конец */

/* ! Иконка меню начало */

.header__side-menu-container {
    display: flex;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
}

/* Контейнер для иконки меню, а также кнопка меню начало */

.header__side-menu-icon {
    cursor: pointer;

    display: flex;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;

    width: 35px;
    height: 60px;

    display: none;
    /* float: right; */
    /* position: absolute; */
    /* right: 0; */
    /* padding: 40px 0px; */

}

/* Контейнер для иконки меню, а также кнопка меню конец */

/* Центральная горизонтальная линяя иконки меню начало */

.header__side-menu-icon-line {
    background: var(--font-color-gray-1);
    display: block;
    height: 2px;
    position: relative;
    width: 35px;
}

/* Центральная горизонтальная линяя иконки меню конец */

/* Верхняя и нижняя горизонтальные линии иконки меню начало */

.header__side-menu-icon-line::before,
.header__side-menu-icon-line::after {
    background: var(--font-color-gray-1);
    border: none;
    content: '';
    display: block;
    position: absolute;
    transition: all .2s ease-out;
    height: 100%;
    height: 2px;
    width: 100%;
}

/* Верхняя и нижняя горизонтальные линии иконки меню конец*/

/* Нижняя горизонтальная линия иконки меню начало */

.header__side-menu-icon-line::before {
    top: 12px;
}

/* Нижняя горизонтальная линия иконки меню конец */

/* Верхняя горизонтальная линия иконки меню начало */

.header__side-menu-icon-line::after {
    top: -12px;
}

/* Верхняя горизонтальная линия иконки меню конец */

/* ! Иконка меню конец */


/* ! Раскрытое мобильное меню начало */
.header__side-menu {
    /* сам чекбокс невидим */
    display: none;
}

/* Иконка меню нажата (чекбокс установлен) начало */

.top-side-mobile-menu.active {
    /* Раскрыть меню, увеличив его высоту до 100% от области контейнера */
    /* max-height: 100%; */
    /* height: 100vh; */
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 100%;
    height: calc(100vh - var(--top-side-mobile-menu__top));
    height: calc(100dvh - var(--top-side-mobile-menu__top));
    /* z-index: 100; */

    /* Если боковое меню открыто, 
    то при переполнении области меню 
    добавить вертикальный скролл */
    overflow-y: scroll;

    padding-bottom: 20px;
}

.top-side-mobile-menu__links {
    display: none;
}

/*  Иконка меню нажата (чекбокс установлен) конец */


.top-side-mobile-menu.active .top-side-mobile-menu__links {
    display: block;
}

/* Отключение средней линии иконки меню при раскрытом состоянии начало */

.header__side-menu-icon.active .header__side-menu-icon-line {
    /* Сделать среднюю линию прозрачной, под цвет фона */
    background: transparent;
}

/* Отключение средней линии иконки меню при раскрытом состоянии конец */


/* Поворот нижней линии иконки меню при раскрытом состоянии начало */
.header__side-menu-icon.active .header__side-menu-icon-line::before {
    /* поворот на 45 градусов против часовой стрелки */
    transform: rotate(-45deg);
    background: var(--background-color-red-2);
    top: 0;
}

/* Поворот нижней линии иконки меню при раскрытом состоянии конец */

/* Поворот верхней линии иконки меню при раскрытом состоянии начало */
.header__side-menu-icon.active .header__side-menu-icon-line::after {
    /* поворот на 45 градусов по часовой стрелке */
    transform: rotate(45deg);
    background: var(--background-color-red-2);
    top: 0;
}

/* Поворот верхней линии иконки меню при раскрытом состоянии конец */

/* ! Раскрытое мобильное меню конец */

/* ! шапка конец */

.tecno-demo-containter-cards {
    min-height: 200px;
    max-width: var(--global-container-max-width);

    margin: 0 auto;

    margin-bottom: 57px;
    border-radius: 20px;
}

/* градиенты начало */


.radial-gradient-blue {
    /* background: radial-gradient(var(--gradient-color-blue), var(--gradient-color-deep-blue)); */
    /* background: radial-gradient(351.00% 55.00% at 50% 50%, var(--gradient-color-blue), var(--gradient-color-deep-blue) 100%); */

    /* background: var(--main-banner-container-gradient); */

    /* border-radius: 20px; */
    /* background: radial-gradient(351.00% 55.00% at 50% 50%,rgba(125, 215, 255, 0.67),rgba(0, 176, 255, 0) 100%); */

    /* background-size: cover; */
    background-image: url("../images/background-gradient.svg");
    /* background-repeat: no-repeat; */
    background-position: left center;
    background-size: 100% auto;

}

/* градиенты конец */

.demo-container-2-cols {
    box-sizing: border-box;
    margin: 0 auto;
    /* background-color: #eee; */

    display: grid;

    max-width: var(--global-container-max-width);
    width: 100%;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: 1fr;
    grid-template-areas: "demo-left demo-right demo-right";

    justify-content: center;
    /* justify-content: stretch; */

    grid-gap: 1rem 1rem;

    border-radius: 10px;
    padding: 1rem;
}

.demo-left {
    grid-area: demo-left;
    background-color: #ffffff;
    margin: 0;
}

.demo-right {
    grid-area: demo-right;
    background-color: #ffffff;
    margin: 0;
}

.global__button-toogle {
    display: block;
    bottom: 23px;
    max-width: 300px;
    /* max-height: 40px; */
    width: 100%;
    /* height: 40px; */
    font-family: var(--font-family-rubik);
    color: var(--font-color-black);
    background-color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    outline: none;
    border: none;
    transition: 0.3s all ease-out;
    cursor: pointer;
    /* z-index: 100; */
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.global__btn-green {
    background-color: var(--background-color-green);
    color: var(--font-color-black);
}

.global__btn-red {
    background-color: var(--background-color-red-2);
    color: #ffffff;
}

/* ! подвал начало */

.footer-container-wrapper * {
    box-sizing: border-box;
}

.footer-container-wrapper {
    --footer-shadow-box: none;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.footer-shadow-box {
    box-shadow: var(--footer-shadow-box);
}


.footer__shadow-button-toogle {
    --footer-shadow-box: 1px 1px 10px 4px var(--font-color-gray-6);
    --footer-shadow-button--background: var(--background-color-green);
    --footer-shadow-button--color: var(--font-color-black);
    display: block;
    bottom: 23px;
    max-width: 300px;
    max-height: 40px;
    width: 100%;
    height: 40px;
    font-family: var(--font-family-rubik);
    color: var(--footer-shadow-button--color);
    background-color: var(--footer-shadow-button--background);
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: center;
    padding: 0;
    border-radius: 10px;
    outline: none;
    border: none;
    transition: 0.3s all ease-out;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.footer-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--global-container-max-width);
    width: 100%;
    display: grid;
    justify-content: stretch;
    /* grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); */
    /* grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) minmax(210px, 1fr); */
    /* grid-template-rows: auto-fit, minmax(210px, 1fr) minmax(210px, 1fr)  minmax(210px, 1fr) minmax(210px, 1fr); */
    padding: 1rem;
    grid-gap: 1rem;
    grid-auto-flow: dense;

    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    /* grid-template-columns: auto-fit, repeat(3, 1fr); */
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(4, 1fr); */
    /* grid-template-rows: 1fr 1fr 1/2fr 1/2fr; */
    grid-template-areas:
        "bottom-menu-retail bottom-menu-business bottom-menu-about"
        "footer-contacts footer-mobile footer-bank-groupe"
        "footer-extra-links footer-extra-links footer-extra-links"
        "footer-license-info footer-license-info footer-license-info";
}

.block-bottom-menu-retail {
    grid-area: bottom-menu-retail;
}

.block-bottom-menu-business {
    grid-area: bottom-menu-business;
}

.block-bottom-menu-about {
    grid-area: bottom-menu-about;
}

.block-footer-contacts {
    grid-area: footer-contacts;
}

.block-footer-mobile {
    grid-area: footer-mobile;
}

/* ! блок с контактами начало */

.block-footer-contacts .block-bottom-menu__links {
    margin-top: 24px !important;
}

.block-footer-contacts__item {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 35px;
    font-weight: 300;
    line-height: 41px;
    letter-spacing: 0px;
    text-align: left;
    padding: 0;
    transition: 0.5s ease-out all;
}

.block-footer-contacts__item-description {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
    padding: 0;
    margin-top: 5px;
}

.block-footer-contacts__item-link {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    text-decoration: none;
    /* outline: none; */
    cursor: pointer;
    transition: 0.3s ease-out all;
}

.block-footer-contacts__item-link:visited {
    color: var(--font-color-gray-1);
}

.block-footer-contacts__item-link:hover {
    font-weight: 400;
}

.block-footer-contacts__item-link.active {
    font-weight: 400;
}

.block-footer-contacts__socials {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 5px;
    min-height: 65px !important;
}

.block-footer-contacts__socials--border-bottom-red {
    border-bottom: 2px solid var(--background-color-red-1);
}

.block-footer-contacts__socials--border-bottom-double-red {
    border-bottom: 4px double var(--background-color-red-1);
}

.block-footer-contacts__socials--border-circle-red {
    border: 2px solid var(--background-color-red-1);
    border-radius: 50%;
}

.block-footer-contacts__socials--border-double-circle-red {
    border: 4px double var(--background-color-red-1);
    border-radius: 50%;
}

.socials-item {
    transition: 0.3s all ease;
    background-position: center;
}

.socials-item:hover {
    transform: scale(1.15);
}

.socials-item__vk-png {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/vk.png");
}

.socials-item__telegram-png {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/telegram.png");
}

.socials-item__telegram-bot-png {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/telegram-bad.svg");
}

.socials-item__vk {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/vk.svg");
}

.socials-item__vk-new {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/vk-new.svg");
}

.socials-item__telegram {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/telegram.svg");
}

.socials-item__telegram-new {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/telegram-new.svg");
}

.socials-item__telegram-official {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/tg-official.svg");
}

.socials-item__telegram-official-bot {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/tg-official-bot.svg");
}

.socials-item__telegram-official-bot-greater {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/tg-official-bot-greater.svg");
}

.socials-item__max-official {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/max-official.svg");
}

.socials-item__telegram-bot {
    display: block;
    content: "";
    width: 65px;
    height: 65px;
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-contacts/telegram-bot.svg");
}

/* ! блок с контактами конец */

/* ! блок с мобильными предложениями начало */
.block-footer-mobile__items {
    padding-bottom: 1rem;
}

.mobile-item {
    display: flex;
    align-items: center;
    column-gap: 20px;
    cursor: pointer;
    text-decoration: none;
    color: var(--font-color-gray-1);
    transition: 0.3s all ease-out;
}

.mobile-item:hover {
    text-decoration: none;
    color: var(--font-color-gray-1);
}

.mobile-item:visited {
    text-decoration: none;
    color: var(--font-color-gray-1);
}

.mobile-item:hover .mobile-item__description {
    font-weight: 400;
}

.mobile-item__logo {
    display: block;
    content: '';
    min-width: 73px;
    min-height: 73px;
    width: 73px;
    height: auto;
    /* background-size: 73px auto; */
    /* background-repeat: no-repeat; */
    /* background-image: url("../images/bottom-mobile/bank-orenburg-icon.png"); */
    /* transition: 0.3s all ease-out; */
    transition: 0.3s all linear;
    background-position: auto;
}

.mobile-item:hover .mobile-item__logo {
    transform: scale(1.2);
}

.app-bank-orenburg {
    background-size: 73px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-mobile/bank-orenburg-icon.png");
}

.app-bank-orenburg-svg {
    background-size: 73px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-mobile/logo-o.svg");
    background-image: url("../images/bottom-mobile/logo-o-little.svg");
}

.app-office-mobile {
    background-size: 73px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-mobile/office-mobile-icon.png");
}

.app-office-mobile-svg {
    background-size: 73px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-mobile/office-alpha.svg");
}

.mobile-item__description {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 22px;
    font-weight: 300;
    /* line-height: 26px; */
    line-height: 1.18em;
    letter-spacing: 0px;
    text-align: left;
    text-decoration: none;
    transition: 0.3s ease-out all;
}

/* ! блок с мобильными предложениями конец */

/* ! блок с банковской группой начало */

.block-footer-bank-groupe__items {
    padding-bottom: 1rem;
}

.bank-groupe-item {
    display: flex;
    align-items: center;
    column-gap: 20px;
    cursor: pointer;
    text-decoration: none;
    color: var(--font-color-gray-1);
    transition: 0.3s all ease-out;
}

.bank-groupe-item:hover {
    text-decoration: none;
    color: var(--font-color-gray-1);
}

.bank-groupe-item:visited {
    text-decoration: none;
    color: var(--font-color-gray-1);
}

.bank-groupe-item:hover .bank-groupe-item__description {
    font-weight: 400;
}

.bank-groupe-item:hover .bank-groupe-item__logo {
    transform: scale(1.05);
    background-position: auto;
    /* background-size: contain; */
}

.bank-groupe-item__logo {
    display: block;
    content: '';
    transition: 0.3s all ease-out;
}

.e-card {
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 264px;
    min-height: 54px;
    width: 100%;
    height: auto;
    background-size: 264px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-bank-groupe/e-card.png");
    background-position: left center;
}

.system-city {
    min-width: 241px;
    min-height: 75px;
    width: 100%;
    height: auto;
    background-size: 241px auto;
    background-repeat: no-repeat;
    background-image: url("../images/bottom-bank-groupe/system.png");
    background-position: left center;

}

.bank-groupe-item__description {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 22px;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: 0px;
    text-align: left;
    text-decoration: none;
}

/* ! блок с банковской группой конец */

.block-bank-groupe {
    grid-area: footer-bank-groupe;
}

.block-extra-links {
    grid-area: footer-extra-links;
    padding: 0 !important;
}

.block-license-info {
    grid-area: footer-license-info;

    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    padding: 1rem !important;
}

.block-license-info p {
    margin: 0 0 0.5rem 0;
}

.block-bottom-menu__title-text-blue {
    color: var(--font-color-blue-1);
    font-family: var(--font-family-rubik);
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0px;
    text-align: left;
}

.block-bottom-menu__links {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 20px;
    font-weight: 300;
    /* line-height: 24px; */
    line-height: 1em;
    letter-spacing: 0px;
    text-align: left;
}

/* меню подвала начало */
.menu-bottom-title__item-link {
    color: var(--font-color-blue-1);
    font-family: var(--font-family-rubik);
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s linear all;
}

.menu-bottom-title__item-link:visited {
    color: var(--font-color-blue-1);
}

.menu-bottom-title__item-link:hover {
    color: var(--font-color-blue-1);
    border-bottom: 1px solid var(--font-color-blue-1);
}

.menu-bottom-title__item-link.active {
    color: var(--font-color-blue-1);
    border-bottom: 1px solid var(--font-color-blue-1);
}

.menu-bottom__item {
    margin-top: 0;
    margin-bottom: 14px;
}

.menu-bottom__item-link {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease-in all;
}

.menu-bottom__item-link:visited {
    color: var(--font-color-gray-1);
}

.menu-bottom__item-link:hover {
    font-weight: 400;
}

.menu-bottom__item-link.active {
    color: var(--font-color-gray-1);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}

.block-bottom-menu-extra__links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 13px;
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: left;
    padding: 1rem;
}

.menu-bottom-extra__item-link {
    color: var(--font-color-gray-1);
    font-family: var(--font-family-rubik);
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease-out all;
}

.menu-bottom-extra__item-link:visited {
    color: var(--font-color-gray-1);
}

.menu-bottom-extra__item-link:hover {
    font-weight: 400;
}

.menu-bottom-extra__item-link.active {
    color: var(--font-color-gray-1);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    text-align: left;
}

/* меню подвала конец */

/* .footer-container:nth-child(4) {
    grid-column: span 3;
} */

/* .footer-container:nth-child(5) {
    grid-column: span 3;
} */

/* .footer-container:nth-child(6) {
    grid-column: span 3;
} */

.footer-container__cell {
    box-sizing: border-box;
    background-color: #ffffff;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    padding: 1rem 1rem 0 1rem;
}

/* ! подвал конец*/

.global-scrollbar {
    scrollbar-arrow-color: var(--background-color-blue-3);
    scrollbar-track-color: transparent;
    scrollbar-base-color: var(--background-color-blue-3);
    scrollbar-shadow-color: var(--background-color-blue-3);
    scrollbar-highlight-color: var(--background-color-blue-3);
    transition: .2s;
    scrollbar-width: thin;
    scrollbar-color: var(--background-color-blue-3) transparent;
}

/* Одноколоночное отображение на мобильных */
@media screen and (max-width: 1350px) {
    .header-container {
        justify-content: center;
        padding: 10px 10px 20px 10px !important;
    }

    /* .margin-from-header {
        --margin-from-header: 100px;
    } */
}

@media screen and (max-width: 1024px) {
    .footer-container {
        /* grid-template-areas:
        "bottom-menu-retail bottom-menu-business bottom-menu-about"
        "footer-contacts footer-mobile footer-bank-groupe"
        "footer-extra-links footer-extra-links footer-extra-links"
        "footer-license-info footer-license-info footer-license-info"; */

        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1/2fr 1/2fr;
        justify-content: stretch;
        grid-template-areas:
            "bottom-menu-retail bottom-menu-business"
            "footer-contacts bottom-menu-about"
            "footer-mobile footer-bank-groupe"
            "footer-extra-links footer-extra-links"
            "footer-license-info footer-license-info";
    }

    .header-container__menu {
        display: none;
        padding-bottom: 20px !important;
    }

    .header-container-wrapper {
        --top-side-mobile-menu__top: 70px;
    }

    .demo-container-2-cols {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, auto-fit);

        grid-template-areas:
            "demo-left"
            "demo-right";
    }

    .header__side-menu-icon {
        display: flex;
    }

    .header-container {
        justify-content: center;
        padding: 10px 0 0 0 !important;
    }

    .header-container__buttons-group {
        display: flex;
        column-gap: 20px;
    }

    .table__color-palette {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 830px) {
    .table__color-palette {
        font-size: 0.7em;
    }

    .table__color-palette thead th {
        padding: 0;
    }

    .table__color-palette tbody td {
        padding: 0;
    }
}

@media screen and (max-width: 740px) {

    .header-container {
        column-gap: 26px;
    }

    .header-container__buttons {
        min-width: auto;
    }

    .buttons-group__btn-feedback-text {
        display: none;
    }

    .buttons-group__btn-inbank-text {
        display: none;
    }

    .header-container__buttons-group {
        min-width: auto;
    }
}

@media screen and (max-width: 670px) {

    .table__color-palette {
        font-size: 0.5em;
    }

}

@media screen and (max-width: 640px) {
    .header-container__logo {
        width: 219px;
        height: 60px;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
    }

    .menu-bottom__item-link {
        font-size: 0.8em !important;
    }

    .demo-container-2-cols * {
        line-height: 1em;
    }

    .block-footer-contacts .block-bottom-menu__links {
        margin-top: 0 !important;
    }

    .search-btn__input-form {
        left: 0;
        right: 0;
    }
}

@media screen and (max-width: 520px) {
    .header-container {
        column-gap: 24px;
    }

    .buttons-group__btn-inbank-text {
        display: none;
    }

    .buttons-group__btn-feedback-text {
        display: none;
    }

    .header-container__buttons-group {
        min-width: auto;
    }

    .header-container__buttons {
        min-height: 52px;
    }

    .header-container__buttons-search-btn {
        max-height: 52px;
    }

    .search-btn__icon-search {
        max-height: 60px;
        height: 60px;
    }

    .table__color-palette {
        font-size: 0.45em;
    }

    .mobile-item__description {
        font-size: 18px;
    }
}

@media screen and (max-width: 460px) {
    /* .margin-from-header {
        --margin-from-header: 70px;
    } */

    .header-container {
        column-gap: 6px;
    }

}

@media screen and (max-width: 420px) {
    .header-container__logo {
        max-width: 200px;
        background-size: 200px auto;
    }
}

@media screen and (max-width: 400px) {
    .header-container-wrapper {
        --top-side-mobile-menu__top: 60px;
    }

    .header-container__logo {
        max-width: 150px;
        height: 40px;
        background-size: 150px auto;
    }

    .header-container__buttons-group {
        min-width: auto;
    }

    .header-container__buttons {
        min-height: 40px;
    }

    .header-container__buttons-search-btn {
        max-height: 40px;
    }

    .search-btn__icon-search {
        max-height: 45px;
        height: 45px;
    }

    .buttons-group__btn-inbank {
        height: 45px;
    }

    .buttons-group__btn-feedback {
        height: 45px;
    }

    .header__side-menu-icon {
        height: 45px;
        width: 45px;
    }
}

@media screen and (max-width: 360px) {
    .header-container {
        justify-content: left;
    }

    .header-container__logo {
        margin-left: 10px;
    }

    .block-footer-contacts__item-link {
        font-size: 25px;
    }

}


@media screen and (max-width: 355px) {
    .header-container {
        justify-content: left;
    }

    .header-container__logo {
        margin-left: 10px;
        max-width: 120px;
        height: 40px;
        background-size: 120px auto;
        background-position: center center;
    }
}

@media screen and (max-width: 340px) {
    .header-container__logo {
        max-width: 120px;
        background-size: 120px auto;
    }
}

@media screen and (max-width: 325px) {
    .header-container-wrapper {
        --top-side-mobile-menu__top: 120px;
    }

    .header-container {
        flex-direction: column;
        gap: 0;

    }

    .header-container__logo {
        margin-left: 40px;
        max-width: 200px;
        width: 100%;
        height: 60px;
        background-size: 200px auto;

        align-self: flex-start;
    }

    .header-container__buttons {
        align-self: flex-start;
        margin-left: 40px;
    }

    .search-btn__input-form {
        max-width: 250px;
    }

    .search-btn__input {
        max-width: 250px;
    }
}

.qr-code__container {
    margin: 0 auto;
    width: 100%;
    max-width: 1350px;
    text-align: center;
    line-height: 1.5em;
}

.qr-code {
    margin: 0 auto;
    display: block;
    content: "";
    width: 300px;
    height: 300px;
    background-size: 300px auto;
    background-repeat: no-repeat;
    background-image: url("../images/qr-new.jpg");
}