/* Client Logos Optimization - Uniform Sizing and Visibility */

/* Style images directly in continuous scroll section */
.tt-moving-images.tt-mi-continuous-scroll .tt-mi-item {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 5px !important;
	margin: 0 2px !important;
	transition: transform 0.3s ease;
	flex-shrink: 0 !important;
	min-width: 300px;
	width: 25vw !important;
	height: auto;
	position: relative !important;
}

/* Style images with proper sizing - override theme.css */
.tt-moving-images.tt-mi-continuous-scroll .tt-mi-item img {
	position: relative !important;
	object-fit: contain !important;
	object-position: center center !important;
	width: auto !important;
	height: auto !important;
	max-width: 350px !important;
	max-height: 180px !important;
	min-width: 250px !important;
	border-radius: 0 !important;
	transition: transform 0.3s ease, opacity 0.3s ease;
	display: block !important;
	top: auto !important;
	left: auto !important;
	margin: 0 auto;
	opacity: 1 !important;
	visibility: visible !important;
	aspect-ratio: auto;
}

/* Hover effect for better interactivity */
.tt-moving-images.tt-mi-continuous-scroll .tt-mi-item:hover img {
	transform: scale(1.05);
	opacity: 0.9;
}

/* Responsive adjustments for continuous scroll - maintain visibility on smaller screens */
@media (max-width: 991px) {
	.tt-moving-images.tt-mi-continuous-scroll .tt-mi-item {
		padding: 4px !important;
		margin: 0 2px !important;
		min-width: 250px;
		width: 28vw !important;
	}

	.tt-moving-images.tt-mi-continuous-scroll .tt-mi-item img {
		max-width: 280px !important;
		max-height: 140px !important;
		min-width: 200px !important;
		border-radius: 0 !important;
	}
}

@media (max-width: 600px) {
	.tt-moving-images.tt-mi-continuous-scroll .tt-mi-item {
		padding: 3px !important;
		margin: 0 1px !important;
		min-width: 200px;
		width: 30vw !important;
	}

	.tt-moving-images.tt-mi-continuous-scroll .tt-mi-item img {
		max-width: 220px !important;
		max-height: 110px !important;
		min-width: 150px !important;
		border-radius: 0 !important;
	}
}

/* Infinite Scrolling Animation for Collaborations Section */
/* ====================================================== */
.tt-moving-images.tt-mi-infinite-scroll {
	overflow: hidden;
	position: relative;
	width: 100%;
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.tt-moving-images.tt-mi-infinite-scroll .tt-mi-scroll-wrapper {
	display: inline-flex;
	animation: scroll-logos 30s linear infinite;
	will-change: transform;
}

/* Pause animation on hover for better visibility */
.tt-moving-images.tt-mi-infinite-scroll:hover .tt-mi-scroll-wrapper {
	animation-play-state: paused;
}

/* Keyframe animation for continuous scrolling */
@keyframes scroll-logos {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Ensure uniform sizing for infinite scroll items */
.tt-moving-images.tt-mi-infinite-scroll .tt-mi-item {
	width: 18vw !important;
	min-width: 200px;
	flex-shrink: 0;
}

/* Center alignment for infinite scroll */
.tt-moving-images.tt-mi-infinite-scroll .tt-mi-list {
	align-items: center;
	display: inline-flex;
}

/* Responsive adjustments for infinite scroll */
@media (max-width: 991px) {
	.tt-moving-images.tt-mi-infinite-scroll .tt-mi-item {
		width: 25vw !important;
		min-width: 180px;
	}

	.tt-moving-images.tt-mi-infinite-scroll .tt-mi-scroll-wrapper {
		animation-duration: 25s;
	}
}

@media (max-width: 600px) {
	.tt-moving-images.tt-mi-infinite-scroll .tt-mi-item {
		width: 35vw !important;
		min-width: 150px;
	}

	.tt-moving-images.tt-mi-infinite-scroll .tt-mi-scroll-wrapper {
		animation-duration: 20s;
	}
}

/* Continuous Scrolling Animation for Collaborations Section */
/* ====================================================== */
/* Override theme.css width constraint */
.tt-moving-images.tt-mi-continuous-scroll {
	width: 100% !important;
	max-width: 100% !important;
}

/* Bottom row: moves from right to left */
.tt-moving-images.tt-mi-continuous-scroll.tt-mi-bottom {
	overflow: hidden !important;
	position: relative;
	margin-top: 150px !important;
	mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.tt-moving-images.tt-mi-continuous-scroll.tt-mi-bottom .tt-mi-list {
	display: inline-flex !important;
	animation: scroll-right-to-left 60s linear infinite !important;
	will-change: transform;
	white-space: nowrap;
	width: max-content;
}

/* Top row: moves from left to right */
.tt-moving-images.tt-mi-continuous-scroll.tt-mi-top {
	overflow: hidden !important;
	position: relative;
	width: 100% !important;
	margin-bottom: 150px !important;
	mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.tt-moving-images.tt-mi-continuous-scroll.tt-mi-top .tt-mi-list {
	display: inline-flex !important;
	animation: scroll-left-to-right 60s linear infinite !important;
	will-change: transform;
	white-space: nowrap;
	width: max-content;
}

/* Keyframe animation for bottom row (right to left) */
@keyframes scroll-right-to-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Keyframe animation for top row (left to right) */
@keyframes scroll-left-to-right {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

/* Pause animation on hover for better visibility */
.tt-moving-images.tt-mi-continuous-scroll:hover .tt-mi-list {
	animation-play-state: paused;
}

/* Override theme.css width constraints for continuous scroll */
.tt-moving-images.tt-mi-continuous-scroll.tt-mi-bottom .tt-mi-item:nth-child(n),
.tt-moving-images.tt-mi-continuous-scroll.tt-mi-top .tt-mi-item:nth-child(n) {
	width: 25vw !important;
	min-width: 300px;
	padding: 5px !important;
	margin: 0 2px !important;
}

/* Responsive adjustments for continuous scroll */
@media (max-width: 991px) {
	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-bottom {
		margin-top: 120px !important;
	}

	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-top {
		margin-bottom: 120px !important;
	}

	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-bottom .tt-mi-list,
	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-top .tt-mi-list {
		animation-duration: 50s;
	}
}

@media (max-width: 600px) {
	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-bottom {
		margin-top: 100px !important;
	}

	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-top {
		margin-bottom: 100px !important;
	}

	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-bottom .tt-mi-list,
	.tt-moving-images.tt-mi-continuous-scroll.tt-mi-top .tt-mi-list {
		animation-duration: 45s;
	}
}