@keyframes color-transition-1f873f9c {
    0% {
        color: #ddd;
    }

    30% {
        color: #abff02;
    }

    to {
        color: #052424;
    }
}

.features-steps[data-v-1f873f9c] {
    background-color: #fff;
    position: relative;
}

.inner[data-v-1f873f9c] {
    --current-item: 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    position: sticky;
    top: 0;
}

.content[data-v-1f873f9c] {
    display: grid;
    font-weight: 450;
    grid-area: a;
    grid-template-columns: subgrid;
    line-height: 1.2;
    row-gap: 1.375rem;
    width: 100%;
}

.title[data-v-1f873f9c] {
    grid-column: 1/-1;
    grid-row: 1;
}

.scroll-items[data-v-1f873f9c] {
    display: grid;
    grid-row: 2;
}

.scroll-items-list[data-v-1f873f9c] {
    display: flex;
    flex-direction: row;
    grid-column: 1;
    pointer-events: none;
}

.scroll-item[data-v-1f873f9c] {
    --opacity-per-step: 0.3;
    --distance-from-current: calc(var(--index, 0) - var(--current-item));
    --abs-distance-from-current: max(var(--distance-from-current),
            calc(var(--distance-from-current) * -1));
    position: relative;
}

.scrollbar[data-v-1f873f9c] {
    background: var(--c-dirty-white);
    display: grid;
    grid-column: 1;
    grid-row: 2;
    height: 2px;
    margin: 0 5.128vw;
}

.scrollbar-inner[data-v-1f873f9c] {
    background: var(--c-black);
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    justify-self: start;
    transition: translate 0.3s var(--ease-out);
    translate: calc(var(--current-item) * 100%) 0;
    width: calc(100% / var(--314863dd));
}

.svg-mask[data-v-1f873f9c] {
    aspect-ratio: 400/480;
    grid-area: b;
}

.svg-mask[data-v-1f873f9c] .slot {
    height: 100%;
    width: 100%;
}

.images[data-v-1f873f9c] {
    overflow: hidden;
    position: relative;
}

.image[data-v-1f873f9c],
.images[data-v-1f873f9c] {
    height: 100%;
    width: 100%;
}

.image[data-v-1f873f9c] {
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.5s var(--ease-out);
}

.image[data-v-1f873f9c]:not(.is-visible) {
    opacity: 0;
}

.buttons[data-v-1f873f9c] {
    bottom: 2.5rem;
    display: flex;
    gap: 0 0.625rem;
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-end;
    position: absolute;
    right: 1.25rem;
    touch-action: none;
}

.button[data-v-1f873f9c] {
    aspect-ratio: 1;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    place-content: center;
    place-items: center;
    width: 3.75rem;
}

.button[disabled][data-v-1f873f9c] {
    opacity: 0.4;
}

.button path[data-v-1f873f9c] {
    stroke: var(--c-black);
}

.split__wrapper[data-v-1f873f9c] {
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
}

.split__wrapper[data-v-1f873f9c] .split-line {
    --split-progress: 0;
    background: #052424;
    background: linear-gradient(90deg,
            #052424 0,
            #052424 var(--split-progress),
            #ddd var(--split-progress),
            #ddd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.split__wrapper[data-v-1f873f9c] .split-chars {
    color: #ddd;
}

.odometer[data-v-1f873f9c] {
    justify-content: flex-end;
    margin-bottom: 1.29rem;
    position: relative;
    top: 1.28rem;
}

.scroll-items-list[data-v-1f873f9c] {
    pointer-events: auto;
}

.scroll-items[data-v-1f873f9c] u {
    position: relative;
    text-decoration: none;
}

.scroll-items[data-v-1f873f9c] u .underline-node {
    background-color: #052424;
    bottom: 0;
    display: none;
    height: min(0.156vw, 4px);
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.2s;
    width: 100%;
    z-index: 2;
}

.scroll-items[data-v-1f873f9c] u .underline-node-2 {
    background-color: #abff02;
    bottom: 0;
    display: none;
    height: min(0.156vw, 4px);
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left center;
    width: 100%;
    z-index: 1;
}

.odometer[data-v-1f873f9c] {
    --font-size: min(0.677vw, 17.3333333333px);
}

.counter__wrapper__mobile[data-v-1f873f9c] {
    -moz-column-gap: 1.125rem;
    column-gap: 1.125rem;
    display: flex;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14625rem;
    line-height: 0.81;
    margin-top: 2rem;
}

.counter__wrapper__mobile .counter__mobile[data-v-1f873f9c] {
    color: #eaeaea;
    transition: color 0.5s;
}

.counter__wrapper__mobile .counter__mobile.show[data-v-1f873f9c] {
    color: #a9a9a9;
}

@media (min-width: 1024px) {
    .features-steps[data-v-1f873f9c] {
        /* padding-bottom: max(8rem, 15vw); */
        padding-bottom: 0;
        padding-top: 3rem;
    }

    .inner[data-v-1f873f9c] {
        row-gap: 3.75rem;
        --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-areas: "b b b b b b" "a a a a a a";
        grid-template-areas: "a a a a a . b b b b b b";
        grid-template-columns: repeat(var(--grid-size), 1fr);
        margin-left: var(--grid-margin);
        margin-right: var(--grid-margin);
    }

    .header[data-v-1f873f9c] {
        height: -moz-min-content;
        height: min-content;
        position: sticky;
        top: 50%;
    }

    .content[data-v-1f873f9c] {
        align-self: center;
        bottom: 15rem;
        font-size: min(2.396vw, 61.3333333333px);
        letter-spacing: min(-0.024vw, -0.6133333333px);
        margin-bottom: 15rem;
        margin-top: 15rem;
    }

    .title[data-v-1f873f9c] {
        grid-column: 1;
        text-wrap: nowrap;
    }

    .scroll-items[data-v-1f873f9c] {
        display: flex;
        flex-direction: column;
        grid-column: 2/-1;
        grid-row: 1;
    }

    .scroll-items-list[data-v-1f873f9c] {
        flex-direction: column;
        gap: 21.5rem;
        position: relative;
    }

    .scrollbar[data-v-1f873f9c] {
        display: none;
    }

    .svg-mask[data-v-1f873f9c] {
        aspect-ratio: unset;
        height: calc(100svh - 4.375rem);
        height: calc(var(--svh, 1svh) * 100 - 4.375rem);
        position: sticky;
        top: 2.1875rem;
        width: calc(100% + 2.1875rem);
    }

    .images[data-v-1f873f9c] {
        border-radius: 0.625rem;
    }

    .image[data-v-1f873f9c] {
        justify-self: start;
    }

    .buttons[data-v-1f873f9c] {
        display: none;
    }

    .split__wrapper[data-v-1f873f9c] .split-chars {
        transition: color 0.4s;
    }

    .split__wrapper[data-v-1f873f9c] .split-chars.show {
        animation: color-transition-1f873f9c 0.5s;
        color: #052424;
    }

    .scroll-items[data-v-1f873f9c] u .underline-node,
    .scroll-items[data-v-1f873f9c] u .underline-node-2 {
        display: block;
    }

    .counter__wrapper__mobile[data-v-1f873f9c] {
        display: none;
    }
}

@media (max-width: 1023px) {
    .inner[data-v-1f873f9c] {
        padding-bottom: max(8rem, 15vw);
    }

    .content[data-v-1f873f9c] {
        padding: 0 5.128vw;
    }

    .scroll-items[data-v-1f873f9c] {
        gap: 1.5rem 0;
        margin: 0 -5.128vw;
    }

    .scroll-items-list[data-v-1f873f9c] {
        overflow-y: scroll;
        padding: 0 5.128vw;
        scroll-padding-inline-start: 5.128vw;
        scroll-snap-type: x mandatory;
    }

    .scroll-item[data-v-1f873f9c] {
        flex: 0 0 85%;
        padding-right: 1.875rem;
        scroll-snap-align: start;
        text-wrap: wrap;
    }

    .scroll-item[data-v-1f873f9c]:last-child {
        flex-basis: 100%;
    }

    .svg-mask[data-v-1f873f9c] {
        max-height: 60%;
        width: 100%;
    }

    .split__wrapper[data-v-1f873f9c] {
        font-weight: 400;
    }

    .scroll-item .split__wrapper[data-v-1f873f9c] .split-chars {
        transition: color 0.5s 0s;
    }

    .scroll-item.show .split__wrapper[data-v-1f873f9c] .split-chars {
        animation-delay: var(--v-delay);
        animation-duration: 0.5s;
        animation-name: color-transition-1f873f9c;
        color: #052424;
        transition: color 0s var(--v-delay);
    }

    .odometer[data-v-1f873f9c] {
        display: none;
    }
}

@keyframes color-transition-dfc3204d {
    0% {
        color: #ddd;
    }

    30% {
        color: #abff02;
    }

    to {
        color: #052424;
    }
}

.odometer[data-v-dfc3204d] {
    --font-size: .8125rem;
    --line-height: .81;
    --padding: .625rem;
    --digit-height: calc(var(--padding)*2 + var(--font-size)*var(--line-height));
    --digit-height: round(calc(var(--padding)*2 + var(--font-size)*var(--line-height)), 1px);
    color: var(--c-light-gray);
    display: flex;
    font-family: var(--font-mono);
    font-size: var(--font-size);
    font-weight: 600;
    letter-spacing: .14625rem;
    line-height: var(--line-height)
}

.digit-column[data-v-dfc3204d] {
    height: var(--digit-height);
    overflow: hidden;
    position: relative
}

.digit[data-v-dfc3204d],
.digit-stack[data-v-dfc3204d] {
    will-change: transform
}

.digit[data-v-dfc3204d] {
    align-items: center;
    display: flex;
    height: var(--digit-height);
    text-align: center
}

/* #features-step-vids {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: visible;
  background: #000;
  clip-path: url(#imageNotchClip);
} */
.images{
    overflow: visible;
  background: #000;
  clip-path: url(#imageNotchClip);
}
.images .notch-clip {
  position: absolute;
  width: 0;
  height: 0;
}

@media (max-width: 1023px) {
  .images {
    clip-path: none;
  }
}

@media (max-width: 768px) {
    .buttons[data-v-1f873f9c] {
        flex-direction: row;
    }

    .button[data-v-1f873f9c] {
        width: 3.75rem !important;
        background: white;
    }
    @media (hover: hover) and (pointer: fine) {
        .button:not(.button--underlined){
            background: white;
        }
    }
    .button[data-v-1f873f9c]:hover{
        background: white !important;
        
    }
    .button[disabled][data-v-1f873f9c] {
    opacity: .4;
    }

    #animated-text {
        font-size: min(2.5rem, 10.256vw);
        line-height: normal;
        letter-spacing: min(-.075rem, -.308vw);
    }

    .petrolodex-content-inner {
        padding: 5.875rem 1.25rem;
    }
    .features-steps .inner[data-v-1f873f9c]{
        margin-left: 0;
        margin-right: 0;
    }
    #petrolodex-content-features-content{
        display: none;
    }
    .section__wrapper.next-to-logos .section-introduction[data-v-184db619]{
        margin-top: -60px !important;;
    }
    .solution-content p{
        margin: 0 30px;
    }
    .solution-content ul{
        flex-wrap: wrap;
    }
}