<!--Зумирование стрелки-->
<style>
/*Настройки кнопки*/
:root {
    --ZoomColor: #ffd583; /*цвет круга*/
    --TextColorZoomHover: #000; /*цвет текста по наведению*/
    --ImgZoom: url(https://static.tildacdn.one/tild6434-6637-4362-b763-373735626631/Frame_6757785.png), url(https://static.tildacdn.one/tild6434-6637-4362-b763-373735626631/Frame_6757785.png); /*изображение стрелки*/
    
}
.arrow-zoom:hover .tn-atom {
    background: transparent !important;
    transition: all 1.2s cubic-bezier(0.84, -0.01, 0.25, 0.99) !important;
}

    .arrow-zoom .tn-atom__button-content {
        overflow: hidden !important;
        position: relative;
        transition-delay: 0.7s !important;
        width: 100%;
        height: 100%;
        margin: 0;
        transition: all 1.1s ease-in-out, color 0.2s ease-in-out, background 0s ease-in-out, border-color 1.2s ease-in-out !important;
    }
    .arrow-zoom .tn-atom__button-content:after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 40px;
        height: 40px;
        align-items: center;
        right: 5px;
        border-radius: 1000px;
        background-color: var(--ZoomColor);
        background-size: cover; 
            top: 50%;
    transform: translateY(-50%);
        transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    }
    
    
   

    
.arrow-zoom .tn-atom__button-content:before {
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
    background-image: var(--ImgZoom);
    background-position: -12px 0px, 0px 0px;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
   right: 18px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    position: absolute;
    z-index: 9;
    
    
}

@keyframes buttonArrow-2 {
    0% {
        
        background-position: -12px 0px, 0px 0px;
    }
    100% {
        background-position: 0px 0px, 12px 0;
    }
}

.arrow-zoom:hover .tn-atom__button-content:before {
    animation-name: buttonArrow-2;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.84, -0.01, 0.25, 0.99);
    opacity: 1;
}

    
    .arrow-zoom:hover .tn-atom__button-content:after {
    width: 110%;
        height: 110%;
        right:0;
    transition: all 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99);
    }
    
    
    
    
    
    .arrow-zoom .tn-atom {
        overflow: hidden;
    }
    .arrow-zoom .tn-atom__button-content div {
    display: inline-block;
    z-index: 1;
    right: 10px;
    position: relative;
    transition: color 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
     margin-right: 15px;
    }
    .arrow-zoom:hover .tn-atom__button-content div {
        color: var(--TextColorZoomHover);
    }
    
    /*.arrow-zoom:hover .tn-atom__button-content {*/
    /*    background: #fff555 !important;*/
    /*    transition: background 3.3s ease-in-out !important;*/
    /*}*/
    
    
</style>

<script>
    $('.arrow-zoom-2').addClass('arrow-zoom');
</script>


<script>
    var btnzoom = document.querySelectorAll('.arrow-zoom .tn-atom__button-content');
    btnzoom.forEach(function(btnzoom) {
        var divZoom = document.createElement('div');
        divZoom.textContent = btnzoom.textContent;
        var fontSize = window.getComputedStyle(btnzoom).fontSize;
        divZoom.style.fontSize = fontSize;
        btnzoom.innerHTML = '';
        btnzoom.appendChild(divZoom);
    });
</script>