/* Dextra Home Slider */

.dhs-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 16 / 6;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
	.dhs-slider {
		aspect-ratio: 4 / 5;
	}
}

.dhs-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.dhs-slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	will-change: transform, opacity;
}

.dhs-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
}

.dhs-slide.is-entering,
.dhs-slide.is-exiting {
	visibility: visible;
	pointer-events: none;
}

.dhs-slide.is-entering {
	z-index: 1;
	animation: dhs-piece-underlay-in 1900ms ease-out both;
}

.dhs-slide.is-exiting {
	z-index: 2;
}

.dhs-slide.is-exiting.to-left {
	animation: dhs-piece-out-left 1900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.dhs-slide.is-exiting.to-right {
	animation: dhs-piece-out-right 1900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Forty-eight small triangular pieces reveal the next image with a soft shade.
 * Each piece reaches the exact full-image position and colour before the single
 * layer fades away, leaving a clean image with no split or zoom handoff. */
.dhs-shard-transition {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
}

.dhs-shard-transition.is-playing {
	visibility: visible;
	animation: dhs-shard-layer-finish 1900ms ease-out both;
}

.dhs-shard {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	clip-path: var(--dhs-clip);
	-webkit-clip-path: var(--dhs-clip);
	will-change: transform, opacity, filter;
}

.dhs-shard-transition.is-next.is-playing .dhs-shard {
	animation: dhs-piece-in-right 1100ms cubic-bezier(0.16, 1, 0.3, 1) var(--dhs-delay) both;
}

.dhs-shard-transition.is-prev.is-playing .dhs-shard {
	animation: dhs-piece-in-left 1100ms cubic-bezier(0.16, 1, 0.3, 1) var(--dhs-delay) both;
}

@keyframes dhs-piece-in-right {
	0%   { opacity: 0; transform: translate3d(2.4%, -0.45%, 0); filter: brightness(0.58) saturate(0.82); }
	55%  { opacity: 0.88; filter: brightness(0.78) saturate(0.9); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1) saturate(1); }
}

@keyframes dhs-piece-in-left {
	0%   { opacity: 0; transform: translate3d(-2.4%, 0.45%, 0); filter: brightness(0.58) saturate(0.82); }
	55%  { opacity: 0.88; filter: brightness(0.78) saturate(0.9); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); filter: brightness(1) saturate(1); }
}

@keyframes dhs-shard-layer-finish {
	0%, 75%  { opacity: 1; }
	87%, 100% { opacity: 0; }
}

@keyframes dhs-piece-underlay-in {
	0%        { opacity: 0.08; }
	28%       { opacity: 0.3; }
	66%, 100% { opacity: 1; }
}

@keyframes dhs-piece-out-left {
	0%, 18%   { opacity: 1; transform: translate3d(0, 0, 0); }
	66%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes dhs-piece-out-right {
	0%, 18%   { opacity: 1; transform: translate3d(0, 0, 0); }
	66%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

.dhs-slide-inner {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
	color: inherit;
}

.dhs-slide-inner.is-clickable {
	cursor: pointer;
}

.dhs-slide picture,
.dhs-slide img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.dhs-caption {
	position: absolute;
	left: 6%;
	bottom: 12%;
	max-width: 90%;
	z-index: 3;
	color: #fff;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.dhs-slide.is-active .dhs-caption {
	opacity: 1;
	transform: translateY(0);
}

.dhs-caption-title {
	font-size: clamp(20px, 4vw, 42px);
	font-weight: 700;
	margin: 0 0 16px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.dhs-caption-btn {
	display: inline-block;
	padding: 10px 26px;
	background: #fff;
	color: #111;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	transition: transform 0.25s ease, background 0.25s ease;
}

.dhs-slide-inner.is-clickable:hover .dhs-caption-btn {
	background: #f0f0f0;
	transform: translateY(-2px);
}

/* Arrows */
.dhs-arrow {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	box-sizing: border-box !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	max-width: 52px !important;
	max-height: 52px !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(232, 238, 245, 0.42)) !important;
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	border-radius: 999px !important;
	color: #050505 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(255, 255, 255, 0.22),
		0 8px 24px rgba(0, 0, 0, 0.2);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.dhs-arrow svg {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	margin: 0 !important;
	display: block !important;
	position: static !important;
	transform: none !important;
	color: #050505 !important;
}

.dhs-arrow svg path {
	fill: none !important;
	stroke: #050505 !important;
}

.dhs-arrow:hover {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 244, 250, 0.62)) !important;
	transform: translateY(-50%) scale(1.08);
	box-shadow:
		inset 0 1px 0 #fff,
		0 10px 28px rgba(0, 0, 0, 0.26);
}

.dhs-arrow:active {
	transform: translateY(-50%) scale(0.96);
}

.dhs-arrow-prev { left: 20px; }
.dhs-arrow-next { right: 20px; }

.dhs-arrow:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.95);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.dhs-arrow {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
		max-width: 42px !important;
		max-height: 42px !important;
	}
	.dhs-arrow svg { width: 18px !important; height: 18px !important; min-width: 18px; }
	.dhs-arrow-prev { left: 12px; }
	.dhs-arrow-next { right: 12px; }
}

/* Dots */
.dhs-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 8px;
}

.dhs-dot {
	-webkit-appearance: none;
	appearance: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.25s ease, transform 0.25s ease;
}

.dhs-dot.is-active {
	background: #fff;
	transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
	.dhs-slide.is-entering,
	.dhs-slide.is-exiting,
	.dhs-shard-transition,
	.dhs-shard {
		animation: none !important;
	}

	.dhs-slide.is-entering {
		opacity: 1;
		transform: none;
	}

	.dhs-shard-transition {
		display: none;
	}
}

/* Responsive refinements - version 1.9 */
.dhs-slider, .dhs-slider * { box-sizing: border-box; }
.dhs-slider { max-width: 100%; min-height: 0; touch-action: pan-y pinch-zoom; }
.dhs-slide picture { display: block; width: 100%; height: 100%; }
.dhs-slide img { max-width: none; }
.dhs-slide[aria-hidden="true"] .dhs-slide-inner { pointer-events: none; }
.dhs-slider:focus { outline: none; }
.dhs-slider:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.dhs-dots { align-items: center; justify-content: center; max-width: calc(100% - 110px); flex-wrap: wrap; }
.dhs-dot { flex: 0 0 auto; min-width: 10px; min-height: 10px; }
.dhs-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (min-width: 768px) and (max-width: 1024px) {
  .dhs-slider { aspect-ratio: 16 / 8; }
  .dhs-arrow { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; max-width: 46px !important; max-height: 46px !important; }
  .dhs-arrow-prev { left: 16px; } .dhs-arrow-next { right: 16px; }
  .dhs-caption { left: 7%; bottom: 14%; max-width: 75%; }
}
@media (max-width: 767px) {
  .dhs-slider { aspect-ratio: 4 / 5; }
  .dhs-caption { left: 16px; right: 16px; bottom: 58px; max-width: calc(100% - 32px); }
  .dhs-caption-title { font-size: clamp(19px, 5.5vw, 30px); line-height: 1.2; margin-bottom: 10px; }
  .dhs-caption-btn { font-size: 13px; padding: 9px 20px; }
  .dhs-arrow { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; max-height: 38px !important; }
  .dhs-arrow-prev { left: 8px; } .dhs-arrow-next { right: 8px; }
  .dhs-dots { bottom: 18px; gap: 10px; }
  .dhs-dot { width: 10px; height: 10px; }
}
@media (max-width: 380px) {
  .dhs-caption { bottom: 52px; }
  .dhs-arrow { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; }
  .dhs-arrow svg { width: 16px !important; height: 16px !important; min-width: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 .dhs-caption, .dhs-caption-btn, .dhs-arrow, .dhs-dot { transition-duration: 0.01ms !important; }
}

/* v1.9.1 - remove dark edges and image baseline gaps */
.dhs-slider {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
}
.dhs-slides, .dhs-slide, .dhs-slide-inner, .dhs-slide picture {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dhs-slide picture, .dhs-slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.dhs-slide img {
  max-width: none !important;
  object-fit: cover !important;
  vertical-align: top;
  border: 0 !important;
  box-shadow: none !important;
}
.dhs-slider:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.dhs-caption { line-height: 1.3; }