/* Clients Carousel Section */
.clients-carousel-section {
	overflow: hidden;
	background: #f8f9fa;
	border-radius: 0.5rem;
	padding: 2rem 0;
}

.clients-carousel-container {
	overflow: hidden;
	position: relative;
}

.clients-carousel {
	display: flex;
	gap: 2rem;
	padding: 1rem 0;
	animation: scroll-left 30s linear infinite;
	width: max-content;
}

.carousel-logo-item {
	flex: 0 0 auto;
	width: 120px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	border-radius: 0.5rem;
	padding: 1rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

	.carousel-logo-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	}

.carousel-logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.carousel-logo-item:hover .carousel-logo-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* Infinite scroll animation */
@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* Pause animation on hover for better UX */
.clients-carousel-container:hover .clients-carousel {
	animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.carousel-logo-item {
		width: 100px;
		height: 70px;
		gap: 1.5rem;
	}

	.clients-carousel {
		gap: 1.5rem;
		animation: scroll-left 25s linear infinite;
	}
}

@media (max-width: 576px) {
	.carousel-logo-item {
		width: 80px;
		height: 60px;
		padding: 0.75rem;
	}

	.clients-carousel {
		gap: 1rem;
		animation: scroll-left 20s linear infinite;
	}

	.clients-carousel-section {
		padding: 1.5rem 0;
	}
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: prefer-reduced-motion) {
	.clients-carousel {
		animation: none;
	}

	.carousel-logo-item {
		transition: none;
	}
}