.animated-arrow-wrapper {
    display: inline-block;
    width: 100%;
}

.animated-arrow-svg, .animated-arrow-img {
    display: inline-block;
    vertical-align: middle;
    transform-origin: center center;
    transition: transform 0.3s ease;
    max-width: 100%;
    height: auto;
}

/* Bounce pointing direction (Down & Right focus) */
.anim-bounce_pointing svg, .anim-bounce_pointing img {
    animation: arrowBouncePointing 2s infinite ease-in-out;
}

@keyframes arrowBouncePointing {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(8px, 8px) scale(1.05);
    }
}

/* Float Up & Down */
.anim-float svg, .anim-float img {
    animation: arrowFloat 2.5s infinite ease-in-out;
}

@keyframes arrowFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Pulse animation */
.anim-pulse svg, .anim-pulse img {
    animation: arrowPulse 2s infinite ease-in-out;
}

@keyframes arrowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Loop Left to Right (Step forward and back) */
.anim-loop_left_right svg, .anim-loop_left_right img {
    animation: arrowLeftRight 1.5s infinite ease-in-out;
}

@keyframes arrowLeftRight {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(15px);
    }
}

/* Loop Right to Left (Step forward and back) */
.anim-loop_right_left svg, .anim-loop_right_left img {
    animation: arrowRightLeft 1.5s infinite ease-in-out;
}

@keyframes arrowRightLeft {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-15px);
    }
}