.elementor-3244 .elementor-element.elementor-element-b7db77c{--display:flex;}.elementor-3244 .elementor-element.elementor-element-f9b31ed .elementor-wrapper{--video-aspect-ratio:0.5625;}/* Start custom CSS */\/* avoid any page-level horizontal scroll */
html, body {
  overflow-x: hidden;
}

/* each page fills the viewport and snaps vertically */
/* each page = exactly one viewport tall */
.snap-section {
  scroll-snap-align: start;
  flex: 0 0 100svh;        /* take exactly one screen */
  block-size: 100svh;      /* logical height (better on mobile) */
  min-block-size: 100svh;

  display: flex;           /* center the text */
  align-items: center;
  justify-content: center;
  text-align: center;

  width: 100%;
  box-sizing: border-box;
  overflow: hidden;        /* hide any spill so next text can't peek */
  padding: 0;              /* keep clean; adjust if you really need */
}

/* remove default margins that can cause “peek-through” */
.snap-section > *:first-child {
  margin-top: 0;
}
.snap-section > *:last-child {
  margin-bottom: 0;
}

.snap-section h1,
.snap-section h2,
.snap-section h3,
.snap-section .elementor-heading-title {
  margin: 0;  /* headings often add top/bottom margin */
}

/* ------------- Staggered intro fade for first screen ------------- */

/* Start: the whole group is hidden before buka */
.fade-first {
  opacity: 0;
  filter: blur(8px);
}

/* As soon as body.show-first is added (on buka click),
   we reveal the group so it can display its children */
body.show-first .fade-first {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0s linear 0s, filter 0s linear 0s;
}

/* Each direct child of fade-first will animate in */
body.show-first .fade-first > * {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  animation: fadeSeq 2s ease forwards;
}

/* Staggered delays (starts at 0.8s) */
body.show-first .fade-first > *:nth-child(1) { animation-delay: 0.8s; }
body.show-first .fade-first > *:nth-child(2) { animation-delay: 1.4s; }
body.show-first .fade-first > *:nth-child(3) { animation-delay: 2.0s; }
body.show-first .fade-first > *:nth-child(4) { animation-delay: 2.6s; }
body.show-first .fade-first > *:nth-child(5) { animation-delay: 3.2s; }
body.show-first .fade-first > *:nth-child(6) { animation-delay: 3.8s; }

@keyframes fadeSeq {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

/* =========================
   Scroll-triggered stagger reveal
   ========================= */


/* 1. Base hidden state for ALL children */
.fade-stagger > * {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

/* 2. Base hidden state for DIVIDER children (keep 90deg look) */
.fade-stagger > .divider-line {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px) rotate(90deg);
  will-change: opacity, transform, filter;
}

/* 3. When section is in view, give them animation settings
      (everyone gets these defaults) */
.fade-stagger.in-view > * {
  animation-name: fadeSeqStagger;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  /* animation-delay will come from nth-child rules below */
}

/* 4. Override just the animation-name for dividers.
      No !important. No shorthand.
      So they keep their own delay from nth-child(). */
.fade-stagger.in-view > .divider-line {
  animation-name: fadeSeqDivider;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* 5. Stagger delays for each direct child in DOM order */
.fade-stagger.in-view > *:nth-child(1)  { animation-delay: 0.1s; }
.fade-stagger.in-view > *:nth-child(2)  { animation-delay: 0.7s; }
.fade-stagger.in-view > *:nth-child(3)  { animation-delay: 1.3s; }
.fade-stagger.in-view > *:nth-child(4)  { animation-delay: 1.9s; }
.fade-stagger.in-view > *:nth-child(5)  { animation-delay: 2.5s; }
.fade-stagger.in-view > *:nth-child(6)  { animation-delay: 3.1s; }
.fade-stagger.in-view > *:nth-child(7)  { animation-delay: 3.7s; }
.fade-stagger.in-view > *:nth-child(8)  { animation-delay: 4.3s; }
.fade-stagger.in-view > *:nth-child(9)  { animation-delay: 4.9s; }
.fade-stagger.in-view > *:nth-child(10) { animation-delay: 5.5s; }
.fade-stagger.in-view > *:nth-child(11) { animation-delay: 6.1s; }
.fade-stagger.in-view > *:nth-child(12) { animation-delay: 6.7s; }

/* keep going if that container has more children */

/* 6. Keyframes for normal text/etc */
@keyframes fadeSeqStagger {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 7. Keyframes for divider (keeps rotate(90deg) the whole time) */
@keyframes fadeSeqDivider {
  from {
    opacity: 0;
    transform: translateY(10px) rotate(90deg);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(90deg);
    filter: blur(0);
  }
}/* End custom CSS */