.dilumek-brands__track-wrap {
	--dilumek-navy-dark: #061d3c;
	--dilumek-white: #ffffff;
	--dilumek-title-font: "League Gothic", Impact, sans-serif;
	background: var(--dilumek-navy-dark);
	box-sizing: border-box;
	overflow: hidden;
	padding-block: clamp(28px, 4vw, 44px);
	position: relative;
	width: 100%;
}

.dilumek-brands__track-wrap *,
.dilumek-brands__track-wrap *::before,
.dilumek-brands__track-wrap *::after {
	box-sizing: inherit;
}

.dilumek-brands__track-wrap::before,
.dilumek-brands__track-wrap::after {
	content: "";
	inline-size: 110px;
	inset-block: 0;
	position: absolute;
	z-index: 2;
}

.dilumek-brands__track-wrap::before {
	background: linear-gradient(90deg, var(--dilumek-navy-dark), rgba(6, 29, 60, 0));
	inset-inline-start: 0;
}

.dilumek-brands__track-wrap::after {
	background: linear-gradient(270deg, var(--dilumek-navy-dark), rgba(6, 29, 60, 0));
	inset-inline-end: 0;
}

.dilumek-brands__track {
	align-items: center;
	animation: dilumek-marquee var(--dilumek-marquee-duration, 28s) linear infinite;
	display: flex;
	gap: clamp(32px, 6vw, 78px);
	inline-size: max-content;
	padding-inline: 40px;
}

.dilumek-brands__track-wrap:hover .dilumek-brands__track {
	animation-play-state: paused;
}

.dilumek-brands__track-wrap .dilumek-brand-card {
	align-items: center;
	color: var(--dilumek-white);
	display: flex;
	font-family: var(--dilumek-title-font);
	font-size: clamp(2.3rem, 5vw, 4.5rem);
	letter-spacing: 0.035em;
	line-height: 1;
	min-block-size: 82px;
	min-inline-size: 160px;
	opacity: 0.95;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.dilumek-brands__track-wrap .dilumek-brand-card img {
	block-size: auto;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
	max-block-size: 78px;
	max-inline-size: 210px;
	object-fit: contain;
}

.dilumek-brands__track-wrap .dilumek-brand-card:hover,
.dilumek-brands__track-wrap .dilumek-brand-card:focus-visible {
	color: var(--dilumek-white);
	opacity: 1;
}

@keyframes dilumek-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dilumek-brands__track {
		animation: none;
	}
}

@media (max-width: 767px) {
	.dilumek-brands__track-wrap::before,
	.dilumek-brands__track-wrap::after {
		inline-size: 56px;
	}
}
