/* =========================================================
   ОСНОВНОЙ HERO-СЛАЙДЕР
   ========================================================= */

.ogonek-hero-slider {
	position: relative;
	width: 100%;
	min-height: 650px;
	overflow: hidden;
	background: #080906;
	isolation: isolate;
}

.ogonek-hero-slider,
.ogonek-hero-slider * {
	box-sizing: border-box;
}

.ogonek-hero-slider .swiper-wrapper {
	min-height: 650px;
}

.ogonek-hero-slider .swiper-slide {
	position: relative;
	min-height: 650px;
	height: auto;
	overflow: hidden;
	background: #080906;
}

/*
 * Elementor иногда создаёт дополнительные обёртки.
 * Принудительно растягиваем их на высоту слайда.
 */
.ogonek-hero-slider .swiper-slide > .elementor {
	min-height: inherit;
	height: 100%;
}

.ogonek-hero-slider .swiper-slide > .elementor > .elementor-element {
	min-height: inherit;
	height: 100%;
}

.ogonek-hero-slider .ogonek-hero-content {
	min-height: 650px;
}


/* =========================================================
   АНИМАЦИЯ КОНТЕНТА
   ========================================================= */

/*
 * Добавьте класс hero-animate к контейнеру с текстом
 * внутри каждого шаблона.
 */
.ogonek-hero-slider .hero-animate {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity 0.75s ease,
		transform 0.75s ease;
}

.ogonek-hero-slider .swiper-slide-active .hero-animate {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: 0.25s;
}

/*
 * Для заголовка можно добавить отдельный класс
 * hero-title-animate.
 */
.ogonek-hero-slider .hero-title-animate {
	opacity: 0;
	transform: translate3d(-35px, 0, 0);
	transition:
		opacity 0.8s ease,
		transform 0.8s ease;
}

.ogonek-hero-slider .swiper-slide-active .hero-title-animate {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: 0.15s;
}


/* =========================================================
   СТРЕЛКИ
   ========================================================= */

.ogonek-hero-prev,
.ogonek-hero-next {
	position: absolute;
	top: 50%;
	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;
	padding: 0;

	color: #ffffff;
	background: rgba(8, 9, 6, 0.48);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;

	cursor: pointer;
	transform: translateY(-50%);
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.ogonek-hero-prev {
	left: max(22px, calc((100vw - 1500px) / 2));
}

.ogonek-hero-next {
	right: max(22px, calc((100vw - 1500px) / 2));
}

.ogonek-hero-prev:hover,
.ogonek-hero-next:hover {
	background: #808000;
	border-color: #9c9c16;
}

.ogonek-hero-prev:hover {
	transform: translateY(-50%) translateX(-2px);
}

.ogonek-hero-next:hover {
	transform: translateY(-50%) translateX(2px);
}

.ogonek-hero-prev svg,
.ogonek-hero-next svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ogonek-hero-prev.swiper-button-disabled,
.ogonek-hero-next.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}


/* =========================================================
   ТОЧКИ ПАГИНАЦИИ
   ========================================================= */

.ogonek-hero-pagination {
	position: absolute;
	left: 50% !important;
	bottom: 24px !important;
	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	width: auto !important;
	transform: translateX(-50%);
}

.ogonek-hero-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 !important;

	opacity: 1;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.65);

	transition:
		width 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease;
}

.ogonek-hero-pagination .swiper-pagination-bullet-active {
	width: 22px;
	border-radius: 10px;
	background: #a4a419;
	border-color: #a4a419;
}


/* =========================================================
   ПЛАНШЕТ
   ========================================================= */

@media (max-width: 1024px) {

	.ogonek-hero-slider,
	.ogonek-hero-slider .swiper-wrapper,
	.ogonek-hero-slider .swiper-slide,
	.ogonek-hero-slider .ogonek-hero-content {
		min-height: 600px;
	}

	.ogonek-hero-prev,
	.ogonek-hero-next {
		width: 42px;
		height: 42px;
	}

	.ogonek-hero-prev {
		left: 15px;
	}

	.ogonek-hero-next {
		right: 15px;
	}
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 767px) {

	.ogonek-hero-slider,
	.ogonek-hero-slider .swiper-wrapper,
	.ogonek-hero-slider .swiper-slide,
	.ogonek-hero-slider .ogonek-hero-content {
		min-height: 620px;
	}

	.ogonek-hero-slider .swiper-slide {
		background-position: 62% center;
	}

	.ogonek-hero-prev,
	.ogonek-hero-next {
		display: none;
	}

	.ogonek-hero-pagination {
		bottom: 16px !important;
	}

	.ogonek-hero-pagination .swiper-pagination-bullet {
		width: 7px;
		height: 7px;
	}

	.ogonek-hero-pagination .swiper-pagination-bullet-active {
		width: 20px;
	}
}


/* =========================================================
   УМЕНЬШЕНИЕ АНИМАЦИЙ В СИСТЕМНЫХ НАСТРОЙКАХ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.ogonek-hero-slider .hero-animate,
	.ogonek-hero-slider .hero-title-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Полностью перебиваем reset.css */

.ogonek-hero-slider button.ogonek-hero-prev,
.ogonek-hero-slider button.ogonek-hero-next,
.ogonek-hero-slider button.ogonek-hero-prev:hover,
.ogonek-hero-slider button.ogonek-hero-next:hover,
.ogonek-hero-slider button.ogonek-hero-prev:focus,
.ogonek-hero-slider button.ogonek-hero-next:focus,
.ogonek-hero-slider button.ogonek-hero-prev:focus-visible,
.ogonek-hero-slider button.ogonek-hero-next:focus-visible,
.ogonek-hero-slider button.ogonek-hero-prev:active,
.ogonek-hero-slider button.ogonek-hero-next:active {

    background: rgba(8, 9, 6, 0.48) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.35) !important;

    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}