:root {
  --c-light-gray: #7f7f7f;
  --c-lime: #abff02;
  --c-dark-green: #052424;
  --notch-progress: 0;
  --vh: 1vh;
  --svh: 1svh;
}

body, html {
  margin: 0;
  padding: 0;
}

.has-mb-asset.media-wrapper {
  height: 100%;
}

.has-mb-asset.media-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

section.fullscreen-features__wrapper {
  height: auto;
  width: 100%
}

section.fullscreen-features__wrapper[data-items-count="1"] {
  height: unset
}

.sticky-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%
}

.notch__wrapper {
  overflow: hidden;
  --offset-mask: 4rem
}

.notch__wrapper .svg-mask {
  height: calc(100% + var(--offset-mask))
}

.notch__wrapper .slot {
  height: 100%;
  transform: translateY(calc(-100%*var(--notch-progress)));
  width: 100%
}

.notch__wrapper .slot>.image {
  height: calc(100% - var(--offset-mask));
  transform: translateY(calc(100%*var(--notch-progress)))
}

.notch__wrapper>.image {
  height: 100%
}

.image-layout {
  flex-grow: 1;
  position: relative
}

.image-layout .notch__wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.bottom-layout {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 3.25rem 1.25rem 8.125rem;
  pointer-events: none;
  row-gap: 5.641vw;
  width: 100%;
  box-sizing: border-box;
}

.bottom-layout .line-split {
  opacity: 0;
  will-change: transform
}

.bottom-layout.show {
  pointer-events: auto
}

.progress-bar {
  display: none;
  position: absolute
}

.title__wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 4.103vw
}

.title__wrapper .pre-title {
  color: #a2a6b4;
}

.title__wrapper .title {
  color: var(--c-dark-green);
  display: block;
  white-space: normal
}

.title__wrapper .title strong {
  color: var(--c-light-gray);
  transition: color .4s
}

.title__wrapper .title strong.show {
  animation: color-transition-green .5s;
  color: var(--c-dark-green)
}

.bottom-layout.layout-2 .content__wrapper {
  grid-column: 8/13
}

.content__wrapper {
  grid-column: 5/11;
  position: relative
}

.content__wrapper .content__paragraph {
  color: #7f7f7f;

}

.notch-section__wrapper {
  height: 100%;
  width: 100%
}

.notch-section__wrapper>.svg-mask {
  height: 100%;
  width: 100%
}

.notch-section__wrapper>.svg-mask>.slot {
  height: 100%;
  width: 100%
}

.line-mask-split-mask {
  display: block
}

.line-split {
  display: inline-block !important
}

.padded-counter__wrapper {
  position: relative;
  top: .5625rem
}

.svg-mask {
  position: relative
}

.svg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.slot {
  overflow: clip
}

.slot:not(.ssr).use-clip {
  clip-path: var(--svgclip)
}




@media (min-width:1024px) {
  /* section.fullscreen-features__wrapper {
     height:calc(130vh*var(--items-count)*1);
    height:calc(var(--vh, 1vh)*130*var(--items-count)*1) 
  } */

  .sticky__wrapper {
    height: 100svh;
    height: calc(var(--svh, 1svh)*100);
    position: sticky;
    top: 0
  }

  .sticky-layout {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0
  }

  .sticky-layout.pointer {
    pointer-events: auto
  }

  .notch__wrapper {
    --offset-mask: 5rem
  }

  .image-layout .overlay {
    background-color: #00000000;
    height: 100%;
    left: 0;
    opacity: calc(1 - var(--notch-progress));
    position: absolute;
    top: 0;
    width: 100%
  }

  .bottom-layout {
    padding-bottom: 3.375rem;
    padding-top: 3.375rem;
    --grid-size: 12;
    --grid-gutter: min(1.042vw, 26.6666666667px);
    --grid-margin: min(3.646vw, 93.3333333333px);
    -moz-column-gap: var(--grid-gutter, 0);
    column-gap: var(--grid-gutter, 0);
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    height: calc(6.75rem + min(5.282vw, 135.2133333333px));
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin)
  }

  .progress-bar {
    display: block;
    left: 4.375rem;
    top: 50%;
    transform: translateY(-50%)
  }

  .bottom-layout .title__wrapper {
    grid-column: 1/5;
    row-gap: min(.156vw, 4px)
  }

 

  .bottom-layout .title__wrapper .title .line-split {
    height: min(1.99vw, 50.9333333333px);

    margin-bottom: min(-.365vw, -9.3333333333px)
  }

  .bottom-layout.layout-2 .title__wrapper {
    grid-column: 1/6;
    row-gap: min(.677vw, 17.3333333333px)
  }

  

  .bottom-layout.layout-2 .content__wrapper {
    text-wrap: wrap;
    width: min(29.948vw, 766.6666666667px)
  }

  .bottom-layout.layout-2 .content__wrapper .content__paragraph {

    position: relative;
    text-wrap: wrap;
    top: min(1.823vw, 46.6666666667px);
    width: 100%
  }

  .content__wrapper .content__paragraph {




    position: absolute;
    text-wrap: wrap;
    width: 100%
  }
}

@media (max-width:1023px) {
  .sticky-layout .bottom-layout {
    padding: 16px 16px 32px;
  }

  .image-layout {
    height: 40vh;
  }

}

@keyframes color-transition-green {
  0% {
    color: var(--c-light-gray)
  }

  30% {
    color: var(--c-lime)
  }

  to {
    color: var(--c-dark-green)
  }
}