/* Divi Hero Slider – front end */
.dhs-slider {
	--dhs-bg: #b9dde3;
	--dhs-accent: #4fb3c4;
	--dhs-ink: #1f2a30;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--dhs-bg);
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, .22) 25%, transparent 25%),
		linear-gradient(225deg, rgba(255, 255, 255, .14) 25%, transparent 25%),
		linear-gradient(45deg, rgba(0, 0, 0, .03) 25%, transparent 25%),
		linear-gradient(315deg, rgba(0, 0, 0, .02) 25%, transparent 25%);
	background-size: 140px 140px;
	background-position: 0 0, 70px 0, 70px -70px, 0 70px;
	line-height: 1.4;
}
.dhs-slider *, .dhs-slider *::before, .dhs-slider *::after { box-sizing: border-box; }

/* Image area */
.dhs-slider .dhs-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: rgba(0, 0, 0, .06);
}
.dhs-slider .dhs-img-wrap {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.dhs-slider .dhs-img-wrap.is-active { opacity: 1; z-index: 1; }
.dhs-slider .dhs-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Overlapping white card */
.dhs-slider .dhs-card {
	position: relative;
	z-index: 3;
	margin: -6px 7% 0 7%;
	padding: 18px 28px 26px;
	background: #fff;
	border-top: 3px solid var(--dhs-accent);
	box-shadow: 0 6px 18px rgba(20, 60, 70, .14);
}
.dhs-slider .dhs-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid #e4e8ea;
}
.dhs-slider .dhs-counter {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #5b676d;
}
.dhs-slider .dhs-dots { display: flex; gap: 8px; }
.dhs-slider button.dhs-dot {
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	border: 1px solid #9aa6ab;
	border-radius: 50%;
	background: transparent;
	color: #4b565c;
	font-size: 10px;
	line-height: 18px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background .25s, border-color .25s;
	box-shadow: none;
}
.dhs-slider button.dhs-dot:hover { border-color: var(--dhs-accent); }
.dhs-slider button.dhs-dot.is-active {
	background: var(--dhs-bg);
	border-color: var(--dhs-bg);
	color: #1f2a30;
}
.dhs-slider button.dhs-dot:focus-visible,
.dhs-slider .dhs-btn:focus-visible { outline: 2px solid var(--dhs-accent); outline-offset: 2px; }

/* Stacked slide content (grid keeps card height = tallest slide) */
.dhs-slider .dhs-contents { display: grid; }
.dhs-slider .dhs-content {
	grid-area: 1 / 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s;
}
.dhs-slider .dhs-content.is-active { opacity: 1; visibility: visible; }
.dhs-slider .dhs-title {
	flex: 1 1 auto;
	max-width: 68%;
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--dhs-ink);
}

/* Buttons */
.dhs-slider a.dhs-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 9px 14px;
	background: var(--dhs-bg);
	color: #1c3a44;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	border: 0;
	transition: background .25s, color .25s;
}
.dhs-slider a.dhs-btn:hover { background: var(--dhs-accent); color: #fff; }
.dhs-slider .dhs-arrow { flex: 0 0 auto; }
.dhs-slider a.dhs-btn-light { background: rgba(255, 255, 255, .6); }
.dhs-slider a.dhs-btn-light:hover { background: #fff; color: #1c3a44; }

/* Footer bar */
.dhs-slider .dhs-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 34px 7% 40px;
}
.dhs-slider .dhs-footer-empty { padding: 20px 0 0; }
.dhs-slider .dhs-footer-title {
	margin: 0;
	padding: 0;
	max-width: 60%;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--dhs-ink);
}

/* Responsive */
@media (max-width: 767px) {
	.dhs-slider .dhs-media { aspect-ratio: 4 / 3; }
	.dhs-slider .dhs-card { margin: -6px 16px 0; padding: 14px 18px 20px; }
	.dhs-slider .dhs-content { flex-direction: column; align-items: flex-start; gap: 16px; }
	.dhs-slider .dhs-title { max-width: 100%; font-size: 18px; }
	.dhs-slider .dhs-footer { flex-direction: column; align-items: flex-start; padding: 26px 16px 30px; }
	.dhs-slider .dhs-footer-title { max-width: 100%; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.dhs-slider .dhs-img-wrap, .dhs-slider .dhs-content { transition: none; }
}