/* ===================================================================
   MOYO — About page styling
   File: solvior-child/inc/pages/about/about-us.css

   Page-scoped: enqueued only on the About page by this module's init.php.
   =================================================================== */

/* "WHY CLIENTS CHOOSE MOYO" — the tj-team carousel holds a SINGLE card,
   so Swiper leaves it left-aligned with empty space to the right.
   Center the lone slide. Scoped to this section's container (data-id
   aa5ae8a) so other carousels are untouched. If more cards are added
   later this still reads fine (centers the group; full rows unaffected). */
.elementor-element-aa5ae8a .swiper-wrapper {
	justify-content: center;
}

/* Brand strip subtitle ("Join the 1000+ companies …"): the theme draws a
   horizontal line on each side via .sec-heading::before / ::after. Remove
   both — keep the pill text only. */
.tj-brand-section-two .sec-heading::before,
.tj-brand-section-two .sec-heading::after {
	display: none !important;
}

/* ---- Brand logo marquee (driven by about-us.js / Web Animations API) ----
   Swiper autoplay freezes here (hidden-init + WOW.js jank), so JS rebuilds
   this strip as a continuous marquee. These rules give the track its flex
   layout + per-logo spacing (Swiper's destroy() strips the inline widths)
   and force the logos fully visible (the theme greys/fades them). */
.tj-brand-slider .swiper {
	overflow: hidden;
}

.tj-brand-slider .moyo-marquee-track {
	display: flex;
	width: max-content;
	align-items: center;
	will-change: transform;
}

.tj-brand-slider .moyo-marquee-track .swiper-slide {
	flex: 0 0 auto;
	width: auto;
	margin-right: 50px;
}

.tj-brand-slider .brand-logo img {
	opacity: 1 !important;
	filter: none !important;
}

/* Uniform logo tiles — fixed box, soft frosted backdrop, logo centered. */
.brand-slider-1 .brand-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 195px;
	height: 200px;
	background: rgba(247, 247, 247, 0.1);
	padding: 20px;
}

/* Mobile — shrink tile (else our 200px height overrides theme's 60px). */
@media (max-width: 575px) {
	.brand-slider-1 .brand-logo {
		width: 165px;
		height: 165px;
	}
}

/* Brand section container — drop its padding so the dark strip hugs the
   logos. Stable selector: the Elementor container that directly holds the
   tj-brand-carousel widget (via :has()), NOT the volatile element id. */
.e-con:has( > .elementor-widget-tj-brand-carousel ) {
	padding: 0 !important;
}