/* Container to limit the scroll width */
.logo-container {
	--logo-width: 200px;
	--logo-height: 100px;
	--gap: calc(var(--logo-width) / 14);
	--duration: 30s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));

	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: auto;
	max-width: 100vw;
    margin-bottom: 75px; 
}

/* Scrolling area */
.logo-scroll {
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	mask-image: linear-gradient(
		to right,
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 30%,
		hsl(0 0% 0% / 1) 70%,
		hsl(0 0% 0% / 0)
	);
}
.logo-scroll__wrapper {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll var(--duration) linear infinite;
}

.logo-scroll__wrapper:nth-child(even) {
	margin-left: calc(var(--logo-width) / -2);
}

.logo-scroll__wrapper:hover {
	animation-play-state: paused; /* Pause animation on hover */
}

/* Logo styling */
.logo-item {
	width: var(--logo-width); /* Adjust for logo size */
	height: var(--logo-height); /* Adjust for logo size */
	transition: transform 0.5s; /* Smooth scaling effect */
	/* background-color: blue; */
    background-color: rgba(0,0,0,0.1);
	border-radius: 4px;
}

.logo-scroll .logo-item:hover {
	transform: scale(1.05); /* Scale logo on hover */
}

/* Infinite scroll animation */
@keyframes scroll {
	from {
		transform: translateX(var(--scroll-start));
	}
	to {
		transform: translateX(var(--scroll-end));
	}
}