.isi-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	background-color: transparent;
	display: flex;
	justify-content: center;
}

.isi-track {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* The gap here is set via Elementor settings */
}

.isi-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* The gap here is set via Elementor settings */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.isi-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.elementor-widget-infinite_scrolling_images_ba503996 {
	--scroll-gap: 20px; /* Fallback, overridden by Elementor control */
}

/* 
 * The perfect loop logic:
 * We animate each .isi-list. 
 * Since .isi-track has gap, and .isi-list has the exact same gap,
 * one full list plus the gap between lists is exactly -100% - gap.
 */

.isi-dir-up {
	animation-name: isi-scroll-up;
}

.isi-dir-down {
	animation-name: isi-scroll-down;
}

@keyframes isi-scroll-up {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(calc(-100% - var(--scroll-gap)));
	}
}

@keyframes isi-scroll-down {
	0% {
		transform: translateY(calc(-100% - var(--scroll-gap)));
	}
	100% {
		transform: translateY(0);
	}
}