:root,
* {
    --bg-goluboy: #E6EDF8;
}

html,
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    scroll-padding-top: 90px;
}

#main {
    flex-grow: 1;
}

.backdrop-filter-blur-1 {
    backdrop-filter: blur(1px);
}

.backdrop-filter-blur-2 {
    backdrop-filter: blur(2px);
}

.backdrop-filter-blur-3 {
    backdrop-filter: blur(3px);
}

.backdrop-filter-blur-4 {
    backdrop-filter: blur(4px);
}

.backdrop-filter-blur-5 {
    backdrop-filter: blur(5px);
}



.border-gradient-primer {
    border: var(--border-width, 1px) solid transparent;
    box-shadow: inset 0px 0px 0px 100vw #f3f0ef;
    background: linear-gradient(132deg, var(--color-primary-lighter), var(--color-accent-lighter)) border-box;
}
.gradient-primer {
    background: linear-gradient(132deg, var(--color-primary-lighter), var(--color-accent-lighter)) border-box;
}
.border-gradient-primer {

}
.border-gradient-primer_bg {
    box-shadow: inset 0px 0px 0px 100vw var(--color-bg);
}
.form-control:invalid:focus, .form-control:focus:invalid {
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-lower-h),var(--color-contrast-lower-s),var(--color-contrast-lower-l),0),0 0 0 2px var(--color-error),var(--shadow-sm);
}



.bascro_hom_hed_1 {
    background-image: url(/templates/svg/Ellipse_12.svg);
    background-position: -154px 41px;
    background-size: 28%;
    background-repeat: no-repeat;
}
.etapy-wrap {
    background-image: url(/templates/svg/Ellipse_14.svg);
    background-position: 132% -10%;
    background-size: 61%;
    background-repeat: no-repeat;
}
.etapy-icon {
    transform: translateY(-83px);
}



.aspect-ratio-4\:32 {
    --aspect-ratio: calc(4/3.2);
}





.to-play {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
    .video .removed {
        opacity: 0;
        visibility: hidden;
        z-index: -1;
    }

    .video .removed:hover {
        svg {
            opacity: 0.5;
        }
    }

    .video svg,
    .video .icon {
        width: 15%;
        transition: 0.3s;
    }

    .video img {
        max-width: 100%;
        max-height: 100%;
    }
































@media(min-width:64rem) {
    .feature-v3 {
        overflow-x: clip
    }

    .feature-v3__media-wrapper {
        position: relative;
        height: 520px
    }

    .feature-v3__media-wrapper>* {
        position: absolute;
        top: 0;
        height: 100%;
        max-width: none;
        width: auto
    }
}

.feature-v4 {
    --feature-text-offset: 33%;
    position: relative;
    z-index: 1
}

@media(min-width:32rem) {
    .feature-v4__text-offset\@xs {
        width: calc(100% + var(--feature-text-offset))
    }

    .feature-v4--invert\@xs .feature-v4__grid>*:last-child {
        order: -1
    }

    .feature-v4--invert\@xs .feature-v4__text-offset\@xs {
        margin-left: calc(var(--feature-text-offset) * -1)
    }
}

@media(min-width:48rem) {
    .feature-v4__text-offset\@sm {
        width: calc(100% + var(--feature-text-offset))
    }

    .feature-v4--invert\@sm .feature-v4__grid>*:last-child {
        order: -1
    }

    .feature-v4--invert\@sm .feature-v4__text-offset\@sm {
        margin-left: calc(var(--feature-text-offset) * -1)
    }
}

@media(min-width:64rem) {
    .feature-v4__text-offset\@md {
        width: calc(100% + var(--feature-text-offset))
    }

    .feature-v4--invert\@md .feature-v4__grid>*:last-child {
        order: -1
    }

    .feature-v4--invert\@md .feature-v4__text-offset\@md {
        margin-left: calc(var(--feature-text-offset) * -1)
    }
}

@media(min-width:80rem) {
    .feature-v4__text-offset\@lg {
        width: calc(100% + var(--feature-text-offset))
    }

    .feature-v4--invert\@lg .feature-v4__grid>*:last-child {
        order: -1
    }

    .feature-v4--invert\@lg .feature-v4__text-offset\@lg {
        margin-left: calc(var(--feature-text-offset) * -1)
    }
}

@media(min-width:90rem) {
    .feature-v4__text-offset\@xl {
        width: calc(100% + var(--feature-text-offset))
    }

    .feature-v4--invert\@xl .feature-v4__grid>*:last-child {
        order: -1
    }

    .feature-v4--invert\@xl .feature-v4__text-offset\@xl {
        margin-left: calc(var(--feature-text-offset) * -1)
    }
}