@import "../../../../themes/recast2025/style.css";

.our-clients {
	padding: var(--margins-base-vert, 100px) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--gap-l, 32px);
}

.our-clients__header-wrapper {
	padding: 0 var(--margins-base-hori, 100px);
}

.our-clients__header {
	text-align: center;
	max-width: var(--global-maxwidth-maxwidth-s, 600px);
	display: flex;
	flex-direction: column;
	gap: var(--gap-m, 24px);
}

.our-clients__title {
	margin: 0;
}

.our-clients__title span {
	color: var(--primary-recast-blue, #0372ff);
}

.our-clients__intro {
	color: var(--neutrals-black, #161f5b);
	font-weight: 300;
}

.our-clients__slider-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.our-clients__slider-container:before,
.our-clients__slider-container:after {
	position: absolute;
	top: 0;
	width: 128px;
	height: 100%;
	content: "";
	z-index: 2;
}

.our-clients__slider-container:before {
	left: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--neutrals-white, #ffffff));
	pointer-events: none;
}

.our-clients__slider-container:after {
	right: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--neutrals-white, #ffffff));
	pointer-events: none;
}

/* Swiper Overrides */
.our-clients__slider .swiper-slide {
	max-width: 250px;
}

/* Swiper styling for smooth operation */
.our-clients__slider .swiper-wrapper {
	transition-timing-function: linear;
	gap: var(--gap-m, 24px) !important;
}

.our-clients__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 250px;
	height: 187.5px;
	transition: transform 0.3s ease-out;
	transform: scale(1.001);
}

.our-clients__logo:hover {
	transform: scale(1.2);
	transform-origin: center;
}

.our-clients__logo img {
	position: absolute;
	display: block;
	height: 165px;
	width: 220px;
	filter: none;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.2s linear;
}

.our-clients__logo.active img.mono {
	opacity: 0;
}
.our-clients__logo.active img.color {
	opacity: 1;
}	

.our-clients__logo img.color {
	opacity: 0;
}

@media (max-width: 600px) {
	.our-clients__header {
		max-width: initial;
	}
}