/* Advanced Slider Builder. Scoped to .nt-adv so the original homepage slider stays untouched. */

.nt-adv {
	position: relative;
	height: 520px;
	max-width: 100%;
	overflow: hidden;
	direction: rtl;
	color: #fff;
	background: #1c2128;
	isolation: isolate;
}

.nt-adv.is-screen {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.nt-adv.is-height-auto { height: auto; }
.nt-adv.is-height-ratio {
	height: auto;
	aspect-ratio: var(--nt-ratio, 16 / 7);
}

.nt-adv__viewport { position: relative; height: 100%; }
.nt-adv.is-height-auto .nt-adv__viewport { height: auto; }

.nt-adv__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--nt-speed, 700ms) ease, transform var(--nt-speed, 700ms) ease;
}
.nt-adv.is-slide .nt-adv__slide { transform: translateX(28px); }
.nt-adv__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	z-index: 1;
}

.nt-adv.is-height-auto .nt-adv__slide { position: relative; display: none; height: auto; }
.nt-adv.is-height-auto .nt-adv__slide.is-active { display: block; }

.nt-adv__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: var(--nt-adv-bg, #2c3138);
	background-image: var(--nt-grad, none);
	background-repeat: var(--nt-repeat, no-repeat);
	background-size: var(--nt-fit, cover);
	background-position: var(--nt-focal-x, 50%) var(--nt-focal-y, 40%);
}
.nt-adv__bg.is-fixed { background-attachment: scroll; }
@media (min-width: 1025px) {
	.nt-adv__bg.is-fixed { background-attachment: fixed; }
}

.nt-adv__photo,
.nt-adv__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--nt-fit, cover);
	object-position: var(--nt-focal-x, 50%) var(--nt-focal-y, 40%);
	will-change: transform;
}
.nt-adv__slide.is-active .nt-adv__photo.is-ken-in {
	animation: ntKenIn var(--nt-ken, 6s) linear forwards;
}
.nt-adv__slide.is-active .nt-adv__photo.is-ken-out {
	animation: ntKenOut var(--nt-ken, 6s) linear forwards;
}
@keyframes ntKenIn { from { transform: scale(1); } to { transform: scale(1.18); } }
@keyframes ntKenOut { from { transform: scale(1.18); } to { transform: scale(1); } }
.nt-adv__photo--mobile { display: none; }
.nt-adv__overlay {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0.28;
	pointer-events: none;
}

.nt-adv__slide-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nt-adv__stage {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: 40px 56px;
	pointer-events: none;
}
.nt-adv.is-height-auto .nt-adv__stage { position: relative; min-height: 280px; }

.nt-adv__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	width: min(100%, 46%);
	max-width: 100%;
	pointer-events: auto;
}
.nt-adv__stage.is-row .nt-adv__content { flex-direction: row; flex-wrap: wrap; align-items: center; }

.nt-adv__layer { position: relative; max-width: 100%; pointer-events: auto; }
.nt-adv__layer.is-free { position: absolute; }
.nt-adv__text { margin: 0; max-width: 100%; }
.nt-adv__text--h1,
.nt-adv__text--h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.25; }
.nt-adv__text--h3 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; line-height: 1.3; }
.nt-adv__text--p,
.nt-adv__text--div,
.nt-adv__text--span { font-size: 15px; line-height: 1.8; }

.nt-adv__media { display: block; max-width: 100%; height: auto; }
.nt-adv__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: inherit; }
.nt-adv__icon svg { width: 1em; height: 1em; fill: currentColor; }

.nt-adv__divider { display: block; width: 68px; height: 0; border: 0; border-top: 2px solid currentColor; }
.nt-adv__divider.is-vertical { width: 0; height: 42px; border-top: 0; border-inline-start: 2px solid currentColor; }

.nt-adv__shape { display: block; width: 72px; height: 72px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); }

.nt-adv__html { max-width: 100%; }
.nt-adv__html > :first-child { margin-top: 0; }
.nt-adv__html > :last-child { margin-bottom: 0; }

.nt-adv__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #fff;
	color: #14181f;
	font: inherit;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.nt-adv__btn.is-block { width: 100%; }
.nt-adv__btn.is-hover-lift:hover { transform: translateY(-2px); }
.nt-adv__btn.is-hover-darken:hover { filter: brightness(0.92); }
.nt-adv__btn-icon { display: inline-flex; }
.nt-adv__btn-icon svg { width: 1em; height: 1em; }

.nt-adv__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
}
.nt-adv__nav--prev { left: 10px; }
.nt-adv__nav--next { right: 10px; }
.nt-adv.is-arrows-out .nt-adv__nav--prev { left: -6px; }
.nt-adv.is-arrows-out .nt-adv__nav--next { right: -6px; }
.nt-adv.is-arrows-out {
	overflow: visible;
}
.nt-adv.is-arrows-out .nt-adv__viewport {
	overflow: hidden;
	border-radius: inherit;
}
.nt-adv__nav--next .nt-icon { transform: scaleX(-1); }
.nt-adv__nav .nt-icon { width: 28px; height: 28px; }
.nt-adv.is-single .nt-adv__nav,
.nt-adv.is-single .nt-adv__dots,
.nt-adv:not(.has-arrows) .nt-adv__nav,
.nt-adv:not(.has-dots) .nt-adv__dots { display: none; }

.nt-adv__dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 3;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}
.nt-adv__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.nt-adv__dot.is-active { background: #fff; }

.nt-adv--empty {
	display: grid;
	place-items: center;
	min-height: 180px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

@media (max-width: 767px) {
	.nt-adv__stage { padding: 28px 22px 56px; }
	.nt-adv__content { width: 100%; }
	.nt-adv__bg.has-mobile .nt-adv__photo--desktop { display: none; }
	.nt-adv__bg.has-mobile .nt-adv__photo--mobile { display: block; }
	.nt-adv__bg.is-video-fallback .nt-adv__video { display: none; }
	.nt-adv__hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.nt-adv__hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.nt-adv__hide-desktop { display: none !important; }
}

.nt-adv__slide.is-active .is-anim-up { animation: ntAdvUp var(--nt-dur, 0.6s) var(--nt-delay, 0s) both; }
.nt-adv__slide.is-active .is-anim-down { animation: ntAdvDown var(--nt-dur, 0.6s) var(--nt-delay, 0s) both; }
.nt-adv__slide.is-active .is-anim-fade { animation: ntAdvFade var(--nt-dur, 0.6s) var(--nt-delay, 0s) both; }
.nt-adv__slide.is-active .is-anim-zoom { animation: ntAdvZoom var(--nt-dur, 0.6s) var(--nt-delay, 0s) both; }
.nt-adv__slide.is-active .is-anim-start { animation: ntAdvStart var(--nt-dur, 0.6s) var(--nt-delay, 0s) both; }

@keyframes ntAdvUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ntAdvDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes ntAdvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ntAdvZoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes ntAdvStart { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.nt-adv__slide,
	.nt-adv__layer,
	.nt-adv__btn,
	.nt-adv__photo { transition: none !important; animation: none !important; }
}
