/* Dentico Hero Slider (Elementor widget, child theme) */
.dh-slider {
	--dh-transition: 500ms;
	--dh-tab-color: #666;
	--dh-tab-active-color: #333;
	--dh-tab-line: #e5e5e5;
	--dh-tab-line-active: #f56600;
	--dh-tab-line-w: 4px;
	--dh-tab-gap: 16px;
	--dh-tabs-bg: #fff;
	--dh-tabs-justify: center;
	--dh-dot: #8b8f91;
	--dh-dot-active: #f56600;
	--dh-dot-size: 10px;
	--dh-dots-margin: 16px;
	position: relative;
	width: 100%;
}

/* Height follows the active slide (set by JS), animated like the slide itself. */
.dh-slider__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	transition: height var(--dh-transition) ease;
}

.dh-slider__track {
	display: flex;
	align-items: flex-start;
	width: 100%;
	transition: transform var(--dh-transition) ease;
	will-change: transform;
}

.dh-slider__slide {
	flex: 0 0 100%;
	min-width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	transition: visibility 0s linear var(--dh-transition);
}

.dh-slider__slide.is-active {
	visibility: visible;
	transition: none;
}

/* Tab bar (desktop) */
.dh-slider__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--dh-tabs-justify);
	gap: var(--dh-tab-gap);
	background: var(--dh-tabs-bg);
	padding: 16px;
	margin: 0;
}

.dh-slider__tab {
	cursor: pointer;
	user-select: none;
	background: none;
	border: 0;
	border-bottom: var(--dh-tab-line-w) solid var(--dh-tab-line);
	color: var(--dh-tab-color);
	font-family: "Barlow Semi Condensed", sans-serif;
	font-size: 20px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.3;
	text-transform: lowercase;
	text-align: center;
	padding: 8px 24px;
	transition: color .3s ease, border-color .3s ease;
}

/* Same step as the Elementor Widescreen breakpoint. */
@media (min-width: 1445px) {
	.dh-slider__tab {
		font-size: 25px;
	}
}

.dh-slider__tab:hover,
.dh-slider__tab:focus-visible,
.dh-slider__tab.is-active {
	border-bottom-color: var(--dh-tab-line-active);
	outline: none;
}

.dh-slider__tab.is-active {
	color: var(--dh-tab-active-color);
}

/* Dots (shown only below the widget's breakpoint, see inline media query) */
.dh-slider__dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: var(--dh-dots-margin) 0;
}

.dh-slider__dot {
	width: var(--dh-dot-size);
	height: var(--dh-dot-size);
	border-radius: 50%;
	background: var(--dh-dot);
	cursor: pointer;
	transition: background-color .3s ease;
}

.dh-slider__dot.is-active {
	background: var(--dh-dot-active);
}

@media (prefers-reduced-motion: reduce) {
	.dh-slider__viewport,
	.dh-slider__track,
	.dh-slider__slide {
		transition: none;
	}
}