.elementor-kit-6{--e-global-color-primary:#92BA34;--e-global-color-secondary:#666666;--e-global-color-text:#333333;--e-global-color-accent:#E3087E;--e-global-color-629318b:#FFFFFF;--e-global-color-c142baf:#BFEA07;--e-global-color-789cd7e:#999999;--e-global-color-ec0caac:#CCCCCC;--e-global-typography-primary-font-family:"essonnes-display";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"avenir-lt-pro";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"avenir-lt-pro";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"avenir-lt-pro";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-family:"essonnes-display", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:"essonnes-display", Sans-serif;font-size:80px;}.elementor-kit-6 h2{color:var( --e-global-color-secondary );font-family:"avenir-lt-pro", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== Blossom Scroll — FINAL (core + centered layout) ===== */

/* Tuning knobs */
.blossom-scroll{
  /* distances from the centered title */
  --gap-above:  clamp(120px, 18vh, 220px);  /* icon ABOVE title */
  --gap-below:  clamp(20px,  6vh, 60px);  /* caption BELOW title */

  /* sizing */
  --content-max: 900px;
  --icon-max:    106px;

  /* animation */
  --fade-duration: .35s;
}

.blossom-scroll{ position: relative; }

/* Sticky canvas that stays while the sequence runs */
.blossom-scroll .blossom-canvas{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
}

/* Each fading slide: full-viewport layer (JS cross-fades opacity) */
.blossom-scroll .blossom-canvas .blossom-item{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade-duration) linear;
  will-change: opacity;
  text-align: center;
  pointer-events: auto; /* keep content clickable */
}

/* Never start blank before JS runs */
.blossom-scroll .blossom-canvas .blossom-item:first-of-type{
  opacity: 1;
}

/* ===== Centered stack layout (no inner wrapper) ===== */
/* Add these classes to your widgets inside each .blossom-item:
   - icon/image    → class "slot-top"
   - title (word)  → class "slot-center"
   - caption text  → class "slot-bottom"
*/

/* Title locked to the exact vertical center */
.blossom-scroll .blossom-canvas .blossom-item .slot-center{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: var(--content-max);
  margin: 0;
}

/* Icon a fixed distance ABOVE the title */
.blossom-scroll .blossom-canvas .blossom-item .slot-top{
  position: absolute;
  left: 50%;
  top: calc(50% - var(--gap-above));
  transform: translateX(-50%);
  margin: 0;
}
.blossom-scroll .blossom-canvas .blossom-item .slot-top img{
  max-height: var(--icon-max);
  height: auto; width: auto;
}

/* Caption a fixed distance BELOW the title */
.blossom-scroll .blossom-canvas .blossom-item .slot-bottom{
  position: absolute;
  left: 50%;
  top: calc(50% + var(--gap-below));
  transform: translateX(-50%);
  max-width: var(--content-max);
  margin: 0;
}

/* Prevent Elementor’s default margins from shifting layout */
.blossom-scroll .blossom-canvas .blossom-item > .elementor-widget{ margin: 0 !important; }
.blossom-scroll .blossom-canvas .blossom-item > *{ margin: 0; }

/* Responsive tweaks */
@media (max-width: 1024px){
  .blossom-scroll{
    --gap-above: clamp(100px, 16vh, 200px);
    --gap-below: clamp( 72px, 12vh, 160px);
    --icon-max:  84px;
    --content-max: 760px;
  }
}
@media (max-width: 767px){
  .blossom-scroll{
    --gap-above: clamp(88px, 15vh, 180px);
    --gap-below: clamp(64px, 12vh, 140px);
    --icon-max:  72px;
    --content-max: 85vw;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .blossom-scroll .blossom-canvas .blossom-item{ transition: none; }
}
/* ===== End Blossom Scroll ===== */

/* Mobile fallback: show slides stacked, let page scroll naturally */
@media (max-width: 767px){
  .blossom-scroll .blossom-canvas{
    position: static;     /* no sticky pin */
    height: auto;
    overflow: visible;
  }
  .blossom-scroll .blossom-canvas .blossom-item{
    position: relative;   /* back in normal flow */
    opacity: 1;           /* always visible; JS won't animate below 768px */
    transition: none;
    pointer-events: auto;
    margin: 48px 0;       /* optional breathing room between slides */
  }

  /* ensure the page accepts vertical pans */
  .blossom-scroll, .blossom-scroll *{
    touch-action: pan-y;
  }
}

/* was .35s; make it smoother */
.blossom-scroll .blossom-canvas .blossom-item{
  transition: opacity .55s linear;
}


/* Dots anchored under the content group, not at the viewport edge */
.blossom-scroll .blossom-pagination{
  position: absolute;
  left: 50%;
  /* Title is centered at 50% (top:50%), caption at (50% + --gap-below) → dots sit 40px under that */
  top: calc(50% + var(--gap-below) + 80px);
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
  pointer-events: auto;
}

/* Dot styles (same as before) */
.blossom-scroll .blossom-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #bdbdbd;
  opacity: .6;
  border: 0; padding: 0;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.blossom-scroll .blossom-dot.is-active{
  background: #111;
  opacity: 1;
  transform: scale(1.12);
}

/* Optional: hide dots on mobile vertical mode */
@media (max-width: 767px){
  .blossom-scroll .blossom-pagination{ display: none; }
}/* End custom CSS */