/* PKVService hero slider — replaces Element Pack Lite's bdt-slider.
   Slides are unmodified Elementor templates, so their own CSS still governs their look.
   Only the carousel shell is defined here. */

.pkv-hero {
	position: relative;
}

.pkv-hero__viewport {
	overflow: hidden;
	width: 100%;
}

/* align-items:stretch makes every slide as tall as the tallest one, so switching
   slides never changes the container height (keeps CLS at 0). */
.pkv-hero__track {
	display: flex;
	align-items: stretch;
	width: 100%;
	will-change: transform;
	transition: transform var(--pkv-hero-speed, 500ms) ease;
}

.pkv-hero__slide {
	flex: 0 0 100%;
	max-width: 100%;
	min-width: 0;
}

/* The Elementor section inside each slide must fill the slide's full height. */
.pkv-hero__slide > .elementor,
.pkv-hero__slide > .elementor > .elementor-section,
.pkv-hero__slide > .elementor .elementor-section-wrap > .elementor-section {
	height: 100%;
}

/* ---- navigation arrows ----
   The theme styles bare <button> elements, so every inherited decoration is reset
   here to reproduce the previous plain white chevrons. */
.pkv-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: #fff;
	cursor: pointer;
	opacity: .85;
	transition: opacity .2s ease;
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none;
	outline: none;
}

.pkv-hero__nav:hover,
.pkv-hero__nav:focus-visible {
	opacity: 1;
}

.pkv-hero__nav svg {
	width: 26px;
	height: 26px;
}

.pkv-hero__nav--prev { left: 10px; }
.pkv-hero__nav--next { right: 10px; }

/* ---- pagination dots ----
   The previous widget ran in arrows-only mode (bdt-navigation-type-arrows), so the
   dots stay hidden to keep the design identical. They remain in the markup for
   screen-reader/keyboard users and can be shown by flipping this to flex. */
.pkv-hero__dots {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2;
	gap: 8px;
	justify-content: center;
}

.pkv-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background .2s ease;
}

.pkv-hero__dot.is-active {
	background: #fff;
}

@media (max-width: 767px) {
	.pkv-hero__nav { width: 34px; height: 34px; }
	.pkv-hero__nav svg { width: 20px; height: 20px; }
	.pkv-hero__nav--prev { left: 2px; }
	.pkv-hero__nav--next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.pkv-hero__track { transition: none; }
}