/* ==========================================================================
   CAPCO Trusted by Global Brands — Client Logo Section
   Pure CSS, no JavaScript
   ========================================================================== */

.capco-brands-section {
	font-family: "Mukta", Sans-serif;
	background: #ffffff;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

/* Reset breakout when inside .capco-news-wrap (which already breaks out) */
.capco-news-wrap .capco-brands-section {
	margin-left: 0;
	margin-right: 0;
}

.capco-brands-inner {
	max-width: 1270px;
	margin: 0 auto;
	text-align: center;
}

/* — Heading — */
.capco-brands-heading {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #2D2A2A;
	margin: 0 0 8px;
	line-height: 1.2;
}

.capco-brands-subheading {
	font-size: 1rem;
	color: #6b7280;
	margin: 0 0 48px;
	line-height: 1.6;
	font-weight: 400;
}

/* — Logo Marquee — */
.capco-brands-logos {
	overflow: hidden;
	position: relative;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 80px, #000 calc(100% - 80px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.capco-brands-track {
	display: flex;
	align-items: center;
	gap: 48px;
	width: max-content;
	animation: capcoMarquee 40s linear infinite;
}

.capco-brands-logos:hover .capco-brands-track {
	animation-play-state: paused;
}

.capco-brands-set {
	display: flex;
	align-items: center;
	gap: 48px;
	flex-shrink: 0;
}

.capco-brand-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.capco-brand-item img {
	height: 44px!important;
	width: auto;
	max-width: 180px!important;
	object-fit: contain;
	opacity: 0.7;
	filter: grayscale(100%);
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.capco-brand-item img:hover {
	opacity: 1;
	filter: grayscale(0%);
	transform: scale(1.05);
}

@keyframes capcoMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* — Responsive: Tablet — */
@media (max-width: 1024px) {

	.capco-brands-subheading {
		margin-bottom: 36px;
	}

	.capco-brands-track,
	.capco-brands-set {
		gap: 36px;
	}

	.capco-brand-item img {
		height: 38px;
		max-width: 150px;
	}

	.capco-brands-logos {
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%);
	}
}

/* — Responsive: Mobile — */
@media (max-width: 640px) {

	.capco-brands-heading {
		font-size: 1.35rem;
	}

	.capco-brands-subheading {
		font-size: 0.9rem;
		margin-bottom: 28px;
	}

	.capco-brands-track,
	.capco-brands-set {
		gap: 24px;
	}

	.capco-brand-item img {
		height: 34px;
		max-width: 130px;
	}

	.capco-brands-logos {
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100%);
	}
}

/* — Reduced Motion — */
@media (prefers-reduced-motion: reduce) {
	.capco-brands-track {
		animation: none !important;
	}

	.capco-brand-item img {
		transition: none !important;
	}

	.capco-brand-item img:hover {
		transform: none !important;
	}
}
