/* ==========================================================================
   JHR Slides — Elementor Free replica of the Pro "Slides" widget
   ========================================================================== */

.jhr-slides {
	position: relative;
	width: 100%;
	--jhr-slides-speed: 500ms;
}

.jhr-slides__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 400px;
}

.jhr-slides__track {
	position: relative;
	display: flex;
	height: 100%;
	width: 100%;
	will-change: transform;
}

.jhr-slides__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	height: 400px;
	overflow: hidden;
	background-color: transparent;
}

/* ----------------------------- Backgrounds ------------------------------ */

.jhr-slides__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
	overflow: hidden;
}

/* The slide image is a real element rather than a CSS background so the browser
   can start fetching it from the raw HTML. Selector is deliberately specific:
   themes commonly set `img { height: auto }`, which would break object-fit. */
.jhr-slides .jhr-slides__bg .jhr-slides__bg-img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	object-fit: cover;
	object-position: center center;
}

/* Global overlay — printed on every slide, sits between the slide background
   and the per-slide overlay so the two can be stacked. */
.jhr-slides__bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
}

/* Per-slide overlay, from the slide's own Background tab. */
.jhr-slides__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
}

/* Ken Burns */
.jhr-slides__slide--kenburns .jhr-slides__bg {
	transition: transform 20s linear;
}

.jhr-slides__slide--kenburns-in .jhr-slides__bg {
	transform: scale(1);
}

.jhr-slides__slide--kenburns-in.is-active .jhr-slides__bg {
	transform: scale(1.3);
}

.jhr-slides__slide--kenburns-out .jhr-slides__bg {
	transform: scale(1.3);
}

.jhr-slides__slide--kenburns-out.is-active .jhr-slides__bg {
	transform: scale(1);
}

/* ------------------------------- Content -------------------------------- */

.jhr-slides__inner {
	position: relative;
	z-index: 4;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
}

.jhr-slides__content {
	position: relative;
	width: 66%;
	max-width: 100%;
	text-align: center;
	color: #ffffff;
}

.jhr-slides__title {
	margin: 0 0 15px;
	font-size: 35px;
	line-height: 1.2;
	color: inherit;
}

.jhr-slides__description {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}

.jhr-slides__title:last-child,
.jhr-slides__description:last-child {
	margin-bottom: 0;
}

/* -------------------------------- Button -------------------------------- */

.jhr-slides__button {
	border: 0 solid transparent;
	background-color: transparent;
	color: inherit;
	border-color: currentColor;
	border-style: solid;
	border-width: 1px;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: color .2s, background-color .2s, border-color .2s;
	font-family: inherit;
}

.jhr-slides__button:hover,
.jhr-slides__button:focus,
.jhr-slides__button:visited {
	text-decoration: none;
}

.jhr-slides__button.elementor-size-xs {
	font-size: 13px;
	padding: 10px 20px;
	border-radius: 2px;
}

.jhr-slides__button.elementor-size-sm {
	font-size: 15px;
	padding: 12px 24px;
	border-radius: 3px;
}

.jhr-slides__button.elementor-size-md {
	font-size: 16px;
	padding: 15px 30px;
	border-radius: 4px;
}

.jhr-slides__button.elementor-size-lg {
	font-size: 18px;
	padding: 20px 40px;
	border-radius: 5px;
}

.jhr-slides__button.elementor-size-xl {
	font-size: 20px;
	padding: 25px 50px;
	border-radius: 6px;
}

/* ---------------------------- Wrapper / links --------------------------- */

.jhr-slides__wrapper-link,
.jhr-slides__slide-link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	text-decoration: none;
}

/* "Whole Slide" links sit above the content, mirroring Elementor Pro: in that
   mode the button is rendered as a div, so nothing underneath needs clicks. */
.jhr-slides__slide-link {
	z-index: 6;
}

/* The wrapper link covers the whole slider, so anything inside a slide that
   needs its own click target has to be lifted above it. In slide mode the
   slides are z-index:auto, so this wins outright; in fade mode the active
   slide is z-index:2 and later in the DOM, so it wins on tree order. */
.jhr-slides__wrapper-link {
	z-index: 2;
}

.jhr-slides__content a,
.jhr-slides__content .jhr-slides__button {
	position: relative;
	z-index: 5;
}

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

.jhr-slides__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
	opacity: .9;
	transition: opacity .2s;
	-webkit-appearance: none;
	appearance: none;
}

.jhr-slides__arrow:hover,
.jhr-slides__arrow:focus {
	opacity: 1;
	background: transparent;
	color: inherit;
}

.jhr-slides__arrow.is-disabled {
	opacity: .35;
	cursor: default;
}

.jhr-slides__arrow i {
	font-size: inherit;
	line-height: 1;
}

.jhr-slides__arrow--prev {
	left: 10px;
}

.jhr-slides__arrow--next {
	right: 10px;
}

/* Arrows outside: pad the wrapper in, then sit the arrows in that gutter. */
.jhr-slides-arrows-outside .jhr-slides--nav-both,
.jhr-slides-arrows-outside .jhr-slides--nav-arrows {
	padding-left: 50px;
	padding-right: 50px;
}

.jhr-slides-arrows-outside .jhr-slides__arrow--prev {
	left: 0;
}

.jhr-slides-arrows-outside .jhr-slides__arrow--next {
	right: 0;
}

/* ----------------------------- Pagination -------------------------------- */

.jhr-slides__pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	z-index: 10;
}

/* Outside: reserve a fixed gutter under the viewport and drop the dots into
   it. The gutter height is fixed, so the arrows can be nudged back up by
   half of it and stay centred on the slide rather than on the wrapper. */
.jhr-slides-dots-outside .jhr-slides--nav-both,
.jhr-slides-dots-outside .jhr-slides--nav-dots {
	padding-bottom: 30px;
}

.jhr-slides-dots-outside .jhr-slides__pagination {
	bottom: 0;
}

.jhr-slides-dots-outside .jhr-slides--nav-both .jhr-slides__arrow {
	margin-top: -15px;
}

.jhr-slides__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .5);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s, transform .2s;
}

.jhr-slides__dot.is-active {
	background-color: #ffffff;
	transform: scale(1.15);
}

.jhr-slides-dots-outside .jhr-slides__dot {
	background-color: rgba(0, 0, 0, .25);
}

.jhr-slides-dots-outside .jhr-slides__dot.is-active {
	background-color: rgba(0, 0, 0, .6);
}

/* ------------------------- Fade transition mode -------------------------- */

.jhr-slides--transition-fade .jhr-slides__track {
	display: block;
}

.jhr-slides--transition-fade .jhr-slides__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--jhr-slides-speed, 500ms) ease-in-out, visibility var(--jhr-slides-speed, 500ms);
	z-index: 1;
}

.jhr-slides--transition-fade .jhr-slides__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Keep the first slide painted before the script runs, so fade sliders do not
   flash an empty box on load. Dropped the moment the slider takes over. */
.jhr-slides--transition-fade:not(.jhr-slides--initialized) .jhr-slides__slide:first-child {
	opacity: 1;
	visibility: visible;
}

/* --------------------------- Content animation --------------------------- */

.jhr-slides__content--animated {
	opacity: 0;
}

.jhr-slides__slide.is-active .jhr-slides__content--animated {
	opacity: 1;
}

.jhr-slides__content--animated.jhr-anim-fadeInUp {
	animation: jhrSlidesFadeInUp .8s both;
}

.jhr-slides__content--animated.jhr-anim-fadeInDown {
	animation: jhrSlidesFadeInDown .8s both;
}

.jhr-slides__content--animated.jhr-anim-fadeInLeft {
	animation: jhrSlidesFadeInLeft .8s both;
}

.jhr-slides__content--animated.jhr-anim-fadeInRight {
	animation: jhrSlidesFadeInRight .8s both;
}

.jhr-slides__content--animated.jhr-anim-zoomIn {
	animation: jhrSlidesZoomIn .8s both;
}

@keyframes jhrSlidesFadeInUp {
	from { opacity: 0; transform: translate3d(0, 40px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes jhrSlidesFadeInDown {
	from { opacity: 0; transform: translate3d(0, -40px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes jhrSlidesFadeInLeft {
	from { opacity: 0; transform: translate3d(-40px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes jhrSlidesFadeInRight {
	from { opacity: 0; transform: translate3d(40px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes jhrSlidesZoomIn {
	from { opacity: 0; transform: scale3d(.7, .7, .7); }
	to   { opacity: 1; transform: none; }
}

/* -------------------------------- Misc ----------------------------------- */

.jhr-slides.is-dragging .jhr-slides__track {
	transition: none !important;
	cursor: grabbing;
}

.jhr-slides__slide:focus-visible,
.jhr-slides__arrow:focus-visible,
.jhr-slides__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.jhr-slides__track,
	.jhr-slides__slide,
	.jhr-slides__bg,
	.jhr-slides__content--animated {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}

/* ------------------------- Full-width breakout ---------------------------- */

/* Applied by the "Stretch to Full Width" switcher. Deliberately CSS-only: a
   JS-driven stretch can only run once the page has rendered, which is exactly
   what produces a boxed-then-full-width jump. `overflow-x: clip` on html stops
   100vw from triggering a horizontal scrollbar when a vertical one is present,
   and unlike `hidden` it does not break position: sticky elsewhere. */
/* !important is deliberate. Inside an Elementor container the widget is a flex
   item and Elementor sets `width: var(--container-widget-width, 100%)` via
   `.e-con > .elementor-widget`, which outranks a single class. Without this the
   width stays at the container width while the negative margin still applies —
   the slider shifts left and leaves a gap on the right. */
.jhr-slides-stretch-yes {
	width: 100vw !important;
	max-width: 100vw !important;
	flex-shrink: 0;
	flex-basis: auto;
	align-self: stretch;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Elementor's "Stretch Section" is applied by JavaScript from the footer, so the
   section renders at its boxed width and is widened afterwards — a visible jump.
   This pre-empts it with the same result in CSS, scoped to sections that
   actually contain a slider. Elementor's inline styles land on top later and
   compute to the same geometry, so nothing moves. */
.elementor-section-stretched:has(.jhr-slides) {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 100vw includes the scrollbar; clip stops that becoming a horizontal
   scrollbar. `clip` rather than `hidden` so position: sticky still works. */
html:has(.jhr-slides-stretch-yes),
html:has(.elementor-section-stretched .jhr-slides) {
	overflow-x: clip;
}

/* ------------------------------ Button icon ------------------------------- */

/* Two classes on purpose. Elementor's `.elementor-button { display:inline-block }`
   lives in widget-button.min.css, which Elementor loads AFTER this file — at
   equal specificity it would win on source order, the button would stop being a
   flex box, and both `gap` (Icon Spacing) and any flex ordering would silently
   do nothing. This selector outranks it regardless of load order. */
.jhr-slides .jhr-slides__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Icon order is set in the markup, not with row-reverse — see render(). Adding
   a reversal here as well would flip it straight back. */
.jhr-slides__button-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: transform var(--jhr-icon-speed, .3s) ease;
}

/* --------------------- Icon hover animations ----------------------------- */

/* Two-class selectors so Elementor's later-loading button CSS can't outrank
   these. The shift distance and duration come from the panel as custom
   properties, with the defaults below used when the controls are untouched. */
.jhr-slides .jhr-slides__button--icon-anim-slide-right:hover .jhr-slides__button-icon,
.jhr-slides .jhr-slides__button--icon-anim-slide-right:focus-visible .jhr-slides__button-icon {
	transform: translateX(var(--jhr-icon-shift, 6px));
}

.jhr-slides .jhr-slides__button--icon-anim-slide-left:hover .jhr-slides__button-icon,
.jhr-slides .jhr-slides__button--icon-anim-slide-left:focus-visible .jhr-slides__button-icon {
	transform: translateX(calc(var(--jhr-icon-shift, 6px) * -1));
}

/* Horizontal shifts follow reading direction, so they flip under RTL. */
[dir="rtl"] .jhr-slides .jhr-slides__button--icon-anim-slide-right:hover .jhr-slides__button-icon {
	transform: translateX(calc(var(--jhr-icon-shift, 6px) * -1));
}

[dir="rtl"] .jhr-slides .jhr-slides__button--icon-anim-slide-left:hover .jhr-slides__button-icon {
	transform: translateX(var(--jhr-icon-shift, 6px));
}

.jhr-slides .jhr-slides__button--icon-anim-slide-up:hover .jhr-slides__button-icon,
.jhr-slides .jhr-slides__button--icon-anim-slide-up:focus-visible .jhr-slides__button-icon {
	transform: translateY(calc(var(--jhr-icon-shift, 6px) * -1));
}

.jhr-slides .jhr-slides__button--icon-anim-slide-down:hover .jhr-slides__button-icon,
.jhr-slides .jhr-slides__button--icon-anim-slide-down:focus-visible .jhr-slides__button-icon {
	transform: translateY(var(--jhr-icon-shift, 6px));
}

.jhr-slides .jhr-slides__button--icon-anim-grow:hover .jhr-slides__button-icon,
.jhr-slides .jhr-slides__button--icon-anim-grow:focus-visible .jhr-slides__button-icon {
	transform: scale(1.25);
}

.jhr-slides .jhr-slides__button--icon-anim-rotate:hover .jhr-slides__button-icon,
.jhr-slides .jhr-slides__button--icon-anim-rotate:focus-visible .jhr-slides__button-icon {
	transform: rotate(45deg);
}

.jhr-slides .jhr-slides__button--icon-anim-bounce:hover .jhr-slides__button-icon,
.jhr-slides .jhr-slides__button--icon-anim-bounce:focus-visible .jhr-slides__button-icon {
	animation: jhrSlidesIconBounce var(--jhr-icon-speed, .3s) ease infinite alternate;
}

@keyframes jhrSlidesIconBounce {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--jhr-icon-shift, 6px)); }
}

@media (prefers-reduced-motion: reduce) {
	.jhr-slides__button-icon {
		transition: none;
		animation: none !important;
	}
}

.jhr-slides__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.jhr-slides__button-icon i {
	line-height: 1;
}