:root {
	--marquee-width: min(80vw, 60rem);  /* 48rem = 3xl */
	--marquee-height: 3rem; /* h-12 = 3rem */
	--marquee-logo-gap: 2rem;  /* Fixed distance between logos */
	--marquee-element-width: 6rem;  /* Fixed width for each logo */
	--marquee-animation-duration: calc(var(--marquee-li-count) * 3s);
	--marquee-animation-duration-reverse: calc(var(--marquee-li-count-reverse) * 3s);
}

.marquee {
	width: var(--marquee-width);
	height: var(--marquee-height);
	overflow: hidden;
	position: relative;
}
.marquee-content {
	list-style: none;
	height: 100%;
	display: flex;
	animation: scrolling var(--marquee-animation-duration) linear infinite;
	gap: var(--marquee-logo-gap);  /* Add gap between logos */
}

/* Style for the reverse scrolling marquee */
.marquee-content-reverse {
	animation: scrolling-reverse var(--marquee-animation-duration-reverse) linear infinite;
}

/* .marquee-content:hover {
animation-play-state: paused;
} */
@keyframes scrolling {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-1 * (var(--marquee-element-width) + var(--marquee-logo-gap)) * var(--marquee-li-count))); }
}

/* Animation for reverse scrolling (left to right) */
@keyframes scrolling-reverse {
	0% { transform: translateX(calc(-1 * (var(--marquee-element-width) + var(--marquee-logo-gap)) * var(--marquee-li-count-reverse))); }
	100% { transform: translateX(0); }
}

.marquee-content li {
	display: flex;
	justify-content: center;
	align-items: center;
	/* text-align: center; */
	flex-shrink: 0;
	width: var(--marquee-element-width);
	max-height: 100%;
	font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
	white-space: nowrap;
}

.marquee-content li img {
	width: 100%;
}

/* Match Tailwind's lg breakpoint (1024px) */
@media (min-width: 1024px) {
    :root {
        --marquee-height: 5rem; /* h-20 = 5rem */
		--marquee-element-width: 10rem;  /* Fixed width for each logo */
		--marquee-logo-gap: 3rem;  /* Fixed distance between logos */
}
}