/* unbounded-700 - latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/unbounded-v12-latin-ext-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-regular - latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/manrope-v20-latin-ext-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-700 - latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/manrope-v20-latin-ext-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


@charset "UTF-8";

@-webkit-keyframes pulseRipple {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        -webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 50%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 50%, transparent)
    }

    70% {
        -webkit-transform: translate(-50%, -50%) scale(1.08);
        transform: translate(-50%, -50%) scale(1.08);
        -webkit-box-shadow: 0 0 0 24px color-mix(in srgb, var(--element-bg) 0%, transparent);
        box-shadow: 0 0 0 24px color-mix(in srgb, var(--element-bg) 0%, transparent)
    }

    to {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        -webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 0%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 0%, transparent)
    }
}

@keyframes pulseRipple {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        -webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 50%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 50%, transparent)
    }

    70% {
        -webkit-transform: translate(-50%, -50%) scale(1.08);
        transform: translate(-50%, -50%) scale(1.08);
        -webkit-box-shadow: 0 0 0 24px color-mix(in srgb, var(--element-bg) 0%, transparent);
        box-shadow: 0 0 0 24px color-mix(in srgb, var(--element-bg) 0%, transparent)
    }

    to {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        -webkit-box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 0%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--element-bg) 0%, transparent)
    }
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@-webkit-keyframes shake {

    0%,
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    15% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    30% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    45% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    75% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    90% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@keyframes shake {

    0%,
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    15% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    30% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    45% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    75% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    90% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@-webkit-keyframes waveMoveLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }
}

@keyframes waveMoveLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    to {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }
}

@-webkit-keyframes waveMoveRight {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes waveMoveRight {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes orbitClockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes orbitClockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes orbitCounterClockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@keyframes orbitCounterClockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

html {
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    scroll-behavior: smooth
}

body {
    margin: 0
}

details,
main {
    display: block
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none;
    max-width: 100%;
    height: auto
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio],
legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

:root {
    --color-1-tint-3: #f4f7fb;
    --color-1-tint-2: #dce8f8;
    --color-1-tint-1: #94bef4;
    --color-1-shade-1: #1b56b3;
    --color-1-shade-2: #10356e;
    --color-1-shade-3: #081528;
    --color-1-tint-3: #f6f6f6;
    --color-1-tint-2: #d6e4f0;
    --color-1-tint-1: #9dc2f1;
    --color-1-base: #2772db;
    --color-1-shade-1: #0060c0;
    --color-1-shade-2: #0056ab;
    --color-1-shade-3: #003061;
    --h1: 1.625rem;
    --h2: 1.5rem;
    --h3: 1.375rem;
    --h4: 1.25rem;
    --h5: 1.125rem;
    --h6: 1rem
}

body,
html {
    min-width: 375px;
    overflow-x: clip
}

body {
    --header-height: 74px;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    background: #f2f5fc;
    color: var(--color-1-shade-3);
    font-weight: 400;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
    -webkit-font-feature-settings: "kern" 1, "liga" 1;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-tap-highlight-color: transparent
}

.js-scroll-x-wrapper {
    min-height: 100vh
}

.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, color-mix(in srgb, #fff 10%, transparent) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform
}

.text-link {
    color: var(--section-accent)
}

.d-ib {
    display: inline-block
}

.element-center {
    margin-left: auto;
    margin-right: auto
}

.mt-0 {
    margin-top: 0 !important
}

.m-0 {
    margin: 0 !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.w-100 {
    width: 100% !important
}

.w-auto {
    width: auto !important
}

.h-auto {
    height: auto !important
}

.h-100 {
    height: 100% !important
}

.default-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem 2rem;
    grid-template-areas: "H H H H H H H H H H H H" "B B B B B B B B B B B B" "F F F F F F F F F F F F"
}

.default-grid__header {
    grid-area: H
}

.default-grid__body {
    grid-area: B
}

.default-grid__footer {
    grid-area: F;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 1rem
}

.js-collapse {
    overflow: hidden;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.js-collapse.lh-0 {
    max-height: 0
}

.js-collapse.lh-1 {
    max-height: 1lh
}

.js-collapse.lh-2 {
    max-height: 2lh
}

.js-collapse.lh-3 {
    max-height: 3lh
}

.js-collapse.lh-4 {
    max-height: 4lh
}

.is-active .js-collapse {
    max-height: 500px !important
}

.js-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

:has(>.sr-only) {
    position: relative
}

.in-inactive-none,
.is-active .in-active-none {
    display: none
}

.is-active .in-inactive-none {
    display: block
}

.fade-on-scroll {
    will-change: opacity, transform
}

.rating {
    --star-size: 20px;
    --star-offset: 1px;
    width: calc(var(--star-size)*5);
    height: var(--star-size);
    position: relative
}

.rating:after,
.rating:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: repeat-x
}

.rating:before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.62747L11.9214 6.24697C12.1014 6.67976 12.5084 6.97547 12.9756 7.01293L17.9627 7.41275L14.1631 10.6676C13.8071 10.9725 13.6516 11.451 13.7604 11.9069L14.9212 16.7735L10.6516 14.1656C10.2515 13.9213 9.74845 13.9213 9.34843 14.1656L5.07875 16.7735L6.23961 11.9069C6.34837 11.451 6.19291 10.9725 5.83692 10.6676L2.03726 7.41275L7.02438 7.01293C7.49162 6.97547 7.89863 6.67976 8.07864 6.24697L10 1.62747Z' stroke='%23f8b400' stroke-width='2'/%3E%3C/svg%3E%0A")
}

.rating:after {
    width: calc(var(--star-size)*var(--star-rating));
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.42292 1.38746C9.63642 0.874148 10.3636 0.874147 10.5771 1.38746L12.4984 6.00695C12.5884 6.22335 12.7919 6.3712 13.0256 6.38993L18.0127 6.78975C18.5668 6.83417 18.7916 7.52574 18.3693 7.88741L14.5697 11.1422C14.3917 11.2947 14.314 11.5339 14.3683 11.7619L15.5292 16.6285C15.6582 17.1693 15.0699 17.5967 14.5955 17.3069L10.3258 14.699C10.1258 14.5768 9.87423 14.5768 9.67422 14.699L5.40454 17.3069C4.9301 17.5967 4.34182 17.1693 4.47081 16.6285L5.63167 11.7619C5.68605 11.5339 5.60832 11.2947 5.43032 11.1422L1.63066 7.88741C1.20845 7.52574 1.43315 6.83417 1.98731 6.78975L6.97444 6.38993C7.20806 6.3712 7.41156 6.22335 7.50157 6.00695L9.42292 1.38746Z' fill='%23f8b400'/%3E%3C/svg%3E%0A")
}

.swiper {
    padding: 20px 16px !important;
    margin: -20px -16px !important
}

.categories-content-swiper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: auto
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

:root {
    --container-width: 100%;
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px
}

.row {
    --gap: var(--section-gap, 1rem);
    --cols: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: 0;
    padding: 0
}

.row-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

ul.row {
    list-style: none
}

.gap-0 {
    --section-gap: 0px
}

.row-cols-1 {
    --cols: 1
}

.row-cols-2 {
    --cols: 2
}

.row-cols-3 {
    --cols: 3
}

.row-cols-4 {
    --cols: 4
}

.row-cols-5 {
    --cols: 5
}

.row-cols-6 {
    --cols: 6
}

.col {
    width: calc(100%/var(--cols) - var(--gap)*(var(--cols) - 1)/var(--cols));
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.justify-content-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.flex-shrink-0 {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.flex-grow-1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

h1,
h2,
h3 {
    line-height: 1.2
}

.h1,
h1 {
    font-size: var(--h1)
}

.h2,
h2 {
    font-size: var(--h2)
}

.h3,
h3 {
    font-size: var(--h3)
}

.h4,
h4 {
    font-size: var(--h4)
}

.h5,
h5 {
    font-size: var(--h5)
}

.h6,
h6 {
    font-size: var(--h6)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Unbounded", sans-serif;
    font-weight: 700;
    margin-top: 0;
    text-wrap: balance
}

.pre-title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .75rem;
    position: relative;
    padding-left: 3em;
    color: var(--accent-color);
    font-size: 14px
}

.pre-title:before {
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(../img/fresh-stars.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: .5rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.title {
    margin-bottom: var(--inherit-title-margin, 1rem);
    max-width: 30ch;
    color: var(--section-text);
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
    margin-top: .5rem
}

.subtitle {
    margin-bottom: var(--inherit-subtitle-margin, 2rem);
    color: color-mix(in srgb, var(--section-text) 60%, transparent);
    line-height: 1.4;
    text-wrap: balance;
    position: relative;
    display: inline-block
}

.text-accent {
    color: var(--section-accent)
}

.text-white {
    color: #fff !important
}

.text-light {
    font-weight: 300
}

.text-bold {
    font-weight: 700
}

.text-black {
    font-weight: 900
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-small {
    font-size: .9em
}

.btn,
.socials {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.socials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .5rem
}

.btn {
    border-radius: 50rem;
    font-family: inherit;
    font-size: var(--element-size);
    font-weight: 700;
    text-decoration: none;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: calc(var(--element-size)*3.5);
    padding: 0;
    border: 0;
    line-height: 1.1;
    letter-spacing: 1px
}

.btn:is(button, a) {
    cursor: pointer
}

.btn-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .5rem
}

.btn-text {
    margin-left: var(--element-size);
    margin-right: var(--element-size);
	flex-grow: 1;
}

.btn,
.btn-icon,
.card {
    position: relative;
    z-index: 1
}

.btn-icon,
.btn-icon:before {
    height: 100%;
    border-radius: 50%
}

.btn-icon {
    aspect-ratio: 1/1;
    background: var(--element-text);
    color: var(--element-bg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto
}

.btn-icon:before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2
}

.btn-icon.pulse:before {
    -webkit-animation: pulseRipple 4s 2s infinite cubic-bezier(.4, 0, .6, 1);
    animation: pulseRipple 4s 2s infinite cubic-bezier(.4, 0, .6, 1)
}

.btn-icon.shake svg {
    -webkit-animation: shake 2s 0s infinite cubic-bezier(.4, 0, .6, 1);
    animation: shake 2s 0s infinite cubic-bezier(.4, 0, .6, 1)
}

.btn-icon.scale svg {
    -webkit-animation: scale 2s 0s infinite cubic-bezier(.4, 0, .6, 1);
    animation: scale 2s 0s infinite cubic-bezier(.4, 0, .6, 1)
}

.btn,
.card {
    background: var(--element-bg);
    color: var(--element-text);
    -webkit-transition: all .4s cubic-bezier(.25, 1, .5, 1);
    transition: all .4s cubic-bezier(.25, 1, .5, 1)
}

.btn {
    overflow: hidden
}

.btn-shadow,
.card-shadow {
    -webkit-box-shadow: 2px 4px 12px color-mix(in srgb, var(--section-text, var(--color-1-shade-3)) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--section-text, var(--color-1-shade-3)) 8%, transparent);
    box-shadow: 2px 4px 12px color-mix(in srgb, var(--section-text, var(--color-1-shade-3)) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--section-text, var(--color-1-shade-3)) 8%, transparent)
}

.btn-shadow:before,
.card-shadow:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(color-mix(in srgb, var(--element-text) 35%, transparent)), to(transparent));
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--element-text) 35%, transparent), transparent);
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.btn-border,
.card-border {
    border: 1px solid color-mix(in srgb, var(--element-text) 14%, transparent)
}

.btn-rounded,
.card-rounded {
    border-radius: var(--element-size)
}

.btn-pill,
.card-pill {
    border-radius: 50rem
}

.btn-primary,
.card-primary {
    --element-bg: var(--color-1-base);
    --element-text: #ffffff
}

.btn-primary:hover,
.card-primary:hover {
    --element-bg: var(--color-1-shade-1)
}

.btn-secondary,
.card-secondary {
    --element-bg: var(--color-1-tint-3);
    --element-text: var(--color-1-shade-2)
}

.btn-white,
.card-white {
    --element-bg: #ffffff;
    --element-text: var(--color-1-shade-3)
}

.btn-dark,
.card-dark {
    --element-bg: var(--color-1-shade-3);
    --element-text: #ffffff
}

.btn-large,
.btn-normal,
.card-large,
.card-normal {
    --element-size: 1rem
}

.btn-small,
.card-small {
    --element-size: 0.75rem
}

.card {
    overflow: hidden;
    padding: var(--element-size);
    font-size: 16px
}

.card:is(a) {
    text-decoration: none
}

.card__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.card__body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.card__number {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--element-text) 50%, transparent);
    -webkit-transition: color .3s ease, -webkit-transform .3s ease;
    transition: color .3s ease, transform .3s ease;
    transition: color .3s ease, transform .3s ease, -webkit-transform .3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.card__badge {
    background: color-mix(in srgb, var(--element-text) 10%, transparent);
    border-radius: 50rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    padding: .5rem .75rem;
    font-size: 14px
}

.card__title {
    color: var(--element-text, var(--section-text))
}

.card__list,
.card__section,
.card__text,
.card__title {
    margin-top: var(--element-size);
    margin-bottom: var(--element-size)
}

.card__list:last-child,
.card__section:last-child,
.card__text:last-child,
.card__title:last-child {
    margin-bottom: 0
}

.card__list:first-child,
.card__section:first-child,
.card__text:first-child,
.card__title:first-child {
    margin-top: 0
}

.card-grid,
.card__img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.card__img {
    position: relative;
    z-index: 1;
    height: 300px;
    margin-left: calc(var(--element-size)*-1);
    margin-right: calc(var(--element-size)*-1);
    margin-top: calc(var(--element-size)*-1);
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-left: var(--element-size);
    padding-right: var(--element-size);
    padding-bottom: var(--element-size);
    border-bottom: 1px solid color-mix(in srgb, var(--element-text) 20%, transparent)
}

.card__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: bottom center;
    object-position: bottom center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1
}

.card-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--element-size)
}

.card-grouped:first-child {
    border-radius: var(--element-size) var(--element-size) 0 0
}

.card-grouped:last-child {
    border-radius: 0 0 var(--element-size) var(--element-size)
}

.wave {
    position: absolute;
    width: 1000px;
    min-width: 100%;
    z-index: -1
}

.wave-top {
    top: 0;
    left: 0;
    -webkit-filter: drop-shadow(-50px 0 0 color-mix(in srgb, var(--wave-bg, var(--element-bg, var(--section-bg))) 30%, transparent));
    filter: drop-shadow(-50px 0 0 color-mix(in srgb, var(--wave-bg, var(--element-bg, var(--section-bg))) 30%, transparent))
}

.wave-bottom {
    bottom: 0;
    left: -280px;
    -webkit-filter: drop-shadow(50px 0 0 color-mix(in srgb, var(--wave-bg, var(--element-bg, var(--section-bg))) 30%, transparent));
    filter: drop-shadow(50px 0 0 color-mix(in srgb, var(--wave-bg, var(--element-bg, var(--section-bg))) 30%, transparent))
}

.section {
    --padding-top: 30px;
    --padding-bottom: 30px;
    color: color-mix(in srgb, var(--section-text) 80%, transparent);
    background: var(--section-bg);
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: calc(var(--padding-top-inherit, var(--padding-top)) + var(--padding-top-add, 0px));
    padding-bottom: calc(var(--padding-bottom-inherit, var(--padding-bottom)) + var(--padding-bottom-add, 0px))
}

.section:has(.custom-container) {
    z-index: 1
}

.section[id] {
    scroll-margin-top: var(--header-height)
}

.section__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem
}

.section__header-col {
    width: 100%
}

.section__header-title {
    --inherit-title-margin: 0px
}

.section__header-subtitle {
    --inherit-subtitle-margin: 0px;
    margin-top: 0
}

.section-primary {
    --section-bg: var(--color-1-base);
    --section-text: #fff;
    --section-accent: var(--color-1-tint-2)
}

.section-secondary {
    --section-bg: #f2f5fc
}

.section-secondary,
.section-transparent,
.section-white {
    --section-text: var(--color-1-shade-3);
    --section-accent: var(--color-1-base)
}

.section-transparent {
    --section-bg: transparent
}

.section-white {
    --section-bg: #fff
}

.section-dark {
    --section-bg:
        radial-gradient(circle at 18% 15%,
            color-mix(in srgb, var(--color-1-base) 22%, transparent) 0%,
            transparent 55%),
        radial-gradient(circle at 85% 88%,
            color-mix(in srgb, var(--color-1-shade-1) 55%, transparent) 0%,
            transparent 60%),
        linear-gradient(135deg,
            var(--color-1-shade-3) 0%,
            color-mix(in srgb, var(--color-1-shade-3) 78%, var(--color-1-shade-2)) 50%,
            var(--color-1-shade-3) 100%);
    --section-text: #fff;
    --section-accent: var(--color-1-tint-1)
}

.section-shape {
    --offset: 1rem;
    margin-left: var(--offset);
    margin-right: var(--offset);
    border-radius: 2rem
}

.section-shape .container {
    width: calc(100% - 1.5rem)
}

.section-full-height {
    --full-height: 100vh;
    min-height: var(--full-height)
}

@supports (height:100svh) {
    .section-full-height {
        --full-height: 100svh
    }
}

.section__body {
    width: 100%
}

.section__footer {
    margin-top: 2rem
}

.custom-container {
    position: relative;
    z-index: 1
}

.custom-container:before {
    content: "";
    display: block;
    height: 1200px;
    aspect-ratio: 1/1;
    background: url(../img/boobles.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: -50%;
    -webkit-transform: translate(-20%, calc(var(--padding-top)*-1));
    transform: translate(-20%, calc(var(--padding-top)*-1));
    z-index: -1;
    opacity: .5
}

.section-wave {
    --wave-height: var(--padding-top);
    --padding-top-add: calc(var(--padding-top) * -1);
    --padding-bottom-add: calc(var(--padding-bottom) * -1);
    z-index: 3
}

.section-wave__top {
    bottom: 100%;
    -webkit-filter: drop-shadow(0 -15px 0 color-mix(in srgb, var(--color-1-base) 5%, transparent));
    filter: drop-shadow(0 -15px 0 color-mix(in srgb, var(--color-1-base) 5%, transparent))
}

.section-wave__bottom {
    top: 100%;
    -webkit-filter: drop-shadow(0 15px 0 color-mix(in srgb, var(--color-1-base) 5%, transparent));
    filter: drop-shadow(0 15px 0 color-mix(in srgb, var(--color-1-base) 5%, transparent))
}

.section-wave__bottom,
.section-wave__top {
    width: 200%;
    height: var(--wave-height);
    position: absolute;
    left: 0;
    pointer-events: none;
    z-index: -1
}

.section:has(+.section-wave) {
    --padding-bottom-add: var(--padding-bottom)
}

.section-wave+.section {
    --padding-top-add: var(--padding-top)
}

.header,
.header__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header {
    --offset: 0.5rem;
    --padding-top-add: calc(var(--padding-top) * -1);
    --padding-bottom-add: calc(var(--padding-bottom) * -1);
    height: var(--header-height);
    position: fixed;
    top: 0;
    right: 0;
    border-radius: 0 0 2rem 2rem;
    margin-left: var(--offset);
    margin-right: var(--offset);
    z-index: 4;
    width: calc(100% - var(--offset)*2);
    -webkit-box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
    box-shadow: 2px 4px 16px rgba(0, 0, 0, .2)
}

.header__inner {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 0 1rem;
    gap: 0 1rem
}

.header__burger {
    display: none
}

.header__menu {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem
}

.header__menu,
.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.menu-column,
.menu-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.menu-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column
}

.menu {
    gap: 0.25rem;
}

.cross,
.menu__item {
    display: inline-block;
    position: relative
}

.menu__item {
    color: inherit;
    text-decoration: none;
    padding: .5rem 1rem
}

.menu__item:before {
    content: "";
    height: 100%;
    border-radius: 50rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    -webkit-transform: scale(0);
    transform: scale(0);
    top: 0;
    left: 0;
    opacity: 0
}

.menu__item.is-active:before {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.cross {
    height: 2em;
    width: 43px
}

.cross span,
.cross span:before,
.menu__item:before {
    display: block;
    position: absolute;
    width: 100%
}

.cross span {
    height: 50%;
    left: 0;
    pointer-events: none
}

.menu__item:before,
.open-menu .cross span {
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.cross span:before {
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: currentColor;
    height: 1px
}

.cross span:first-child {
    top: 0
}

.cross span:nth-child(2) {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.cross span:last-child {
    bottom: 0
}

.open-menu .cross span:first-child {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg)
}

.open-menu .cross span:nth-child(2) {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.open-menu .cross span:last-child {
    bottom: 50%;
    -webkit-transform: translateY(50%) rotate(-45deg);
    transform: translateY(50%) rotate(-45deg)
}

.widget {
    --full-height: 100vh;
    position: absolute;
    left: 0;
    top: calc(100% + var(--offset));
    background: var(--section-bg);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 2rem;
    width: 100%;
    height: calc(var(--full-height) - var(--header-height) - var(--offset)*2);
    -webkit-clip-path: circle(0 at calc(100% - 30px) 30px);
    clip-path: circle(0 at calc(100% - 30px) 30px);
    will-change: clip-path;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.5rem;
    pointer-events: none;
    overflow: hidden;
    gap: 1rem
}

@supports (height:100dvh) {
    .widget {
        --full-height: 100dvh
    }
}

.open-menu .widget {
    pointer-events: all
}

.widget__body {
    width: calc(100% + 6rem);
    margin-left: -3rem;
    margin-right: -3rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.ba-slider {
    --pos: 50%;
    position: relative;
    width: 100%;
    aspect-ratio: 600/350;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    cursor: ew-resize;
    margin-left: auto;
    margin-right: auto;
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.ba-slider:focus-visible {
    outline: 2px solid #3b66f5;
    outline-offset: 4px;
    border-radius: 8px
}

.ba-slider__after,
.ba-slider__before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.ba-slider__before {
    z-index: 2;
    -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0);
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
    will-change: clip-path
}

.ba-slider__img,
.tabs__btn img {
    -o-object-fit: contain;
    object-fit: contain
}

.ba-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    pointer-events: none
}

.ba-slider__label {
    position: absolute;
    bottom: 0;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff
}

.ba-slider__label--before {
    left: 0;
    background: rgba(180, 185, 195, .7);
    border-radius: 0 .5rem 0 0
}

.ba-slider__label--after {
    right: 0;
    background: var(--section-accent);
    border-radius: .5rem 0 0 0
}

.ba-slider__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    z-index: 3;
    width: 2px;
    background-color: rgba(255, 255, 255, .9);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
    will-change: left
}

.ba-slider__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 2px;
    width: 44px;
    height: 44px;
    background-color: #fff;
    color: #1e293b;
    border-radius: 50%;
    -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    -webkit-transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    transition: transform .15s ease, -webkit-transform .15s ease
}

.ba-slider.is-dragging .ba-slider__handle {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1)
}

.tabs__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px
}

.tabs__btn {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 500;
    color: #475569;
    background: 0 0;
    border: 0;
    border-radius: 1rem 1rem 0 0;
    cursor: pointer;
    -webkit-transition: background-color .25s ease, color .25s ease, -webkit-box-shadow .25s ease;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, -webkit-box-shadow .25s ease;
    position: relative;
    z-index: 1
}

.tabs__btn img {
    height: 30px;
    -o-object-position: center;
    object-position: center
}

.tabs__body,
.tabs__btn.is-active {
    border: 1px solid var(--color-1-tint-2)
}

.tabs__btn.is-active {
    color: #0f172a;
    font-weight: 700;
    background-color: #fff;
    border-bottom: none;
    margin-bottom: -1px
}

.tabs__body {
    display: grid;
    grid-template-columns: 100%;
    position: relative;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    -webkit-box-shadow: 4px 8px 16px rgba(0, 0, 0, .2);
    box-shadow: 4px 8px 16px rgba(0, 0, 0, .2)
}

.tabs__body:has(.tabs__pane.is-active:first-child) {
    border-top-left-radius: 0
}

.tabs__body:has(.tabs__pane.is-active:last-child) {
    border-top-right-radius: 0
}

.tabs__pane {
    grid-area: 1/1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity .3s ease, visibility .3s ease;
    transition: opacity .3s ease, visibility .3s ease
}

.tabs__pane.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2
}

.promo {
    --padding-top-add: var(--header-height)
}

.promo-grid {
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 2rem;
    grid-template-areas: ". . . . . . . B B B B B" "H H H H H H H B B B B B" "F F F F F F F F F F F F"
}

.promo-grid__header {
    grid-area: H
}

.promo-grid__body {
    grid-area: B
}

.promo-grid__footer {
    grid-area: F
}

.promo__title {
    margin-bottom: 1.5rem
}

.promo__custom-cta {
    margin-bottom: 2rem
}

.custom-cta {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.custom-cta__subtitle {
    margin-bottom: 2rem;
    margin-top: 0
}

.custom-cta__img,
.video__btn .icon-pause {
    display: none
}

.custom-cta__row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem
}

.bullet,
.bullets,
.custom-cta__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.bullets {
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 1rem;
    position: relative
}

.bullet {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.bullet__icon {
    width: 4rem
}

.bullet__icon img {
    -webkit-filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, .2));
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, .2))
}

.bullet__text {
    padding: .5rem 1rem;
    font-weight: 400
}

.list,
.list-check li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .5rem
}

.list {
    list-style: none;
    padding: 0;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: .9em
}

.list-check li {
    position: relative
}

.list-check li:not(:last-child) {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-1-tint-2)
}

.list-check li::before {
    content: "";
    display: block;
    left: 0;
    top: .125lh;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%232772db" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-size: 1em;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .1);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .1);
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.video {
    width: 100%;
    aspect-ratio: 9/16;
    border-radius: 16px;
    background-color: #050505;
    cursor: pointer;
    -webkit-box-shadow: 2px 4px 12px rgba(0, 0, 0, .2);
    box-shadow: 2px 4px 12px rgba(0, 0, 0, .2);
    position: relative;
    overflow: hidden
}

.video__info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem .75rem 1rem;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .85)), to(transparent));
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0, transparent 100%);
    z-index: 3;
    -webkit-transition: opacity .4s ease, -webkit-transform .4s ease;
    transition: transform .4s ease, opacity .4s ease;
    transition: transform .4s ease, opacity .4s ease, -webkit-transform .4s ease;
    pointer-events: none
}

.video__tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px
}

.video__tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    background-color: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 4px
}

.video__title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
    min-height: 2lh
}

.video.is-playing .video__info {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0
}

.video__poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

.video__player-wrap video,
.video__poster img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.video__player-wrap {
    position: absolute;
    inset: 0;
    z-index: 1
}

.video__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--color-1-base);
    color: #fff;
    border: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 2px 4px 12px rgba(0, 0, 0, .2);
    box-shadow: 2px 4px 12px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    pointer-events: none
}

.video__btn svg {
    width: 32px;
    height: 32px
}

.video:hover:not(.is-playing) .video__btn {
    background-color: var(--color-1-base);
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1)
}

.video.is-loaded .video__poster {
    opacity: 0;
    pointer-events: none
}

.video.is-playing .video__btn {
    opacity: .3;
    -webkit-transform: translate(-50%, -50%) scale(.9);
    transform: translate(-50%, -50%) scale(.9)
}

.video.is-playing .video__btn .icon-play {
    display: none
}

.video.is-playing .video__btn .icon-pause {
    display: block
}

.video.is-playing:hover .video__btn {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.price-table {
    border-collapse: collapse
}

.price-table__name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem
}

.price-table__value {
    position: relative;
    line-height: 1
}

.price-table__row:not(:first-child) td {
    padding-top: 1rem
}

.price-table__row:not(:last-child) td {
    border-bottom: 1px solid var(--color-1-tint-2);
    padding-bottom: 1rem
}

.price-item {
    border-radius: 1rem;
    padding: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem
}

.price-item:nth-child(even) {
    background: color-mix(in srgb, currentColor 10%, transparent)
}

.price-item__title {
    color: var(--element-text);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 1.5em;
    position: relative
}

.price-item__title:before {
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(../img/fresh-stars.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.price-item__table {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.footer {
    --padding-bottom-add: calc(var(--padding-bottom) * -1);
    margin-left: .5rem;
    margin-right: .5rem;
    border-radius: 2rem 2rem 0 0
}

.footer__socials {
    margin-top: 1rem
}

@media screen and (min-width:430px) {
    .custom-cta {
        --btn-img-width: 120px
    }

    .custom-cta__img {
        width: var(--btn-img-width);
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
        display: block
    }

    .custom-cta__row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .custom-cta__btn {
        padding-right: calc(var(--btn-img-width) - 2rem)
    }

    .custom-cta__subtitle {
        padding-right: var(--btn-img-width)
    }
}

@media screen and (max-width:575px) {
    .section-shape {
        --offset: 0.5rem
    }

    .price-table__name img {
        width: 70
    }
}

@media screen and (min-width:576px) {
    :root {
        --h1: 2rem;
        --h2: 1.75rem
    }

    .row-cols-sm-1 {
        --cols: 1
    }

    .row-cols-sm-2 {
        --cols: 2
    }

    .row-cols-sm-3 {
        --cols: 3
    }

    .row-cols-sm-4 {
        --cols: 4
    }

    .row-cols-sm-5 {
        --cols: 5
    }

    .row-cols-sm-6 {
        --cols: 6
    }

    .btn-large,
    .card-large {
        --element-size: 1.25rem
    }

    .header {
        --offset: 1rem
    }

    .custom-cta {
        --btn-img-width: 150px
    }

    .footer {
        margin-left: 1rem;
        margin-right: 1rem
    }
}

@media (min-width:576px) {
    :root {
        --container-width: 540px
    }

    .container {
        max-width: 540px
    }
}

@media screen and (min-width:768px) {
    :root {
        --h1: 2.5rem;
        --h2: 2rem;
        --h3: 1.5rem
    }

    .row-cols-md-1 {
        --cols: 1
    }

    .row-cols-md-2 {
        --cols: 2
    }

    .row-cols-md-3 {
        --cols: 3
    }

    .row-cols-md-4 {
        --cols: 4
    }

    .row-cols-md-5 {
        --cols: 5
    }

    .row-cols-md-6 {
        --cols: 6
    }

    .section {
        --padding-top: 60px;
        --padding-bottom: 60px
    }
}

@media (min-width:768px) {
    :root {
        --container-width: 720px
    }

    .container {
        max-width: 720px
    }
}

@media screen and (max-width:991px) {
    .header__burger {
        display: inline-block
    }

    .header__menu {
        display: none
    }

    .menu {
        text-align: center
    }

    .menu__item {
        padding: 1rem
    }

    .menu__item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .promo-grid {
        grid-template-areas: "H H H H H H H H H H H H" "B B B B B B B B B B B B" "F F F F F F F F F F F F"
    }
}

@media screen and (min-width:992px) {
    .default-grid {
        grid-template-areas: "H H H H B B B B B B B B" "F F F F B B B B B B B B" ". . . . B B B B B B B B"
    }

    .default-grid__footer {
        position: sticky;
        top: calc(var(--header-height) + 1rem)
    }

    .row-cols-lg-1 {
        --cols: 1
    }

    .row-cols-lg-2 {
        --cols: 2
    }

    .row-cols-lg-3 {
        --cols: 3
    }

    .row-cols-lg-4 {
        --cols: 4
    }

    .row-cols-lg-5 {
        --cols: 5
    }

    .row-cols-lg-6 {
        --cols: 6
    }

    .widget {
        display: none
    }

    .promo__custom-cta {
        margin-bottom: 0
    }
}

@media (min-width:992px) {
    :root {
        --container-width: 960px
    }

    .container {
        max-width: 960px
    }
}

@media screen and (min-width:1024px) {
    .menu__item:hover:before {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@media screen and (min-width:1200px) {
    :root {
        --h1: 3.25rem;
        --h2: 2rem;
        --h3: 1.75rem;
        --h4: 1.5rem;
        --h5: 1.375rem;
        --h6: 1.125rem
    }

    body {
        font-size: 18px;
        line-height: 1.6
    }

    .row-cols-xl-1 {
        --cols: 1
    }

    .row-cols-xl-2 {
        --cols: 2
    }

    .row-cols-xl-3 {
        --cols: 3
    }

    .row-cols-xl-4 {
        --cols: 4
    }

    .row-cols-xl-5 {
        --cols: 5
    }

    .row-cols-xl-6 {
        --cols: 6
    }

    .subtitle-extractor-right {
        padding-right: 2rem
    }

    .subtitle-extractor-right:after {
        content: "";
        display: block;
        height: 2lh;
        aspect-ratio: 3/1;
        background-image: url(../img/extractor-2.webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
        position: absolute;
        left: calc(100% - .5rem);
        top: 0;
        -webkit-transform: scale(-1, 1);
        transform: scale(-1, 1)
    }

    .btn-text {
        margin-left: calc(var(--element-size)*2);
        margin-right: calc(var(--element-size)*2)
    }

    .section {
        --padding-top: 80px;
        --padding-bottom: 80px
    }

    .section-wave__top {
        will-change: transform;
        -webkit-animation: waveMoveLeft 14s linear infinite;
        animation: waveMoveLeft 14s linear infinite
    }

    .section-wave__bottom {
        will-change: transform;
        -webkit-animation: waveMoveRight 14s linear infinite;
        animation: waveMoveRight 14s linear infinite
    }

    .promo__title {
        margin-bottom: 3rem
    }

    .custom-cta {
        --btn-img-width: 180px
    }

    .custom-cta__subtitle {
        margin-bottom: 3rem
    }
}

@media (min-width:1200px) {
    :root {
        --container-width: 1140px
    }

    .container {
        max-width: 1140px
    }
}

@media screen and (min-width:1220px) {
    .section__header {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .section__header-col {
        width: 50%
    }
}

@media (min-width:1400px) {
    :root {
        --container-width: 1320px
    }

    .container {
        max-width: 1320px
    }
}

@media screen and (min-width:1400px) {
    .row-cols-xxl-1 {
        --cols: 1
    }

    .row-cols-xxl-2 {
        --cols: 2
    }

    .row-cols-xxl-3 {
        --cols: 3
    }

    .row-cols-xxl-4 {
        --cols: 4
    }

    .row-cols-xxl-5 {
        --cols: 5
    }

    .row-cols-xxl-6 {
        --cols: 6
    }
}

@media screen and (min-width:1500px) {
    .brand-container {
        position: relative
    }

    .brand-container:after,
    .brand-container:before {
        content: "ReinFach";
        white-space: nowrap;
        position: absolute;
        font-size: calc(var(--padding-bottom)*1.5);
        color: color-mix(in srgb, currentColor 10%, transparent);
        font-weight: 900;
        line-height: 1;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        pointer-events: none
    }

    .brand-container:before {
        top: 0;
        left: -180px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .brand-container:after {
        bottom: 0;
        right: -180px
    }
}

.text-wrap-balance {
	text-wrap: balance;
}