.zls {
  --zls-height: 690px;
  --zls-content-width: 1260px;
  --zls-overlay: rgba(4, 15, 31, .40);
  --zls-title: #fff;
  --zls-text: #fff;
  --zls-accent: #1a3355;
  position: relative;
  width: 100%;
  height: var(--zls-height);
  min-height: 360px;
  overflow: hidden;
  background: #0d213c;
  isolation: isolate;
}

.zls *, .zls *::before, .zls *::after { box-sizing: border-box; }
.zls__viewport, .zls__slide { position: absolute; inset: 0; }
.zls__slide.zls--mobile-only { display: none; }
.zls__slide { opacity: 0; visibility: hidden; z-index: 0; transition: opacity var(--zls-transition, 850ms) ease, visibility 0s linear var(--zls-transition, 850ms); }
.zls__slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s; }
.zls__slide.is-leaving { visibility: visible; z-index: 1; }
.zls__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.zls__media img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.045); transition: transform 7.5s cubic-bezier(.2,.55,.25,1); }
.zls__slide.is-active .zls__media img { transform: scale(1); }
.zls__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--zls-overlay) 0%, rgba(4,15,31,.20) 58%, rgba(4,15,31,.08) 100%); }
.zls__inner { position: relative; z-index: 2; width: min(var(--zls-content-width), calc(100% - 64px)); height: 100%; margin-inline: auto; display: flex; align-items: center; }
.zls__content { width: min(500px, 48vw); color: var(--zls-text); }
.zls__content--mobile { display: none; }
.zls__seo-heading { margin: 0; color: inherit; font: inherit; }
.zls__heading-set, .zls__title, .zls__accent { display: block; }
.zls__heading-set--mobile, .zls__body-set--mobile { display: none; }
.zls__title, .zls__accent, .zls__description, .zls__button { opacity: 0; transform: translate3d(-42px, 0, 0); transition-property: opacity, transform; transition-duration: 650ms; transition-timing-function: cubic-bezier(.22,.7,.23,1); }
.zls__slide.is-active .zls__title, .zls__slide.is-active .zls__accent, .zls__slide.is-active .zls__description, .zls__slide.is-active .zls__button { opacity: 1; transform: none; }
.zls__slide.is-active .zls__title { transition-delay: 180ms; }
.zls__slide.is-active .zls__accent { transition-delay: 300ms; }
.zls__slide.is-active .zls__description { transition-delay: 430ms; }
.zls__slide.is-active .zls__button { transition-delay: 560ms; }
.zls__title { margin: 0 0 8px; color: var(--zls-title); font-family: "Playfair Display", Georgia, serif; font-size: clamp(44px, 4.7vw, 68px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.zls__accent { display: inline-block; margin: 0 0 28px; padding: 2px 10px 5px; color: var(--zls-title); background: var(--zls-accent); font-family: "Playfair Display", Georgia, serif; font-size: clamp(27px, 3vw, 42px); font-weight: 400; line-height: 1.18; }
.zls__description { max-width: 450px; margin: 0 0 30px; color: var(--zls-text); font-family: Verdana, Geneva, sans-serif; font-size: 16px; line-height: 1.55; }
.zls__button { display: inline-flex; align-items: center; gap: 24px; padding: 14px 26px; color: #fff; background: var(--zls-accent); border-radius: 2px; font-family: "Playfair Display", Georgia, serif; font-size: 18px; font-weight: 500; line-height: 1.5; text-decoration: none; }
.zls__button:hover, .zls__button:focus-visible { color: #fff; filter: brightness(1.13); }
.zls__button span { font-size: 25px; line-height: 1; transition: transform .2s ease; }
.zls__button:hover span { transform: translateX(4px); }
.zls__arrow { position: absolute; z-index: 5; top: 50%; width: 48px; height: 64px; margin: 0; padding: 0; border: 0; color: #fff; background: rgba(9,25,48,.24); transform: translateY(-50%); cursor: pointer; opacity: .88; transition: background .2s ease, opacity .2s ease; }
.zls__arrow:hover, .zls__arrow:focus-visible { background: rgba(9,25,48,.65); opacity: 1; }
.zls__arrow span { display: block; font: 300 48px/52px Arial, sans-serif; }
.zls__arrow--prev { left: 0; }
.zls__arrow--next { right: 0; }
.zls__dots { position: absolute; z-index: 5; left: 50%; bottom: 22px; display: flex; gap: 9px; transform: translateX(-50%); }
.zls__dot { width: 8px; height: 8px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.zls__dot.is-active { background: #fff; }
.zls[dir="rtl"] .zls__shade { background: linear-gradient(270deg, var(--zls-overlay) 0%, rgba(4,15,31,.20) 58%, rgba(4,15,31,.08) 100%); }
.zls[dir="rtl"] .zls__content { text-align: right; }
.zls[dir="rtl"] .zls__title,
.zls[dir="rtl"] .zls__accent,
.zls[dir="rtl"] .zls__description,
.zls[dir="rtl"] .zls__button { transform: translate3d(42px, 0, 0); }
.zls[dir="rtl"] .zls__slide.is-active .zls__title,
.zls[dir="rtl"] .zls__slide.is-active .zls__accent,
.zls[dir="rtl"] .zls__slide.is-active .zls__description,
.zls[dir="rtl"] .zls__slide.is-active .zls__button { transform: none; }
.zls[dir="rtl"] .zls__button { flex-direction: row-reverse; }

@media (max-width: 767px) {
  .zls { --zls-height: 620px; }
  .zls__slide.zls--desktop-only { display: none; }
  .zls__slide.zls--mobile-only { display: block; }
  .zls__inner { width: calc(100% - 44px); align-items: flex-end; padding-bottom: 64px; }
  .zls__content--desktop { display: none; }
  .zls__content--mobile { display: block; width: 100%; }
  .zls__content--seo { width: 100%; }
  .zls__heading-set--desktop, .zls__body-set--desktop { display: none; }
  .zls__heading-set--mobile, .zls__body-set--mobile { display: block; }
  .zls__shade { background: linear-gradient(0deg, rgba(4,15,31,.78) 0%, rgba(4,15,31,.38) 58%, rgba(4,15,31,.06) 100%); }
  .zls[dir="rtl"] .zls__shade { background: linear-gradient(0deg, rgba(4,15,31,.78) 0%, rgba(4,15,31,.38) 58%, rgba(4,15,31,.06) 100%); }
  .zls__title { margin-bottom: 5px; font-size: clamp(31px, 9vw, 43px); line-height: 1.08; }
  .zls__accent { margin-bottom: 18px; padding: 2px 7px 4px; font-size: clamp(22px, 6.4vw, 31px); }
  .zls__description { max-width: 100%; margin-bottom: 20px; font-size: 14px; line-height: 1.45; }
  .zls__button { gap: 14px; padding: 11px 17px; font-size: 15px; }
  .zls__arrow { top: 44%; width: 34px; height: 50px; background: rgba(9,25,48,.30); }
  .zls__arrow span { font-size: 38px; line-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .zls__slide, .zls__media img, .zls__title, .zls__accent, .zls__description, .zls__button { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}
