/* Start custom CSS for html, class: .elementor-element-b950ca8 */const rotateX =
            ((y - centerY) / centerY) * -5;


        card.style.transform =
            perspective(1400px)
             rotateX(${rotateX}deg)
             rotateY(${rotateY}deg);


        product.style.transform =
            translateZ(50px)
             rotateY(${-10 + rotateY * .8}deg)
             rotateX(${2 + rotateX * .5}deg);


        card.style.setProperty(
            '--mouse-x',
            x + 'px'
        );

        card.style.setProperty(
            '--mouse-y',
            y + 'px'
        );

    });


    /* ==============================
       RESET
    ============================== */

    card.addEventListener('mouseleave', function() {

        card.style.transform =
            'perspective(1400px) rotateX(0deg) rotateY(0deg)';

        product.style.transform =
            'translateZ(50px) rotateY(-10deg) rotateX(2deg)';

    });


    /* ==============================
       MOBILE TOUCH
    ============================== */

    let startX = 0;

    card.addEventListener(
        'touchstart',
        function(e) {

            if (!e.touches[0]) return;

            startX =
                e.touches[0].clientX;

        },
        {passive:true}
    );


    card.addEventListener(
        'touchmove',
        function(e) {

            if (!e.touches[0]) return;

            const currentX =
                e.touches[0].clientX;

            const difference =
                currentX - startX;

            const rotate =
                Math.max(
                    -7,
                    Math.min(7, difference / 12)
                );

            product.style.transform =
                translateZ(50px)
                 rotateY(${-10 + rotate}deg)
                 rotateX(2deg);

        },
        {passive:true}
    );


})();

</script>/* End custom CSS */