/* Custom fixes on top of the mirrored WordPress/Elementor styles. */

/* Hero: drop the faint dashboard-chart background so it stops clashing with the heading text. */
.elementor-24 .elementor-element.elementor-element-2ced8c3::before,
.elementor-24 .elementor-element.elementor-element-2ced8c3 > .elementor-background-video-container::before,
.elementor-24 .elementor-element.elementor-element-2ced8c3 > .e-con-inner > .elementor-background-video-container::before,
.elementor-24 .elementor-element.elementor-element-2ced8c3 > .elementor-background-slideshow::before,
.elementor-24 .elementor-element.elementor-element-2ced8c3 > .e-con-inner > .elementor-background-slideshow::before,
.elementor-24 .elementor-element.elementor-element-2ced8c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
	background-image: none !important;
}

/* Testimonials: the coverflow widget fans 5 fixed-300px cards, which overlap into a messy,
   tilted pile once the viewport is narrower than that fan (mobile and tablet widths).
   Show only the current card up through tablet breakpoints. */
@media (max-width: 1024px) {
	/* The widget's own box is only 76% of its column width and was never centered itself -
	   invisible in the original design because the fanned-out cards visually filled that gap
	   anyway. With just one narrow card now, the leftover space on the right became obvious. */
	.elementor-24 .elementor-element.elementor-element-9ad2785 {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.flipster__item:not(.flipster__item--current) {
		display: none !important;
	}
	.flipster__item--current {
		position: static !important;
		display: block !important;
		left: 0 !important;
		top: 0 !important;
		transform: none !important;
		width: 100% !important;
		max-width: 340px !important;
		margin: 0 auto !important;
	}
	.flipster__item--current .flipster__item__content {
		width: 100% !important;
	}
	.flipster ul.flip-items {
		transform: none !important;
		width: 100% !important;
		height: auto !important;
		flex: 1 0 100% !important;
	}
	/* The arrows default to absolute-positioned at the far left/right edge of the whole
	   widget, which made sense when cards filled that width. Now that only one centered
	   card shows, lay the widget out as a flex column so the (now full-width) card wraps
	   onto its own row and the two arrows fall onto the next row, centered as a pair
	   directly under it - regardless of how wide the card itself ends up rendering. */
	.flipster.ue-coverflow {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		overflow: visible !important;
		height: auto !important;
	}
	.flipster__button,
	.elementor-24 .elementor-element.elementor-element-9ad2785 .flipster__button {
		position: static !important;
		margin: 16px 8px 0 !important;
	}
}