.aos.skip-animation {
    transition: none !important;
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.aos {
    opacity: 0;
    transition:
            opacity var(--aos-speed, 1s) var(--aos-easing, ease-out) var(--aos-delay, 0s),
            transform var(--aos-speed, 1s) var(--aos-easing, ease-out) var(--aos-delay, 0s);
    will-change: opacity, transform;
}

.aos.none {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.aos.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Use --aos-distance for direction translations */
.fade-in-top {
    transform: translateY(calc(-1 * var(--aos-distance, 20px)));
}
.fade-in-top.is-visible {
    transform: translateY(0);
}

.fade-in-right {
    transform: translateX(var(--aos-distance, 20px));
}
.fade-in-right.is-visible {
    transform: translateX(0);
}

.fade-in-bottom {
    transform: translateY(var(--aos-distance, 20px));
}
.fade-in-bottom.is-visible {
    transform: translateY(0);
}

.fade-in-left {
    transform: translateX(calc(-1 * var(--aos-distance, 20px)));
}
.fade-in-left.is-visible {
    transform: translateX(0);
}