.em-slider {
	position: relative;
	overflow: hidden;
}

/* Breaks out of the Elementor container to span the viewport.
   --em-viewport-width is set from documentElement.clientWidth, which excludes
   the scrollbar; 100vw does not, and the difference shows up as a horizontal
   scrollbar. The vw values are the no-JS fallback. */
.em-slider--full-width {
	width: var(--em-viewport-width, 100vw);
	margin-inline: calc(50% - var(--em-viewport-width, 100vw) / 2);
}

.em-slider__container {
	width: 100%;
	height: 100%;
}

.em-slider__slide {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	height: 600px;
}

/* Scoped through .em-slider__slide to outrank Elementor's `.elementor img
   { height: auto }`, which otherwise collapses the image to its natural
   aspect ratio and leaves the lower part of the slide empty. */
.em-slider__slide .em-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.em-slider__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(11, 26, 41, .5);
}

.em-slider__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	width: 100%;
	max-width: 780px;
	padding: 40px 24px;
	color: #fff;
}

.em-slider__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
	line-height: 1.15;
}

.em-slider__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
}

.em-slider__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.em-slider__button--primary {
	padding: 18px 36px;
	background-color: #005556;
	border-radius: 50px;
	color: #fff;
}

.em-slider__button--primary:hover,
.em-slider__button--primary:focus-visible {
	background-color: #00403f;
}

/* Underlined text link, not a boxed button. */
.em-slider__button--secondary {
	padding: 4px 2px;
	background-color: transparent;
	border-bottom: 2px solid #fff;
	border-radius: 0;
	color: #fff;
}

.em-slider__button--secondary:hover,
.em-slider__button--secondary:focus-visible {
	opacity: .75;
}

.em-slider__button:focus-visible,
.em-slider__arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Arrows ----------------------------------------------------------------- */

.em-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background-color: rgba(0, 0, 0, .25);
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 160ms ease;
}

.em-slider__arrow:hover {
	background-color: rgba(0, 0, 0, .5);
}

.em-slider__arrow--prev {
	inset-inline-start: 24px;
}

.em-slider__arrow--next {
	inset-inline-end: 24px;
}

/* The buttons already swap sides in RTL through the logical offsets above, but
   the glyphs are fixed paths. Mirroring them keeps each arrow pointing in its
   direction of travel. Applied to the svg, not the button, which uses its own
   transform for vertical centring. */
[dir="rtl"] .em-slider__arrow svg {
	transform: scaleX(-1);
}

.em-slider__arrow.swiper-button-disabled {
	opacity: .35;
	pointer-events: none;
}

/* Dots ------------------------------------------------------------------- */

.em-slider__pagination {
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 2;
	width: 100%;
	text-align: center;
}

.em-slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background-color: #fff;
	opacity: .45;
	transition: opacity 160ms ease, transform 160ms ease;
}

.em-slider .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.25);
}

.em-slider__empty {
	padding: 2rem;
	background-color: #f6f8fa;
	border: 1px dashed #c3ccd6;
	border-radius: 6px;
	color: #5c6b7a;
	text-align: center;
}

@media (max-width: 767px) {
	.em-slider__arrow {
		width: 40px;
		height: 40px;
	}

	.em-slider__arrow--prev {
		inset-inline-start: 10px;
	}

	.em-slider__arrow--next {
		inset-inline-end: 10px;
	}

	.em-slider__actions {
		width: 100%;
	}

	.em-slider__button--primary {
		padding: 16px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.em-slider__button,
	.em-slider__arrow,
	.em-slider .swiper-pagination-bullet {
		transition: none;
	}
}