.wr-animate {
    --wr-animation-duration: 700ms;
    --wr-animation-delay: 0ms;
    --wr-animation-distance: 50px;
    --wr-animation-distance-negative: -50px;
    --wr-animation-easing: ease-out;
    --wr-animation-order-delay: 0ms;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: calc(var(--wr-animation-delay) + var(--wr-animation-order-delay));
    transition-duration: var(--wr-animation-duration);
    transition-property: opacity, transform;
    transition-timing-function: var(--wr-animation-easing);
    will-change: opacity, transform;
}

.wr-animation-fade:not(.wr-animation-active),
.wr-animation-fade-up:not(.wr-animation-active),
.wr-animation-fade-down:not(.wr-animation-active),
.wr-animation-fade-left:not(.wr-animation-active),
.wr-animation-fade-right:not(.wr-animation-active),
.wr-animation-scale-in:not(.wr-animation-active),
.wr-animation-scale-out:not(.wr-animation-active) {
    opacity: 0;
}

.wr-animation-fade-up:not(.wr-animation-active),
.wr-animation-slide-up:not(.wr-animation-active) {
    transform: translate3d(0, var(--wr-animation-distance), 0) scale(1);
}

.wr-animation-fade-down:not(.wr-animation-active),
.wr-animation-slide-down:not(.wr-animation-active) {
    transform: translate3d(0, var(--wr-animation-distance-negative), 0) scale(1);
}

.wr-animation-fade-left:not(.wr-animation-active),
.wr-animation-slide-left:not(.wr-animation-active) {
    transform: translate3d(var(--wr-animation-distance-negative), 0, 0) scale(1);
}

.wr-animation-fade-right:not(.wr-animation-active),
.wr-animation-slide-right:not(.wr-animation-active) {
    transform: translate3d(var(--wr-animation-distance), 0, 0) scale(1);
}

.wr-animation-scale-in:not(.wr-animation-active) {
    transform: translate3d(0, 0, 0) scale(var(--wr-animation-initial-scale, 0.85));
}

.wr-animation-scale-out:not(.wr-animation-active) {
    transform: translate3d(0, 0, 0) scale(var(--wr-animation-initial-scale, 1.15));
}

.elementor-editor-active .wr-animate:not(.wr-animation-preview-pending) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .wr-animate {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        transition: none;
    }
}

.wr-transform {
    --wr-transform-duration: 300ms;
    --wr-transform-easing: ease;
    --wr-transform-hover-rotate: 0deg;
    --wr-transform-hover-scale: 1;
}

.wr-transform:not(.wr-animate) {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    transition-duration: var(--wr-transform-duration);
    transition-property: transform;
    transition-timing-function: var(--wr-transform-easing);
    will-change: transform;
}

.wr-transform .elementor-button {
    transition-duration: var(--wr-transform-duration);
    transition-property: background-color, border-color, color, padding, transform;
    transition-timing-function: var(--wr-transform-easing);
}

.wr-transform-scale:hover,
.wr-transform-scale:focus-within {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--wr-transform-hover-scale));
}

.wr-transform-rotate:hover,
.wr-transform-rotate:focus-within {
    animation: wr-transform-hover-rotate var(--wr-transform-duration) var(--wr-transform-easing);
}

.wr-transform-rotate-scale:hover,
.wr-transform-rotate-scale:focus-within {
    animation: wr-transform-hover-rotate-scale var(--wr-transform-duration) var(--wr-transform-easing) forwards;
}

.wr-transform:hover .elementor-button,
.wr-transform:focus-within .elementor-button {
    padding: var(--wr-transform-button-padding-top) var(--wr-transform-button-padding-right) var(--wr-transform-button-padding-bottom) var(--wr-transform-button-padding-left);
}

@media (prefers-reduced-motion: reduce) {
    .wr-transform,
    .wr-transform .elementor-button {
        transition: none;
    }

    .wr-transform-rotate:hover,
    .wr-transform-rotate:focus-within,
    .wr-transform-rotate-scale:hover,
    .wr-transform-rotate-scale:focus-within {
        animation: none;
    }
}

@keyframes wr-transform-hover-rotate {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    to {
        transform: translate3d(0, 0, 0) rotate(var(--wr-transform-hover-rotate)) scale(1);
    }
}

@keyframes wr-transform-hover-rotate-scale {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    to {
        transform: translate3d(0, 0, 0) rotate(var(--wr-transform-hover-rotate)) scale(var(--wr-transform-hover-scale));
    }
}