/*------------------------------------------------*\
    Improve Elementor Animations
\*------------------------------------------------*/

/*------ Fades: Directional ------*/

/* FadeInDown */
@keyframes kgFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -12px, 0); /* Less movement than default */
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.elementor-element .animated.fadeInDown {
    animation-name: kgFadeInDown !important; /* Ensure this takes precedence */
}

/* FadeInLeft */
@keyframes kgFadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-12px, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.elementor-element .animated.fadeInLeft {
    animation-name: kgFadeInLeft !important;
}

/* FadeInRight */
@keyframes kgFadeInRight {
    from {
        opacity: 0;
        transform: translate3d(12px, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.elementor-element .animated.fadeInRight {
    animation-name: kgFadeInRight !important;
}

/* FadeInUp */
@keyframes kgFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.elementor-element .animated.fadeInUp {
    animation-name: kgFadeInUp !important;
}