:root {
    --gap: 153px;
}

/* бургер меню начало */
.header__burger-btn {
    display: none;
    padding: 0;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.header__burger-btn.closed {
    position: absolute;
    top: 25px;
    right: 15px;
    width: auto;
    height: auto;
    padding: 5px 15px;
    display: flex;
    align-items: baseline;
    gap: 5px;
    align-self: flex-end;
    border-radius: 20px;
    background: #e1e1e1;
}

.header__burger-btn.closed::before {
    content: 'закрыть';
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
}

.header__burger-btn.closed::after {
    content: '';
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/site/icons/icon-krest.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 10px;
    height: 10px;
    display: inline-block;
}

.header__burger-btn>img {
    width: 100%;
    height: 100%;
    display: block;
}

.header__burger-menu {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    background-color: #fff;
    overflow: hidden scroll;
    scrollbar-width: none;
    opacity: 0;
    visibility: hidden;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.header__burger-menu.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.header__burger-menu-wrapper {
    padding: 70px 25px 25px;
}

.header__burger-menu-wrapper>img {
    margin: 0 auto 30px;
    display: block;
    max-width: 300px;
    width: 100%;
}

.header__burger-list {
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    border-bottom: 1px solid #333;
}

.header__burger-list>a {
    margin: 0 auto;
    padding: 7px 20px;
    max-width: 200px;
    width: calc(100% - 40px);
    background-color: #f2f2f2;
    border-radius: 20px;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
    text-align: center;
    text-decoration: none;
}

.header__burger-catalog {
    background-color: #333 !important;
    color: #fff !important;
}

.header__burger-list>a:hover {
    text-decoration: none;
}

.header__burger-phone {
    margin: 0 auto;
    padding-top: 25px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-family: 'Inter Variable';
    font-size: 18px;
    line-height: normal;
    color: #333;
    text-align: center;
    text-decoration: none;
}

.header__burger-phone>img {
    width: 30px;
    height: 30px;
    display: block;
}

.header__burger-phone:hover {
    text-decoration: none;
}

/* бургер меню конец */

/* баннер */
.gb-banner {
    margin: 0 calc(50% - 50vw);
    background-color: #ebebeb;
}

.gb-banner>.container {
    padding-right: 35px;
    padding-left: 35px;
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
}

.gb-banner__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
}

.gb-banner__title {
    margin: 0;
    margin-bottom: 40px;
    max-width: 500px;
    font-family: 'Inter Variable';
    font-size: 65px;
    line-height: normal;
    color: #333;
    text-align: left;
    letter-spacing: unset;
}

.gb-banner__title div {
    margin-top: 15px;
    font-size: 29px;
}

.gb-banner__phone {
    margin-bottom: 40px;
    display: block;
    font-family: 'Inter Variable';
    font-size: 32px;
    line-height: normal;
    color: #333;
    text-decoration: none;
    transition: color .3s ease-in-out;
}

.gb-banner__phone:hover {
    color: #df8844;
    text-decoration: none;
    transition: color .3s ease-in-out;
}

.gb-banner__phone:active {
    color: #333;
    transition: color .3s ease-in-out;
}

p.gb-banner__descr {
    margin: 0;
    padding-left: 25px;
    position: relative;
    font-family: 'Myriad Pro Regular';
    font-size: 18px;
    line-height: normal;
    color: #333;
}

p.gb-banner__descr::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #7bc67d;
    animation: pulse-animate 1.5s infinite;
}

@keyframes pulse-animate {
    0% {
        box-shadow: 0 0 0 0px rgba(123, 198, 125, 1);
    }

    100% {
        box-shadow: 0 0 0 7px rgba(123, 198, 125, 0);
    }
}

.gb-banner__video {
    display: block;
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* блок с карточками */
.gb {
    margin: 0 calc(50% - 50vw);
    background-color: #fff;
}

.gb>.container {
    padding: 0 35px;
}

/* фильтр */
.gb__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

p.gb__txt {
    margin: 0;
    font-family: 'Inter Medium';
    font-weight: bold;
    font-size: 18px;
    line-height: normal;
    color: #333;
    text-transform: uppercase;
}

.gb__block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gb__block p.gb__txt {
    font-family: 'Inter Variable';
    font-size: 16px;
    text-transform: none;
}

.gb__toggle {
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
}

.gb__switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    border-radius: 30px;
    vertical-align: top;
    background-color: #f0f0f0;
    transition: .3s ease-in-out;
}

.gb__switch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #333;
    transition: .3s ease-in-out;
}

.gb__toggle.active .gb__switch:before {
    transform: translate(30px, -50%);
}

.gb__bottom {
    margin-top: 30px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.gb__bottom p.gb__txt {
    font-family: 'Inter Variable';
    font-size: 21px;
}

.gb__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gb__option {
    padding: 5px 15px;
    padding-right: 35px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    background-color: #f0f0f0;
    border-radius: 30px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
    user-select: none;
    transition: .3s ease-in-out;
}

.gb__option::before {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 1px solid #333;
    background-position: center;
    background-repeat: no-repeat;
    transition: .3s ease-in-out;
}

.gb__option.active::before {
    border: none;
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon-galka.svg');
    transition: .3s ease-in-out;
}

.gb__option:hover {
    background-color: #333;
    color: #fff;
    transition: .3s ease-in-out;
}

.gb__option:hover::before {
    border-color: #fff;
    transition: .3s ease-in-out;
}

.gb__option.active:hover {
    color: #333;
    transition: .3s ease-in-out;
}

.gb__option.active {
    background-color: #fff;
    transition: .3s ease-in-out;
}

.gb__option div.check {
    display: none;
}

/* галерея и 3d модели */
.our-projects__list.list-hidden,
.our-projects__item.hidden,
.our-projects__buttons {
    display: none;
}

.gb__gallery,
.gb__3d {
    margin-top: 30px;
    display: none;
}

.gb__gallery {
    margin-bottom: 50px;
    display: block;
}

.gb__buttons {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gb__btn {
    display: block;
    position: relative;
    width: calc(100% - 24px);
    padding: 12px;
    background-color: #efefef;
    border-radius: 7px;
    border: none;
    font-family: 'Inter Variable';
    font-size: 18px;
    line-height: normal;
    color: #333;
    text-align: center;
    overflow: hidden;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.gb__btn::after {
    content: "";
    display: block;
    width: 20px;
    height: 200px;
    margin-left: 60px;
    background: #fff;
    opacity: .5;
    position: absolute;
    left: -40px;
    top: -50px;
    z-index: 1;
    transform: rotate(45deg);
    transition: all .1s;
    animation-name: slideme;
    animation-duration: 4s;
    animation-delay: .05s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes slideme {
    0% {
        left: -30px;
        margin-left: 0px;
    }

    30% {
        left: 110%;
        margin-left: 80px;
    }

    100% {
        left: 110%;
        margin-left: 80px;
    }
}

.gb__btn:hover {
    background-color: #333;
    color: #fff;
    text-decoration: none;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.gb__btn:active {
    background-color: #efefef;
    color: #333;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.gb__btn .gb__icon {
    width: 30px;
    height: 30px;
    position: static;
    border: 1px solid #333;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

.gb__btn .gb__icon.btn-more {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon-more.svg?v=2');
}

.gb__btn .gb__icon.btn-share {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/site/icons/icon-share.svg');
}

.vip-more {
    margin: 0 calc(50% - 50vw) 30px;
    padding: 30px 0;
    background-color: #f2f2f2;
}

.vip-more2 {
    margin-bottom: 60px;
}

.vip-more>.container {
    padding-right: 35px;
    padding-left: 35px;
}

.vip-info__box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vip-info__image {
    display: block;
    width: 60px;
}

p.vip-info__text {
    margin: 0;
    font-family: 'Inter Light';
    font-size: 27px;
    line-height: normal;
    color: #333;
}

.vip-more2 p.vip-info__text span {
    max-width: 580px;
}

.vip-more3 p.vip-info__text span {
    max-width: 100%;
    font-weight: normal;
}

.vip-more3 p.vip-info__text span>span {
    display: inline;
    font-weight: bold;
}

p.vip-info__text span {
    margin-top: 5px;
    display: block;
    font-weight: bold;
    font-size: 16px;
}

.vip-more__btn {
    display: block;
    margin-left: auto;
    padding: 15px 45px;
    position: relative;
    cursor: pointer;
    background-color: #dcdcdc;
    border: none;
    border-radius: 7px;
    font-family: 'Inter Light';
    font-size: 18px;
    line-height: normal;
    color: #333;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.vip-more2 .vip-more__btn {
    background-color: #333;
    color: #fff;
}

.vip-more__btn:hover {
    background-color: #333;
    color: #fff;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.vip-more2 .vip-more__btn:hover {
    background-color: #df8844;
}

.vip-more__btn:active {
    background-color: #dcdcdc;
    color: #333;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

.vip-more2 .vip-more__btn:active {
    background-color: #333;
    color: #fff;
}

.vip-more__btn::after {
    content: "";
    display: block;
    width: 20px;
    height: 200px;
    margin-left: 60px;
    background: #fff;
    opacity: .5;
    position: absolute;
    left: -40px;
    top: -50px;
    z-index: 1;
    transform: rotate(45deg);
    transition: all .1s;
    animation-name: slideme;
    animation-duration: 4s;
    animation-delay: .05s;
    animation-delay: calc((var(--i) + 2) * 1s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* анимированная рука начало */
.hand-animate {
    position: absolute;
    left: 5px;
    top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    pointer-events: none;
    user-select: none;
}

.arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0;
    animation: arrowPulse 4s infinite;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center;
}

@keyframes arrowPulse {

    0%,
    40%,
    80%,
    100% {
        opacity: 0;
        transform: translate(0, 0) rotate(var(--rotation, 0deg));
    }

    20%,
    60% {
        opacity: 1;
        transform: translate(calc(var(--tx, 0) * 15px),
                calc(var(--ty, 0) * 15px)) rotate(var(--rotation, 0deg));
    }
}

@keyframes handMovement {

    /* 0% - Начало: открытая рука в центре */
    0% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M31.46,8.57A3.11,3.11,0,0,0,27,5.75a3.19,3.19,0,0,0-4.66-2.64,3.29,3.29,0,0,0-6.42-.76,3.23,3.23,0,0,0-1.66-.46A3.27,3.27,0,0,0,11,5.18V17.84c-1.28-1.6-2.53-3.18-2.72-3.45A3.19,3.19,0,0,0,5.56,12.9a3.37,3.37,0,0,0-3.47,3.48C2.18,18.18,5.66,24.54,8,28c3.54,5.24,6.92,6,7.07,6l.18,0H25.59a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13c1-3.09,1.53-7.53,1.58-13.56ZM28.18,27.12a12.46,12.46,0,0,1-2.94,5.08H15.33c-.47-.14-3.07-1.1-5.87-5.25S3.94,17.27,3.89,16.29a1.5,1.5,0,0,1,.45-1.13,1.52,1.52,0,0,1,1.14-.46,1.43,1.43,0,0,1,1.32.71c.29.43,2.36,3,3.57,4.53L12.8,18.3V5.18a1.48,1.48,0,1,1,2.95,0V16.32h1.8v-13a1.51,1.51,0,0,1,3,0V16.45h1.8V6a1.43,1.43,0,1,1,2.85,0V17.44H27V8.54a1.33,1.33,0,0,1,2.65,0v5.55C29.62,20,29.14,24.21,28.18,27.12Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(0, 0);
    }

    /* 8.3% - Движение влево: сжимаем руку и уходим влево */
    8.3% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M28.09,9.74a4,4,0,0,0-1.16.19c-.19-1.24-1.55-2.18-3.27-2.18A4,4,0,0,0,22.13,8,3.37,3.37,0,0,0,19,6.3a3.45,3.45,0,0,0-2.87,1.32,3.65,3.65,0,0,0-1.89-.51A3.05,3.05,0,0,0,11,9.89v.91c-1.06.4-4.11,1.8-4.91,4.84s.34,8,2.69,11.78a25.21,25.21,0,0,0,5.9,6.41.9.9,0,0,0,.53.17H25.55a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13A25.8,25.8,0,0,0,31.41,18v-5.5A3.08,3.08,0,0,0,28.09,9.74ZM29.61,18a24,24,0,0,1-1.47,9.15A12.46,12.46,0,0,1,25.2,32.2H15.47a23.75,23.75,0,0,1-5.2-5.72c-2.37-3.86-3-8.23-2.48-10.39A5.7,5.7,0,0,1,11,12.76v7.65a.9.9,0,0,0,1.8,0V9.89c0-.47.59-1,1.46-1s1.49.52,1.49,1v5.72h1.8V8.81c0-.28.58-.71,1.46-.71s1.53.48,1.53.75v6.89h1.8V10l.17-.12a2.1,2.1,0,0,1,1.18-.32c.93,0,1.5.44,1.5.68l0,6.5H27V11.87a1.91,1.91,0,0,1,1.12-.33c.86,0,1.52.51,1.52.94Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(-30px, 0);
    }

    /* 16.6% - Возвращение в центр: рука остаётся сжатой */
    16.6% {
        transform: translate(0, 0);
    }

    /* 25% - В центре: рука открывается */
    25% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M31.46,8.57A3.11,3.11,0,0,0,27,5.75a3.19,3.19,0,0,0-4.66-2.64,3.29,3.29,0,0,0-6.42-.76,3.23,3.23,0,0,0-1.66-.46A3.27,3.27,0,0,0,11,5.18V17.84c-1.28-1.6-2.53-3.18-2.72-3.45A3.19,3.19,0,0,0,5.56,12.9a3.37,3.37,0,0,0-3.47,3.48C2.18,18.18,5.66,24.54,8,28c3.54,5.24,6.92,6,7.07,6l.18,0H25.59a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13c1-3.09,1.53-7.53,1.58-13.56ZM28.18,27.12a12.46,12.46,0,0,1-2.94,5.08H15.33c-.47-.14-3.07-1.1-5.87-5.25S3.94,17.27,3.89,16.29a1.5,1.5,0,0,1,.45-1.13,1.52,1.52,0,0,1,1.14-.46,1.43,1.43,0,0,1,1.32.71c.29.43,2.36,3,3.57,4.53L12.8,18.3V5.18a1.48,1.48,0,1,1,2.95,0V16.32h1.8v-13a1.51,1.51,0,0,1,3,0V16.45h1.8V6a1.43,1.43,0,1,1,2.85,0V17.44H27V8.54a1.33,1.33,0,0,1,2.65,0v5.55C29.62,20,29.14,24.21,28.18,27.12Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(0, 0);
    }

    /* 33.3% - Движение вверх: снова сжимаем и уходим вверх */
    33.3% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M28.09,9.74a4,4,0,0,0-1.16.19c-.19-1.24-1.55-2.18-3.27-2.18A4,4,0,0,0,22.13,8,3.37,3.37,0,0,0,19,6.3a3.45,3.45,0,0,0-2.87,1.32,3.65,3.65,0,0,0-1.89-.51A3.05,3.05,0,0,0,11,9.89v.91c-1.06.4-4.11,1.8-4.91,4.84s.34,8,2.69,11.78a25.21,25.21,0,0,0,5.9,6.41.9.9,0,0,0,.53.17H25.55a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13A25.8,25.8,0,0,0,31.41,18v-5.5A3.08,3.08,0,0,0,28.09,9.74ZM29.61,18a24,24,0,0,1-1.47,9.15A12.46,12.46,0,0,1,25.2,32.2H15.47a23.75,23.75,0,0,1-5.2-5.72c-2.37-3.86-3-8.23-2.48-10.39A5.7,5.7,0,0,1,11,12.76v7.65a.9.9,0,0,0,1.8,0V9.89c0-.47.59-1,1.46-1s1.49.52,1.49,1v5.72h1.8V8.81c0-.28.58-.71,1.46-.71s1.53.48,1.53.75v6.89h1.8V10l.17-.12a2.1,2.1,0,0,1,1.18-.32c.93,0,1.5.44,1.5.68l0,6.5H27V11.87a1.91,1.91,0,0,1,1.12-.33c.86,0,1.52.51,1.52.94Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(0, -30px);
    }

    /* 41.6% - Возвращение в центр: рука остаётся сжатой */
    41.6% {
        transform: translate(0, 0);
    }

    /* 50% - В центре: рука снова открывается */
    50% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M31.46,8.57A3.11,3.11,0,0,0,27,5.75a3.19,3.19,0,0,0-4.66-2.64,3.29,3.29,0,0,0-6.42-.76,3.23,3.23,0,0,0-1.66-.46A3.27,3.27,0,0,0,11,5.18V17.84c-1.28-1.6-2.53-3.18-2.72-3.45A3.19,3.19,0,0,0,5.56,12.9a3.37,3.37,0,0,0-3.47,3.48C2.18,18.18,5.66,24.54,8,28c3.54,5.24,6.92,6,7.07,6l.18,0H25.59a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13c1-3.09,1.53-7.53,1.58-13.56ZM28.18,27.12a12.46,12.46,0,0,1-2.94,5.08H15.33c-.47-.14-3.07-1.1-5.87-5.25S3.94,17.27,3.89,16.29a1.5,1.5,0,0,1,.45-1.13,1.52,1.52,0,0,1,1.14-.46,1.43,1.43,0,0,1,1.32.71c.29.43,2.36,3,3.57,4.53L12.8,18.3V5.18a1.48,1.48,0,1,1,2.95,0V16.32h1.8v-13a1.51,1.51,0,0,1,3,0V16.45h1.8V6a1.43,1.43,0,1,1,2.85,0V17.44H27V8.54a1.33,1.33,0,0,1,2.65,0v5.55C29.62,20,29.14,24.21,28.18,27.12Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(0, 0);
    }

    /* 58.3% - Движение вниз: сжимаем и уходим вниз */
    58.3% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M28.09,9.74a4,4,0,0,0-1.16.19c-.19-1.24-1.55-2.18-3.27-2.18A4,4,0,0,0,22.13,8,3.37,3.37,0,0,0,19,6.3a3.45,3.45,0,0,0-2.87,1.32,3.65,3.65,0,0,0-1.89-.51A3.05,3.05,0,0,0,11,9.89v.91c-1.06.4-4.11,1.8-4.91,4.84s.34,8,2.69,11.78a25.21,25.21,0,0,0,5.9,6.41.9.9,0,0,0,.53.17H25.55a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13A25.8,25.8,0,0,0,31.41,18v-5.5A3.08,3.08,0,0,0,28.09,9.74ZM29.61,18a24,24,0,0,1-1.47,9.15A12.46,12.46,0,0,1,25.2,32.2H15.47a23.75,23.75,0,0,1-5.2-5.72c-2.37-3.86-3-8.23-2.48-10.39A5.7,5.7,0,0,1,11,12.76v7.65a.9.9,0,0,0,1.8,0V9.89c0-.47.59-1,1.46-1s1.49.52,1.49,1v5.72h1.8V8.81c0-.28.58-.71,1.46-.71s1.53.48,1.53.75v6.89h1.8V10l.17-.12a2.1,2.1,0,0,1,1.18-.32c.93,0,1.5.44,1.5.68l0,6.5H27V11.87a1.91,1.91,0,0,1,1.12-.33c.86,0,1.52.51,1.52.94Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(0, 30px);
    }

    /* 66.6% - Возвращение в центр: рука сжата */
    66.6% {
        transform: translate(0, 0);
    }

    /* 75% - В центре: рука открывается */
    75% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M31.46,8.57A3.11,3.11,0,0,0,27,5.75a3.19,3.19,0,0,0-4.66-2.64,3.29,3.29,0,0,0-6.42-.76,3.23,3.23,0,0,0-1.66-.46A3.27,3.27,0,0,0,11,5.18V17.84c-1.28-1.6-2.53-3.18-2.72-3.45A3.19,3.19,0,0,0,5.56,12.9a3.37,3.37,0,0,0-3.47,3.48C2.18,18.18,5.66,24.54,8,28c3.54,5.24,6.92,6,7.07,6l.18,0H25.59a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13c1-3.09,1.53-7.53,1.58-13.56ZM28.18,27.12a12.46,12.46,0,0,1-2.94,5.08H15.33c-.47-.14-3.07-1.1-5.87-5.25S3.94,17.27,3.89,16.29a1.5,1.5,0,0,1,.45-1.13,1.52,1.52,0,0,1,1.14-.46,1.43,1.43,0,0,1,1.32.71c.29.43,2.36,3,3.57,4.53L12.8,18.3V5.18a1.48,1.48,0,1,1,2.95,0V16.32h1.8v-13a1.51,1.51,0,0,1,3,0V16.45h1.8V6a1.43,1.43,0,1,1,2.85,0V17.44H27V8.54a1.33,1.33,0,0,1,2.65,0v5.55C29.62,20,29.14,24.21,28.18,27.12Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(0, 0);
    }

    /* 83.3% - Движение вправо: сжимаем и уходим вправо */
    83.3% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M28.09,9.74a4,4,0,0,0-1.16.19c-.19-1.24-1.55-2.18-3.27-2.18A4,4,0,0,0,22.13,8,3.37,3.37,0,0,0,19,6.3a3.45,3.45,0,0,0-2.87,1.32,3.65,3.65,0,0,0-1.89-.51A3.05,3.05,0,0,0,11,9.89v.91c-1.06.4-4.11,1.8-4.91,4.84s.34,8,2.69,11.78a25.21,25.21,0,0,0,5.9,6.41.9.9,0,0,0,.53.17H25.55a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13A25.8,25.8,0,0,0,31.41,18v-5.5A3.08,3.08,0,0,0,28.09,9.74ZM29.61,18a24,24,0,0,1-1.47,9.15A12.46,12.46,0,0,1,25.2,32.2H15.47a23.75,23.75,0,0,1-5.2-5.72c-2.37-3.86-3-8.23-2.48-10.39A5.7,5.7,0,0,1,11,12.76v7.65a.9.9,0,0,0,1.8,0V9.89c0-.47.59-1,1.46-1s1.49.52,1.49,1v5.72h1.8V8.81c0-.28.58-.71,1.46-.71s1.53.48,1.53.75v6.89h1.8V10l.17-.12a2.1,2.1,0,0,1,1.18-.32c.93,0,1.5.44,1.5.68l0,6.5H27V11.87a1.91,1.91,0,0,1,1.12-.33c.86,0,1.52.51,1.52.94Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(30px, 0);
    }

    /* 91.6% - Возвращение в центр: рука сжата */
    91.6% {
        transform: translate(0, 0);
    }

    /* 100% - Завершение: рука открывается */
    100% {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M31.46,8.57A3.11,3.11,0,0,0,27,5.75a3.19,3.19,0,0,0-4.66-2.64,3.29,3.29,0,0,0-6.42-.76,3.23,3.23,0,0,0-1.66-.46A3.27,3.27,0,0,0,11,5.18V17.84c-1.28-1.6-2.53-3.18-2.72-3.45A3.19,3.19,0,0,0,5.56,12.9a3.37,3.37,0,0,0-3.47,3.48C2.18,18.18,5.66,24.54,8,28c3.54,5.24,6.92,6,7.07,6l.18,0H25.59a.92.92,0,0,0,.55-.19,13.13,13.13,0,0,0,3.75-6.13c1-3.09,1.53-7.53,1.58-13.56ZM28.18,27.12a12.46,12.46,0,0,1-2.94,5.08H15.33c-.47-.14-3.07-1.1-5.87-5.25S3.94,17.27,3.89,16.29a1.5,1.5,0,0,1,.45-1.13,1.52,1.52,0,0,1,1.14-.46,1.43,1.43,0,0,1,1.32.71c.29.43,2.36,3,3.57,4.53L12.8,18.3V5.18a1.48,1.48,0,1,1,2.95,0V16.32h1.8v-13a1.51,1.51,0,0,1,3,0V16.45h1.8V6a1.43,1.43,0,1,1,2.85,0V17.44H27V8.54a1.33,1.33,0,0,1,2.65,0v5.55C29.62,20,29.14,24.21,28.18,27.12Z' class='clr-i-outline clr-i-outline-path-1'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
        transform: translate(0, 0);
    }
}

.arrow.top {
    top: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.18179 8.81819C4.00605 8.64245 4.00605 8.35753 4.18179 8.18179L7.18179 5.18179C7.26618 5.0974 7.38064 5.04999 7.49999 5.04999C7.61933 5.04999 7.73379 5.0974 7.81819 5.18179L10.8182 8.18179C10.9939 8.35753 10.9939 8.64245 10.8182 8.81819C10.6424 8.99392 10.3575 8.99392 10.1818 8.81819L7.49999 6.13638L4.81819 8.81819C4.64245 8.99392 4.35753 8.99392 4.18179 8.81819Z' fill='%23333333'/%3E%3C/svg%3E");
}

.arrow.right {
    right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.18179 8.81819C4.00605 8.64245 4.00605 8.35753 4.18179 8.18179L7.18179 5.18179C7.26618 5.0974 7.38064 5.04999 7.49999 5.04999C7.61933 5.04999 7.73379 5.0974 7.81819 5.18179L10.8182 8.18179C10.9939 8.35753 10.9939 8.64245 10.8182 8.81819C10.6424 8.99392 10.3575 8.99392 10.1818 8.81819L7.49999 6.13638L4.81819 8.81819C4.64245 8.99392 4.35753 8.99392 4.18179 8.81819Z' fill='%23333333'/%3E%3C/svg%3E");
    transform: rotate(90deg);
}

.arrow.bottom {
    bottom: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.18179 8.81819C4.00605 8.64245 4.00605 8.35753 4.18179 8.18179L7.18179 5.18179C7.26618 5.0974 7.38064 5.04999 7.49999 5.04999C7.61933 5.04999 7.73379 5.0974 7.81819 5.18179L10.8182 8.18179C10.9939 8.35753 10.9939 8.64245 10.8182 8.81819C10.6424 8.99392 10.3575 8.99392 10.1818 8.81819L7.49999 6.13638L4.81819 8.81819C4.64245 8.99392 4.35753 8.99392 4.18179 8.81819Z' fill='%23333333'/%3E%3C/svg%3E");
    transform: rotate(180deg);
}

.arrow.left {
    left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.18179 8.81819C4.00605 8.64245 4.00605 8.35753 4.18179 8.18179L7.18179 5.18179C7.26618 5.0974 7.38064 5.04999 7.49999 5.04999C7.61933 5.04999 7.73379 5.0974 7.81819 5.18179L10.8182 8.18179C10.9939 8.35753 10.9939 8.64245 10.8182 8.81819C10.6424 8.99392 10.3575 8.99392 10.1818 8.81819L7.49999 6.13638L4.81819 8.81819C4.64245 8.99392 4.35753 8.99392 4.18179 8.81819Z' fill='%23333333'/%3E%3C/svg%3E");
    transform: rotate(-90deg);
}

.hand {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: handMovement 10s infinite;
}

/* анимированная рука конец */

/* конструктор начало */
.konstruktor {
    margin-bottom: 60px;
    position: relative;
}

.konstruktor__title {
    margin: 0;
    margin-bottom: 15px;
    font-family: 'Inter Variable';
    font-size: 32px;
    line-height: normal;
    color: #333;
    text-align: left;
    letter-spacing: unset;
}

p.konstruktor__text {
    margin: 0;
    margin-bottom: 50px;
    font-family: 'Inter Variable';
    font-size: 18px;
    line-height: normal;
    color: #333;
}

.konstruktor__wrapper {
    position: relative;
    display: flex;
    gap: 30px;
}

.konstruktor__block {
    max-width: 300px;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: auto hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
}

.konstruktor__controls {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.konstruktor__controls fieldset {
    padding: 15px;
    position: relative;
    border-radius: 7px;
    border: 1px solid #333;
}

.konstruktor__controls legend {
    padding: 0 10px 0 50px;
    position: relative;
    font-family: 'Inter Medium';
    font-size: 18px;
    line-height: normal;
    color: #333;
}

.konstruktor__controls legend::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 25px;
    height: 25px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.konstruktor__controls fieldset#size-fieldset legend::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_razmer.svg');
}

.konstruktor__controls fieldset#fence-fieldset legend::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_ograda.svg');
}

.konstruktor__controls fieldset#colorFence-fieldset legend::before,
.konstruktor__controls fieldset#colorSlab-fieldset legend::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_color.svg');
}

.konstruktor__controls fieldset#extras-fieldset legend::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_fon.svg');
}

.konstruktor__option-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.konstruktor__toggle-btn {
    padding: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
    white-space: nowrap;
    transition: .3s;
}

.konstruktor__toggle-btn span {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: rotate(-45deg);
}

#background-btn span {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    border-radius: 30px;
    vertical-align: top;
    background-color: #fff;
    transform: none;
    border: none;
    transition: .3s ease-in-out;
}

#background-btn span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #e6e8ee;
    transition: .3s ease-in-out;
}

#background-btn.active span::before {
    background-color: #333;
    transform: translate(30px, -50%);
}

.konstruktor__list {
    display: none;
    max-width: 300px;
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: 0;
    z-index: 1;
    padding: 15px;
    padding-right: 10px;
    border-radius: 7px;
    border: 1px solid #333;
    background-color: #fff;
}

.konstruktor__list.active {
    display: block;
}

p.konstruktor__descr {
    margin: 0;
    margin-bottom: 20px;
    padding-left: 40px;
    position: relative;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
}

p.konstruktor__descr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.0634 38.1437C29.8039 38.1437 37.7001 30.2475 37.7001 20.507C37.7001 10.7666 29.8039 2.87036 20.0634 2.87036C10.323 2.87036 2.42676 10.7666 2.42676 20.507C2.42676 30.2475 10.323 38.1437 20.0634 38.1437Z' stroke='%23333434' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M20.0917 28.2672C19.0758 28.2672 18.3704 29.0009 18.3704 30.0591C18.3704 31.1173 19.0617 31.851 20.0212 31.851C20.9806 31.851 21.7425 31.1314 21.7425 30.0591C21.7425 28.9868 21.0794 28.2672 20.0917 28.2672Z' fill='%23333434'/%3E%3Cpath d='M20.8677 24.5988L21.3474 8.31659H18.7795L19.2451 24.5988H20.8677Z' fill='%23333434'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

p.konstruktor__dscr {
    margin: 0;
    margin-top: 20px;
    font-family: 'Inter Variable';
    font-weight: bold;
    font-size: 14px;
    line-height: normal;
    color: #333;
}

.konstruktor__close {
    position: absolute;
    top: -25px;
    right: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
    position: absolute;
    cursor: pointer;
    padding: 0;
    border: none;
    background-color: transparent;
}

.konstruktor__close::before,
.konstruktor__close::after {
    content: 'свернуть';
    font-family: 'Inter Variable';
    font-size: 14px;
    line-height: normal;
    color: #333;
}

.konstruktor__close::after {
    content: '';
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/site/icons/icon-krest.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 10px;
    height: 10px;
    display: inline-block;
}

.konstruktor__buttons {
    padding-right: 5px;
    height: calc(100% - 140px);
    overflow: hidden auto;
    scrollbar-width: thin;
}

.konstruktor__btn {
    margin-bottom: 10px;
    padding: 15px;
    padding-left: 80px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
    white-space: nowrap;
}

.konstruktor__list[data-fieldset="colorFence-fieldset"] .konstruktor__btn::before,
.konstruktor__list[data-fieldset="colorSlab-fieldset"] .konstruktor__btn::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.konstruktor__list[data-fieldset="colorFence-fieldset"] .konstruktor__btn span,
.konstruktor__list[data-fieldset="colorSlab-fieldset"] .konstruktor__btn span {
    width: 20px;
    height: 20px;
    display: block;
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_plus.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image .3s ease-in-out;
}

.konstruktor__list[data-fieldset="colorFence-fieldset"] .konstruktor__btn.active,
.konstruktor__list[data-fieldset="colorSlab-fieldset"] .konstruktor__btn.active {
    background-color: #e6e8ef;
}

.konstruktor__list[data-fieldset="colorFence-fieldset"] .konstruktor__btn.active span,
.konstruktor__list[data-fieldset="colorSlab-fieldset"] .konstruktor__btn.active span {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_minus.svg');
    transition: background-image .3s ease-in-out;
}

.konstruktor__list[data-fieldset="colorFence-fieldset"] .konstruktor__btn.slab::before,
.konstruktor__list[data-fieldset="colorSlab-fieldset"] .konstruktor__btn.slab::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_plitka.png');
}

.konstruktor__list[data-fieldset="colorFence-fieldset"] .konstruktor__btn.fence::before,
.konstruktor__list[data-fieldset="colorSlab-fieldset"] .konstruktor__btn.fence::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_ograda.png');
}

.konstruktor__list[data-fieldset="fence-fieldset"] .konstruktor__btn {
    margin-bottom: 20px;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background-color: transparent;
}

.konstruktor__list[data-fieldset="fence-fieldset"] .konstruktor__btn .konstruktor__icon {
    margin: 0 auto;
    display: block;
    max-width: 200px;
    width: 100%;
}

.konstruktor__list[data-fieldset="fence-fieldset"] .konstruktor__btn div {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.konstruktor__list[data-fieldset="fence-fieldset"] .konstruktor__btn div span {
    display: none;
    position: absolute;
    right: 10px;
    top: calc(-100% - 10px);
    width: 20px;
    height: 15px;
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_galka_333.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.konstruktor__list[data-fieldset="fence-fieldset"] .konstruktor__btn.active div span {
    display: block;
}

.konstruktor__list[data-fieldset="size-fieldset"] .konstruktor__btn {
    padding: 10px 15px;
    justify-content: flex-start;
    background-color: transparent;
}

.konstruktor__list[data-fieldset="size-fieldset"] .konstruktor__btn.active span {
    width: 20px;
    height: 15px;
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_galka_333.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.konstruktor__values {
    margin: 20px 0;
    /* display: none; */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.konstruktor__list[data-fieldset="colorFence-fieldset"] .konstruktor__btn.active+.konstruktor__values,
.konstruktor__list[data-fieldset="colorSlab-fieldset"] .konstruktor__btn.active+.konstruktor__values {
    display: flex;
}

.konstruktor__value {
    padding: 15px;
    padding-left: 70px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
    white-space: nowrap;
}

.konstruktor__value span {
    display: none;
    width: 20px;
    height: 15px;
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/icon_galka.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.konstruktor__value.active {
    color: #ccc;
}

.konstruktor__value.active span {
    display: block;
}

.konstruktor__value::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.konstruktor__value.gabbro::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/gabbro.png');
}

.konstruktor__value.vinga::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/vinga.png');
}

.konstruktor__value.dym::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/dim.png');
}

.konstruktor__value.mansur::before {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/gb/mansur.png');
}

.konstruktor__mobile {
    margin-top: 20px;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.konstruktor__preview {
    position: relative;
    flex-grow: 1;
}

/* .konstruktor__filter {
    display: none;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012L5%204%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19%2020L19%2017%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%2020L5%2016%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19%2013L19%204%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%207L12%204%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%2020L12%2011%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2214%22%20r%3D%222%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2215%22%20r%3D%222%22%20stroke%3D%22%23222222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
} */

.konstruktor__preview-image {
    width: 100%;
    cursor: grab;
    border: 1px solid #333;
    border-radius: 7px;
    overflow: hidden;
}

.konstruktor__preview-image>iframe {
    display: block;
    width: 100%;
    height: 538px;
}

.konstruktor__actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.konstruktor__counter {
    padding: 15px 30px;
    background-color: #e6e8ef;
    border-radius: 7px;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
}

.konstruktor__counter span {
    font-weight: bold;
}

.konstruktor__limit-overlay {
    position: absolute;
    top: -25px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    font-size: 24px;
    font-family: 'Inter Medium';
    font-size: 21px;
    color: #333;
    text-align: center;
    user-select: none;
}

.konstruktor__limit-overlay>p {
    position: absolute;
    left: 335px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 335px);
}

.konstruktor__limit-overlay>p::before {
    content: '';
    position: absolute;
    left: calc(50% - 25px);
    top: -55px;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.0634 38.1437C29.8039 38.1437 37.7001 30.2475 37.7001 20.507C37.7001 10.7666 29.8039 2.87036 20.0634 2.87036C10.323 2.87036 2.42676 10.7666 2.42676 20.507C2.42676 30.2475 10.323 38.1437 20.0634 38.1437Z' stroke='%23333333' stroke-width='1.2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M20.0917 28.2672C19.0758 28.2672 18.3704 29.0009 18.3704 30.0591C18.3704 31.1173 19.0617 31.851 20.0212 31.851C20.9806 31.851 21.7425 31.1314 21.7425 30.0591C21.7425 28.9868 21.0794 28.2672 20.0917 28.2672Z' fill='%23333333'/%3E%3Cpath d='M20.8677 24.5988L21.3474 8.31659H18.7795L19.2451 24.5988H20.8677Z' fill='%23333333'/%3E%3C/svg%3E");
}

.konstruktor__link {
    padding: 15px 30px;
    display: block;
    position: relative;
    width: fit-content;
    background-color: #333;
    border-radius: 7px;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}

.konstruktor__link:hover {
    background-color: #df8844;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}

.konstruktor__link:active {
    background-color: #333;
    transition: background-color .3s ease-in-out;
}

/* конструктор конец */

/* gb-slider */
.gb-slider {
    margin-bottom: 60px;
}

.gb-slider__wrapper {
    display: flex;
    gap: 20px;
}

.gb-slider__content {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.gb-slider__box {
    padding: 7px 14px;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: 2px 4px 12.5px rgba(0, 0, 0, 0.25);
}

.gb-slider__box:last-child {
    background-color: #f5f5f5;
}

p.gb-slider__text {
    margin: 0;
    margin-bottom: 10px;
    font-family: 'Inter Medium';
    font-size: 21px;
    line-height: normal;
    color: #333;
}

.gb-slider__list {
    margin: 0;
    margin-left: 20px;
    padding: 0;
}

.gb-slider__list>li>p {
    margin: 0 0 10px;
    font-family: 'Inter Variable';
    font-size: 18px;
    line-height: normal;
    color: #333;
}

.gb-slider__media {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 32px;
}

.gb-slider__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.gb-slider__img {
    display: block;
    width: 50px;
}

.gb-slider__txt {
    width: min-content;
    font-family: 'Inter Medium';
    font-size: 16px;
    line-height: normal;
    color: #333;
}

.gb-slider__btn {
    margin: 0 auto;
    padding: 15px 25px;
    width: fit-content;
    background-color: #333;
}

.gb-slider__btn:hover {
    background-color: #df8844;
}

.gb-slider__btn:active {
    background-color: #333;
}

.gb-slider__slider {
    align-self: flex-start;
    position: relative;
    width: 100%;
    max-width: calc(50% - 10px);
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    overflow: hidden;
}

.gb-slider__slider figure {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/bg-after.png?v=1');
    background-color: #fff;
    background-size: cover;
    font-size: 0;
    height: 100%;
    margin: 0;
    position: relative;
    width: 100%;
}

#gb-slider-block {
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/bg-before.jpg?v=1');
    background-color: #fff;
    background-size: cover;
    bottom: 0;
    border-right: 5px solid #fff;
    height: 100%;
    max-width: 98.6%;
    min-width: 0.6%;
    overflow: visible;
    position: absolute;
    width: 50%;
    animation: first 2s 1 normal ease-in-out 0.1s;
}

input#gb-slider-slider {
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    left: 0;
    margin: 0;
    outline: none;
    padding: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

input#gb-slider-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1px;
    outline: none;
    cursor: pointer;
}

input#gb-slider-slider::-ms-tooltip {
    display: none;
}

#gb-slider-block::before {
    content: " ";
    float: right;
    height: 100%;
    margin-right: -34px;
    position: relative;
    top: 0;
    width: 64px;
}

#gb-slider-block::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -43px;
    transform: translateY(-50%);
    width: 81px;
    aspect-ratio: 79 / 44;
    background-color: #ffffff80;
    background-image: url('https://img.danila-master.ru/uploads/articlesImages/pages/classical-monuments/bg-arrow.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@keyframes first {
    0% {
        width: 0%;
    }

    50% {
        width: 80%;
    }

    100% {
        width: 50%;
    }
}

.gb__container {
    margin: 0 calc(50% - 50vw) 50px;
    background-color: #fff;
}

.gb__container.banner {
    padding-top: 60px;
}

.gb__container>.container {
    padding-right: 35px;
    padding-left: 35px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.gb__gallery-title {
    margin-bottom: 30px;
}

.gb__wrapper {
    width: 100%;
    position: relative;
    display: flex;
}

.gb__visual {
    width: 70%;
}

.gb__visual.mobile {
    display: none;
}

.gb__image {
    display: block;
    object-fit: contain;
}

.gb__content {
    width: fit-content;
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.gb__title {
    margin: 25px 0;
    position: relative;
    font-family: 'Inter Variable';
    font-size: 32px;
    line-height: normal;
    color: #333;
    text-align: left;
    text-transform: uppercase;
}

.gb__title span {
    font-size: 42px;
}

.gb__boxes {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.gb__box {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Inter Variable';
    font-size: 16px;
    line-height: normal;
    color: #333;
}

.gb__icon {
    width: 50px;
    aspect-ratio: 1 / 1;
    display: block;
}

.gb__button {
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    width: fit-content;
    padding: 12px 24px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
}

.gb__button:hover {
    background-color: #df8844;
}

.gb__button:active {
    background-color: #333;
    color: #fff;
}

/* support */
.gb-support__img {
    width: calc(50% - 15px);
    display: block;
    object-fit: contain;
    border-radius: 7px;
}

.gb-support__block {
    max-width: calc(50% - 15px);
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

p.gb-support__title {
    margin: 0;
    margin-bottom: 20px;
    font-family: 'Inter Variable';
    font-size: 32px;
    line-height: normal;
    color: #333;
    text-transform: uppercase;
}

.gb-support__video {
    display: block;
    max-width: calc(50% - 15px);
    width: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.gb-support__list {
    margin: 0;
    margin-top: auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gb-support__item {
    padding: 15px;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #f6f6f6;
    border-radius: 7px;
}

.gb-support__icon {
    min-width: 50px;
    aspect-ratio: 1 / 1;
    display: block;
}

.gb-support__item>div {
    display: flex;
    flex-direction: column;
    font-family: 'Inter Variable';
    font-weight: bold;
    font-size: 21px;
    line-height: normal;
    color: #333;
}

.gb-support__item>div>span {
    margin-top: 10px;
    font-weight: normal;
    font-size: 18px;
}

/* vip-form */
.vip-form__btn {
    margin-top: 20px;
    position: relative;
    padding: 15px 30px;
    width: calc(100% - 60px);
    background-color: #df8844;
    border-radius: 7px;
    font-family: 'Inter Variable';
    font-size: 18px;
    line-height: normal;
    color: #fff;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    transition: background-color .3s ease-in-out;
}

.vip-form__btn:hover {
    background-color: #df8844;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}

.vip-form__btn:active {
    background-color: #333;
    transition: background-color .3s ease-in-out;
}

.vip-form__btn::after {
    content: '';
    display: block;
    width: 20px;
    height: 200px;
    margin-left: 60px;
    background: #fff;
    opacity: 0.5;
    position: absolute;
    left: -40px;
    top: -100px;
    z-index: 1;
    transform: rotate(45deg);
    transition: all 0.1s;
    animation-name: slideme2;
    animation-duration: 5s;
    animation-delay: 0.05s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes slideme2 {
    0% {
        left: -30px;
        margin-left: 0px;
    }

    30% {
        left: 110%;
        margin-left: 80px;
    }

    100% {
        left: 110%;
        margin-left: 80px;
    }
}

@media screen and (max-width: 1366px) {
    .gb-banner__video {
        height: 90%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@media screen and (max-width: 1240px) {
    .gb-banner>.container {
        min-height: 600px;
    }

    /* gb-slider */
    .gb-slider__slider {
        max-width: 550px;
        align-self: center;
    }

    .gb-slider__wrapper {
        flex-direction: column;
        align-items: center;
    }

    .gb-slider__content {
        max-width: 550px;
        width: 100%;
    }

    .gb__gallery-title {
        text-align: center;
    }

    .gb-slider__btn {
        width: calc(100% - 50px);
    }
}

@media screen and (max-width: 1024px) {
    .gb-banner>.container {
        padding-top: 50px;
        padding-bottom: 25px;
        flex-direction: column;
        gap: 30px;
        min-height: auto;
    }

    .gb-banner__content {
        width: 100%;
        align-items: center;
    }

    .gb-banner__title {
        margin-bottom: 20px;
        max-width: 100%;
        text-align: center;
    }

    .gb-banner__phone {
        margin-bottom: 20px;
    }

    .gb-banner__video {
        display: none;
    }

    .vip-info__box {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .vip-info__image {
        display: none;
    }

    p.vip-info__text {
        text-align: center;
    }

    .vip-more__btn {
        margin: 0 auto;
    }

    .gb__container.banner {
        padding-top: 0;
    }

    .gb__visual {
        display: none;
        margin: 20px 0;
        width: 100%;
        max-width: 600px;
    }

    .gb__visual.mobile {
        display: block;
    }

    .gb__content {
        position: static;
        width: 100%;
        align-items: center;
    }

    .gb__title {
        text-align: center;
    }

    .gb__button {
        margin: 0 auto;
    }

    /* support */
    .gb__container>.container {
        flex-direction: column;
        align-items: center;
    }

    .gb__container>.container.reverse {
        flex-direction: column-reverse;
    }

    .gb-support__img {
        width: 70%;
    }

    .gb-support__video {
        max-width: 70%;
    }

    .gb-support__block {
        max-width: 100%;
    }

    p.gb-support__title {
        text-align: center;
    }

    .vip-form__btn {
        width: fit-content;
        margin: 20px auto 0;
    }
}

@media screen and (max-width: 992px) {
    .hand-animate {
        display: none;
    }

    /* конструктор начало */
    .konstruktor__wrapper {
        flex-direction: column;
        gap: 0;
    }

    /* .konstruktor__filter {
        display: block;
        top: 5px;
        left: 5px;
        z-index: 1;
    } */

    .konstruktor__block {
        max-width: 100%;
        /* width: calc(100% - 31px); */
        position: static;
        /* position: absolute;
        left: 1px;
        top: 60px;
        bottom: 1px;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: .3s ease-in-out; */
    }

    /* .konstruktor__block.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: .3s ease-in-out;
    } */

    .konstruktor__controls {
        padding: 15px 0;
        flex-direction: row;
        /* padding: 15px; */
        /* justify-content: center; */
        /* border-radius: 7px; */
        /* background-color: #fff; */
    }

    .konstruktor__controls .konstruktor__counter,
    .konstruktor__controls .konstruktor__link {
        display: none;
    }

    .konstruktor__controls fieldset {
        min-width: 250px;
        padding: 15px 0;
        border: none;
    }

    .konstruktor__list {
        top: 131px;
        left: -3px;
        right: -3px;
        max-width: 100%;
    }

    .konstruktor__buttons {
        height: calc(100% - 90px);
    }

    .konstruktor__close {
        right: 10px;
        top: 10px;
    }

    .konstruktor__mobile {
        display: flex;
    }

    .konstruktor__limit-overlay {
        top: -3px;
    }

    .konstruktor__limit-overlay>p {
        left: 50%;
        width: 100%;
        transform: translateX(-50%) translateY(-50%);
    }

    /* конструктор конец */
}

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

    /* бургер меню начало */
    :root {
        --gap: 135px;
    }

    /* бургер меню конец */
}

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

    /* бургер меню начало */
    .header__menu,
    .header__actions,
    .header__login {
        display: none !important;
    }

    .header__info {
        justify-content: center;
    }

    #main {
        margin-top: 130px;
    }

    :root {
        --gap: 130px;
    }

    .header__burger-btn {
        display: block;
    }

    .header__window-catalog {
        top: 130px;
    }

    /* бургер меню конец */

    .gb>.container,
    .gb-banner>.container,
    .vip-more>.container,
    .gb__container>.container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .gb-banner__title {
        font-size: 42px;
    }

    .gb-banner__title div {
        font-size: 21px;
    }
}

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

    /* бургер меню начало */
    #main {
        margin-top: 129px;
    }

    :root {
        --gap: 129px;
    }

    /* бургер меню конец */

    .gb-banner>.container {
        padding-top: 25px;
    }

    .gb-banner__title,
    .gb-banner__phone {
        font-size: 25px;
    }

    .gb-banner__title div {
        margin-top: 5px;
        font-size: 18px;
    }

    /* конструктор начало */
    .konstruktor .konstruktor__title {
        display: none;
    }

    .konstruktor__title {
        font-size: 21px;
        text-align: center;
    }

    p.konstruktor__text {
        margin-bottom: 30px;
        font-size: 18px;
    }

    .konstruktor__preview-image>iframe {
        height: 400px;
    }

    .konstruktor__list {
        padding-top: 40px;
    }

    .konstruktor__block {
        top: 50px;
    }

    .konstruktor__controls {
        gap: 10px;
    }

    /* .konstruktor__filter {
        width: 40px;
        height: 40px;
    } */

    .konstruktor__counter,
    .konstruktor__link {
        padding: 15px;
        width: calc(100% - 30px);
        text-align: center;
    }

    /* конструктор конец */

    /* gb-slider */
    p.gb-slider__text {
        font-size: 18px;
    }

    .gb-slider__list>li>p {
        font-size: 16px;
    }

    .gb__container {
        margin-bottom: 30px;
    }

    .gb__title {
        margin-bottom: 0;
        font-size: 21px;
    }

    .gb__title span {
        font-size: 32px;
    }

    .gb__boxes {
        display: none;
    }

    .gb__button {
        padding: 12px;
        width: calc(100% - 24px);
    }

    /* support */
    .gb-support__video {
        max-width: 100%;
    }

    .gb-support__img {
        width: 100%;
    }

    p.gb-support__title {
        font-size: 25px;
    }

    .gb-support__item>div {
        font-size: 18px;
    }

    .gb-support__item>div>span {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    p.vip-info__text {
        font-size: 21px;
    }

    p.vip-info__text span {
        font-size: 16px;
    }

    .konstruktor__buttons {
        height: calc(100% - 140px);
    }

    .vip-more__btn {
        padding: 15px;
        width: calc(100% - 30px);
    }

    /* support */
    .vip-form__btn {
        width: calc(100% - 60px);
    }
}

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

    /* бургер меню начало */
    :root {
        --gap: 125px;
    }

    #main {
        margin-top: 125px;
    }

    /* бургер меню конец */
}