/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    @layer base {

        *,
        ::backdrop,
        :after,
        :before {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-rotate-x: rotateX(0);
            --tw-rotate-y: rotateY(0);
            --tw-rotate-z: rotateZ(0);
            --tw-skew-x: skewX(0);
            --tw-skew-y: skewY(0);
            --tw-pan-x: initial;
            --tw-pan-y: initial;
            --tw-pinch-zoom: initial;
            --tw-scroll-snap-strictness: proximity;
            --tw-space-y-reverse: 0;
            --tw-space-x-reverse: 0;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial;
            --tw-ease: initial
        }
    }
}

@font-face {
    font-family: Bw-Gradual;
    src: url(../../../fonts/Bw-Gradual.woff2)format("woff2"), url(../../../fonts/Bw-Gradual.woff)format("woff"), url(../../../fonts/Bw-Gradual.ttf)format("truetype"), url(../../../fonts/Bw-Gradual.otf)format("opentype");
    font-display: swap
}

@font-face {
    font-family: proxima-nova;
    src: url("../../../fonts/Proxima Nova Bold.otf")format("opentype");
    font-display: swap
}

html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    margin: 0;
    font-size: 2em
}

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

pre {
    font-family: monospace;
    font-size: 1em
}

a {
    background-color: #0000
}

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

b,
strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

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

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

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

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

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

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

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

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

legend {
    box-sizing: border-box;
    color: inherit;
    white-space: normal;
    max-width: 100%;
    padding: 0;
    display: table
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    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
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

@layer theme {

    :host,
    :root {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-red-200: oklch(88.5% .062 18.334);
        --color-red-300: oklch(80.8% .114 19.571);
        --color-red-400: oklch(70.4% .191 22.216);
        --color-red-500: oklch(63.7% .237 25.331);
        --color-red-900: oklch(39.6% .141 25.723);
        --color-lime-400: oklch(84.1% .238 128.85);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-300: oklch(87.2% .01 258.338);
        --color-gray-400: oklch(70.7% .022 261.325);
        --color-gray-500: oklch(55.1% .027 264.364);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-800: oklch(27.8% .033 256.848);
        --color-neutral-200: oklch(92.2% 0 0);
        --color-neutral-800: oklch(26.9% 0 0);
        --color-neutral-900: oklch(20.5% 0 0);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-2xl: 42rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5/1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25/1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-black: 900;
        --leading-tight: 1.25;
        --leading-normal: 1.5;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1)infinite;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

    *,
    ::backdrop,
    :after,
    :before {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    :host,
    html {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    pre,
    samp {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    menu,
    ol,
    ul {
        list-style: none
    }

    audio,
    canvas,
    embed,
    iframe,
    img,
    object,
    svg,
    video {
        vertical-align: middle;
        display: block
    }

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

    button,
    input,
    optgroup,
    select,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: color-mix(in oklab, currentColor 50%, transparent)
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .pointer-events-auto {
        pointer-events: auto
    }

    .pointer-events-none {
        pointer-events: none
    }

    .invisible {
        visibility: hidden
    }

    .visible {
        visibility: visible
    }

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

    .absolute,
    .sr-only {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .inset-0 {
        inset: calc(var(--spacing)*0)
    }

    .-top-\[22px\] {
        top: -22px
    }

    .top-0 {
        top: calc(var(--spacing)*0)
    }

    .top-1\/2 {
        top: 50%
    }

    .top-32 {
        top: calc(var(--spacing)*32)
    }

    .top-\[-4\.125rem\] {
        top: -4.125rem
    }

    .top-\[-4px\] {
        top: -4px
    }

    .top-\[-35px\] {
        top: -35px
    }

    .top-\[-50px\] {
        top: -50px
    }

    .top-\[2px\] {
        top: 2px
    }

    .top-\[8px\] {
        top: 8px
    }

    .top-\[13px\] {
        top: 13px
    }

    .top-\[14px\] {
        top: 14px
    }

    .top-\[16px\] {
        top: 16px
    }

    .top-\[17px\] {
        top: 17px
    }

    .top-\[40px\] {
        top: 40px
    }

    .top-\[62px\] {
        top: 62px
    }

    .top-full {
        top: 100%
    }

    .right-0 {
        right: calc(var(--spacing)*0)
    }

    .right-2 {
        right: calc(var(--spacing)*2)
    }

    .right-4 {
        right: calc(var(--spacing)*4)
    }

    .right-\[-4px\] {
        right: -4px
    }

    .right-\[-16px\] {
        right: -16px
    }

    .right-\[0rem\] {
        right: 0
    }

    .right-\[16px\] {
        right: 16px
    }

    .right-\[24px\] {
        right: 24px
    }

    .right-\[40px\] {
        right: 40px
    }

    .right-\[45px\] {
        right: 45px
    }

    .right-\[62px\] {
        right: 62px
    }

    .bottom-0 {
        bottom: calc(var(--spacing)*0)
    }

    .bottom-2 {
        bottom: calc(var(--spacing)*2)
    }

    .bottom-4 {
        bottom: calc(var(--spacing)*4)
    }

    .bottom-14 {
        bottom: calc(var(--spacing)*14)
    }

    .bottom-\[-4px\] {
        bottom: -4px
    }

    .bottom-\[-50px\] {
        bottom: -50px
    }

    .bottom-\[0\.75rem\] {
        bottom: .75rem
    }

    .bottom-\[2rem\] {
        bottom: 2rem
    }

    .left-0 {
        left: calc(var(--spacing)*0)
    }

    .left-1\/2 {
        left: 50%
    }

    .left-\[2px\] {
        left: 2px
    }

    .left-\[2rem\] {
        left: 2rem
    }

    .left-\[3px\] {
        left: 3px
    }

    .left-\[12px\] {
        left: 12px
    }

    .left-\[17px\] {
        left: 17px
    }

    .left-\[18px\] {
        left: 18px
    }

    .left-\[24px\] {
        left: 24px
    }

    .left-\[45\.5px\] {
        left: 45.5px
    }

    .left-\[45px\] {
        left: 45px
    }

    .z-0 {
        z-index: 0
    }

    .z-5 {
        z-index: 5
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .z-40 {
        z-index: 40
    }

    .z-50 {
        z-index: 50
    }

    .z-100 {
        z-index: 100
    }

    .z-9999 {
        z-index: 9999
    }

    .z-\[1\] {
        z-index: 1
    }

    .z-\[2\] {
        z-index: 2
    }

    .z-\[5\] {
        z-index: 5
    }

    .z-\[49\] {
        z-index: 49
    }

    .z-\[200\] {
        z-index: 200
    }

    .z-\[50000\] {
        z-index: 50000
    }

    .container {
        width: 100%
    }

    @media (min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .m-0 {
        margin: calc(var(--spacing)*0)
    }

    .m-auto {
        margin: auto
    }

    .mx-0 {
        margin-inline: calc(var(--spacing)*0)
    }

    .mx-2 {
        margin-inline: calc(var(--spacing)*2)
    }

    .mx-3 {
        margin-inline: calc(var(--spacing)*3)
    }

    .mx-4 {
        margin-inline: calc(var(--spacing)*4)
    }

    .mx-\[13px\] {
        margin-inline: 13px
    }

    .mx-\[41px\] {
        margin-inline: 41px
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-5 {
        margin-block: calc(var(--spacing)*5)
    }

    .my-6 {
        margin-block: calc(var(--spacing)*6)
    }

    .my-\[60px\] {
        margin-block: 60px
    }

    .my-auto {
        margin-block: auto
    }

    .mt-1 {
        margin-top: calc(var(--spacing)*1)
    }

    .mt-2 {
        margin-top: calc(var(--spacing)*2)
    }

    .mt-4 {
        margin-top: calc(var(--spacing)*4)
    }

    .mt-5 {
        margin-top: calc(var(--spacing)*5)
    }

    .mt-6 {
        margin-top: calc(var(--spacing)*6)
    }

    .mt-10 {
        margin-top: calc(var(--spacing)*10)
    }

    .mt-16 {
        margin-top: calc(var(--spacing)*16)
    }

    .mt-\[0\.75rem\] {
        margin-top: .75rem
    }

    .mt-\[1\.5rem\] {
        margin-top: 1.5rem
    }

    .mt-\[2rem\] {
        margin-top: 2rem
    }

    .mt-\[3rem\] {
        margin-top: 3rem
    }

    .mt-\[14px\] {
        margin-top: 14px
    }

    .mt-\[16px\] {
        margin-top: 16px
    }

    .mt-\[23\.85px\] {
        margin-top: 23.85px
    }

    .mt-\[30px\] {
        margin-top: 30px
    }

    .mt-\[100px\] {
        margin-top: 100px
    }

    .mt-auto {
        margin-top: auto
    }

    .mr-\[20px\] {
        margin-right: 20px
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing)*1)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing)*2)
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing)*3)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing)*4)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing)*5)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing)*6)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing)*8)
    }

    .mb-10 {
        margin-bottom: calc(var(--spacing)*10)
    }

    .mb-16 {
        margin-bottom: calc(var(--spacing)*16)
    }

    .mb-\[0\.5rem\] {
        margin-bottom: .5rem
    }

    .mb-\[0\.75rem\] {
        margin-bottom: .75rem
    }

    .mb-\[0rem\]\! {
        margin-bottom: 0 !important
    }

    .mb-\[1\.5rem\] {
        margin-bottom: 1.5rem
    }

    .mb-\[1\.25rem\] {
        margin-bottom: 1.25rem
    }

    .mb-\[1rem\] {
        margin-bottom: 1rem
    }

    .mb-\[2px\] {
        margin-bottom: 2px
    }

    .mb-\[19\.83px\] {
        margin-bottom: 19.83px
    }

    .mb-\[20vh\] {
        margin-bottom: 20vh
    }

    .mb-\[24px\] {
        margin-bottom: 24px
    }

    .mb-\[44px\] {
        margin-bottom: 44px
    }

    .ml-4 {
        margin-left: calc(var(--spacing)*4)
    }

    .ml-\[697px\] {
        margin-left: 697px
    }

    .ml-auto {
        margin-left: auto
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2
    }

    .line-clamp-2,
    .line-clamp-3 {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .line-clamp-3 {
        -webkit-line-clamp: 3
    }

    .\!flex {
        display: flex !important
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .flex\! {
        display: flex !important
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .hidden\! {
        display: none !important
    }

    .inline {
        display: inline
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .\!h-\[152px\] {
        height: 152px !important
    }

    .\!h-\[211\.32px\] {
        height: 211.32px !important
    }

    .\!h-\[259\.05px\] {
        height: 259.05px !important
    }

    .\!h-\[417px\] {
        height: 417px !important
    }

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

    .h-0 {
        height: calc(var(--spacing)*0)
    }

    .h-1 {
        height: calc(var(--spacing)*1)
    }

    .h-2 {
        height: calc(var(--spacing)*2)
    }

    .h-2\.5 {
        height: calc(var(--spacing)*2.5)
    }

    .h-4 {
        height: calc(var(--spacing)*4)
    }

    .h-5 {
        height: calc(var(--spacing)*5)
    }

    .h-6 {
        height: calc(var(--spacing)*6)
    }

    .h-7 {
        height: calc(var(--spacing)*7)
    }

    .h-8 {
        height: calc(var(--spacing)*8)
    }

    .h-10 {
        height: calc(var(--spacing)*10)
    }

    .h-12 {
        height: calc(var(--spacing)*12)
    }

    .h-14 {
        height: calc(var(--spacing)*14)
    }

    .h-15 {
        height: calc(var(--spacing)*15)
    }

    .h-72 {
        height: calc(var(--spacing)*72)
    }

    .h-\[2rem\] {
        height: 2rem
    }

    .h-\[3rem\] {
        height: 3rem
    }

    .h-\[6\.25rem\] {
        height: 6.25rem
    }

    .h-\[8px\] {
        height: 8px
    }

    .h-\[10px\] {
        height: 10px
    }

    .h-\[12px\] {
        height: 12px
    }

    .h-\[14px\] {
        height: 14px
    }

    .h-\[15px\] {
        height: 15px
    }

    .h-\[20px\] {
        height: 20px
    }

    .h-\[22px\] {
        height: 22px
    }

    .h-\[24\.4px\] {
        height: 24.4px
    }

    .h-\[24px\] {
        height: 24px
    }

    .h-\[27px\] {
        height: 27px
    }

    .h-\[28px\] {
        height: 28px
    }

    .h-\[30px\] {
        height: 30px
    }

    .h-\[32px\] {
        height: 32px
    }

    .h-\[36px\] {
        height: 36px
    }

    .h-\[37px\] {
        height: 37px
    }

    .h-\[40px\] {
        height: 40px
    }

    .h-\[47\.03px\] {
        height: 47.03px
    }

    .h-\[48px\] {
        height: 48px
    }

    .h-\[52px\] {
        height: 52px
    }

    .h-\[56px\] {
        height: 56px
    }

    .h-\[58px\] {
        height: 58px
    }

    .h-\[60px\] {
        height: 60px
    }

    .h-\[63px\] {
        height: 63px
    }

    .h-\[70\%\] {
        height: 70%
    }

    .h-\[75\.07px\] {
        height: 75.07px
    }

    .h-\[80\%\] {
        height: 80%
    }

    .h-\[80px\] {
        height: 80px
    }

    .h-\[84px\] {
        height: 84px
    }

    .h-\[104px\] {
        height: 104px
    }

    .h-\[112px\] {
        height: 112px
    }

    .h-\[116\.91px\] {
        height: 116.91px
    }

    .h-\[137px\] {
        height: 137px
    }

    .h-\[141\.19px\] {
        height: 141.19px
    }

    .h-\[150px\] {
        height: 150px
    }

    .h-\[160px\] {
        height: 160px
    }

    .h-\[167px\] {
        height: 167px
    }

    .h-\[190px\] {
        height: 190px
    }

    .h-\[192\.59px\] {
        height: 192.59px
    }

    .h-\[198px\] {
        height: 198px
    }

    .h-\[216\.67px\] {
        height: 216.67px
    }

    .h-\[229px\] {
        height: 229px
    }

    .h-\[240\.74px\] {
        height: 240.74px
    }

    .h-\[240px\] {
        height: 240px
    }

    .h-\[256px\] {
        height: 256px
    }

    .h-\[277px\] {
        height: 277px
    }

    .h-\[280px\] {
        height: 280px
    }

    .h-\[328px\] {
        height: 328px
    }

    .h-\[346px\] {
        height: 346px
    }

    .h-\[375px\] {
        height: 375px
    }

    .h-\[380px\] {
        height: 380px
    }

    .h-\[400px\] {
        height: 400px
    }

    .h-\[408px\] {
        height: 408px
    }

    .h-\[460px\] {
        height: 460px
    }

    .h-\[500px\] {
        height: 500px
    }

    .h-\[515px\] {
        height: 515px
    }

    .h-\[560px\] {
        height: 560px
    }

    .h-\[564px\] {
        height: 564px
    }

    .h-\[600px\] {
        height: 600px
    }

    .h-\[661px\] {
        height: 661px
    }

    .h-\[668px\] {
        height: 668px
    }

    .h-\[full\] {
        height: full
    }

    .h-auto {
        height: auto
    }

    .h-fit {
        height: fit-content
    }

    .h-full {
        height: 100%
    }

    .h-max {
        height: max-content
    }

    .max-h-60 {
        max-height: calc(var(--spacing)*60)
    }

    .max-h-\[55px\] {
        max-height: 55px
    }

    .max-h-\[330px\] {
        max-height: 330px
    }

    .max-h-\[394px\] {
        max-height: 394px
    }

    .max-h-full {
        max-height: 100%
    }

    .min-h-\[40px\] {
        min-height: 40px
    }

    .min-h-\[200px\] {
        min-height: 200px
    }

    .min-h-\[300px\] {
        min-height: 300px
    }

    .min-h-\[463px\] {
        min-height: 463px
    }

    .min-h-\[602px\] {
        min-height: 602px
    }

    .min-h-screen {
        min-height: 100vh
    }

    .\!w-\[152px\] {
        width: 152px !important
    }

    .\!w-\[320px\] {
        width: 320px !important
    }

    .\!w-auto {
        width: auto !important
    }

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

    .w-1 {
        width: calc(var(--spacing)*1)
    }

    .w-1\/2 {
        width: 50%
    }

    .w-1\/3 {
        width: 33.3333%
    }

    .w-2 {
        width: calc(var(--spacing)*2)
    }

    .w-2\.5 {
        width: calc(var(--spacing)*2.5)
    }

    .w-2\/3 {
        width: 66.6667%
    }

    .w-3\/4 {
        width: 75%
    }

    .w-4 {
        width: calc(var(--spacing)*4)
    }

    .w-4\/5 {
        width: 80%
    }

    .w-5 {
        width: calc(var(--spacing)*5)
    }

    .w-5\/6 {
        width: 83.3333%
    }

    .w-6 {
        width: calc(var(--spacing)*6)
    }

    .w-10 {
        width: calc(var(--spacing)*10)
    }

    .w-12 {
        width: calc(var(--spacing)*12)
    }

    .w-14 {
        width: calc(var(--spacing)*14)
    }

    .w-15 {
        width: calc(var(--spacing)*15)
    }

    .w-16 {
        width: calc(var(--spacing)*16)
    }

    .w-20 {
        width: calc(var(--spacing)*20)
    }

    .w-24 {
        width: calc(var(--spacing)*24)
    }

    .w-32 {
        width: calc(var(--spacing)*32)
    }

    .w-\[0px\] {
        width: 0
    }

    .w-\[8px\] {
        width: 8px
    }

    .w-\[10px\] {
        width: 10px
    }

    .w-\[14px\] {
        width: 14px
    }

    .w-\[15px\] {
        width: 15px
    }

    .w-\[20px\] {
        width: 20px
    }

    .w-\[30px\] {
        width: 30px
    }

    .w-\[32px\] {
        width: 32px
    }

    .w-\[39\.19px\] {
        width: 39.19px
    }

    .w-\[40px\] {
        width: 40px
    }

    .w-\[42px\] {
        width: 42px
    }

    .w-\[44\.22px\] {
        width: 44.22px
    }

    .w-\[44\.29px\] {
        width: 44.29px
    }

    .w-\[46px\] {
        width: 46px
    }

    .w-\[47px\] {
        width: 47px
    }

    .w-\[50\%\] {
        width: 50%
    }

    .w-\[50px\] {
        width: 50px
    }

    .w-\[52px\] {
        width: 52px
    }

    .w-\[57\.4px\] {
        width: 57.4px
    }

    .w-\[60px\] {
        width: 60px
    }

    .w-\[65\.5px\] {
        width: 65.5px
    }

    .w-\[77px\] {
        width: 77px
    }

    .w-\[80\%\] {
        width: 80%
    }

    .w-\[85px\] {
        width: 85px
    }

    .w-\[97px\] {
        width: 97px
    }

    .w-\[98px\] {
        width: 98px
    }

    .w-\[100px\] {
        width: 100px
    }

    .w-\[102px\] {
        width: 102px
    }

    .w-\[112px\] {
        width: 112px
    }

    .w-\[120px\] {
        width: 120px
    }

    .w-\[160px\] {
        width: 160px
    }

    .w-\[171px\] {
        width: 171px
    }

    .w-\[186px\] {
        width: 186px
    }

    .w-\[187px\] {
        width: 187px
    }

    .w-\[198px\] {
        width: 198px
    }

    .w-\[199px\] {
        width: 199px
    }

    .w-\[200px\] {
        width: 200px
    }

    .w-\[235px\] {
        width: 235px
    }

    .w-\[240px\] {
        width: 240px
    }

    .w-\[246px\] {
        width: 246px
    }

    .w-\[256px\] {
        width: 256px
    }

    .w-\[272px\] {
        width: 272px
    }

    .w-\[280px\] {
        width: 280px
    }

    .w-\[290px\] {
        width: 290px
    }

    .w-\[298px\] {
        width: 298px
    }

    .w-\[303px\] {
        width: 303px
    }

    .w-\[312px\] {
        width: 312px
    }

    .w-\[320px\] {
        width: 320px
    }

    .w-\[340px\] {
        width: 340px
    }

    .w-\[400px\] {
        width: 400px
    }

    .w-\[408px\] {
        width: 408px
    }

    .w-\[480px\] {
        width: 480px
    }

    .w-\[500px\] {
        width: 500px
    }

    .w-\[532px\] {
        width: 532px
    }

    .w-\[600px\] {
        width: 600px
    }

    .w-\[607px\] {
        width: 607px
    }

    .w-\[920px\] {
        width: 920px
    }

    .w-\[1232px\] {
        width: 1232px
    }

    .w-\[1333px\] {
        width: 1333px
    }

    .w-auto {
        width: auto
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .w-max {
        width: max-content
    }

    .w-min {
        width: min-content
    }

    .\!max-w-\[528px\] {
        max-width: 528px !important
    }

    .\!max-w-full {
        max-width: 100% !important
    }

    .max-w-2xl {
        max-width: var(--container-2xl)
    }

    .max-w-\[50\%\] {
        max-width: 50%
    }

    .max-w-\[92px\] {
        max-width: 92px
    }

    .max-w-\[136px\] {
        max-width: 136px
    }

    .max-w-\[138px\] {
        max-width: 138px
    }

    .max-w-\[187px\] {
        max-width: 187px
    }

    .max-w-\[198px\] {
        max-width: 198px
    }

    .max-w-\[200px\] {
        max-width: 200px
    }

    .max-w-\[234px\] {
        max-width: 234px
    }

    .max-w-\[240px\] {
        max-width: 240px
    }

    .max-w-\[244px\] {
        max-width: 244px
    }

    .max-w-\[319px\] {
        max-width: 319px
    }

    .max-w-\[336px\] {
        max-width: 336px
    }

    .max-w-\[343px\] {
        max-width: 343px
    }

    .max-w-\[362px\] {
        max-width: 362px
    }

    .max-w-\[400px\] {
        max-width: 400px
    }

    .max-w-\[432px\] {
        max-width: 432px
    }

    .max-w-\[452px\] {
        max-width: 452px
    }

    .max-w-\[500px\] {
        max-width: 500px
    }

    .max-w-\[532px\] {
        max-width: 532px
    }

    .max-w-\[540px\] {
        max-width: 540px
    }

    .max-w-\[568px\] {
        max-width: 568px
    }

    .max-w-\[600px\] {
        max-width: 600px
    }

    .max-w-\[608px\] {
        max-width: 608px
    }

    .max-w-\[660px\] {
        max-width: 660px
    }

    .max-w-\[700px\] {
        max-width: 700px
    }

    .max-w-\[800px\] {
        max-width: 800px
    }

    .max-w-\[882px\] {
        max-width: 882px
    }

    .max-w-\[1232px\] {
        max-width: 1232px
    }

    .max-w-\[1392px\] {
        max-width: 1392px
    }

    .max-w-\[1440px\] {
        max-width: 1440px
    }

    .max-w-\[calc\(100vw-120px\)\] {
        max-width: calc(100vw - 120px)
    }

    .max-w-full {
        max-width: 100%
    }

    .min-w-0 {
        min-width: calc(var(--spacing)*0)
    }

    .min-w-\[72px\] {
        min-width: 72px
    }

    .min-w-\[132px\] {
        min-width: 132px
    }

    .min-w-\[180px\] {
        min-width: 180px
    }

    .min-w-\[246px\] {
        min-width: 246px
    }

    .min-w-\[264px\] {
        min-width: 264px
    }

    .min-w-\[300px\] {
        min-width: 300px
    }

    .min-w-max {
        min-width: max-content
    }

    .flex-0 {
        flex: 0
    }

    .flex-1 {
        flex: 1
    }

    .flex-none {
        flex: none
    }

    .flex-shrink-0,
    .shrink-0 {
        flex-shrink: 0
    }

    .flex-grow {
        flex-grow: 1
    }

    .flex-grow-0 {
        flex-grow: 0
    }

    .grow {
        flex-grow: 1
    }

    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1/2*100%)*-1)
    }

    .-translate-x-1\/2,
    .-translate-x-full {
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-x-full {
        --tw-translate-x: -100%
    }

    .translate-x-1\/2 {
        --tw-translate-x: calc(1/2*100%)
    }

    .-translate-y-1\/2,
    .translate-x-1\/2 {
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1/2*100%)*-1)
    }

    .scale-75 {
        --tw-scale-x: 75%;
        --tw-scale-y: 75%;
        --tw-scale-z: 75%
    }

    .scale-75,
    .scale-95 {
        scale: var(--tw-scale-x)var(--tw-scale-y)
    }

    .scale-95 {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%
    }

    .scale-100 {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%
    }

    .scale-100,
    .scale-125 {
        scale: var(--tw-scale-x)var(--tw-scale-y)
    }

    .scale-125 {
        --tw-scale-x: 125%;
        --tw-scale-y: 125%;
        --tw-scale-z: 125%
    }

    .rotate-45 {
        rotate: 45deg
    }

    .rotate-180 {
        rotate: 180deg
    }

    .transform {
        transform: var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)
    }

    .animate-pulse {
        animation: var(--animate-pulse)
    }

    .animate-spin {
        animation: var(--animate-spin)
    }

    .cursor-grab {
        cursor: grab
    }

    .cursor-not-allowed {
        cursor: not-allowed
    }

    .cursor-pointer {
        cursor: pointer
    }

    .touch-pan-x {
        --tw-pan-x: pan-x
    }

    .touch-pan-x,
    .touch-pan-y {
        touch-action: var(--tw-pan-x, )var(--tw-pan-y, )var(--tw-pinch-zoom, )
    }

    .touch-pan-y {
        --tw-pan-y: pan-y
    }

    .resize {
        resize: both
    }

    .snap-x {
        scroll-snap-type: x var(--tw-scroll-snap-strictness)
    }

    .snap-mandatory {
        --tw-scroll-snap-strictness: mandatory
    }

    .snap-start {
        scroll-snap-align: start
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .grid-cols-\[1fr_minmax\(0\,400px\)\] {
        grid-template-columns: 1fr minmax(0, 400px)
    }

    .grid-cols-\[minmax\(0\,400px\)_1fr\] {
        grid-template-columns: minmax(0, 400px) 1fr
    }

    .flex-col {
        flex-direction: column
    }

    .flex-row {
        flex-direction: row
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .content-center {
        align-content: center
    }

    .content-start {
        align-content: flex-start
    }

    .\!items-center {
        align-items: center !important
    }

    .items-center {
        align-items: center
    }

    .items-end {
        align-items: flex-end
    }

    .items-start {
        align-items: flex-start
    }

    .items-stretch {
        align-items: stretch
    }

    .\!justify-center {
        justify-content: center !important
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .justify-end {
        justify-content: flex-end
    }

    .justify-start {
        justify-content: flex-start
    }

    .\!gap-0 {
        gap: calc(var(--spacing)*0) !important
    }

    .\!gap-3 {
        gap: calc(var(--spacing)*3) !important
    }

    .gap-0 {
        gap: calc(var(--spacing)*0)
    }

    .gap-0\.5 {
        gap: calc(var(--spacing)*.5)
    }

    .gap-1 {
        gap: calc(var(--spacing)*1)
    }

    .gap-2 {
        gap: calc(var(--spacing)*2)
    }

    .gap-2\.5 {
        gap: calc(var(--spacing)*2.5)
    }

    .gap-3 {
        gap: calc(var(--spacing)*3)
    }

    .gap-4 {
        gap: calc(var(--spacing)*4)
    }

    .gap-5 {
        gap: calc(var(--spacing)*5)
    }

    .gap-6 {
        gap: calc(var(--spacing)*6)
    }

    .gap-8 {
        gap: calc(var(--spacing)*8)
    }

    .gap-10 {
        gap: calc(var(--spacing)*10)
    }

    .gap-16 {
        gap: calc(var(--spacing)*16)
    }

    .gap-\[0\.5rem\] {
        gap: .5rem
    }

    .gap-\[0\.5rem\]\! {
        gap: .5rem !important
    }

    .gap-\[0\.25rem\] {
        gap: .25rem
    }

    .gap-\[1\.5rem\] {
        gap: 1.5rem
    }

    .gap-\[1px\] {
        gap: 1px
    }

    .gap-\[1rem\] {
        gap: 1rem
    }

    .gap-\[2px\] {
        gap: 2px
    }

    .gap-\[2rem\] {
        gap: 2rem
    }

    .gap-\[4px\] {
        gap: 4px
    }

    .gap-\[4rem\] {
        gap: 4rem
    }

    .gap-\[6px\] {
        gap: 6px
    }

    .gap-\[8px\] {
        gap: 8px
    }

    .gap-\[10px\] {
        gap: 10px
    }

    .gap-\[14px\] {
        gap: 14px
    }

    .gap-\[15px\] {
        gap: 15px
    }

    .gap-\[16px\] {
        gap: 16px
    }

    .gap-\[18px\] {
        gap: 18px
    }

    .gap-\[21px\] {
        gap: 21px
    }

    .gap-\[24px\] {
        gap: 24px
    }

    .gap-\[30px\] {
        gap: 30px
    }

    .gap-\[40px\] {
        gap: 40px
    }

    .gap-\[56px\] {
        gap: 56px
    }

    .gap-\[60px\] {
        gap: 60px
    }

    .gap-px {
        gap: 1px
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-2>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-3>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-4>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))
    }

    .gap-x-4 {
        column-gap: calc(var(--spacing)*4)
    }

    .gap-x-6 {
        column-gap: calc(var(--spacing)*6)
    }

    .gap-x-10 {
        column-gap: calc(var(--spacing)*10)
    }

    :where(.-space-x-2>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing)*-2)*var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing)*-2)*calc(1 - var(--tw-space-x-reverse)))
    }

    :where(.space-x-2>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))
    }

    :where(.space-x-4>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))
    }

    .gap-y-4 {
        row-gap: calc(var(--spacing)*4)
    }

    .gap-y-6 {
        row-gap: calc(var(--spacing)*6)
    }

    .gap-y-8 {
        row-gap: calc(var(--spacing)*8)
    }

    .gap-y-10 {
        row-gap: calc(var(--spacing)*10)
    }

    .self-stretch {
        align-self: stretch
    }

    .truncate {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .overflow-auto {
        overflow: auto
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .overflow-y-auto {
        overflow-y: auto
    }

    .scroll-smooth {
        scroll-behavior: smooth
    }

    .rounded {
        border-radius: .25rem
    }

    .rounded-2xl {
        border-radius: var(--radius-2xl)
    }

    .rounded-\[0\.5rem\] {
        border-radius: .5rem
    }

    .rounded-\[1\.25rem\] {
        border-radius: 1.25rem
    }

    .rounded-\[1rem\] {
        border-radius: 1rem
    }

    .rounded-\[6px\] {
        border-radius: 6px
    }

    .rounded-\[8px\] {
        border-radius: 8px
    }

    .rounded-\[10px\] {
        border-radius: 10px
    }

    .rounded-\[12px\] {
        border-radius: 12px
    }

    .rounded-\[16px\] {
        border-radius: 16px
    }

    .rounded-\[20px\] {
        border-radius: 20px
    }

    .rounded-\[24px\] {
        border-radius: 24px
    }

    .rounded-\[40px\] {
        border-radius: 40px
    }

    .rounded-\[47px\] {
        border-radius: 47px
    }

    .rounded-\[64px\] {
        border-radius: 64px
    }

    .rounded-\[var\(--border-radius-medium-large\)\] {
        border-radius: var(--border-radius-medium-large)
    }

    .rounded-\[var\(--border-radius-rounded\)\] {
        border-radius: var(--border-radius-rounded)
    }

    .rounded-full {
        border-radius: 3.40282e+38px
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .rounded-tl-\[12px\] {
        border-top-left-radius: 12px
    }

    .rounded-tl-\[20px\] {
        border-top-left-radius: 20px
    }

    .rounded-tr-\[12px\] {
        border-top-right-radius: 12px
    }

    .rounded-tr-\[20px\] {
        border-top-right-radius: 20px
    }

    .rounded-br-\[12px\] {
        border-bottom-right-radius: 12px
    }

    .rounded-br-\[20px\] {
        border-bottom-right-radius: 20px
    }

    .rounded-br-xl {
        border-bottom-right-radius: var(--radius-xl)
    }

    .rounded-bl-\[12px\] {
        border-bottom-left-radius: 12px
    }

    .rounded-bl-\[20px\] {
        border-bottom-left-radius: 20px
    }

    .rounded-bl-xl {
        border-bottom-left-radius: var(--radius-xl)
    }

    .border,
    .border-1 {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-2 {
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .border-3 {
        border-style: var(--tw-border-style);
        border-width: 3px
    }

    .border-\[1\.5px\] {
        border-style: var(--tw-border-style);
        border-width: 1.5px
    }

    .border-\[2px\] {
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-r {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-b-2 {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 2px
    }

    .border-l {
        border-left-style: var(--tw-border-style);
        border-left-width: 1px
    }

    .\!border-none {
        --tw-border-style: none !important;
        border-style: none !important
    }

    .border-dashed {
        --tw-border-style: dashed;
        border-style: dashed
    }

    .border-none {
        --tw-border-style: none;
        border-style: none
    }

    .\!border-\[\#ff0090\] {
        border-color: #ff0090 !important
    }

    .\!border-\[var\(--brand-color\)\] {
        border-color: var(--brand-color) !important
    }

    .\!border-\[var\(--primary-bg\)\] {
        border-color: var(--primary-bg) !important
    }

    .border-\[\#0B0C0B33\] {
        border-color: #0b0c0b33
    }

    .border-\[\#3C3D3C\] {
        border-color: #3c3d3c
    }

    .border-\[\#1764f9\] {
        border-color: #1764f9
    }

    .border-\[\#C4C4C4\] {
        border-color: #c4c4c4
    }

    .border-\[\#ff0090\] {
        border-color: #ff0090
    }

    .border-\[\#F3F3F3\] {
        border-color: #f3f3f3
    }

    .border-\[\#F3F3F34D\] {
        border-color: #f3f3f34d
    }

    .border-\[\#F3F3F333\] {
        border-color: #f3f3f333
    }

    .border-\[\#ff0090\] {
        border-color: #ff0090
    }

    .border-\[\#f3f3f3\]\/10 {
        border-color: oklab(96.4153% -5.96046e-8 5.96046e-8/.1)
    }

    .border-\[\#f3f3f3\]\/20 {
        border-color: oklab(96.4153% -5.96046e-8 5.96046e-8/.2)
    }

    .border-\[\#ffffff\] {
        border-color: #fff
    }

    .border-\[text-color-default\] {
        border-color: text-color-default
    }

    .border-\[var\(--black-color-40\)\] {
        border-color: var(--black-color-40)
    }

    .border-\[var\(--border-color-default\)\] {
        border-color: var(--border-color-default)
    }

    .border-\[var\(--border-color-silver\)\] {
        border-color: var(--border-color-silver)
    }

    .border-\[var\(--brand-color\)\] {
        border-color: var(--brand-color)
    }

    .border-\[var\(--text-color-dark-gray\)\] {
        border-color: var(--text-color-dark-gray)
    }

    .border-\[var\(--text-white-default\)\] {
        border-color: var(--text-white-default)
    }

    .border-\[var\(--white-color\)\] {
        border-color: var(--white-color)
    }

    .border-neutral-200 {
        border-color: var(--color-neutral-200)
    }

    .border-neutral-800 {
        border-color: var(--color-neutral-800)
    }

    .border-red-500 {
        border-color: var(--color-red-500)
    }

    .border-red-500\/50 {
        border-color: #fb2c3680
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-red-500\/50 {
            border-color: color-mix(in oklab, var(--color-red-500)50%, transparent)
        }
    }

    .border-transparent {
        border-color: #0000
    }

    .border-white {
        border-color: var(--color-white)
    }

    .border-white\/20 {
        border-color: #fff3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/20 {
            border-color: color-mix(in oklab, var(--color-white)20%, transparent)
        }
    }

    .border-t-transparent {
        border-top-color: #0000
    }

    .border-t-white {
        border-top-color: var(--color-white)
    }

    .border-b-\[var\(--border-color-default\)\] {
        border-bottom-color: var(--border-color-default)
    }

    .border-b-\[var\(--border-color-silver\)\] {
        border-bottom-color: var(--border-color-silver)
    }

    .\!bg-\[var\(--text-kleine-blue\)\] {
        background-color: var(--text-kleine-blue) !important
    }

    .bg-\[\#0B0C0B1A\] {
        background-color: #0b0c0b1a
    }

    .bg-\[\#0B0C0B99\] {
        background-color: #0b0c0b99
    }

    .bg-\[\#0B0C0BCC\] {
        background-color: #0b0c0bcc
    }

    .bg-\[\#0B0C0B\],
    .bg-\[\#0b0c0b\] {
        background-color: #0b0c0b
    }

    .bg-\[\#0b0c0b\]\/50 {
        background-color: oklab(15.2715% -.00220732 .00152033/.5)
    }

    .bg-\[\#1A1A1A\] {
        background-color: #1a1a1a
    }

    .bg-\[\#1D1D1D\],
    .bg-\[\#1d1d1d\] {
        background-color: #1d1d1d
    }

    .bg-\[\#3C3D3C\],
    .bg-\[\#3c3d3c\] {
        background-color: #3c3d3c
    }

    .bg-\[\#171817\] {
        background-color: #171817
    }

    .bg-\[\#333333\]\! {
        background-color: #333 !important
    }

    .bg-\[\#444444\] {
        background-color: #444
    }

    .bg-\[\#ff0090\] {
        background-color: #ff0090
    }

    .bg-\[\#ff0090\]\/\[\.2\] {
        background-color: oklab(93.6737% -.115685 .192453/.2)
    }

    .bg-\[\#E7F36F\] {
        background-color: #e7f36f
    }

    .bg-\[\#F3F3F3\]\! {
        background-color: #f3f3f3 !important
    }

    .bg-\[\#F3F3F3\]\/5 {
        background-color: oklab(96.4153% -5.96046e-8 5.96046e-8/.05)
    }

    .bg-\[\#F3F3F30D\] {
        background-color: #f3f3f30d
    }

    .bg-\[\#F3F3F31A\] {
        background-color: #f3f3f31a
    }

    .bg-\[\#F3F3F326\] {
        background-color: #f3f3f326
    }

    .bg-\[\#F3F3F366\] {
        background-color: #f3f3f366
    }

    .bg-\[\#FFA90F\] {
        background-color: #ffa90f
    }

    .bg-\[\#ff0090\] {
        background-color: #ff0090
    }

    .bg-\[\#f3f3f3\]\/5 {
        background-color: oklab(96.4153% -5.96046e-8 5.96046e-8/.05)
    }

    .bg-\[var\(--background-color\)\] {
        background-color: var(--background-color)
    }

    .bg-\[var\(--background-color-dimgrey-7\)\] {
        background-color: var(--background-color-dimgrey-7)
    }

    .bg-\[var\(--background-color-primary\)\] {
        background-color: var(--background-color-primary)
    }

    .bg-\[var\(--background-color-tangelo-7\)\] {
        background-color: var(--background-color-tangelo-7)
    }

    .bg-\[var\(--background-color-volt-8\)\] {
        background-color: var(--background-color-volt-8)
    }

    .bg-\[var\(--bg-white-default\)\] {
        background-color: var(--bg-white-default)
    }

    .bg-\[var\(--black-color-10\)\] {
        background-color: var(--black-color-10)
    }

    .bg-\[var\(--black-color-25\)\] {
        background-color: var(--black-color-25)
    }

    .bg-\[var\(--black-color-40\)\] {
        background-color: var(--black-color-40)
    }

    .bg-\[var\(--black-primary-bg\)\] {
        background-color: var(--black-primary-bg)
    }

    .bg-\[var\(--dot-color-light-active\)\] {
        background-color: var(--dot-color-light-active)
    }

    .bg-\[var\(--dot-color-light-default\)\] {
        background-color: var(--dot-color-light-default)
    }

    .bg-\[var\(--header-bg-color\)\] {
        background-color: var(--header-bg-color)
    }

    .bg-\[var\(--primary-bg\)\] {
        background-color: var(--primary-bg)
    }

    .bg-\[var\(--primary-color\)\] {
        background-color: var(--primary-color)
    }

    .bg-\[var\(--text-color-dark-gray\)\] {
        background-color: var(--text-color-dark-gray)
    }

    .bg-\[var\(--white-color\)\] {
        background-color: var(--white-color)
    }

    .bg-black {
        background-color: var(--color-black)
    }

    .bg-black\/30 {
        background-color: #0000004d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/30 {
            background-color: color-mix(in oklab, var(--color-black)30%, transparent)
        }
    }

    .bg-black\/50 {
        background-color: #00000080
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/50 {
            background-color: color-mix(in oklab, var(--color-black)50%, transparent)
        }
    }

    .bg-gray-600\/20 {
        background-color: #4a556533
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-gray-600\/20 {
            background-color: color-mix(in oklab, var(--color-gray-600)20%, transparent)
        }
    }

    .bg-gray-600\/30 {
        background-color: #4a55654d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-gray-600\/30 {
            background-color: color-mix(in oklab, var(--color-gray-600)30%, transparent)
        }
    }

    .bg-gray-700 {
        background-color: var(--color-gray-700)
    }

    .bg-gray-800 {
        background-color: var(--color-gray-800)
    }

    .bg-neutral-800 {
        background-color: var(--color-neutral-800)
    }

    .bg-neutral-900 {
        background-color: var(--color-neutral-900)
    }

    .bg-red-500\/20 {
        background-color: #fb2c3633
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-red-500\/20 {
            background-color: color-mix(in oklab, var(--color-red-500)20%, transparent)
        }
    }

    .bg-red-900 {
        background-color: var(--color-red-900)
    }

    .bg-transparent {
        background-color: #0000
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-gradient-to-br {
        --tw-gradient-position: to bottom right in oklab
    }

    .bg-gradient-to-br,
    .bg-gradient-to-r {
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-r {
        --tw-gradient-position: to right in oklab
    }

    .bg-gradient-to-t {
        --tw-gradient-position: to top in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .from-black\/20 {
        --tw-gradient-from: #0003;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    @supports (color:color-mix(in lab, red, red)) {
        .from-black\/20 {
            --tw-gradient-from: color-mix(in oklab, var(--color-black)20%, transparent)
        }
    }

    .from-gray-200 {
        --tw-gradient-from: var(--color-gray-200);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-transparent {
        --tw-gradient-from: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .via-transparent {
        --tw-gradient-via: transparent;
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-via)var(--tw-gradient-via-position), var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-white\/20 {
        --tw-gradient-via: #fff3;
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-via)var(--tw-gradient-via-position), var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .via-white\/20 {
            --tw-gradient-via: color-mix(in oklab, var(--color-white)20%, transparent)
        }
    }

    .to-gray-300 {
        --tw-gradient-to: var(--color-gray-300);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-transparent {
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .bg-cover {
        background-size: cover
    }

    .bg-center {
        background-position: 50%
    }

    .bg-no-repeat {
        background-repeat: no-repeat
    }

    .object-contain {
        object-fit: contain
    }

    .object-cover {
        object-fit: cover
    }

    .object-none {
        object-fit: none
    }

    .\!p-0 {
        padding: calc(var(--spacing)*0) !important
    }

    .p-1 {
        padding: calc(var(--spacing)*1)
    }

    .p-2 {
        padding: calc(var(--spacing)*2)
    }

    .p-3 {
        padding: calc(var(--spacing)*3)
    }

    .p-4 {
        padding: calc(var(--spacing)*4)
    }

    .p-5 {
        padding: calc(var(--spacing)*5)
    }

    .p-6 {
        padding: calc(var(--spacing)*6)
    }

    .p-7 {
        padding: calc(var(--spacing)*7)
    }

    .p-8 {
        padding: calc(var(--spacing)*8)
    }

    .p-\[1\.5rem\] {
        padding: 1.5rem
    }

    .p-\[1rem\] {
        padding: 1rem
    }

    .px-0 {
        padding-inline: calc(var(--spacing)*0)
    }

    .px-2 {
        padding-inline: calc(var(--spacing)*2)
    }

    .px-3 {
        padding-inline: calc(var(--spacing)*3)
    }

    .px-4 {
        padding-inline: calc(var(--spacing)*4)
    }

    .px-5 {
        padding-inline: calc(var(--spacing)*5)
    }

    .px-6 {
        padding-inline: calc(var(--spacing)*6)
    }

    .px-8 {
        padding-inline: calc(var(--spacing)*8)
    }

    .px-10 {
        padding-inline: calc(var(--spacing)*10)
    }

    .px-\[0\.75rem\] {
        padding-inline: .75rem
    }

    .px-\[0rem\] {
        padding-inline: 0
    }

    .px-\[1\.25rem\] {
        padding-inline: 1.25rem
    }

    .px-\[1rem\] {
        padding-inline: 1rem
    }

    .px-\[3rem\] {
        padding-inline: 3rem
    }

    .px-\[6px\] {
        padding-inline: 6px
    }

    .px-\[8px\] {
        padding-inline: 8px
    }

    .px-\[9px\] {
        padding-inline: 9px
    }

    .px-\[10px\] {
        padding-inline: 10px
    }

    .px-\[12px\] {
        padding-inline: 12px
    }

    .px-\[19px\] {
        padding-inline: 19px
    }

    .px-\[20px\] {
        padding-inline: 20px
    }

    .px-\[24px\] {
        padding-inline: 24px
    }

    .px-\[104px\] {
        padding-inline: 104px
    }

    .py-0 {
        padding-block: calc(var(--spacing)*0)
    }

    .py-1 {
        padding-block: calc(var(--spacing)*1)
    }

    .py-2 {
        padding-block: calc(var(--spacing)*2)
    }

    .py-3 {
        padding-block: calc(var(--spacing)*3)
    }

    .py-4 {
        padding-block: calc(var(--spacing)*4)
    }

    .py-5 {
        padding-block: calc(var(--spacing)*5)
    }

    .py-6 {
        padding-block: calc(var(--spacing)*6)
    }

    .py-8 {
        padding-block: calc(var(--spacing)*8)
    }

    .py-10 {
        padding-block: calc(var(--spacing)*10)
    }

    .py-\[0\.75rem\] {
        padding-block: .75rem
    }

    .py-\[1rem\] {
        padding-block: 1rem
    }

    .py-\[2px\] {
        padding-block: 2px
    }

    .py-\[6px\] {
        padding-block: 6px
    }

    .py-\[10px\] {
        padding-block: 10px
    }

    .py-\[12px\] {
        padding-block: 12px
    }

    .py-\[14px\] {
        padding-block: 14px
    }

    .py-\[16px\] {
        padding-block: 16px
    }

    .py-\[18px\] {
        padding-block: 18px
    }

    .py-\[24px\] {
        padding-block: 24px
    }

    .py-\[32px\] {
        padding-block: 32px
    }

    .py-\[84px\] {
        padding-block: 84px
    }

    .py-\[120px\] {
        padding-block: 120px
    }

    .pt-4 {
        padding-top: calc(var(--spacing)*4)
    }

    .pt-5 {
        padding-top: calc(var(--spacing)*5)
    }

    .pt-8 {
        padding-top: calc(var(--spacing)*8)
    }

    .pt-10 {
        padding-top: calc(var(--spacing)*10)
    }

    .pt-\[2rem\] {
        padding-top: 2rem
    }

    .pt-\[20px\] {
        padding-top: 20px
    }

    .\!pr-3 {
        padding-right: calc(var(--spacing)*3) !important
    }

    .pr-4 {
        padding-right: calc(var(--spacing)*4)
    }

    .pr-8 {
        padding-right: calc(var(--spacing)*8)
    }

    .pr-\[5px\] {
        padding-right: 5px
    }

    .pr-\[56px\] {
        padding-right: 56px
    }

    .\!pb-0 {
        padding-bottom: calc(var(--spacing)*0) !important
    }

    .pb-1 {
        padding-bottom: calc(var(--spacing)*1)
    }

    .pb-3 {
        padding-bottom: calc(var(--spacing)*3)
    }

    .pb-4 {
        padding-bottom: calc(var(--spacing)*4)
    }

    .pb-6 {
        padding-bottom: calc(var(--spacing)*6)
    }

    .pb-8 {
        padding-bottom: calc(var(--spacing)*8)
    }

    .pb-10 {
        padding-bottom: calc(var(--spacing)*10)
    }

    .pb-\[2rem\] {
        padding-bottom: 2rem
    }

    .pb-\[4rem\] {
        padding-bottom: 4rem
    }

    .pb-\[80px\] {
        padding-bottom: 80px
    }

    .pl-5 {
        padding-left: calc(var(--spacing)*5)
    }

    .pl-6 {
        padding-left: calc(var(--spacing)*6)
    }

    .pl-8 {
        padding-left: calc(var(--spacing)*8)
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .text-right {
        text-align: right
    }

    .font-\[\'Lato\'\] {
        font-family: Lato
    }

    .font-\[family-name\:var\(--font-bw-gradual\)\] {
        font-family: var(--font-bw-gradual)
    }

    .font-\[family-name\:var\(--font-family\)\] {
        font-family: var(--font-family)
    }

    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height))
    }

    .text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }

    .text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }

    .text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height))
    }

    .text-6xl {
        font-size: var(--text-6xl);
        line-height: var(--tw-leading, var(--text-6xl--line-height))
    }

    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }

    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .text-\[1\.625rem\] {
        font-size: 1.625rem
    }

    .text-\[10px\] {
        font-size: 10px
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[14px\] {
        font-size: 14px
    }

    .text-\[16px\] {
        font-size: 16px
    }

    .text-\[18px\] {
        font-size: 18px
    }

    .text-\[20px\] {
        font-size: 20px
    }

    .text-\[48px\] {
        font-size: 48px
    }

    .text-\[60px\] {
        font-size: 60px
    }

    .\!leading-5 {
        --tw-leading: calc(var(--spacing)*5) !important;
        line-height: calc(var(--spacing)*5) !important
    }

    .leading-6 {
        --tw-leading: calc(var(--spacing)*6);
        line-height: calc(var(--spacing)*6)
    }

    .leading-7 {
        --tw-leading: calc(var(--spacing)*7);
        line-height: calc(var(--spacing)*7)
    }

    .leading-8 {
        --tw-leading: calc(var(--spacing)*8);
        line-height: calc(var(--spacing)*8)
    }

    .leading-10 {
        --tw-leading: calc(var(--spacing)*10);
        line-height: calc(var(--spacing)*10)
    }

    .leading-\[1\.5rem\] {
        --tw-leading: 1.5rem;
        line-height: 1.5rem
    }

    .leading-\[1\.25rem\] {
        --tw-leading: 1.25rem;
        line-height: 1.25rem
    }

    .leading-\[2rem\] {
        --tw-leading: 2rem;
        line-height: 2rem
    }

    .leading-\[16px\] {
        --tw-leading: 16px;
        line-height: 16px
    }

    .leading-\[18px\] {
        --tw-leading: 18px;
        line-height: 18px
    }

    .leading-\[20px\] {
        --tw-leading: 20px;
        line-height: 20px
    }

    .leading-\[24px\] {
        --tw-leading: 24px;
        line-height: 24px
    }

    .leading-\[26px\] {
        --tw-leading: 26px;
        line-height: 26px
    }

    .leading-\[27px\] {
        --tw-leading: 27px;
        line-height: 27px
    }

    .leading-\[28px\] {
        --tw-leading: 28px;
        line-height: 28px
    }

    .leading-\[32px\] {
        --tw-leading: 32px;
        line-height: 32px
    }

    .leading-\[40px\] {
        --tw-leading: 40px;
        line-height: 40px
    }

    .leading-\[52\.8px\] {
        --tw-leading: 52.8px;
        line-height: 52.8px
    }

    .leading-\[56px\] {
        --tw-leading: 56px;
        line-height: 56px
    }

    .leading-\[68px\] {
        --tw-leading: 68px;
        line-height: 68px
    }

    .leading-\[var\(--line-height-huge\)\] {
        --tw-leading: var(--line-height-huge);
        line-height: var(--line-height-huge)
    }

    .leading-\[var\(--line-height-large\)\] {
        --tw-leading: var(--line-height-large);
        line-height: var(--line-height-large)
    }

    .leading-\[var\(--line-height-medium\)\] {
        --tw-leading: var(--line-height-medium);
        line-height: var(--line-height-medium)
    }

    .leading-\[var\(--line-height-small\)\] {
        --tw-leading: var(--line-height-small);
        line-height: var(--line-height-small)
    }

    .leading-none {
        --tw-leading: 1;
        line-height: 1
    }

    .leading-normal {
        --tw-leading: var(--leading-normal);
        line-height: var(--leading-normal)
    }

    .leading-tight {
        --tw-leading: var(--leading-tight);
        line-height: var(--leading-tight)
    }

    .\!font-\[500\] {
        --tw-font-weight: 500 !important;
        font-weight: 500 !important
    }

    .font-\[400\] {
        --tw-font-weight: 400;
        font-weight: 400
    }

    .font-\[500\] {
        --tw-font-weight: 500;
        font-weight: 500
    }

    .font-\[700\] {
        --tw-font-weight: 700;
        font-weight: 700
    }

    .font-\[900\] {
        --tw-font-weight: 900;
        font-weight: 900
    }

    .font-\[var\(--font-bw-gradual\)\] {
        --tw-font-weight: var(--font-bw-gradual);
        font-weight: var(--font-bw-gradual)
    }

    .font-\[var\(--font-weight-bold\)\] {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-\[var\(--font-weight-extra-bold\)\] {
        --tw-font-weight: var(--font-weight-extra-bold);
        font-weight: var(--font-weight-extra-bold)
    }

    .font-\[var\(--font-weight-medium\)\!important\] {
        --tw-font-weight: var(--font-weight-medium) !important;
        font-weight: var(--font-weight-medium) !important
    }

    .font-\[var\(--font-weight-regular\)\] {
        --tw-font-weight: var(--font-weight-regular);
        font-weight: var(--font-weight-regular)
    }

    .font-\[var\(--font-weight-semi-bold\)\] {
        --tw-font-weight: var(--font-weight-semi-bold);
        font-weight: var(--font-weight-semi-bold)
    }

    .font-black {
        --tw-font-weight: var(--font-weight-black);
        font-weight: var(--font-weight-black)
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-normal {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .tracking-\[-1px\] {
        --tw-tracking: -1px;
        letter-spacing: -1px
    }

    .tracking-\[0\.5px\] {
        --tw-tracking: .5px;
        letter-spacing: .5px
    }

    .tracking-\[0px\] {
        --tw-tracking: 0px;
        letter-spacing: 0
    }

    .break-words {
        overflow-wrap: break-word
    }

    .text-ellipsis {
        text-overflow: ellipsis
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .\!text-\[\#6A6A6C\] {
        color: #6a6a6c !important
    }

    .\!text-\[var\(--text-white-default\)\] {
        color: var(--text-white-default) !important
    }

    .text-\[\#0B0C0B\],
    .text-\[\#0b0c0b\] {
        color: #0b0c0b
    }

    .text-\[\#6a6a6c\] {
        color: #6a6a6c
    }

    .text-\[\#282b30\] {
        color: #282b30
    }

    .text-\[\#686868\] {
        color: #686868
    }

    .text-\[\#C4C4C4\] {
        color: #c4c4c4
    }

    .text-\[\#ff0090\] {
        color: #ff0090
    }

    .text-\[\#F3F3F3\] {
        color: #f3f3f3
    }

    .text-\[\#F3F3F3\]\! {
        color: #f3f3f3 !important
    }

    .text-\[\#ff0090\] {
        color: #ff0090
    }

    .text-\[\#f3f3f3\] {
        color: #f3f3f3
    }

    .text-\[\#ffffff\] {
        color: #fff
    }

    .text-\[var\(--black-color-40\)\] {
        color: var(--black-color-40)
    }

    .text-\[var\(--brand-color\)\] {
        color: var(--brand-color)
    }

    .text-\[var\(--heading-color\)\] {
        color: var(--heading-color)
    }

    .text-\[var\(--primary-color\)\] {
        color: var(--primary-color)
    }

    .text-\[var\(--primary-color-disabled\)\] {
        color: var(--primary-color-disabled)
    }

    .text-\[var\(--text-color\)\] {
        color: var(--text-color)
    }

    .text-\[var\(--text-color-default\)\] {
        color: var(--text-color-default)
    }

    .text-\[var\(--text-color-highlight\)\] {
        color: var(--text-color-highlight)
    }

    .text-\[var\(--text-kleine-blue\)\] {
        color: var(--text-kleine-blue)
    }

    .text-\[var\(--text-white-default\)\] {
        color: var(--text-white-default)
    }

    .text-\[var\(--white-color\)\] {
        color: var(--white-color)
    }

    .text-black {
        color: var(--color-black)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-500 {
        color: var(--color-gray-500)
    }

    .text-gray-800 {
        color: var(--color-gray-800)
    }

    .text-lime-400 {
        color: var(--color-lime-400)
    }

    .text-red-200 {
        color: var(--color-red-200)
    }

    .text-red-300 {
        color: var(--color-red-300)
    }

    .text-red-400 {
        color: var(--color-red-400)
    }

    .text-red-500 {
        color: var(--color-red-500)
    }

    .text-transparent {
        color: #0000
    }

    .text-white {
        color: var(--color-white)
    }

    .\!uppercase {
        text-transform: uppercase !important
    }

    .lowercase {
        text-transform: lowercase
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

    .underline {
        text-decoration-line: underline
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-30 {
        opacity: .3
    }

    .opacity-30\! {
        opacity: .3 !important
    }

    .opacity-50 {
        opacity: .5
    }

    .opacity-100 {
        opacity: 1
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a)
    }

    .shadow,
    .shadow-\[-10px_-32px_57px_0px_rgba\(213\,255\,2\,0\.05\)\] {
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[-10px_-32px_57px_0px_rgba\(213\,255\,2\,0\.05\)\] {
        --tw-shadow: -10px -32px 57px 0px var(--tw-shadow-color, #ff00900d)
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a)
    }

    .shadow-lg,
    .shadow-sm {
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a)
    }

    .outline,
    .outline-1 {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .outline-offset-\[-0\.50px\] {
        outline-offset: -.5px
    }

    .outline-offset-\[-1px\] {
        outline-offset: -1px
    }

    .outline-\[\#F3F3F3\]\! {
        outline-color: #f3f3f3 !important
    }

    .outline-\[\#f3f3f3\]\/5 {
        outline-color: oklab(96.4153% -5.96046e-8 5.96046e-8/.05)
    }

    .outline-\[\#f3f3f3\]\/20 {
        outline-color: oklab(96.4153% -5.96046e-8 5.96046e-8/.2)
    }

    .outline-neutral-200 {
        outline-color: var(--color-neutral-200)
    }

    .blur {
        --tw-blur: blur(8px)
    }

    .blur,
    .filter {
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[max-height\,opacity\,margin\] {
        transition-property: max-height, opacity, margin;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[max-height\] {
        transition-property: max-height;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-shadow {
        transition-property: box-shadow;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-none {
        transition-property: none
    }

    .duration-150 {
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .duration-400 {
        --tw-duration: .4s;
        transition-duration: .4s
    }

    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .duration-700 {
        --tw-duration: .7s;
        transition-duration: .7s
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .will-change-transform {
        will-change: transform
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    .select-none {
        -webkit-user-select: none;
        user-select: none
    }

    @media (hover:hover) {
        .group-hover\:translate-x-full:is(:where(.group):hover *) {
            --tw-translate-x: 100%;
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .group-hover\:scale-105:is(:where(.group):hover *) {
            --tw-scale-x: 105%;
            --tw-scale-y: 105%;
            --tw-scale-z: 105%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .group-hover\:scale-110:is(:where(.group):hover *) {
            --tw-scale-x: 110%;
            --tw-scale-y: 110%;
            --tw-scale-z: 110%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .group-hover\:bg-\[\#ff009033\]:is(:where(.group):hover *) {
            background-color: #ff009033
        }

        .group-hover\:text-\[\#9e9e9e\]:is(:where(.group):hover *) {
            color: #9e9e9e
        }

        .group-hover\:text-\[\#C4C4C4\]:is(:where(.group):hover *) {
            color: #c4c4c4
        }

        .group-hover\:text-\[var\(--text-white-default\)\]:is(:where(.group):hover *) {
            color: var(--text-white-default)
        }

        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 1
        }
    }

    .placeholder\:text-\[var\(--black-color-40\)\]::placeholder {
        color: var(--black-color-40)
    }

    @media (hover:hover) {
        .hover\:scale-103:hover {
            --tw-scale-x: 103%;
            --tw-scale-y: 103%;
            --tw-scale-z: 103%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .hover\:scale-105:hover {
            --tw-scale-x: 105%;
            --tw-scale-y: 105%;
            --tw-scale-z: 105%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .hover\:scale-120:hover {
            --tw-scale-x: 120%;
            --tw-scale-y: 120%;
            --tw-scale-z: 120%;
            scale: var(--tw-scale-x)var(--tw-scale-y)
        }

        .hover\:scale-\[1\.03\]:hover {
            scale: 1.03
        }

        .hover\:scale-\[105\%\]:hover {
            scale: 105%
        }

        .hover\:cursor-pointer:hover {
            cursor: pointer
        }

        .hover\:border:hover {
            border-style: var(--tw-border-style);
            border-width: 1px
        }

        .hover\:border-\[\#ff0090\]:hover {
            border-color: #ff0090
        }

        .hover\:border-\[var\(--text-color\)\]:hover {
            border-color: var(--text-color)
        }

        .hover\:border-\[var\(--text-white-default\)\]:hover {
            border-color: var(--text-white-default)
        }

        .hover\:bg-\[\#2a2a2a\]:hover {
            background-color: #2a2a2a
        }

        .hover\:bg-\[\#3C3D3C\]:hover {
            background-color: #3c3d3c
        }

        .hover\:bg-\[\#232323\]:hover {
            background-color: #232323
        }

        .hover\:bg-\[\#666666\]:hover {
            background-color: #666
        }

        .hover\:bg-\[\#F3F3F3\]:hover {
            background-color: #f3f3f3
        }

        .hover\:bg-\[\#F3F3F326\]:hover {
            background-color: #f3f3f326
        }

        .hover\:bg-\[rgba\(255\,255\,255\,0\.08\)\]:hover {
            background-color: #ffffff14
        }

        .hover\:bg-\[var\(--primary-bg\)\]:hover {
            background-color: var(--primary-bg)
        }

        .hover\:bg-black:hover {
            background-color: var(--color-black)
        }

        .hover\:bg-neutral-800:hover {
            background-color: var(--color-neutral-800)
        }

        .hover\:text-\[var\(--text-color-brand-active\)\]:hover {
            color: var(--text-color-brand-active)
        }

        .hover\:text-\[var\(--text-white-default\)\]:hover {
            color: var(--text-white-default)
        }

        .hover\:text-red-300:hover {
            color: var(--color-red-300)
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }

        .hover\:opacity-70:hover {
            opacity: .7
        }

        .hover\:opacity-80:hover {
            opacity: .8
        }

        .hover\:opacity-\[0\.7\]:hover {
            opacity: .7
        }

        .hover\:shadow-2xl:hover {
            --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    .focus-visible\:opacity-100:focus-visible {
        opacity: 1
    }

    .focus-visible\:ring-2:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color, currentColor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:ring-\[rgba\(213\,255\,2\,0\.12\)\]:focus-visible {
        --tw-ring-color: #ff00901f
    }

    .focus-visible\:ring-offset-2:focus-visible {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, )0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)
    }

    .focus-visible\:outline-none:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .active\:border-\[var\(--text-color\)\]:active {
        border-color: var(--text-color)
    }

    .active\:bg-\[var\(--text-white-default\)\]:active {
        background-color: var(--text-white-default)
    }

    @media not all and (min-width:48rem) {
        .max-md\:hidden {
            display: none
        }

        .max-md\:w-full {
            width: 100%
        }
    }

    @media (min-width:48rem) {
        .md\:absolute {
            position: absolute
        }

        .md\:top-1\/2 {
            top: 50%
        }

        .md\:right-0 {
            right: calc(var(--spacing)*0)
        }

        .md\:block {
            display: block
        }

        .md\:inline-flex {
            display: inline-flex
        }

        .md\:h-\[36\.62px\] {
            height: 36.62px
        }

        .md\:h-\[40px\] {
            height: 40px
        }

        .md\:h-\[56px\] {
            height: 56px
        }

        .md\:h-\[100px\] {
            height: 100px
        }

        .md\:h-\[300px\] {
            height: 300px
        }

        .md\:h-\[360px\] {
            height: 360px
        }

        .md\:h-\[400px\] {
            height: 400px
        }

        .md\:max-h-\[668px\] {
            max-height: 668px
        }

        .md\:w-\[68px\] {
            width: 68px
        }

        .md\:w-\[86\.5px\] {
            width: 86.5px
        }

        .md\:w-\[187px\] {
            width: 187px
        }

        .md\:w-\[504px\] {
            width: 504px
        }

        .md\:w-auto {
            width: auto
        }

        .md\:w-fit {
            width: fit-content
        }

        .md\:max-w-\[308px\] {
            max-width: 308px
        }

        .md\:-translate-y-1\/2 {
            --tw-translate-y: calc(calc(1/2*100%)*-1);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

        .md\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr))
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .md\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:items-center {
            align-items: center
        }

        .md\:justify-end {
            justify-content: flex-end
        }

        .md\:gap-\[1\.5rem\] {
            gap: 1.5rem
        }

        .md\:gap-\[80px\] {
            gap: 80px
        }

        .md\:rounded-\[0px\] {
            border-radius: 0
        }

        .md\:rounded-\[8px\] {
            border-radius: 8px
        }

        .md\:rounded-lg {
            border-radius: var(--radius-lg)
        }

        .md\:rounded-t-\[8px\] {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px
        }

        .md\:rounded-tl-none {
            border-top-left-radius: 0
        }

        .md\:rounded-b-none {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0
        }

        .md\:px-4 {
            padding-inline: calc(var(--spacing)*4)
        }

        .md\:px-\[1\.5rem\] {
            padding-inline: 1.5rem
        }

        .md\:py-\[1rem\] {
            padding-block: 1rem
        }

        .md\:text-\[20px\] {
            font-size: 20px
        }

        .md\:leading-\[32px\] {
            --tw-leading: 32px;
            line-height: 32px
        }
    }

    @media (min-width:64rem) {
        .lg\:pointer-events-none {
            pointer-events: none
        }

        .lg\:top-\[10px\] {
            top: 10px
        }

        .lg\:mx-auto {
            margin-inline: auto
        }

        .lg\:block {
            display: block
        }

        .lg\:flex {
            display: flex
        }

        .lg\:inline-block\! {
            display: inline-block !important
        }

        .lg\:h-\[120px\] {
            height: 120px
        }

        .lg\:h-\[500px\] {
            height: 500px
        }

        .lg\:w-0 {
            width: calc(var(--spacing)*0)
        }

        .lg\:w-\[100\%\] {
            width: 100%
        }

        .lg\:w-\[246px\] {
            width: 246px
        }

        .lg\:max-w-\[400px\] {
            max-width: 400px
        }

        .lg\:max-w-\[568px\] {
            max-width: 568px
        }

        .lg\:max-w-\[600px\] {
            max-width: 600px
        }

        .lg\:max-w-\[660px\] {
            max-width: 660px
        }

        .lg\:max-w-\[1232px\] {
            max-width: 1232px
        }

        .lg\:flex-shrink-0 {
            flex-shrink: 0
        }

        .lg\:flex-grow {
            flex-grow: 1
        }

        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:gap-\[2rem\] {
            gap: 2rem
        }

        .lg\:gap-\[4px\] {
            gap: 4px
        }

        .lg\:gap-\[40px\] {
            gap: 40px
        }

        .lg\:gap-\[50px\] {
            gap: 50px
        }

        .lg\:bg-transparent {
            background-color: #0000
        }

        .lg\:p-\[1\.5rem\] {
            padding: 1.5rem
        }

        .lg\:px-\[0rem\] {
            padding-inline: 0
        }

        .lg\:pt-\[10px\] {
            padding-top: 10px
        }

        .lg\:pt-\[32px\] {
            padding-top: 32px
        }

        .lg\:pb-\[7\.5rem\] {
            padding-bottom: 7.5rem
        }
    }

    .\[\&_\.slick-slide\]\:select-text .slick-slide {
        -webkit-user-select: text;
        user-select: text
    }

    .\[\&\>li\]\:\!m-0>li {
        margin: calc(var(--spacing)*0) !important
    }

    .\[\&\>li\]\:\!h-auto>li {
        height: auto !important
    }

    .\[\&\>li\]\:\!w-auto>li {
        width: auto !important
    }

    .\[\&\>li\]\:\!p-0>li {
        padding: calc(var(--spacing)*0) !important
    }

    .\[\&\>li\.slick-active\>div\]\:bg-\[var\(--primary-bg\)\]>li.slick-active>div {
        background-color: var(--primary-bg)
    }
}

:root {
    --background-color: #0b0c0b;
    --bg-white-default: #f3f3f3;
    --font-family: "Lato", sans-serif;
    --font-bw-gradual: "Bw-Gradual", sans-serif;
    --heading-color: #f3f3f3;
    --text-color: #c4c4c4;
    --text-color-default: #0b0c0b;
    --primary-color: #ff0090;
    --menu-color: #f3f3f3;
    --text-color-placeholder-light-input: #c4c4c4;
    --text-color-placeholder-light-input-disabled: #999;
    --text-color-highlight: #1f291c;
    --header-height: 80px;
    --header-bg-color: #1a1a1a;
    --footer-brand-height: 80px;
    --footer-brand-height-mobile: 120px;
    --footer-color: #fff;
    --black-color: #000;
    --black-color-10: #1a1a1a;
    --black-color-25: #333;
    --black-color-40: #686868;
    --black-color-50: gray;
    --background-color-yellow-rose-7: #807900;
    --background-color-volt-7: #6b8001;
    --background-color-neon-7: #347b00;
    --background-color-fuchsia-pink-7: #804880;
    --background-color-aqua-7: #007b80;
    --background-color-tangelo-6: #b83e00;
    --background-color-primary: #0b0c0b;
    --background-color-kleine-blue-6: #212cbf;
    --background-color-aqua-6: #00b9bf;
    --background-color-dimgrey-7: #1d1d1d;
    --background-color-black-hover-1: #1d1d1d;
    --background-color-tangelo-7: #7b2900;
    --background-color-volt-8: #354001;
    --text-color-brand-hover: #a0bf02;
    --background-color-notify: #c0e602;
    --text-color-dark-gray: #333;
    --primary-bg: #ff0090;
    --secondary-bg: transparent;
    --secondary-color: #ff0090;
    --black-primary-bg: #0b0c0b;
    --black-primary-color: #ff0090;
    --black-secondary-bg: transparent;
    --black-secondary-color: #0b0c0b;
    --white-color: #fff;
    --bg-color-header: #0b0c0b99;
    --brand-color: #ff0090;
    --text-kleine-blue: #2c3aff;
    --red-color: #f55200;
    --primary-bg-hover: #f7ffcc;
    --primary-bg-active: #aacc02;
    --primary-bg-disabled: #fbffe5;
    --primary-color-disabled: #c4c4c4;
    --dot-color-light-active: #aacc02;
    --dot-color-light-default: #c4c4c4;
    --secondary-border-color: #f7ffcc;
    --secondary-bg-active: #fdfff2;
    --secondary-border-color-active: #aacc02;
    --secondary-color-active: #aacc02;
    --secondary-border-color-disabled: #f7ffcc;
    --secondary-bg-disabled: #f3f3f300;
    --secondary-color-disabled: #f7ffcc;
    --black-primary-bg-hover: #333;
    --black-primary-color-hover: #f7ffcc;
    --black-primary-bg-active: #0b0c0b;
    --black-primary-color-active: #aacc02;
    --black-primary-bg-disabled: #c4c4c4;
    --black-primary-color-disabled: #f7ffcc;
    --black-secondary-bg-hover: #f3f3f300;
    --black-secondary-color-hover: #0b0c0b;
    --black-secondary-border-color-hover: #c4c4c4;
    --black-secondary-bg-active: #f3f3f380;
    --black-secondary-border-color-active: #0b0c0b;
    --black-secondary-color-active: #0b0c0b;
    --black-secondary-bg-disabled: #f3f3f3;
    --black-secondary-color-disabled: #c4c4c4;
    --black-secondary-border-color-disabled: #c4c4c4;
    --background-color-disable-light-input: #e5e5e5;
    --background-color-disable-dark-input: #b3b3b3;
    --input-light-border-color-hover: #333;
    --input-light-border-color-active: #666;
    --input-dark-border-color-hover: #ccc;
    --input-dark-border-color-active: #999;
    --brand-border: 1.5px solid #ff0090;
    --primary-border: 1.5px solid #0b0c0b;
    --circle-border: 1.5px solid #f3f3f3;
    --input-dark-border: 1px solid #f3f3f3;
    --border-radius-rounded: 64px;
    --text-white-default: #f3f3f3;
    --border-color-silver: #c4c4c4;
    --border-color-default: #0b0c0b;
    --font-size-text-button: 16px;
    --line-height-text-button: 24px;
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-medium: 16px;
    --font-size-medium-large: 20px;
    --font-size-large: 24px;
    --font-size-very-large: 26px;
    --font-size-huge: 32px;
    --font-size-very-huge: 34px;
    --font-size-h3: 48px;
    --font-size-h2: 60px;
    --font-size-h1: 84px;
    --font-size-display: 176px;
    --line-height-small: 16px;
    --line-height-normal: 20px;
    --line-height-medium: 24px;
    --line-height-medium-large: 28px;
    --line-height-large: 32px;
    --line-height-huge: 40px;
    --line-height-h3: 56px;
    --line-height-h2: 68px;
    --line-height-h1: 96px;
    --line-height-display: 160px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-strong-bold: 900;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --border-radius-medium-large: 20px;
    --border-radius-xlarge: 32px;
    --border-radius-xxlarge: 64px;
    --border-radius-circle: 50%;
    --max-width: 1232px;
    --max-width-footer: 1440px
}

body,
html {
    background-color: var(--background-color);
    font-family: var(--font-family);
    color: var(--text-color);
    scroll-behavior: smooth;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5
}

.overflow-x-hidden-wrapper {
    overflow-x: hidden
}

.container {
    max-width: var(--max-width);
    width: 100%;
    margin: auto
}

@media (max-width:1023px) {
    .container {
        width: 100%;
        max-width: 100%
    }
}

.container-footer {
    max-width: var(--max-width-footer);
    margin: auto;
    padding: 0 6.5rem
}

@media (max-width:1023px) {
    .container-footer {
        width: 100%;
        max-width: 100%
    }
}

h1 {
    font-size: 5.25rem;
    line-height: 6rem
}

h1,
h2 {
    font-family: var(--font-bw-gradual);
    font-weight: 900
}

h2 {
    font-size: 3.75rem;
    line-height: 4.25rem
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3)
}

h3,
h4 {
    font-family: var(--font-bw-gradual);
    font-weight: var(--font-weight-strong-bold)
}

h4 {
    font-size: 1rem;
    line-height: 1.5rem
}

h5 {
    font-size: var(--font-size-very-large);
    line-height: var(--line-height-large)
}

h5,
h6 {
    font-weight: var(--font-weight-bold)
}

h6 {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-medium-large)
}

.text-lg {
    font-size: 2rem;
    font-weight: 500;
    line-height: 2.5rem
}

.btn {
    background-color: var(--primary-color);
    color: var(--black-color);
    cursor: pointer;
    border-radius: 4rem;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 3rem;
    padding: 0 1.25rem;
    display: inline-flex
}

.btn--small {
    height: 2.25rem;
    padding: 0 1rem;
    font-size: 1rem
}

.btn--secondary {
    background-color: var(--background-color);
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color)
}

.btn--secondary.btn--dark {
    background-color: var(--bg-white-default);
    color: var(--primary-color)
}

.btn--dark {
    background-color: var(--text-color-default);
    color: var(--primary-color);
    border-color: var(--text-color-default)
}

.btn i:first-child {
    margin-right: 1rem
}

.btn i:last-child {
    margin-left: 1rem
}

.display {
    font-family: var(--font-bw-gradual);
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
    font-weight: var(--font-weight-strong-bold)
}

.button-text {
    font-size: var(--font-size-text-button);
    line-height: var(--line-height-text-button);
    font-weight: var(--font-weight-bold)
}

.text-x-small {
    font-size: var(--font-size-small);
    line-height: 18px
}

.text-x-small,
.text-xxx-s {
    font-weight: var(--font-weight-regular)
}

.text-xxx-s {
    font-size: 8px;
    line-height: 14px
}

.text-xx-small {
    font-size: 10px;
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-regular)
}

.text-small {
    font-size: var(--font-size-normal)
}

.text-main,
.text-small {
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular)
}

.text-main {
    font-size: var(--font-size-medium)
}

.text-large {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large)
}

.text-huge,
.text-large {
    font-weight: var(--font-weight-regular)
}

.text-huge {
    font-size: var(--font-size-huge);
    line-height: var(--line-height-huge)
}

.text-support {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-bold)
}

.mask-image {
    -webkit-mask-image: url(../../../images/vector-d.svg);
    mask-image: url(../../../images/vector-d.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.text-super-large {
    font-size: var(--font-size-huge);
    line-height: var(--line-height-huge);
    font-weight: var(--font-weight-regular)
}

.padding-wrapper {
    padding: 3.5rem 1rem 7.5rem
}

@media (max-width:1023px) {
    .padding-wrapper {
        padding: 2.5rem 1rem 4.5rem
    }
}

@media (max-width:767px) {
    .padding-wrapper {
        padding: 1.5rem 1rem 2.5rem
    }
}

.platform-card-container-padding {
    padding: 0 1rem
}

.platform-card-high-light-padding {
    padding: 5rem 0
}

@media (max-width:1023px) {
    .platform-card-high-light-padding {
        padding: 3.5rem 0
    }
}

@media (max-width:767px) {
    .platform-card-high-light-padding {
        padding: 2rem 0
    }
}

.dot-nav-button {
    border-radius: 50%;
    width: 15px;
    height: 15px
}

@media (max-width:767px) {
    .dot-nav-button {
        width: 10px;
        height: 10px
    }
}

.scroll-custom {
    scrollbar-width: thin;
    scrollbar-color: var(--black-color-40)var(--black-color-25)
}

.scroll-custom::-webkit-scrollbar {
    height: 8px
}

.scroll-custom::-webkit-scrollbar-track {
    background: var(--black-color-25)
}

.scroll-custom::-webkit-scrollbar-thumb {
    background-color: var(--black-color-40);
    border-radius: 6px
}

.scroll-custom::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-color-brand-hover)
}

@media (min-width:768px) and (max-width:1023px) {
    .scroll-custom {
        scrollbar-width: none
    }

    .scroll-custom::-webkit-scrollbar {
        height: 0
    }

    .scroll-custom:hover::-webkit-scrollbar {
        height: 8px
    }

    .scroll-custom:hover {
        scrollbar-width: thin
    }
}

input:-webkit-autofill {
    transition: background-color 5000s ease-in-out;
    background-color: transparant !important;
    -webkit-text-fill-color: var(--text-white-default) !important
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shake {

    0%,
    to {
        transform: translate(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-2px)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(2px)
    }
}

.animate-fadeInDown {
    animation: fadeInDown .3s ease-out
}

.animate-shake {
    animation: shake .5s ease-in-out
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #3f3f3f;
    border-radius: 100px;
    width: 4px;
    height: 4px
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ff0090;
    border-radius: 100px;
    width: 2px;
    height: 2px
}

@keyframes menuSlideLeft {
    0% {
        transform: translate(calc(100% + 1.5rem))
    }

    to {
        transform: translate(0)
    }
}

@keyframes menuSlideRight {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(calc(100% + 1.5rem))
    }
}

@keyframes menuSlideDown {
    0% {
        transform: translateY(-2rem)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes megaMenuSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes megaMenuSlideDown {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(20px)
    }
}

@keyframes sectionSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes menuFadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes dotAppear {
    0% {
        opacity: 0;
        max-width: 0;
        margin-right: 0
    }

    to {
        opacity: 1;
        max-width: 12px;
        margin-right: 6px
    }
}

@keyframes dotDisappear {
    0% {
        opacity: 1;
        max-width: 12px;
        margin-right: 6px
    }

    to {
        opacity: 0;
        max-width: 0;
        margin-right: 0
    }
}

.page-header {
    background-color: var(--background-color);
    height: var(--header-height);
    z-index: 1000;
    justify-content: center;
    width: 100%;
    transition: background-color .3s;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.page-header__wrapper {
    width: 100%;
    position: relative
}

.page-header .container {
    height: 100%;
    max-width: var(--max-width);
    flex-wrap: nowrap;
    align-items: center;
    margin-inline: 16px;
    padding-inline: 0;
    display: flex
}

.page-header__dropdownmenu {
    margin-left: 2.5rem
}

.page-header__dropdownmenu>ul>li {
    margin-right: 1rem;
    display: inline-block
}

.page-header__dropdownmenu>ul>li:last-child {
    margin-right: 0
}

.page-header__dropdownmenu>ul>li a {
    color: var(--menu-color);
    padding: .25rem .5rem;
    font-weight: 400
}

.page-header__dropdownmenu>ul>li a i {
    transition: transform .3s;
    display: inline-block
}

.page-header__dropdownmenu>ul>li .header-menu--other-menu__image {
    transition: background-color .3s ease-in-out
}

.page-header__dropdownmenu>ul>li .header-menu--other-menu__image:hover {
    cursor: pointer;
    background-color: var(--background-color-black-hover-1)
}

.page-header__dropdownmenu>ul>li .header-menu__item-link {
    align-items: center;
    display: flex;
    position: relative
}

.page-header__dropdownmenu>ul>li .header-menu__item-link.noDropdown:before {
    content: "";
    background-color: var(--text-white-default);
    opacity: 0;
    border-radius: 50%;
    flex-shrink: 0;
    width: 6px;
    max-width: 0;
    height: 6px;
    margin-right: 0;
    display: inline-block;
    overflow: hidden
}

.page-header__dropdownmenu>ul>li .header-menu__item-link.noDropdown.active:before {
    opacity: 1;
    max-width: 12px;
    margin-right: 6px;
    animation: none
}

.page-header__dropdownmenu>ul>li:hover~.page-header {
    background-color: red
}

.page-header__dropdownmenu>ul>li:hover .header-menu__item-link {
    cursor: pointer;
    align-items: center;
    display: flex;
    position: relative
}

.page-header__dropdownmenu>ul>li:hover .header-menu__item-link:not(.active):before {
    animation: dotAppear .3s forwards
}

.page-header__dropdownmenu>ul>li:hover a i {
    transform: rotate(180deg)
}

.page-header__dropdownmenu>ul>li:not(:hover) .header-menu__item-link.active:before {
    opacity: 1;
    max-width: 12px;
    margin-right: 6px
}

.page-header__dropdownmenu>ul>li:not(:hover) .header-menu__item-link:not(.active):before {
    animation: dotDisappear .5s forwards
}

.page-header__dropdownmenu .mega-menu {
    background-color: var(--header-bg-color);
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    padding: 0 1rem;
    transition: visibility 0s linear .3s, opacity .3s, transform .3s;
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(20px)
}

.page-header__dropdownmenu .mega-menu.menu-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    transform: translateY(0)
}

.page-header__dropdownmenu .mega-menu .container {
    align-items: flex-start;
    padding: 1rem 6.5rem
}

.page-header__dropdownmenu .mega-menu__container {
    grid-template-columns: minmax(0, 1fr) 380px;
    width: 100%;
    max-width: 1232px;
    margin-inline: auto;
    padding: 1rem 0;
    display: grid
}

.page-header__dropdownmenu .mega-menu__main {
    color: var(--black-color-40);
    background-color: #0b0c0b4d;
    border-radius: .75rem;
    padding: 1.5rem
}

.page-header__dropdownmenu .mega-menu__main h4 {
    color: var(--black-color-40);
    padding: 0 .75rem
}

.page-header__dropdownmenu .mega-menu__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    display: grid
}

.page-header__dropdownmenu .mega-menu__menu--list-menu {
    margin-bottom: 0
}

.page-header__dropdownmenu .mega-menu__menu a {
    padding: 0
}

.page-header__dropdownmenu .mega-menu__menu__item {
    border-radius: .5rem;
    flex-direction: column;
    padding: .75rem;
    transition: background-color .3s ease-in-out;
    display: flex
}

.page-header__dropdownmenu .mega-menu__menu__item:hover {
    cursor: pointer;
    background-color: var(--background-color-black-hover-1)
}

.page-header__dropdownmenu .mega-menu__menu__item__image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto;
    border-radius: .5rem;
    width: 323px;
    height: 190px;
    margin-bottom: .5rem;
    display: block
}

.page-header__dropdownmenu .mega-menu__menu__item span {
    max-width: 323px;
    color: var(--text-color);
    display: block
}

.page-header__dropdownmenu .mega-menu__menu ul {
    width: 100%;
    min-width: 200px;
    margin-right: 1.25rem
}

.page-header__dropdownmenu .mega-menu__menu ul:last-child {
    margin-right: 0
}

.page-header__dropdownmenu .mega-menu__menu .mega-menu__list-item-link:last-child>li div {
    border-bottom: none
}

.page-header__dropdownmenu .mega-menu__menu li {
    border-radius: .5rem;
    width: 100%;
    margin: 0;
    padding: 0 .75rem;
    transition: background-color .2s ease-in-out;
    display: block
}

.page-header__dropdownmenu .mega-menu__menu li:hover {
    cursor: pointer;
    background-color: var(--background-color-black-hover-1)
}

.page-header__dropdownmenu .mega-menu__menu li:hover i {
    color: var(--text-white-default)
}

.page-header__dropdownmenu .mega-menu__menu li div {
    border-bottom: 1px solid var(--black-color-25);
    padding: .75rem 0;
    position: relative
}

.page-header__dropdownmenu .mega-menu__menu li div i {
    display: inline-block;
    position: absolute;
    top: calc(50% - .625rem);
    right: 0
}

.page-header__dropdownmenu .mega-menu__menu li span {
    padding-top: .25rem;
    font-size: .875rem;
    line-height: 1.5rem;
    display: block
}

.page-header__dropdownmenu .mega-menu__industry {
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
    display: flex
}

.page-header__dropdownmenu .mega-menu__industry h4 {
    margin-bottom: .5rem;
    padding: 0 .75rem
}

.page-header__dropdownmenu .mega-menu__industry ul {
    margin-bottom: 3.375rem
}

.page-header__dropdownmenu .mega-menu__industry ul:last-child {
    margin-bottom: 0
}

.page-header__dropdownmenu .mega-menu__industry li {
    border-radius: .5rem;
    margin: 0;
    transition: background-color .2s ease-in-out;
    display: block
}

.page-header__dropdownmenu .mega-menu__industry li:hover {
    cursor: pointer;
    background-color: var(--background-color-black-hover-1)
}

.page-header__dropdownmenu .mega-menu__industry li a {
    color: var(--heading-color);
    align-items: center;
    padding: .375rem .75rem;
    font-weight: 400;
    display: flex
}

.page-header__dropdownmenu .mega-menu__industry li a i {
    color: var(--primary-color);
    margin-right: .75rem
}

.page-header__dropdownmenu .mega-menu__industry .mega-menu__other-menu li a {
    padding: 12px
}

.page-header__actions {
    flex-grow: 1;
    justify-content: flex-end;
    display: flex
}

.page-header__actions>ul {
    align-items: center;
    gap: 16px;
    display: flex
}

.page-header__actions>ul>li {
    display: inline-block
}

.page-header__actions>ul>li:last-child {
    margin-right: 0
}

.page-header__actions>ul>li a:not(.btn) {
    color: var(--menu-color)
}

@media (max-width:1024px) {
    .page-header__actions>ul {
        gap: 12px
    }
}

@media (min-width:1024px) {
    .page-header__actions .hamburger-icon {
        display: none
    }
}

.page-header__mobile-menu {
    background-color: var(--black-color-10);
    visibility: hidden;
    opacity: 0;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 1.25rem 1rem;
    transition: all .2s ease-in-out;
    display: flex;
    position: absolute;
    top: 100%;
    left: 0
}

.page-header__mobile-menu>ul {
    flex-direction: column;
    height: 100%;
    display: flex
}

.page-header__mobile-menu>ul>li {
    cursor: pointer;
    border-bottom: 1px solid var(--black-color-25);
    width: 100%;
    min-width: 300px;
    height: 56px;
    padding: 1rem .75rem;
    transition: background-color .2s ease-in-out;
    display: block
}

.page-header__mobile-menu>ul>li:hover {
    background-color: var(--background-color-black-hover-1)
}

.page-header__mobile-menu>ul>li>a {
    display: block;
    position: relative
}

.page-header__mobile-menu>ul>li>a>i {
    position: absolute;
    top: calc(50% - .5rem);
    right: 0
}

.page-header__mobile-menu .sub-menu {
    background-color: var(--black-color-10);
    z-index: 1;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: -60px;
    left: 0
}

.page-header__mobile-menu .sub-menu__main {
    padding: 1.25rem 1rem 0
}

.page-header__mobile-menu .sub-menu__button {
    border-radius: .25rem;
    padding: .5rem;
    transition: background-color .2s
}

.page-header__mobile-menu .sub-menu__button--back {
    align-items: center;
    gap: .5rem;
    padding-left: .25rem;
    display: flex
}

.page-header__mobile-menu .sub-menu__button--back:hover {
    background-color: var(--background-color-black-hover-1);
    cursor: pointer
}

.page-header__mobile-menu .sub-menu__button--back:active {
    background-color: #fff3
}

.page-header__mobile-menu .sub-menu__button--close:hover {
    background-color: var(--background-color-black-hover-1);
    cursor: pointer
}

.page-header__mobile-menu .sub-menu__button--close:active {
    background-color: #fff3
}

.page-header__mobile-menu .sub-menu__menu__has-image {
    gap: 0 !important
}

.page-header__mobile-menu .sub-menu__menu--list-menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: 100%;
    display: grid
}

.page-header__mobile-menu .sub-menu__menu--list-menu.single-column {
    grid-template-columns: 1fr;
    gap: 0
}

.page-header__mobile-menu .sub-menu__menu--list-menu.single-column .sub-menu__menu__list-item {
    border-bottom: 1px solid var(--black-color-25)
}

.page-header__mobile-menu .sub-menu__menu--list-menu.single-column .sub-menu__menu__item {
    min-height: 76px;
    gap: .25rem !important;
    padding: .75rem !important
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item {
    width: 100%
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item {
    border-radius: .5rem;
    gap: 1rem;
    padding: 1rem .75rem;
    transition: background-color .2s;
    display: flex
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item:hover {
    background-color: var(--background-color-black-hover-1)
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item.has-description .sub-menu__menu__item__image {
    flex-shrink: 0;
    width: 120px;
    height: 80px
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item.has-description .sub-menu__menu__item__image img {
    object-fit: cover;
    border-radius: .5rem;
    width: 100%;
    height: 100%
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item.has-description .content {
    flex-direction: column;
    justify-content: flex-start;
    gap: .25rem;
    display: flex
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item:not(.has-description) {
    flex-direction: column
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item:not(.has-description) .sub-menu__menu__item__image {
    width: 100%;
    height: 160px;
    margin-bottom: .75rem
}

.page-header__mobile-menu .sub-menu__menu--list-menu .sub-menu__menu__list-item .sub-menu__menu__item:not(.has-description) .sub-menu__menu__item__image img {
    object-fit: cover;
    border-radius: .5rem;
    width: 100%;
    height: 100%
}

.page-header__mobile-menu .sub-menu__scrollable-content::-webkit-scrollbar {
    width: 4px
}

.page-header__mobile-menu .sub-menu__scrollable-content::-webkit-scrollbar-track {
    background: 0 0
}

.page-header__mobile-menu .sub-menu__scrollable-content::-webkit-scrollbar-thumb {
    background: #fff3;
    border-radius: 2px
}

.page-header__mobile-menu .sub-menu__scrollable-content:not(:hover)::-webkit-scrollbar-thumb {
    background: 0 0
}

.page-header__mobile-menu .sub-menu__scrollable-content.overflow-auto {
    scrollbar-gutter: stable
}

.page-header__mobile-menu .sub-menu__scrollable-content.overflow-auto:not(:hover)::-webkit-scrollbar-thumb {
    background: 0 0
}

.page-header__mobile-menu .sub-menu__industry {
    flex-direction: column;
    gap: 24px;
    padding: 0 1rem;
    display: flex
}

.page-header__mobile-menu .sub-menu__industry--item {
    border-bottom: 1px solid var(--black-color-25);
    border-radius: .5rem;
    height: 56px;
    padding: 1rem .75rem;
    transition: background-color .2s ease-in-out
}

.page-header__mobile-menu .sub-menu__industry--item:hover {
    background-color: var(--background-color-black-hover-1)
}

.page-header__mobile-menu.active {
    visibility: visible;
    opacity: 1;
    animation: menuSlideDown .3s ease-in-out
}

@media (max-width:1023px) {
    .page-header {
        height: 60px
    }

    .page-header__open {
        background-color: #1a1a1a
    }

    .page-header .logo {
        width: 72.98px;
        height: 36px
    }

    .page-header .hamburger-icon {
        display: flex
    }

    .page-header .hamburger-icon .hamburger-icon__icon {
        cursor: pointer;
        background: 0 0;
        border: none;
        flex-direction: column;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        transition: transform .2s;
        display: flex;
        position: relative
    }

    .page-header .hamburger-icon .hamburger-icon__icon span {
        background-color: #f3f3f3;
        border-radius: 2px;
        width: 18px;
        height: 2px;
        transition: all .2s;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .page-header .hamburger-icon .hamburger-icon__icon span:first-child {
        transform: translate(-50%, -4px)
    }

    .page-header .hamburger-icon .hamburger-icon__icon span:nth-child(2) {
        transform: translate(-50%, 4px)
    }

    .page-header .hamburger-icon .hamburger-icon__icon.open span:first-child {
        transform: translate(-50%, -50%)rotate(45deg)
    }

    .page-header .hamburger-icon .hamburger-icon__icon.open span:nth-child(2) {
        transform: translate(-50%, -50%)rotate(-45deg)
    }

    .page-header .sub-menu__industry--item {
        border-radius: 0
    }
}

@media (max-width:767px) {
    .page-header .demo-button {
        display: none
    }

    .page-header .sub-menu__two-column.sub-menu__menu__has-image {
        grid-template-columns: 1fr
    }

    .page-header .sub-menu__two-column .sub-menu__menu__item {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: .75rem !important;
        display: grid !important
    }

    .page-header .sub-menu__two-column .sub-menu__menu__item__image {
        width: 108px !important;
        height: 72px !important;
        margin-bottom: 0 !important
    }

    .page-header .sub-menu__two-column .content {
        flex-direction: column;
        justify-content: center;
        height: fit-content;
        min-height: 68px;
        display: flex
    }

    .page-header .sub-menu__menu__list-item {
        border-bottom: 1px solid var(--black-color-25)
    }

    .page-header .sub-menu__industry {
        gap: 0
    }

    .page-header .sub-menu__menu-content-description {
        letter-spacing: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }
}

.layout-footer-skeleton,
.layout-header-skeleton {
    background-color: var(--background-color);
    width: 100%;
    display: block
}

.layout-header-skeleton {
    height: var(--header-height)
}

.layout-footer-skeleton {
    min-height: var(--footer-brand-height-mobile)
}

.page-header:has(.mega-menu:hover),
.page-header:has(.page-header__dropdownmenu>ul>li:hover) {
    background-color: var(--header-bg-color)
}

.newsletter-section {
    border-bottom: 1px dashed var(--black-color-40);
    padding-top: 24px;
    padding-bottom: 24px
}

.newsletter-section__container {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    display: flex
}

@media (max-width:1023px) {
    .newsletter-section__container {
        flex-direction: column;
        gap: 24px
    }

    .newsletter-section .container-footer {
        padding: 0 14px
    }
}

.newsletter-section__content {
    align-items: end;
    gap: 32px;
    display: flex
}

@media screen and (max-width:1200px) {
    .newsletter-section__content {
        justify-content: space-between;
        width: 100%
    }
}

@media (max-width:1023px) {
    .newsletter-section__content {
        justify-content: space-between;
        align-items: center;
        width: 100%
    }
}

@media (max-width:767px) {
    .newsletter-section__content {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 24px
    }
}

.newsletter-section__form-wrapper {
    align-items: flex-end;
    gap: 8px;
    width: 424px;
    display: flex
}

@media (max-width:767px) {
    .newsletter-section__form-wrapper {
        justify-content: center;
        width: 100%
    }
}

.newsletter-section__input {
    flex: 1;
    min-width: 0
}

.newsletter-section__input input {
    width: 100%;
    min-width: 0;
    max-width: none
}

.newsletter-section__submit-button {
    flex-shrink: 0;
    color: var(--text-white-default) !important
}

.newsletter-section__badges {
    flex-wrap: wrap;
    gap: 12px;
    display: flex
}

.newsletter-section__badge {
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    display: flex
}

.newsletter-section__badge img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.newsletter-section__socials {
    align-items: center;
    gap: 16px;
    height: 32px;
    display: flex
}

@media screen and (max-width:1023px) {
    .newsletter-section__socials {
        justify-content: flex-start;
        width: 100%
    }

    .newsletter-section__socials__socials-label {
        display: none
    }
}

@media (max-width:767px) {
    .newsletter-section__socials {
        justify-content: center
    }
}

.newsletter-section__socials-label {
    color: var(--black-color-40)
}

@media screen and (max-width:1023px) {
    .newsletter-section__socials-label {
        display: none
    }
}

.newsletter-section__socials-icons {
    gap: 12px;
    display: flex
}

.newsletter-section__social-icon {
    border-radius: var(--border-radius-circle);
    background-color: var(--white-color);
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    transition: background-color .3s;
    display: flex
}

.newsletter-section__social-icon:hover {
    opacity: .8
}

.newsletter-section__social-icon img {
    object-fit: contain
}

.page-title {
    max-width: var(--max-width);
    width: 100%;
    font-family: var(--font-bw-gradual);
    text-align: center;
    margin: auto;
    font-size: 5.25rem;
    font-weight: 900;
    line-height: 6rem
}

@media (max-width:1023px) {
    .page-title {
        padding: 0 1rem
    }
}

.page-footer__menu {
    padding-top: 40px;
    padding-bottom: 40px
}

.page-footer__menu h6 {
    text-transform: uppercase;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-extra-bold);
    line-height: var(--line-height-medium);
    color: var(--text-white-default);
    margin-bottom: 1rem
}

.page-footer__menu ul {
    flex-direction: column;
    gap: 1rem;
    display: flex
}

.page-footer__menu ul li a {
    color: var(--text-white-default);
    line-height: var(--line-height-medium);
    letter-spacing: 0
}

@media screen and (max-width:1023px) {
    .page-footer__menu {
        padding: 40px 16px
    }
}

@media screen and (max-width:767px) {
    .page-footer__menu {
        display: none
    }
}

.page-footer__menu-mobile {
    flex-direction: column;
    width: 100%;
    padding: 16px;
    display: flex
}

@media screen and (min-width:768px) {
    .page-footer__menu-mobile {
        display: none
    }
}

.page-footer__mobile-section-title {
    text-transform: uppercase;
    width: 100%;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-extra-bold);
    line-height: var(--line-height-medium);
    color: var(--text-white-default);
    cursor: pointer;
    border-bottom: 1px dashed var(--black-color-40);
    justify-content: space-between;
    align-items: center;
    height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex
}

.page-footer__mobile-section-list {
    color: var(--text-white-default);
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
    margin-bottom: 12px;
    animation: sectionSlideDown .3s ease-out;
    display: flex
}

.page-footer__mobile-section-list li a {
    color: var(--text-white-default);
    line-height: var(--line-height-medium);
    font-size: var(--font-size-medium);
    letter-spacing: 0
}

.page-footer__column {
    flex: 1;
    min-width: 220px;
    max-width: 220px
}

@media screen and (max-width:1023px) {
    .page-footer__column {
        min-width: 223px;
        max-width: 223px
    }
}

.page-footer__brand {
    height: var(--footer-brand-height);
    background-color: var(--primary-color);
    width: 100%
}

@media screen and (max-width:1024px) {
    .page-footer__brand {
        height: var(--footer-brand-height-mobile)
    }
}

.page-footer__brand .container-footer {
    align-items: center;
    height: 100%;
    display: flex
}

@media screen and (max-width:1024px) {
    .page-footer__brand .container-footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 0 16px;
        display: flex
    }

    .page-footer__brand .container-footer>div {
        justify-content: space-between;
        width: 100%
    }
}

.page-footer__brand ul {
    gap: 1rem;
    display: flex
}

.page-footer__brand ul li {
    display: inline-block
}

.page-footer__brand ul li a {
    color: var(--text-color-default);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-medium);
    margin-right: 2rem
}

.page-footer__brand ul li a a {
    color: var(--black-color)
}

.page-footer__brand ul li a:last-child {
    margin-right: 0
}

.unstyled-link {
    all: unset !important;
    display: contents !important
}

.footer-privary:hover {
    color: var(--text-kleine-blue)
}

.accordion-content p {
    color: var(--text-color);
    margin-bottom: .5rem
}

.accordion-content strong {
    font-weight: var(--font-weight-bold)
}

.accordion-content em {
    color: var(--text-color);
    font-style: italic
}

.accordion-content a {
    color: #3b82f6;
    text-decoration: underline;
    transition: color .2s, -webkit-text-decoration .2s, text-decoration .2s
}

.accordion-content a:hover {
    color: #60a5fa;
    text-decoration: none
}

.accordion-content ol,
.accordion-content ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem
}

.accordion-content ul {
    color: var(--text-color);
    list-style: outside
}

.accordion-content ol {
    color: var(--text-color);
    list-style: decimal
}

.accordion-content li {
    margin-bottom: .5rem
}

.accordion-content blockquote {
    border-left: 4px solid var(--border-color-silver);
    color: #9ca3af;
    margin: 1rem 0;
    padding-left: 1rem;
    font-style: italic
}

.accordion-content code {
    color: #fef08a;
    background-color: #1f2937;
    border-radius: 4px;
    padding: .25rem .5rem;
    font-family: monospace;
    font-size: .875rem
}

.accordion-content br {
    content: "";
    margin-bottom: .5rem;
    display: block
}

.accordion-content h1,
.accordion-content h2,
.accordion-content h3,
.accordion-content h4,
.accordion-content h5,
.accordion-content h6 {
    margin-bottom: .5rem
}

@media (max-width:1023px) {
    .accordion__title {
        font-size: var(--font-size-very-large) !important;
        line-height: var(--line-height-large) !important;
        font-weight: var(--font-weight-bold) !important
    }
}

@media (max-width:767px) {
    .accordion__title {
        font-size: var(--font-size-medium-large) !important;
        line-height: var(--line-height-medium-large) !important;
        font-weight: var(--font-weight-bold) !important
    }
}

.button {
    cursor: pointer;
    border: none;
    gap: 8px;
    font-weight: 700;
    transition: background-color .2s, color .2s;
    display: inline-flex
}

.button,
.button.icon {
    justify-content: center;
    align-items: center
}

.button.icon {
    width: 48px;
    height: 48px;
    display: flex;
    border: var(--circle-border) !important;
    padding: 0 !important
}

.button.icon:hover {
    border-color: var(--black-secondary-border-color-hover) !important
}

.button.small {
    height: 36px;
    padding-left: 16px;
    padding-right: 16px
}

.button.medium,
.button.small {
    font-size: var(--font-size-text-button);
    line-height: var(--line-height-text-button);
    font-weight: var(--font-weight-bold)
}

.button.medium {
    height: 48px;
    padding-left: 20px;
    padding-right: 20px
}

.button.large {
    height: 56px;
    font-size: var(--font-size-text-button);
    line-height: var(--line-height-text-button);
    font-weight: var(--font-weight-bold);
    padding-left: 24px;
    padding-right: 24px
}

.button.primary {
    background-color: var(--primary-bg);
    color: var(--text-color-default)
}

.button.primary:hover {
    background-color: var(--primary-bg-hover)
}

.button.primary:active {
    background-color: var(--primary-bg-active)
}

.button.primary.disabled {
    background-color: var(--primary-bg-disabled);
    color: var(--primary-color-disabled);
    cursor: not-allowed
}

.button.secondary {
    background-color: var(--secondary-bg);
    color: var(--secondary-color);
    border: var(--brand-border)
}

.button.secondary:hover {
    border-color: var(--secondary-border-color)
}

.button.secondary:active {
    border-color: var(--secondary-border-color-active);
    color: var(--secondary-color-active)
}

.button.secondary.disabled {
    background-color: var(--secondary-bg-disabled);
    color: var(--secondary-color-disabled);
    border-color: var(--secondary-border-color-disabled);
    cursor: not-allowed
}

.button.black-primary {
    background-color: var(--black-primary-bg);
    color: var(--black-primary-color);
    border: var(--primary-border)
}

.button.black-primary:hover {
    background-color: var(--black-primary-bg-hover);
    color: var(--black-primary-color-hover)
}

.button.black-primary:active {
    background-color: var(--black-primary-bg-active);
    color: var(--black-primary-color-active)
}

.button.black-primary.disabled {
    background-color: var(--black-primary-bg-disabled);
    color: var(--black-primary-color-disabled);
    cursor: not-allowed
}

.button.black-secondary {
    background-color: var(--black-secondary-bg);
    color: var(--black-secondary-color);
    border: var(--primary-border)
}

.button.black-secondary:hover {
    background-color: var(--black-secondary-bg-hover);
    border-color: var(--black-secondary-border-color-hover);
    color: var(--black-secondary-color-hover)
}

.button.black-secondary:active {
    background-color: var(--black-secondary-bg-active);
    border-color: var(--black-secondary-border-color-active);
    color: var(--black-secondary-color-active)
}

.button.black-secondary.disabled {
    background-color: var(--black-secondary-bg-disabled);
    border-color: var(--black-secondary-border-color-disabled);
    color: var(--black-secondary-color-disabled);
    cursor: not-allowed
}

.button.rounded {
    border-radius: var(--border-radius-rounded)
}

.button.circle {
    border-radius: var(--border-radius-circle)
}

.input {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.input__wrapper {
    background-color: #0000;
    align-items: center;
    gap: 10px;
    display: flex;
    position: relative
}

.input__field {
    min-width: 200px;
    height: 48px;
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular);
    border-radius: 100px;
    outline: none;
    padding: 12px 16px
}

.input__field::placeholder {
    transition: color .2s
}

.input__field--with-icon {
    padding-right: 48px
}

.input__field--filled,
.input__field--focused {
    border-color: var(--input-light-border-color-active)
}

.input__field--disabled {
    cursor: not-allowed
}

.input__icon {
    color: var(--black-color-40);
    position: absolute;
    right: 16px
}

.input--light .input__field {
    border: 1px solid var(--primary-border);
    caret-color: var(--text-color-default);
    background-color: #0000
}

.input--light .input__field::placeholder {
    color: var(--text-color-placeholder-light-input)
}

.input--light .input__field:hover {
    border-color: var(--input-light-border-color-hover)
}

.input--light .input__field--filled,
.input--light .input__field--focused {
    border-color: var(--input-light-border-color-active)
}

.input--light .input__field--filled {
    color: var(--text-color-default)
}

.input--light .input__field--disabled {
    background-color: var(--background-color-disable-light-input);
    border-color: var(--input-light-border-color-active)
}

.input--light .input__field--disabled::placeholder {
    color: var(--text-color-placeholder-light-input-disabled)
}

.input--light .input__field .input__label {
    color: var(--black-color-40)
}

.input--dark .input__field {
    border: var(--input-dark-border);
    caret-color: var(--text-white-default);
    background-color: #0000
}

.input--dark .input__field::placeholder {
    color: var(--black-color-40)
}

.input--dark .input__field:hover {
    border-color: var(--input-dark-border-color-hover)
}

.input--dark .input__field--filled,
.input--dark .input__field--focused {
    border-color: var(--input-dark-border-color-active)
}

.input--dark .input__field--filled {
    color: var(--text-white-default)
}

.input--dark .input__field--disabled {
    background-color: var(--background-color-disable-dark-input);
    border-color: var(--input-dark-border-color-active)
}

.input--dark .input__field--disabled::placeholder,
.input--dark .input__label {
    color: var(--text-white-default)
}

.dp-logo-scroller {
    max-width: 1264px;
    margin-inline: auto;
    padding: 3.75rem 1rem
}

.dp-logo-scroller__wrapper {
    white-space: nowrap;
    position: relative;
    overflow: hidden
}

.dp-logo-scroller__title {
    color: var(--heading-color);
    margin-bottom: 2rem;
    font-size: 1.25rem;
    display: block
}

.dp-logo-scroller__logos {
    width: max-content;
    display: inline-block
}

.dp-logo-scroller__item {
    height: 25px;
    margin-right: 6.25rem;
    display: inline-block
}

.dp-logo-scroller__item img {
    object-fit: contain;
    width: auto;
    height: 100%
}

.dp-work-scroller {
    padding: 3.75rem 0
}

.dp-work-scroller__wrapper {
    white-space: nowrap;
    position: relative;
    overflow: hidden
}

.dp-work-scroller__works {
    width: max-content;
    display: inline-block
}

.dp-work-scroller__item {
    background-color: var(--black-color-10);
    border-radius: .75rem;
    align-items: center;
    margin-right: .75rem;
    padding: .5rem 3rem .5rem .5rem;
    display: inline-flex
}

.dp-work-scroller__item--icon {
    padding: .75rem 1.25rem
}

.dp-work-scroller__item img {
    border-radius: 5px;
    width: 50px;
    height: 37px;
    margin-right: .5rem
}

.dp-work-scroller__item i {
    margin-right: .75rem
}

.dp-work-scroller__item i,
.dp-work-scroller__item span {
    color: var(--heading-color)
}

.dp-hero .hero-marquee-mobile .rfm-marquee-container,
.dp-hero .rfm-marquee-container {
    width: calc(50% + 21px)
}

.dp-hero__container {
    background-position: 100%;
    background-repeat: no-repeat;
    justify-content: start;
    display: flex;
    position: relative
}

.dp-hero__container--center {
    justify-content: center
}

.dp-hero__container--center .dp-hero__content {
    justify-content: center;
    align-items: center
}

.dp-hero__container--center .dp-hero__description,
.dp-hero__container--center .dp-hero__subtitle,
.dp-hero__container--center .dp-hero__title {
    text-align: center
}

.dp-hero__container--center .dp-hero__buttons {
    justify-content: center
}

.dp-hero__content {
    flex-direction: column;
    width: 73%;
    display: flex
}

.dp-hero__content--100 {
    width: 100%
}

.dp-hero__content--75 {
    width: 75%
}

.dp-hero__content--60 {
    width: 60%
}

@media (max-width:1023px) {
    .dp-hero__content {
        width: 80%
    }
}

@media (max-width:767px) {
    .dp-hero__content {
        width: 100%
    }
}

.dp-hero__line {
    border-left: 1px dashed var(--heading-color);
    width: 1px;
    height: 150px;
    margin-bottom: .25rem
}

.dp-hero__subtitle {
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    display: block
}

.dp-hero__title {
    font-family: var(--font-bw-gradual);
    text-transform: uppercase;
    color: var(--heading-color);
    margin: 0 0 .25rem;
    font-size: 5.25rem;
    font-weight: 900;
    line-height: 6rem
}

@media (max-width:1023px) {
    .dp-hero__title {
        font-size: 3.75rem;
        line-height: 4.25rem
    }
}

@media (max-width:767px) {
    .dp-hero__title {
        word-wrap: break-word;
        font-size: 2rem;
        line-height: 2.5rem
    }
}

.dp-hero__description {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem
}

.dp-hero__buttons {
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    display: flex
}

.dp-hero__buttons--big .button {
    padding-left: 3rem;
    padding-right: 3rem
}

.dp-hero__buttons--right {
    margin: 0;
    display: inline-flex;
    position: absolute;
    bottom: 0;
    right: 0
}

@media (max-width:1023px) {
    .dp-hero__buttons--right {
        margin-top: 1.25rem;
        position: relative
    }
}

@media (max-width:767px) {
    .dp-hero__buttons {
        width: 100%
    }

    .dp-hero__buttons a {
        width: 50%;
        display: block
    }

    .dp-hero__buttons .button,
    .dp-hero__buttons a.fullwidth {
        width: 100%
    }
}

.dp-hero--light {
    background-color: var(--white-color)
}

.dp-hero--light .dp-hero__line {
    border-color: var(--text-color-default)
}

.dp-hero--light .dp-hero__subtitle,
.dp-hero--light .dp-hero__title {
    color: var(--background-color)
}

.dp-hero--light .dp-hero__description {
    color: var(--black-color-40)
}

.dp-hero--light .dp-hero__line {
    border-left: 1px dotted var(--text-color-default)
}

@keyframes marquee-scroll {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

.css-marquee {
    width: 100%;
    overflow: hidden
}

.css-marquee__track {
    width: max-content;
    animation: marquee-scroll var(--marquee-duration, 50s)linear infinite;
    will-change: transform;
    display: flex
}

.css-marquee__content {
    flex-shrink: 0;
    gap: 21px;
    padding-right: 21px;
    display: flex
}

.css-marquee:hover .css-marquee__track {
    animation-play-state: paused
}

.dp-hero-opt {
    background-color: var(--black-primary-bg);
    height: max-content;
    padding: var(--hero-pt-desktop, 3rem)16px var(--hero-pb-desktop, 3rem);
    justify-content: center;
    display: flex;
    overflow-x: hidden
}

@media (max-width:1023px) {
    .dp-hero-opt {
        padding: var(--hero-pt-tablet, 3rem)0 var(--hero-pb-tablet, 3rem);
        flex-direction: column;
        gap: 2.5rem
    }
}

@media (max-width:767px) {
    .dp-hero-opt {
        padding: var(--hero-pt-mobile, 2rem)0 var(--hero-pb-mobile, 2rem);
        gap: 1.5rem
    }
}

.dp-hero-opt__container {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 1232px;
    display: flex;
    position: relative
}

@media (max-width:1023px) {
    .dp-hero-opt__container {
        padding: 0 16px;
        padding-bottom: 0 !important
    }
}

.dp-hero-opt__container--center {
    justify-content: center
}

.dp-hero-opt__container--center .dp-hero-opt__content {
    align-items: center
}

.dp-hero-opt__container--center .dp-hero-opt__description,
.dp-hero-opt__container--center .dp-hero-opt__description-h2,
.dp-hero-opt__container--center .dp-hero-opt__subtitle,
.dp-hero-opt__container--center .dp-hero-opt__title {
    text-align: center
}

.dp-hero-opt__container--center .dp-hero-opt__buttons {
    justify-content: center
}

.dp-hero-opt__container--left {
    justify-content: flex-start
}

.dp-hero-opt__content {
    z-index: 10;
    flex-direction: column;
    justify-content: center;
    width: 73%;
    height: 100%;
    display: flex
}

@media (min-width:1024px) {
    .dp-hero-opt__content {
        position: absolute
    }
}

@media (max-width:1023px) {
    .dp-hero-opt__content {
        width: 80%;
        position: relative
    }
}

@media (max-width:767px) {
    .dp-hero-opt__content {
        width: 100% !important
    }
}

.dp-hero-opt__content--100 {
    width: 100%
}

.dp-hero-opt__content--75 {
    width: 75%
}

.dp-hero-opt__content--73 {
    width: 73%
}

.dp-hero-opt__content--60 {
    width: 60%
}

.dp-hero-opt__line {
    border-left: 1px dashed var(--heading-color);
    width: 1px;
    height: 150px;
    margin-bottom: .25rem
}

.dp-hero-opt__subtitle {
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    display: block
}

.dp-hero-opt__title {
    font-family: var(--font-bw-gradual);
    text-transform: uppercase;
    color: var(--heading-color);
    margin: 0 0 .25rem;
    font-size: 5.25rem;
    font-weight: 900;
    line-height: 6rem
}

@media (max-width:1023px) {
    .dp-hero-opt__title {
        font-size: 3.75rem;
        line-height: 4.25rem
    }
}

@media (max-width:767px) {
    .dp-hero-opt__title {
        word-wrap: break-word;
        font-size: 2rem;
        line-height: 2.5rem
    }
}

.dp-hero-opt__description {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem
}

.dp-hero-opt__description-h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: var(--font-weight-regular)
}

@media (max-width:767px) {
    .dp-hero-opt__description-h2 {
        font-size: 18px;
        line-height: 26px
    }
}

.dp-hero-opt__buttons {
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    display: flex
}

.dp-hero-opt__buttons--big .button {
    padding-left: 3rem;
    padding-right: 3rem
}

@media (min-width:1024px) {
    .dp-hero-opt__buttons--right {
        margin: 0;
        display: inline-flex;
        position: absolute;
        bottom: 0;
        right: 0
    }
}

@media (max-width:1023px) {
    .dp-hero-opt__buttons--right {
        margin-top: 1.25rem;
        position: relative
    }
}

@media (max-width:767px) {
    .dp-hero-opt__buttons {
        width: 100%
    }

    .dp-hero-opt__buttons a {
        width: 50%;
        display: block
    }

    .dp-hero-opt__buttons .button,
    .dp-hero-opt__buttons a.fullwidth {
        width: 100%
    }
}

.dp-hero-opt__carousel-desktop {
    z-index: 0;
    pointer-events: none;
    width: max-content;
    height: 100%;
    margin-left: 697px;
    display: block;
    position: relative
}

@media (max-width:1023px) {
    .dp-hero-opt__carousel-desktop {
        display: none !important
    }
}

.dp-hero-opt__carousel-mobile {
    z-index: 0;
    pointer-events: none;
    width: max-content;
    height: 100%;
    padding-bottom: 2.5rem;
    display: none;
    position: relative
}

@media (max-width:1023px) {
    .dp-hero-opt__carousel-mobile {
        display: block
    }
}

.dp-hero-opt__carousel-item {
    flex-shrink: 0;
    width: 340px;
    height: 460px
}

@media (max-width:767px) {
    .dp-hero-opt__carousel-item {
        width: 256px;
        height: 346px
    }
}

.dp-hero-opt__gradient-left {
    z-index: 5;
    width: 235px;
    height: 460px;
    position: absolute;
    left: 0
}

@media (max-width:767px) {
    .dp-hero-opt__gradient-left {
        width: 85px;
        height: 346px
    }
}

.dp-hero-opt__gradient-right {
    z-index: 5;
    width: 235px;
    height: 460px;
    position: absolute;
    right: 0
}

@media (max-width:767px) {
    .dp-hero-opt__gradient-right {
        width: 85px;
        height: 346px
    }
}

.dp-hero-opt__bg-desktop {
    z-index: 0;
    pointer-events: none;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 1333px;
    height: 661px;
    margin-left: 697px
}

@media (max-width:1023px) {
    .dp-hero-opt__bg-desktop {
        display: none
    }
}

.dp-hero-opt--light {
    background-color: var(--white-color)
}

.dp-hero-opt--light .dp-hero-opt__line {
    border-color: var(--text-color-default);
    border-left: 1px dotted var(--text-color-default)
}

.dp-hero-opt--light .dp-hero-opt__subtitle,
.dp-hero-opt--light .dp-hero-opt__title {
    color: var(--background-color)
}

.dp-hero-opt--light .dp-hero-opt__description {
    color: var(--black-color-40)
}

.dp-hero-opt--dark {
    background-color: var(--black-primary-bg)
}

@media (max-width:1023px) {
    .dp-heading__container {
        padding: 0 1rem
    }

    .dp-heading__content {
        width: 80%
    }
}

@media (max-width:767px) {
    .dp-heading__title {
        word-wrap: break-word;
        font-size: 2rem;
        font-weight: 800;
        line-height: 2.5rem
    }

    .dp-heading__buttons--big .button {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

.vs-table-card__description,
.vs-table-card__header-label {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular)
}

.vs-table-card__column {
    min-width: 8.75rem
}

.vs-table-card__highlight {
    width: calc(100% - 9px);
    left: 9px
}

.vs-table-card__column-first-left-height {
    min-height: 7.5rem
}

@media (max-width:1200px) {
    .vs-table-card__column {
        min-width: 100px
    }
}

@media (max-width:1023px) {
    .vs-table-card__description {
        font-size: var(--font-size-normal)
    }

    .vs-table-card__column {
        min-width: 78px
    }

    .vs-table-card__highlight {
        width: 100%;
        left: 0
    }

    .vs-table-card__column-first-left-height {
        min-height: 100px
    }
}

@media (max-width:767px) {
    .vs-table-card__header-label {
        font-size: var(--font-size-normal)
    }

    .vs-table-card__title {
        font-size: 14px;
        font-weight: 400 !important;
        line-height: 24px !important
    }

    .vs-table-card__description {
        display: none
    }

    .vs-table-card__column {
        min-width: 52px
    }

    .vs-table-card__column-first-left-height {
        min-height: 80px
    }

    .vs-table-card__highlight {
        height: 80px
    }
}

.dp-heading {
    padding-top: var(--dp-heading-pt-desktop, 1rem);
    padding-bottom: var(--dp-heading-pb-desktop, 2rem);
    width: 100%;
    display: flex
}

@media (max-width:1023px) {
    .dp-heading {
        padding-top: var(--dp-heading-pt-tablet, var(--dp-heading-pt-desktop, 1rem));
        padding-bottom: var(--dp-heading-pb-tablet, var(--dp-heading-pb-desktop, 2rem))
    }
}

@media (max-width:767px) {
    .dp-heading {
        padding-top: var(--dp-heading-pt-mobile, var(--dp-heading-pt-tablet, 1rem));
        padding-bottom: var(--dp-heading-pb-mobile, var(--dp-heading-pb-tablet, 2rem))
    }
}

.dp-heading__container {
    max-width: var(--max-width);
    background-position: 100%;
    background-repeat: no-repeat;
    width: 100%;
    margin: auto;
    display: flex;
    position: relative
}

.dp-heading__container--center {
    justify-content: center
}

.dp-heading__container--center .dp-heading__content {
    align-items: center
}

.dp-heading__container--center .dp-heading__description,
.dp-heading__container--center .dp-heading__subtitle,
.dp-heading__container--center .dp-heading__title {
    text-align: center
}

.dp-heading__container--center .dp-heading__buttons {
    justify-content: center
}

@media (max-width:1023px) {
    .dp-heading__container {
        padding: 0 1rem
    }
}

.dp-heading__content {
    flex-direction: column;
    justify-content: center;
    width: 65%;
    display: flex
}

.dp-heading__content--75 {
    width: 75%
}

.dp-heading__content--100 {
    width: 100%
}

@media (max-width:1023px) {
    .dp-heading__content {
        width: 80%
    }
}

@media (max-width:767px) {
    .dp-heading__content {
        width: 100%
    }
}

.dp-heading__line {
    border-left: 1px dashed var(--heading-color);
    width: 1px;
    height: 150px;
    margin-bottom: .25rem
}

.dp-heading__subtitle {
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: .25rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem
}

.dp-heading__title {
    font-family: var(--font-bw-gradual);
    color: var(--heading-color);
    text-transform: uppercase;
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 4.25rem
}

@media (max-width:1023px) {
    .dp-heading__title {
        font-size: 3rem;
        line-height: 3.5rem
    }
}

@media (max-width:767px) {
    .dp-heading__title {
        word-wrap: break-word;
        font-size: 2rem;
        font-weight: 800;
        line-height: 2.5rem
    }
}

.dp-heading__description {
    color: var(--text-color);
    margin-top: .5rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.dp-heading__description a {
    color: var(--primary-color);
    text-decoration: none
}

.dp-heading__description a:hover {
    color: var(--primary-color);
    opacity: .8
}

.dp-heading__buttons {
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    display: flex
}

.dp-heading__buttons--big .button {
    padding-left: 3rem;
    padding-right: 3rem
}

@media (max-width:767px) {
    .dp-heading__buttons--big .button {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

.dp-heading__buttons--right {
    margin: 0;
    display: inline-flex;
    position: absolute;
    bottom: 0;
    right: 0
}

@media (max-width:1023px) {
    .dp-heading__buttons--right {
        margin-top: 1.25rem;
        position: relative
    }
}

@media (max-width:767px) {
    .dp-heading__buttons {
        width: 100%
    }

    .dp-heading__buttons a {
        width: 50%;
        display: block
    }

    .dp-heading__buttons .button,
    .dp-heading__buttons a.fullwidth {
        width: 100%
    }
}

.dp-heading--light {
    background-color: var(--bg-white-default)
}

.dp-heading--light .dp-heading__line {
    border-color: var(--text-color-default)
}

.dp-heading--light .dp-heading__subtitle,
.dp-heading--light .dp-heading__title {
    color: var(--text-color-default)
}

.dp-heading--light .dp-heading__description {
    color: var(--black-color-40)
}

.feature-card--image-top {
    flex-direction: column
}

.feature-card--image-bottom,
.feature-card--image-top {
    border-radius: 1rem;
    gap: 1.5rem;
    padding: 2rem;
    display: flex
}

.feature-card--image-bottom {
    flex-direction: column-reverse
}

.feature-card--image-bottom-left {
    border-radius: 1rem;
    flex-direction: column-reverse;
    gap: 32px;
    padding: 2rem 0 0;
    display: flex
}

.feature-card--image-bottom-left__content {
    padding-inline: 2rem
}

.feature-card--image-bottom-left__image {
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem;
    width: 267px;
    height: 312px
}

.feature-card--text-with-icon {
    border-radius: 1.25rem;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    display: flex
}

.feature-card--text-with-icon__content {
    gap: .75rem
}

.feature-card--text-with-icon__image {
    display: none
}

.feature-card--text-with-icon__icon-text {
    justify-content: space-between;
    align-items: center;
    height: 40px;
    display: flex
}

.feature-card--text-with-icon__title {
    color: var(--white-color)
}

.feature-card-wrapper--vertical {
    flex-direction: column
}

.feature-card-wrapper--horizontal {
    flex-direction: row-reverse;
    max-width: 1232px
}

.feature-card-wrapper--horizontal__image {
    flex: 1;
    width: 608px;
    height: 316px
}

.feature-card-wrapper--horizontal .feature-card--text-with-icon {
    flex: 1;
    max-width: 608px
}

.feature-card--hover {
    border-radius: 12px;
    transition: transform .5s ease-in-out;
    position: relative
}

.feature-card--hover__image {
    will-change: transform;
    transition: transform .2s ease-out
}

.feature-card--hover:before {
    content: "";
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(#0000, #ff0090, #0000);
    width: 1px;
    height: 50px;
    transition: bottom .5s ease-in-out, opacity .3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0
}

.feature-card--hover:hover {
    transform: scale(1.03)
}

.feature-card--hover:hover:before {
    opacity: 1;
    bottom: 60%
}

.feature-card--hover:hover__image {
    transform: perspective(600px)rotateY(0)
}

.feature-card--hover:not(:hover):before {
    opacity: 0;
    bottom: 0
}

@media (max-width:1023px) {

    .feature-card--image-bottom,
    .feature-card--image-bottom-left,
    .feature-card--image-top {
        border-radius: 1rem;
        gap: 16px;
        padding: 24px
    }

    .feature-card--image-bottom-left__image,
    .feature-card--image-bottom__image,
    .feature-card--image-top__image {
        width: 279px;
        height: 200px
    }

    .feature-card--image-bottom-left__title,
    .feature-card--image-bottom__title,
    .feature-card--image-top__title {
        font-size: 20px;
        line-height: 28px
    }

    .feature-card--image-bottom-left__description,
    .feature-card--image-bottom__description,
    .feature-card--image-top__description {
        letter-spacing: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .feature-card--image-bottom-left {
        padding: 24px 0 0
    }

    .feature-card--image-bottom-left__content {
        padding-inline: 24px
    }

    .feature-card--image-bottom-left__image {
        width: 183px;
        height: 227px;
        margin-left: 0
    }

    .feature-card--text-with-icon {
        border-radius: 1rem;
        flex-direction: column;
        gap: 1rem;
        padding: 24px;
        display: flex
    }

    .feature-card--text-with-icon__content {
        gap: .25rem
    }

    .feature-card--text-with-icon__icon-text {
        justify-content: space-between;
        align-items: center;
        height: 40px;
        display: flex
    }

    .feature-card--text-with-icon__title {
        font-size: 20px;
        line-height: 28px
    }

    .feature-card--text-with-icon__description {
        letter-spacing: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .feature-card-wrapper--horizontal {
        gap: 1rem
    }

    .feature-card-wrapper--horizontal__image {
        width: 608px;
        max-height: 300px
    }
}

@media (max-width:767px) {

    .feature-card--image-bottom,
    .feature-card--image-top {
        padding: 24px
    }

    .feature-card--image-bottom__image,
    .feature-card--image-top__image {
        width: 279px;
        height: 200px
    }

    .feature-card--image-bottom-left__image {
        width: 292px;
        height: 276px
    }

    .feature-card-wrapper--vertical__image {
        width: 100%
    }

    .feature-card-wrapper--horizontal {
        flex-direction: row-reverse;
        gap: .75rem
    }

    .feature-card-wrapper--horizontal .feature-card--text-with-icon {
        max-width: 100%
    }

    .feature-card-wrapper--horizontal__image {
        width: 320px;
        height: 192px
    }
}

.side-image-feature-card {
    flex-direction: column
}

.side-image-feature-card__content {
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    display: flex
}

.side-image-feature-card__line {
    border-left: 1px dashed var(--heading-color);
    width: 1px;
    height: 150px;
    margin-bottom: .25rem
}

.side-image-feature-card__subtitle {
    text-transform: uppercase;
    margin-bottom: .25rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem
}

.side-image-feature-card__title {
    font-family: var(--font-bw-gradual);
    text-transform: uppercase;
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 4.25rem
}

@media (max-width:1023px) {
    .side-image-feature-card__title {
        font-size: 3rem;
        line-height: 3.5rem
    }
}

@media (max-width:767px) {
    .side-image-feature-card__title {
        word-wrap: break-word;
        font-size: 2rem;
        font-weight: 800;
        line-height: 2.5rem
    }
}

.side-image-feature-card__description {
    margin-top: .5rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.side-image-feature-card__buttons {
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    display: flex
}

@media (max-width:767px) {
    .side-image-feature-card__buttons {
        width: 100%
    }

    .side-image-feature-card__buttons a {
        width: 50%;
        display: block
    }

    .side-image-feature-card__buttons .button,
    .side-image-feature-card__buttons a.fullwidth {
        width: 100%
    }
}

.side-image-feature-card__image {
    aspect-ratio: 2;
    will-change: transform;
    width: 888px;
    height: auto;
    transition: transform .2s ease-out
}

.side-image-feature-card--center .side-image-feature-card__content {
    max-width: 100%
}

.side-image-feature-card--left {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    max-width: 1232px
}

.side-image-feature-card--left .side-image-feature-card__content {
    width: 100%;
    height: 100%
}

.side-image-feature-card--left .side-image-feature-card__image {
    border-radius: 1.25rem;
    width: 600px;
    height: 380px
}

.side-image-feature-card--right {
    flex-direction: row-reverse;
    align-items: center;
    gap: 4rem;
    max-width: 1232px
}

.side-image-feature-card--right .side-image-feature-card__content {
    width: 100%;
    height: 100%
}

.side-image-feature-card--right .side-image-feature-card__image {
    border-radius: 1.25rem;
    flex: 1;
    width: 600px;
    height: 380px
}

.side-image-feature-card .bg-blur-gradient {
    filter: blur(80px);
    opacity: .3;
    background: linear-gradient(90deg, #ff0090 0 45%, #2b8cff 55% 100%);
    border-radius: 30%;
    transform: scale(.9)
}

@media (max-width:1023px) {
    .side-image-feature-card__content {
        max-width: 100%;
        padding: 0
    }

    .side-image-feature-card--center .side-image-feature-card__content {
        margin-inline: 48px
    }

    .side-image-feature-card--center .button,
    .side-image-feature-card--center .side-image-feature-card__buttons a {
        width: fit-content
    }

    .side-image-feature-card--center .side-image-feature-card__title {
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 60px;
        font-weight: 900;
        line-height: 68px
    }

    .side-image-feature-card--left,
    .side-image-feature-card--right {
        flex-direction: column-reverse;
        gap: 2.5rem
    }

    .side-image-feature-card--left .side-image-feature-card__image,
    .side-image-feature-card--right .side-image-feature-card__image {
        border-radius: 1.25rem;
        width: 100%;
        height: 100%;
        min-height: 462px;
        max-height: 462px
    }

    .side-image-feature-card--left .side-image-feature-card__title,
    .side-image-feature-card--right .side-image-feature-card__title {
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 60px;
        font-weight: 900;
        line-height: 68px
    }
}

@media (max-width:767px) {
    .side-image-feature-card__title {
        font-weight: var(--font-weight-extra-bold);
        font-size: var(--font-size-huge);
        line-height: var(--line-height-huge);
        letter-spacing: -1px;
        text-align: center;
        text-transform: uppercase
    }

    .side-image-feature-card--center .side-image-feature-card__title {
        letter-spacing: 0;
        text-transform: uppercase;
        letter-spacing: -2px;
        font-size: 32px;
        font-weight: 800;
        line-height: 40px
    }

    .side-image-feature-card--center .side-image-feature-card__description {
        letter-spacing: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .side-image-feature-card--center .side-image-feature-card__buttons .button,
    .side-image-feature-card--center .side-image-feature-card__buttons a {
        width: 100% !important
    }

    .side-image-feature-card--left,
    .side-image-feature-card--right {
        gap: .75rem;
        height: fit-content
    }

    .side-image-feature-card--left .side-image-feature-card__title,
    .side-image-feature-card--right .side-image-feature-card__title {
        letter-spacing: 0;
        text-transform: uppercase;
        text-align: start;
        font-size: 32px;
        font-weight: 800;
        line-height: 40px
    }

    .side-image-feature-card--left .side-image-feature-card__image,
    .side-image-feature-card--right .side-image-feature-card__image {
        border-radius: 1.25rem;
        width: 100%;
        height: 100%;
        min-height: 199px;
        max-height: 344px
    }

    .side-image-feature-card--left .side-image-feature-card__description,
    .side-image-feature-card--right .side-image-feature-card__description {
        letter-spacing: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }

    .side-image-feature-card--left .side-image-feature-card__content,
    .side-image-feature-card--right .side-image-feature-card__content {
        height: fit-content
    }
}

.case-study-card-type1__stat {
    border-bottom: 1px dashed #0000;
    border-image: repeating-linear-gradient(to right, var(--text-white-default)0, var(--text-white-default)2px, transparent 2px, transparent 8px);
    border-image-slice: 1
}

@media (max-width:1023px) {
    .case-study-card-type1 {
        width: 686px;
        height: 420px
    }

    .case-study-card-type1__image {
        width: 357px
    }

    .case-study-card-type1__stat {
        gap: .25rem;
        padding-top: 16px;
        padding-bottom: 16px
    }

    .case-study-card-type1__stat:first-child {
        padding-top: 0
    }

    .case-study-card-type1__stat h2 {
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3)
    }

    .case-study-card-type1__cta {
        padding-top: 16px
    }

    .case-study-card-type1__logo-img {
        height: 44px
    }
}

@media (max-width:767px) {
    .case-study-card-type1 {
        flex-direction: column;
        gap: 8px;
        width: 300px;
        height: auto
    }

    .case-study-card-type1__image {
        width: 300px;
        height: 300px
    }

    .case-study-card-type1__content {
        width: 100%
    }

    .case-study-card-type1__stat {
        gap: 0;
        padding-top: 12px;
        padding-bottom: 12px
    }

    .case-study-card-type1__stat:first-child {
        padding-top: 0
    }

    .case-study-card-type1__cta {
        flex-direction: column;
        align-items: start;
        padding-top: 12px
    }

    .case-study-card-type1__logo-img {
        height: 36px
    }

    .case-study-card-type1__btn-default {
        width: 100%
    }

    .case-study-card-type2 {
        width: 320px
    }

    .case-study-card-type2__image-wrapper {
        height: 360px
    }

    .case-study-card-type2__footer {
        height: 64px;
        padding: 20px 16px
    }

    .case-study-card-type2__logo-img {
        height: 24px
    }

    .case-study-card-type2__tags {
        font-size: var(--font-size-normal);
        line-height: var(--line-height-medium);
        white-space: nowrap
    }
}

@media (max-width:1023px) {
    .out-work-card-tertiary {
        width: 337px
    }

    .out-work-card-tertiary__odd {
        height: 193px
    }

    .out-work-card-tertiary__even {
        width: 381px;
        height: 218px
    }

    .out-work-card-tertiary__title {
        font-size: var(--font-size-very-large) !important;
        line-height: var(--line-height-large) !important;
        font-weight: var(--font-weight-bold) !important
    }
}

@media (max-width:767px) {
    .out-work-card-tertiary {
        width: 281px
    }

    .out-work-card-tertiary__odd {
        height: 161px
    }

    .out-work-card-tertiary__even {
        height: 181px
    }

    .out-work-card-tertiary__title {
        font-size: var(--font-size-medium) !important;
        line-height: var(--line-height-medium-large) !important;
        font-weight: var(--font-weight-bold) !important
    }

    .out-work-card-tertiary__description {
        font-size: var(--font-size-normal) !important;
        line-height: var(--line-height-medium) !important;
        font-weight: var(--font-weight-regular) !important
    }

    .out-work-card-primary__image--odd {
        width: 280px;
        height: 330px
    }

    .out-work-card-primary__image--even {
        width: 280px;
        height: 280px
    }

    .out-work-card-secondary__image {
        width: 320px;
        height: 354px
    }

    .out-work-card-secondary__content {
        padding: 20px 16px
    }

    .out-work-card-secondary__title {
        font-size: var(--font-size-medium-large) !important;
        line-height: var(--line-height-large) !important;
        font-weight: var(--font-weight-regular) !important
    }
}

@media (max-width:1023px) {
    .infomation-card {
        gap: 16px !important
    }

    .infomation-card__image {
        height: 305px
    }

    .infomation-card__label {
        padding: 16px !important
    }

    .with-image-secondary__value {
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2)
    }

    .with-image-secondary__image {
        height: 177px
    }
}

@media (max-width:767px) {
    .infomation-card {
        flex-wrap: wrap !important
    }

    .infomation-card__image {
        height: 446px
    }

    .with-image-secondary__value {
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2)
    }

    .with-image-secondary__container {
        flex-direction: column
    }
}

.only-text-two-column a,
.only-text-two-column p {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    display: inline-block
}

.only-text-two-column a {
    color: var(--text-kleine-blue);
    text-decoration: underline
}

.only-text-three-column a,
.only-text-three-column p {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    display: inline-block
}

.only-text-three-column a {
    color: var(--text-kleine-blue);
    text-decoration: underline
}

@media screen and (min-width:1024px) {
    .slick-dots {
        bottom: -55px !important
    }

    .testimonial-card__author {
        font-size: var(--font-size-medium-large)
    }

    .testimonial-card--line-style {
        height: 150px
    }

    .testimonial-card--gap-style {
        gap: 24px
    }

    .testimonial-card--gap-style-2 {
        gap: 16px
    }

    .testimonial-card--author-style {
        font-size: var(--font-size-medium-large);
        line-height: var(--line-height-large);
        font-weight: var(--font-weight-regular)
    }
}

@media screen and (max-width:1023px) {
    .slick-dots {
        bottom: -31px !important
    }

    .testimonial-card {
        gap: 20px
    }

    .quote-text {
        font-size: var(--font-size-medium);
        line-height: var(--line-height-medium);
        font-weight: var(--font-weight-regular) !important
    }

    .testimonial-card__content {
        gap: 8px
    }

    .testimonial-card__author {
        font-size: var(--font-size-normal);
        line-height: var(--line-height-normal);
        font-weight: var(--font-weight-regular)
    }

    .testimonial-card--line-style {
        height: 100px
    }

    .testimonial-card--gap-style {
        gap: 20px
    }

    .testimonial-card--gap-style-2 {
        gap: 16px
    }

    .testimonial-card--author-style {
        font-size: var(--font-size-normal);
        line-height: var(--line-height-medium);
        font-weight: var(--font-weight-regular)
    }
}

@media screen and (max-width:767px) {
    .slick-dots {
        bottom: -35px !important
    }

    .quote-text {
        font-size: var(--font-size-medium-large);
        line-height: var(--line-height-large);
        font-weight: var(--font-weight-regular) !important
    }

    .testimonial-card--gap-style {
        gap: 24px
    }
}

.bento-box-carousel .slick-dots {
    justify-content: center;
    display: flex
}

.content-card__box {
    background-color: var(--black-color-25);
    border-radius: 1.25rem;
    gap: 1.5rem;
    width: 100%;
    max-width: 700px;
    min-height: 150px;
    padding: 1.5rem;
    transition: transform .3s, box-shadow .3s;
    display: flex
}

.content-card__box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px #0000001a
}

.content-card__image {
    border-radius: var(--border-radius-medium);
    object-fit: cover;
    width: 150px;
    height: 150px
}

.content-card__content {
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    height: 100%;
    min-height: 150px;
    display: flex
}

.content-card__text {
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 19px;
    display: flex
}

.content-card__text-title {
    color: var(--white-color)
}

.content-card__text-description {
    color: var(--border-color-silver)
}

.content-card__link {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    background: 0 0;
    border: none;
    width: fit-content;
    padding: .25rem 0;
    position: relative;
    color: var(--primary-color) !important;
    text-decoration: none !important
}

.content-card__link:hover {
    color: var(--text-color-brand-hover);
    text-decoration: underline !important
}

.content-card__background {
    border-radius: var(--border-radius-medium);
    background-position: 50%;
    background-size: cover;
    align-items: flex-end;
    width: 100%;
    max-width: 700px;
    height: fit-content;
    min-height: 150px;
    padding: 1.5rem 2rem;
    transition: transform .3s, box-shadow .3s;
    display: flex;
    position: relative
}

.content-card__background:before {
    content: "";
    background-color: var(--black-color-25);
    opacity: .7;
    border-radius: var(--border-radius-medium);
    position: absolute;
    inset: 0
}

.content-card__background:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px #0003
}

.content-card__background .content-card__content {
    z-index: 1;
    position: relative
}

@media (max-width:1023px) {
    .content-card__box {
        gap: 1.25rem;
        min-height: 130px;
        padding: 1.25rem
    }

    .content-card__image {
        width: 150px;
        height: 150px
    }

    .content-card__background {
        min-height: 130px;
        padding: 1.25rem 1.5rem
    }
}

@media (max-width:767px) {
    .content-card__box {
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
        padding: 1rem
    }

    .content-card__image {
        width: 100%;
        height: 174px
    }

    .content-card__content {
        min-height: auto
    }

    .content-card__text {
        margin-bottom: 16px
    }

    .content-card__text-title {
        font-size: var(--font-size-very-large)
    }

    .content-card__text-description {
        font-size: var(--font-size-normal)
    }

    .content-card__background {
        min-height: 120px;
        padding: 1rem
    }
}

.tab-bar-navigation__item {
    font-size: 16px;
    line-height: 24px
}

@media screen and (max-width:767px) {
    .tab-bar-navigation__item--underline {
        height: 56px;
        padding: .375rem .75rem;
        font-size: 14px;
        line-height: 20px
    }

    .tab-bar-navigation--underline {
        justify-content: flex-start;
        gap: 0;
        padding-bottom: 4px;
        overflow-x: auto
    }

    .tab-bar-navigation--underline::-webkit-scrollbar {
        display: none
    }
}

@media (max-width:767px) {
    .why-dp-card {
        width: 320px
    }

    .why-dp-card__image-wrapper {
        height: 354px
    }

    .why-dp-card__footer {
        height: 72px;
        padding: 8px 16px
    }

    .why-dp-card__title {
        line-height: 32px;
        font-size: 20px !important
    }

    .why-dp-card__subtitle {
        font-size: 14px;
        line-height: 24px
    }
}

.dot {
    position: relative
}

.dot.small {
    width: 18px;
    height: 18px
}

.dot.small:after {
    width: 2px;
    height: 2px
}

.dot.medium {
    width: 9px;
    height: 9px
}

.dot.medium:after {
    width: 5px;
    height: 5px
}

.dot:after {
    content: "";
    background-color: var(--black-color-40);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@keyframes glowBackground {
    0% {
        background: radial-gradient(50% 50%, #ff009000 0, #0b0c0b 90%)
    }

    5% {
        background: radial-gradient(50% 50%, #ff009003 0, #0b0c0b 90.5%)
    }

    10% {
        background: radial-gradient(50% 50%, #ff009005 0, #0b0c0b 91%)
    }

    15% {
        background: radial-gradient(50% 50%, #ff009008 0, #0b0c0b 91.5%)
    }

    20% {
        background: radial-gradient(50% 50%, #ff00900a 0, #0b0c0b 92%)
    }

    25% {
        background: radial-gradient(50% 50%, #ff00900d 0, #0b0c0b 92.5%)
    }

    30% {
        background: radial-gradient(50% 50%, #ff00900f 0, #0b0c0b 93%)
    }

    35% {
        background: radial-gradient(50% 50%, #ff009012 0, #0b0c0b 93.5%)
    }

    40% {
        background: radial-gradient(50% 50%, #ff009014 0, #0b0c0b 94%)
    }

    45% {
        background: radial-gradient(50% 50%, #ff009017 0, #0b0c0b 94.5%)
    }

    50% {
        background: radial-gradient(50% 50%, #ff00901a 0, #0b0c0b 95%)
    }

    55% {
        background: radial-gradient(50% 50%, #ff00901c 0, #0b0c0b 95.5%)
    }

    60% {
        background: radial-gradient(50% 50%, #ff00901f 0, #0b0c0b 96%)
    }

    65% {
        background: radial-gradient(50% 50%, #ff009021 0, #0b0c0b 96.5%)
    }

    70% {
        background: radial-gradient(50% 50%, #ff009024 0, #0b0c0b 97%)
    }

    75% {
        background: radial-gradient(50% 50%, #ff009026 0, #0b0c0b 97.5%)
    }

    80% {
        background: radial-gradient(50% 50%, #ff009029 0, #0b0c0b 98%)
    }

    85% {
        background: radial-gradient(50% 50%, #ff00902b 0, #0b0c0b 98.5%)
    }

    90% {
        background: radial-gradient(50% 50%, #ff00902e 0, #0b0c0b 99%)
    }

    95% {
        background: radial-gradient(50% 50%, #ff009030 0, #0b0c0b 99.5%)
    }

    to {
        background: radial-gradient(50% 50%, #ff009033 0, #0b0c0b 100%)
    }
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 5px #ff009099)drop-shadow(0 0 10px #ff009066)
    }

    to {
        filter: drop-shadow(0 0 2px #ff009066)drop-shadow(0 0 6px #ff009033)
    }
}

.platform-cards-wrapper {
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px;
    animation: glowBackground 2.5s ease-in-out infinite alternate;
    display: flex;
    position: relative
}

.platform-cards-wrapper.animation-paused {
    animation-play-state: paused
}

.platform-cards-wrapper:before {
    content: "";
    padding-top: 100%;
    display: block
}

@media (max-width:767px) {
    .platform-cards-wrapper {
        display: none
    }
}

.platform-cards-mobile {
    display: none
}

@media (max-width:767px) {
    .platform-cards-mobile {
        width: 100%;
        display: block
    }
}

.platform-cards-mobile__header-subtitle {
    letter-spacing: 0;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.platform-cards-mobile__header-title {
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-white-default);
    font-size: 32px;
    font-weight: 800;
    line-height: 40px
}

.platform-cards-mobile__logo {
    justify-content: center;
    align-items: center;
    width: 78.56px;
    height: 70px;
    margin: 1.5rem 0;
    display: flex
}

.platform-cards-mobile__logo img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.platform-cards-mobile__card {
    background-color: var(--black-color-10);
    border-radius: 1.25rem;
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    transition: transform .3s, box-shadow .3s;
    position: sticky;
    top: 100px
}

.platform-cards-mobile__card:active {
    transform: scale(.98)
}

.platform-cards-mobile__title {
    color: var(--white-color);
    letter-spacing: 0;
    margin-bottom: .5rem;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px
}

.platform-cards-mobile__desc {
    color: var(--white-color);
    letter-spacing: 0;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.platform-cards-mobile__icons {
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 185px;
    display: flex
}

.platform-cards-mobile__icon-wrapper {
    border: 1px solid var(--primary-color);
    border-radius: .75rem;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    padding: .5rem;
    transition: all .3s;
    display: flex
}

.platform-cards-mobile__icon-wrapper:active {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px #ff00904d
}

.platform-cards-mobile__icon {
    object-fit: contain;
    color: #f06a6a;
    width: 1.5rem;
    height: 1.5rem
}

.platform-cards {
    border-radius: 50%;
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 900px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width:767px) {
    .platform-cards {
        display: none
    }
}

.platform-cards__logo {
    z-index: 11;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 180px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.platform-cards__logo img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

@media (max-width:1023px) {
    .platform-cards__logo {
        width: 140px;
        height: 140px
    }
}

@media (max-width:767px) {
    .platform-cards__logo {
        display: none
    }
}

.platform-cards__section {
    cursor: pointer;
    width: 50%;
    height: 50%;
    transition: all .3s;
    position: absolute
}

.platform-cards__section:hover {
    background: 0 0
}

.platform-cards__section:hover .platform-cards__content,
.platform-cards__section:hover:before {
    opacity: 1
}

.platform-cards__section:hover .platform-cards__arc,
.platform-cards__section:hover .platform-cards__title {
    opacity: 0
}

.platform-cards__section:hover .platform-cards__arc img {
    transform: translate(-50%, -50%)scale(.8)
}

@media (max-width:1023px) {
    .platform-cards__section {
        justify-content: center;
        align-items: center;
        display: flex
    }
}

@media (max-width:767px) {
    .platform-cards__section {
        display: none
    }
}

.platform-cards__section--active {
    background: 0 0
}

.platform-cards__section--active:before {
    opacity: 1;
    animation: spotlight-pulse 2s infinite alternate
}

.platform-cards__section--active .platform-cards__content {
    opacity: 1
}

.platform-cards__section--active .platform-cards__arc,
.platform-cards__section--active .platform-cards__title {
    opacity: 0
}

.platform-cards__section--active.platform-cards__section--top .platform-cards__content {
    transform: translate(-50%, -65%)scale(1) !important
}

.platform-cards__section--active.platform-cards__section--right .platform-cards__content {
    transform: translate(-25%, -50%)scale(1) !important
}

.platform-cards__section--active.platform-cards__section--bottom .platform-cards__content {
    transform: translate(-50%, -35%)scale(1) !important
}

.platform-cards__section--active.platform-cards__section--left .platform-cards__content {
    transform: translate(-75%, -50%)scale(1) !important
}

.platform-cards__section--top {
    width: 100%;
    height: 50%;
    top: 0;
    left: 0
}

.platform-cards__section--top .platform-cards__arc--top {
    display: block
}

.platform-cards__section--top .platform-cards__arc--top img {
    position: absolute;
    bottom: -47%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width:1023px) {
    .platform-cards__section--top .platform-cards__arc--top img {
        width: 70%
    }
}

.platform-cards__section--top .platform-cards__content {
    align-items: center
}

.platform-cards__section--top .platform-cards__icons {
    justify-content: center
}

.platform-cards__section--top .platform-cards__title {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    transform: translate(-50%, -50%)
}

.platform-cards__section--top:before {
    --x: 50%;
    --y: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.platform-cards__section--top .platform-cards__content {
    transform: translate(-50%, -65%)scale(1) !important
}

.platform-cards__section--right {
    width: 50%;
    height: 100%;
    top: 0;
    right: 0
}

.platform-cards__section--right .platform-cards__content {
    align-items: start
}

.platform-cards__section--right .platform-cards__icons {
    justify-content: start
}

.platform-cards__section--right .platform-cards__content-desc,
.platform-cards__section--right .platform-cards__content-title {
    text-align: start
}

.platform-cards__section--right .platform-cards__title {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    transform: translate(-50%, -50%)
}

.platform-cards__section--right:before {
    --x: 0%;
    --y: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.platform-cards__section--right .platform-cards__content {
    transform: translate(-25%, -50%)scale(1) !important
}

.platform-cards__section--right .platform-cards__arc--right {
    display: block
}

.platform-cards__section--right .platform-cards__arc--right img {
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%)
}

.platform-cards__section--bottom {
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0
}

.platform-cards__section--bottom .platform-cards__arc--bottom {
    display: block
}

.platform-cards__section--bottom .platform-cards__arc--bottom img {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width:1023px) {
    .platform-cards__section--bottom .platform-cards__arc--bottom img {
        width: 70%
    }
}

.platform-cards__section--bottom .platform-cards__content {
    align-items: center
}

.platform-cards__section--bottom .platform-cards__icons {
    justify-content: center
}

.platform-cards__section--bottom:before {
    --x: 50%;
    --y: 0%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.platform-cards__section--bottom .platform-cards__title {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    transform: translate(-50%, -50%)
}

.platform-cards__section--bottom .platform-cards__content {
    transform: translate(-50%, -35%)scale(1) !important
}

.platform-cards__section--left {
    width: 50%;
    height: 100%;
    top: 0;
    left: 0
}

.platform-cards__section--left .platform-cards__arc--left {
    display: block
}

.platform-cards__section--left .platform-cards__arc--left img {
    position: absolute;
    top: 50%;
    left: 47%;
    transform: translate(-50%, -50%)
}

.platform-cards__section--left .platform-cards__content {
    align-items: end
}

.platform-cards__section--left .platform-cards__icons {
    justify-content: end
}

.platform-cards__section--left .platform-cards__content-desc,
.platform-cards__section--left .platform-cards__content-title {
    text-align: end
}

.platform-cards__section--left:before {
    --x: 100%;
    --y: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.platform-cards__section--left .platform-cards__title {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    transform: translate(-50%, -50%)
}

.platform-cards__section--left .platform-cards__content {
    transform: translate(-75%, -50%)scale(1) !important
}

@media (max-width:1023px) {
    .platform-cards__section:hover {
        background: initial
    }

    .platform-cards__section:hover .platform-cards__content,
    .platform-cards__section:hover:before {
        opacity: 0
    }

    .platform-cards__section:hover .platform-cards__title {
        opacity: 1;
        transform: translate(-50%, -50%)scale(1)
    }

    .platform-cards__section--bottom .platform-cards__content,
    .platform-cards__section--top .platform-cards__content {
        max-width: 320px
    }

    .platform-cards__section--left .platform-cards__content,
    .platform-cards__section--right .platform-cards__content {
        max-width: 240px
    }

    .platform-cards__section--active {
        z-index: 10
    }

    .platform-cards__section--active:before {
        background: radial-gradient(circle at var(--x, 50%)var(--y, 50%), #ff009066 0, #ff009033 25%, #ff00901a 50%, transparent 70%);
        box-shadow: 0 0 20px #ff00904d;
        opacity: 1 !important
    }

    .platform-cards__section--active .platform-cards__title {
        opacity: 0 !important
    }

    .platform-cards__section--active.platform-cards__section--top .platform-cards__content--active {
        opacity: 1 !important;
        transform: translate(-50%, -65%)scale(1) !important
    }

    .platform-cards__section--active.platform-cards__section--right .platform-cards__content--active {
        opacity: 1 !important;
        transform: translate(-25%, -50%)scale(1) !important
    }

    .platform-cards__section--active.platform-cards__section--bottom .platform-cards__content--active {
        opacity: 1 !important;
        transform: translate(-50%, -35%)scale(1) !important
    }

    .platform-cards__section--active.platform-cards__section--left .platform-cards__content--active {
        opacity: 1 !important;
        transform: translate(-75%, -50%)scale(1) !important
    }
}

@media (max-width:767px) {

    .platform-cards__section--bottom .platform-cards__content,
    .platform-cards__section--left .platform-cards__content,
    .platform-cards__section--right .platform-cards__content,
    .platform-cards__section--top .platform-cards__content {
        max-width: 100%
    }
}

.platform-cards__arc {
    transition: opacity .3s ease-in-out;
    display: none
}

.platform-cards__arc img {
    will-change: transform;
    transition: transform .3s ease-in-out
}

.platform-cards__content,
.platform-cards__title {
    text-align: center;
    width: 100%;
    transition: opacity .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width:767px) {

    .platform-cards__content,
    .platform-cards__title {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        opacity: 1 !important
    }
}

.platform-cards__title {
    color: var(--black-color-40);
    letter-spacing: 0;
    text-align: center;
    z-index: 1;
    width: 200px;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    transition: all .3s
}

@media (max-width:767px) {
    .platform-cards__title {
        display: none
    }
}

.platform-cards__content {
    opacity: 0;
    color: var(--white-color);
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    max-width: 320px;
    font-size: .9rem;
    transition: all .3s;
    display: flex;
    transform: translate(-50%, -50%)scale(.9)
}

@media (max-width:767px) {
    .platform-cards__content {
        opacity: 1;
        max-width: 100%;
        transform: none
    }
}

@media (max-width:1023px) {
    .platform-cards__content--active {
        z-index: 15;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important
    }
}

.platform-cards__content-title {
    color: var(--white-color);
    letter-spacing: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px
}

.platform-cards__content-desc {
    color: var(--white-color);
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.platform-cards__icons {
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
    max-width: 185px;
    margin-top: .5rem;
    display: flex
}

@media (max-width:767px) {
    .platform-cards__icons {
        max-width: 100%
    }
}

.platform-cards__icon-wrapper {
    border: 1px solid #ff0090;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    padding: .5rem;
    transition: all .3s;
    display: flex;
    box-shadow: 0 0 10px #ff009033
}

.platform-cards__icon-wrapper:hover {
    border-color: #e4ff4d;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px #ff00904d
}

.platform-cards__icon-wrapper:hover .platform-cards__icon {
    color: #ff8282;
    transform: scale(1.1)
}

@media (max-width:767px) {
    .platform-cards__icon-wrapper {
        width: 48px;
        height: 48px
    }
}

.platform-cards__icon {
    object-fit: contain;
    color: #f06a6a;
    width: 1.5rem;
    height: 1.5rem;
    transition: all .3s
}

@media (max-width:767px) {
    .platform-cards__icon {
        width: 1.2rem;
        height: 1.2rem
    }
}

@keyframes spotlight-pulse {
    0% {
        opacity: .7;
        filter: brightness(.9)
    }

    to {
        opacity: 1;
        filter: brightness(1.2)
    }
}

@media (max-width:1023px) {
    .blog-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        display: grid
    }
}

@media (max-width:767px) {
    .blog-card-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 32px 16px;
        display: grid
    }
}

.blog-detail-page__section {
    display: flex
}

.blog-detail-page__toc {
    min-width: calc(300px + 2rem);
    max-width: calc(300px + 2rem);
    padding: 0 2rem
}

@media (max-width:1023px) {
    .blog-detail-page__toc {
        display: none
    }
}

.blog-detail-page__toc__indexes {
    background-color: var(--background-color-dimgrey-7);
    border-radius: 1.25rem;
    padding: 1.5rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5rem;
    display: block
}

.blog-detail-page__toc__indexes ul {
    margin-top: .75rem
}

.blog-detail-page__toc__indexes li {
    padding: .25rem 0
}

.blog-detail-page__toc__indexes li a:hover {
    opacity: .8
}

.blog-detail-page__content {
    flex-grow: 1
}

.blog-detail-page .blog-datetime {
    color: var(--heading-color)
}

.blog-detail-page .blog-authors,
.blog-detail-page .blog-title {
    color: var(--heading-color);
    margin-top: .75rem
}

.blog-detail-page .blog-authors {
    gap: 2.5rem;
    display: flex
}

.blog-detail-page .blog-authors__item {
    justify-content: center;
    align-items: center;
    gap: .75rem;
    display: inline-flex
}

.blog-detail-page .blog-authors__item__avatar {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--heading-color);
    border-radius: 50%;
    width: 40px;
    height: 40px
}

.blog-detail-page .blog-authors__item__info-last-name {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2rem;
    display: block
}

.blog-detail-page .blog-authors__item__info-job-title {
    letter-spacing: 0;
    color: #c4c4c4;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.blog-detail-page .paragraph-title {
    color: var(--heading-color);
    padding: 1rem 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    display: block
}

.blog-detail-page .blog-quote {
    font-size: var(--font-size-very-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-bold);
    color: var(--white-color)
}

.blog-detail-page .blog-quote i {
    font-size: 3.75rem;
    line-height: 4.25rem;
    font-family: var(--font-bw-gradual);
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 900;
    display: block
}

.blog-detail-page .blog-video video {
    width: 100%;
    height: auto
}

@media (max-width:767px) {
    .blog-detail-page .blog-title {
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 32px;
        font-weight: 800;
        line-height: 40px
    }

    .blog-detail-page .blog-quote h5 {
        letter-spacing: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 28px
    }
}

.latest-blogs {
    width: 100%;
    max-width: max-content;
    margin: auto
}

.latest-blogs__header {
    align-items: center;
    display: flex
}

.latest-blogs__header__title {
    color: var(--heading-color);
    flex-grow: 1;
    font-size: 34px;
    line-height: 40px
}

@media (max-width:768px) {
    .latest-blogs__header__title {
        font-size: 20px;
        line-height: 28px
    }
}

.latest-blogs__header__link .button {
    padding-left: 3rem;
    padding-right: 3rem
}

@media (max-width:767px) {
    .latest-blogs__header__link .button {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

table td,
table th {
    font-size: var(--font-size-medium-large) !important;
    line-height: var(--line-height-large) !important;
    font-weight: var(--font-weight-regular) !important
}

.blog-detail-page__content p {
    color: var(--text-color);
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    margin-bottom: .5rem
}

.blog-detail-page__content p:last-of-type {
    margin-bottom: 0
}

.blog-detail-page__content ol li,
.blog-detail-page__content ul li {
    color: var(--text-color);
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    margin-bottom: .5rem
}

.blog-detail-page__content .blog-paragraph+.blog-paragraph {
    margin-top: 1.5rem
}

.blog-detail-page__content strong {
    font-weight: var(--font-weight-bold)
}

.blog-detail-page__content em {
    color: var(--text-color);
    font-style: italic
}

.blog-detail-page__content a {
    color: #3b82f6;
    text-decoration: underline;
    transition: color .2s, -webkit-text-decoration .2s, text-decoration .2s
}

.blog-detail-page__content a:hover {
    color: #60a5fa;
    text-decoration: none
}

.blog-detail-page__content ol,
.blog-detail-page__content ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem
}

.blog-detail-page__content ul {
    color: var(--text-color);
    list-style: outside
}

.blog-detail-page__content ol {
    color: var(--text-color);
    list-style: decimal
}

.blog-detail-page__content li {
    margin-bottom: .5rem
}

.blog-detail-page__content blockquote {
    border-left: 4px solid var(--border-color-silver);
    color: #9ca3af;
    margin: 1rem 0;
    padding-left: 1rem;
    font-style: italic
}

.blog-detail-page__content code {
    color: #fef08a;
    background-color: #1f2937;
    border-radius: 4px;
    padding: .25rem .5rem;
    font-family: monospace;
    font-size: .875rem
}

.blog-detail-page__content br {
    content: "";
    margin-bottom: .5rem;
    display: block
}

.blog-detail-page__content table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    border: 1px solid var(--black-color-25);
    background-color: #0000;
    border-radius: 8px;
    margin: 1.5rem 0;
    overflow: hidden
}

.blog-detail-page__content thead {
    background-color: #171817
}

.blog-detail-page__content td,
.blog-detail-page__content th {
    text-align: left;
    color: var(--text-color);
    vertical-align: top;
    word-wrap: break-word;
    border: 1px solid var(--black-color-25);
    background-clip: padding-box;
    padding: 12px 16px;
    position: relative
}

.blog-detail-page__content tr:first-child td,
.blog-detail-page__content tr:first-child th {
    border-top: none
}

.blog-detail-page__content td:first-child,
.blog-detail-page__content th:first-child {
    border-left: none
}

.blog-detail-page__content td:last-child,
.blog-detail-page__content th:last-child {
    border-right: none
}

.blog-detail-page__content tr:last-child td,
.blog-detail-page__content tr:last-child th {
    border-bottom: none
}

.blog-detail-page__content th {
    font-weight: var(--font-weight-semi-bold);
    color: var(--heading-color);
    background-color: #0000
}

.blog-detail-page__content tbody tr {
    background-color: #0000;
    transition: none
}

.blog-detail-page__content tbody tr:hover,
.blog-detail-page__content tbody tr:nth-child(2n),
.blog-detail-page__content tbody tr:nth-child(2n):hover {
    background-color: #0000
}

.blog-detail-page__content td[colspan],
.blog-detail-page__content td[rowspan],
.blog-detail-page__content th[colspan],
.blog-detail-page__content th[rowspan] {
    z-index: 1;
    position: relative;
    border: 1px solid var(--black-color-25) !important
}

.blog-detail-page__content tr:first-child td[colspan],
.blog-detail-page__content tr:first-child td[rowspan],
.blog-detail-page__content tr:first-child th[colspan],
.blog-detail-page__content tr:first-child th[rowspan] {
    border-top: none !important
}

.blog-detail-page__content td[colspan]:first-child,
.blog-detail-page__content td[rowspan]:first-child,
.blog-detail-page__content th[colspan]:first-child,
.blog-detail-page__content th[rowspan]:first-child {
    border-left: none !important
}

.blog-detail-page__content td[colspan]:last-child,
.blog-detail-page__content td[rowspan]:last-child,
.blog-detail-page__content th[colspan]:last-child,
.blog-detail-page__content th[rowspan]:last-child {
    border-right: none !important
}

.blog-detail-page__content tr:last-child td[colspan],
.blog-detail-page__content tr:last-child td[rowspan],
.blog-detail-page__content tr:last-child th[colspan],
.blog-detail-page__content tr:last-child th[rowspan] {
    border-bottom: none !important
}

.blog-detail-page__content td[style*=background-color],
.blog-detail-page__content th[style*=background-color] {
    color: var(--text-color) !important;
    border: 1px solid #ffffff1a !important
}

.blog-detail-page__content tr:first-child td[style*=background-color],
.blog-detail-page__content tr:first-child th[style*=background-color] {
    border-top: none !important
}

.blog-detail-page__content td[style*=background-color]:first-child,
.blog-detail-page__content th[style*=background-color]:first-child {
    border-left: none !important
}

.blog-detail-page__content td[style*=background-color]:last-child,
.blog-detail-page__content th[style*=background-color]:last-child {
    border-right: none !important
}

.blog-detail-page__content tr:last-child td[style*=background-color],
.blog-detail-page__content tr:last-child th[style*=background-color] {
    border-bottom: none !important
}

.blog-detail-page__content td[style*=background-color][colspan],
.blog-detail-page__content td[style*=background-color][rowspan],
.blog-detail-page__content th[style*=background-color][colspan],
.blog-detail-page__content th[style*=background-color][rowspan] {
    box-shadow: inset 0 0 0 1px #0000001a;
    border: 1px solid #fff3 !important
}

.blog-detail-page__content td:not([style*=background-color]),
.blog-detail-page__content th:not([style*=background-color]) {
    background-color: #0000
}

.blog-detail-page__content thead td:not([style*=background-color]),
.blog-detail-page__content thead th:not([style*=background-color]) {
    color: var(--heading-color);
    background-color: #0000
}

.blog-detail-page__content tbody tr:hover td:not([style*=background-color]),
.blog-detail-page__content tbody tr:hover th:not([style*=background-color]),
.blog-detail-page__content tbody tr:nth-child(2n) td:not([style*=background-color]),
.blog-detail-page__content tbody tr:nth-child(2n) th:not([style*=background-color]) {
    background-color: #0000
}

.blog-detail-page__content .table-container,
.blog-detail-page__content figure.table {
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    overflow-x: auto
}

@media (max-width:768px) {

    .blog-detail-page__content .table-container,
    .blog-detail-page__content figure.table {
        margin: 1rem -1rem;
        padding: 0 1rem
    }
}

@media (max-width:480px) {

    .blog-detail-page__content .table-container,
    .blog-detail-page__content figure.table {
        margin: 1rem -.5rem;
        padding: 0 .5rem
    }
}

@media (max-width:768px) {
    .blog-detail-page__content figure.table {
        max-width: 100%
    }

    .blog-detail-page__content table {
        font-size: var(--font-size-small);
        table-layout: auto;
        min-width: 100%;
        display: table
    }

    .blog-detail-page__content td,
    .blog-detail-page__content th {
        font-size: var(--font-size-small);
        padding: 8px 12px
    }

    .blog-detail-page__content tbody,
    .blog-detail-page__content thead,
    .blog-detail-page__content tr {
        display: table-row
    }

    .blog-detail-page__content thead {
        display: table-header-group
    }

    .blog-detail-page__content tbody {
        display: table-row-group
    }

    .blog-detail-page__content tr {
        display: table-row
    }

    .blog-detail-page__content td,
    .blog-detail-page__content th {
        display: table-cell
    }
}

@media (max-width:480px) {
    .blog-detail-page__content figure.table {
        width: 100%
    }

    .blog-detail-page__content table {
        font-size: var(--font-size-normal)
    }

    .blog-detail-page__content td,
    .blog-detail-page__content th {
        font-size: var(--font-size-normal);
        max-width: 120px;
        padding: 6px 8px
    }
}

@media (max-width:1023px) {
    .blog-detail-page__content {
        margin-inline: auto !important
    }
}

.blog-card {
    cursor: pointer
}

.blog-card .relative.w-full.overflow-hidden {
    overflow: hidden
}

.blog-card .relative.w-full.overflow-hidden img {
    transition: transform .4s
}

.blog-card:hover img {
    transform: scale(1.05)
}

.blog-card:hover .blog-card-cta {
    color: var(--text-color-brand-active);
    text-decoration: underline
}

.ant-spin-dot-item {
    color: var(--brand-color) !important
}

@media (max-width:1023px) {
    .banner-card-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        display: grid
    }

    .blog-card-with-subcribe {
        gap: 16px
    }
}

@media (max-width:767px) {
    .banner-card-layout {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px 32px;
        display: grid
    }

    .branner-card-subcribe {
        width: 100%;
        height: auto
    }

    .branner-card-subcribe__footer {
        margin-top: 24px
    }

    .blog-card-with-subcribe {
        gap: 16px;
        display: grid
    }
}

#hubspotForm label {
    color: var(--text-white-default);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-semi-bold);
    margin-bottom: 8px;
    display: block
}

#hubspotForm fieldset {
    max-width: 100% !important
}

#hubspotForm fieldset .input {
    margin-right: 0
}

#hubspotForm input {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    width: 100%;
    height: 48px;
    margin-right: 0;
    padding: 12px 16px;
    max-width: 100% !important
}

#hubspotForm input::placeholder {
    color: var(--black-color-40)
}

#hubspotForm input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-bg);
    border: 1px solid var(--text-white-default);
    color: var(--black-color);
    cursor: pointer
}

#hubspotForm input[type=submit] {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--text-color-default);
    font-size: var(--font-size-text-button);
    line-height: var(--line-height-text-button);
    font-weight: var(--font-weight-bold);
    border-radius: 64px;
    padding: 0 20px
}

#hubspotForm p {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular)
}

#hubspotForm a {
    color: var(--text-kleine-blue);
    text-decoration: underline
}

#hubspotForm .hs-error-msg.hs-main-font-element,
#hubspotForm li>label {
    line-height: var(--line-height-small);
    font-size: var(--text-sm);
    color: oklch(.637 .237 25.331);
    font-weight: var(--font-weight-regular);
    margin-top: 8px;
    margin-bottom: 0
}

#hubspotForm li>label>span {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular);
    color: var(--text-white-default);
    margin-left: 8px
}

#hubspotForm .hs_email,
#hubspotForm .hs_phone,
#hubspotForm .hs_rlogic {
    margin-bottom: 16px
}

#hubspotForm .hs_firstname .input {
    margin-right: 10px
}

#hubspotForm .hs_phone select {
    margin-right: 10px;
    max-width: 180px !important
}

#hubspotForm .hs_phone input {
    width: 100% !important
}

#hubspotForm .hs_phone .input {
    margin: 0
}

#hubspotForm .hs_phone .input select {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    height: 48px;
    padding: 12px 16px;
    width: 100% !important
}

#hubspotForm .hs_phone .input select::placeholder {
    color: var(--black-color-40)
}

#hubspotForm .hs_phone .input option {
    color: var(--text-color-default)
}

#hubspotForm .hs-input.hs-fieldtype-intl-phone {
    width: 100%;
    display: flex
}

#hubspotForm .smart-field,
#hubspotForm fieldset:has(.hs_firstname) {
    margin-bottom: 16px
}

#hubspotForm .smart-field label {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    align-items: center;
    display: flex
}

#hubspotForm .smart-field span {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular)
}

#hubspotForm .hs_design_tools_in_use ul,
#hubspotForm .hs_how_do_you_get_creative_delivered_today_ ul {
    flex-direction: column;
    gap: 10px;
    width: max-content;
    display: flex
}

#hubspotForm .hs_design_tools_in_use ul span,
#hubspotForm .hs_how_do_you_get_creative_delivered_today_ ul span {
    cursor: pointer
}

#hubspotForm .hs_urgency_of_need select {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 12px 16px
}

#hubspotForm .hs_urgency_of_need select::placeholder {
    color: var(--black-color-40)
}

#hubspotForm .hs_urgency_of_need option {
    color: var(--text-color-default)
}

#hubspotForm .hs_urgency_of_need span {
    font-size: var(--font-size-normal);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-semi-bold)
}

#hubspotForm .hs_how_many_creative_deliverables_do_you_need_on_a_monthly_basis,
#hubspotForm .hs_what_is_your_creative_design_budget_,
#hubspotForm .hs_when_do_you_want_to_kick_things_off_with_design_pickle,
#hubspotForm .hs_your_company_size {
    margin-bottom: 16px
}

#hubspotForm .hs_how_many_creative_deliverables_do_you_need_on_a_monthly_basis select,
#hubspotForm .hs_what_is_your_creative_design_budget_ select,
#hubspotForm .hs_when_do_you_want_to_kick_things_off_with_design_pickle select,
#hubspotForm .hs_your_company_size select {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 12px 16px
}

#hubspotForm .hs_how_many_creative_deliverables_do_you_need_on_a_monthly_basis select::placeholder,
#hubspotForm .hs_what_is_your_creative_design_budget_ select::placeholder,
#hubspotForm .hs_when_do_you_want_to_kick_things_off_with_design_pickle select::placeholder,
#hubspotForm .hs_your_company_size select::placeholder {
    color: var(--black-color-40)
}

#hubspotForm .hs_how_many_creative_deliverables_do_you_need_on_a_monthly_basis option,
#hubspotForm .hs_what_is_your_creative_design_budget_ option,
#hubspotForm .hs_when_do_you_want_to_kick_things_off_with_design_pickle option,
#hubspotForm .hs_your_company_size option {
    color: var(--text-color-default)
}

#hubspotForm .hs_creative_design_needs select,
#hubspotForm .hs_greatest_challenge select {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 12px 16px
}

#hubspotForm .hs_creative_design_needs select::placeholder,
#hubspotForm .hs_greatest_challenge select::placeholder {
    color: var(--black-color-40)
}

#hubspotForm .hs_creative_design_needs option,
#hubspotForm .hs_greatest_challenge option {
    color: var(--text-color-default)
}

#hubspotForm .hs-form-checkbox label {
    margin: 0
}

#hubspotForm .hs_fingerprint___country,
#hubspotForm .hs_fingerprint___region {
    margin-bottom: 16px
}

#hubspotForm .legal-consent-container {
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 24px;
    display: flex
}

#hubspotForm .hs_0-2\/website,
#hubspotForm .hs_jobtitle {
    margin-bottom: 16px
}

#hubspotForm .hs-dependent-field label {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    align-items: center;
    margin-bottom: 8px;
    display: flex
}

#hubspotForm .hs-dependent-field span {
    cursor: pointer;
    color: var(--text-white-default);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-semi-bold)
}

#hubspotForm .hs-address,
#hubspotForm .hs-g2_lead,
#hubspotForm .hs-richtext {
    margin-bottom: 16px
}

#hubspotForm .hs-form-required {
    padding-left: 3.5px;
    color: red !important;
    font-weight: 400 !important
}

#hubspotForm .actions input {
    cursor: pointer;
    width: 100%
}

#hubspotForm .actions input:hover {
    background-color: var(--primary-bg-hover);
    border-color: var(--primary-bg-hover)
}

#hubspotForm .actions input:active {
    background-color: var(--primary-bg-active);
    border-color: var(--primary-bg-active)
}

.notification-bar p {
    color: var(--text-white-default)
}

.notification-bar strong {
    font-weight: var(--font-weight-bold)
}

.notification-bar em {
    color: var(--text-color);
    font-style: italic
}

.notification-bar a {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    transition: color .2s, -webkit-text-decoration .2s, text-decoration .2s
}

.platform-navigation {
    background: var(--background-color-dimgrey-7);
    width: 100%
}

.platform-navigation__wrapper {
    justify-content: center;
    width: 100%;
    max-width: 1232px;
    padding: 0 1rem;
    display: flex;
    position: relative;
    overflow: hidden
}

@media (min-width:1024px) {
    .platform-navigation__wrapper {
        padding: 0
    }
}

.platform-navigation__list {
    white-space: nowrap;
    scroll-behavior: smooth;
    width: 100%;
    max-width: 1232px;
    display: flex;
    position: relative;
    overflow-x: auto
}

.platform-navigation__list::-webkit-scrollbar {
    display: none
}

.platform-navigation__indicator {
    border-bottom: 1px dashed var(--primary-color);
    z-index: 5;
    pointer-events: none;
    transition: transform .3s, width .3s;
    position: absolute;
    bottom: 0
}

.platform-navigation__item {
    color: var(--black-color-40);
    cursor: pointer;
    background-color: #0000;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 72px;
    padding: 1.25rem 1.5rem;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    transition: opacity .3s;
    position: relative
}

.platform-navigation__item:not(.platform-navigation__item--active):hover {
    color: var(--text-color)
}

.platform-navigation__item--active {
    color: var(--text-white-default)
}

@media screen and (max-width:1023px) {
    .platform-navigation__item {
        padding: 1.25rem 1rem
    }
}

@media screen and (max-width:767px) {
    .platform-navigation__item {
        height: 56px;
        padding: 1rem;
        font-size: 16px;
        line-height: 24px
    }
}

.platform-navigation__scroll-btn {
    cursor: pointer;
    width: 56px;
    height: 100%;
    color: var(--text-white-default);
    z-index: 10;
    align-items: center;
    transition: opacity .3s;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0
}

.platform-navigation__scroll-btn.scroll-btn--left {
    background: linear-gradient(90deg, #1d1d1d, #1d1d1d00);
    justify-content: start;
    left: 0
}

.platform-navigation__scroll-btn.scroll-btn--right {
    background: linear-gradient(270deg, #1d1d1d, #1d1d1d00);
    justify-content: end;
    right: 0
}

.platform-navigation__scroll-btn:hover {
    opacity: .8
}

.platform-card-highlight {
    max-width: 1232px
}

@media (min-width:1024px) {
    .platform-card-highlight--reverse {
        flex-direction: row-reverse
    }
}

@media (max-width:1023px) {
    .platform-card-highlight {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px
    }

    .platform-card-highlight__image {
        width: 100%;
        height: 466px
    }

    .platform-card-highlight__content {
        gap: 20px;
        width: 100%;
        max-width: 1024px
    }
}

@media (max-width:767px) {
    .platform-card-highlight {
        gap: 12px
    }

    .platform-card-highlight__image {
        aspect-ratio: 2;
        width: 100%;
        height: 100%;
        min-height: 200px;
        max-height: 344px
    }

    .platform-card-highlight__content {
        gap: 20px;
        width: 100%
    }

    .platform-card-highlight__title {
        font-size: 32px;
        font-weight: 800;
        line-height: 40px
    }

    .platform-card-highlight__description {
        font-size: 12px;
        font-weight: 400;
        line-height: 24px
    }

    .platform-card-highlight__button {
        width: 100%
    }
}

.page-paragraph {
    max-width: var(--max-width);
    width: 100%;
    margin: auto
}

@media (max-width:1023px) {
    .page-paragraph {
        padding: 0 1rem
    }
}

.page-paragraph a {
    color: var(--text-kleine-blue)
}

.page-paragraph a:hover {
    text-decoration: underline
}

.page-paragraph h1,
.page-paragraph h2,
.page-paragraph h3,
.page-paragraph h4 {
    color: var(--heading-color);
    font-family: var(--font-family)
}

.page-paragraph h1 {
    margin: 1.5rem 0
}

.page-paragraph h2 {
    margin: 1.125rem 0
}

.page-paragraph h3 {
    margin: 1rem 0
}

.page-paragraph h4 {
    margin: .75rem 0
}

.page-paragraph p {
    margin-top: 1rem
}

.switch {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: all .2s;
    display: inline-block;
    position: relative
}

.switch__track {
    background-color: #333;
    border-radius: 20px;
    width: 100%;
    height: 100%
}

.switch__thumb,
.switch__track {
    transition: all .2s;
    position: absolute
}

.switch__thumb {
    background-color: #fff;
    border-radius: 50%
}

.switch--medium {
    width: 48px;
    height: 28px
}

.switch--medium .switch__thumb {
    width: 20px;
    height: 20px;
    top: 4px;
    left: 4px
}

.switch--small {
    width: 36px;
    height: 22px
}

.switch--small .switch__thumb {
    width: 16px;
    height: 16px;
    top: 3px;
    left: 3px
}

.switch--on .switch__track {
    background-color: #ff0090
}

.switch--on .switch__thumb {
    background-color: #0b0c0b;
    transform: translate(20px)
}

.switch--on.switch--small .switch__thumb {
    transform: translate(14px)
}

.switch--disabled {
    cursor: not-allowed
}

.switch--disabled:not(.switch--on) .switch__track {
    background-color: #333
}

.switch--disabled:not(.switch--on) .switch__thumb {
    background-color: #4c4c4c
}

.switch--disabled.switch--on .switch__track {
    background-color: #d4ff021a
}

.switch--disabled.switch--on .switch__thumb {
    background-color: #0b0c0b
}

.switch--hovered:not(.switch--disabled) .switch__track {
    border: 1px solid #ff0090
}

.switch--hovered:not(.switch--disabled).switch--on .switch__track {
    background-color: #c0e602;
    border: 1px solid #f3f3f3
}

.creative-services__container {
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: 2.5rem;
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
    display: flex
}

@media (max-width:1023px) {
    .creative-services__container {
        flex-direction: column;
        gap: 1rem
    }
}

.creative-services__content {
    align-self: stretch
}

.creative-services__content-header {
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: 2.5rem;
    display: inline-flex
}

.creative-services__content-header-description {
    color: #f3f3f3;
    letter-spacing: 0;
    flex: 1;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    transition: opacity .3s
}

.creative-services__content-body {
    justify-content: space-between;
    align-self: stretch;
    align-items: flex-end;
    transition: opacity .3s;
    display: inline-flex
}

@media (max-width:1023px) {
    .creative-services__content-body {
        flex-direction: column;
        gap: 1.5rem
    }
}

.creative-services__services {
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
    display: flex
}

@media (max-width:1023px) {
    .creative-services__services {
        justify-content: start;
        width: 100%
    }
}

@media (max-width:767px) {
    .creative-services__services {
        flex-direction: column
    }
}

.creative-services__group--ai {
    width: 5rem
}

.creative-services__group--tools {
    width: 164px
}

.creative-services__group--services {
    width: 434px
}

.creative-services__group__item {
    width: 5rem
}

.creative-services__group__item--wrap {
    flex-wrap: wrap
}

.services-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    display: inline-flex
}

.services-group,
.services-group__title {
    justify-content: flex-start;
    align-self: stretch
}

.services-group__title {
    color: #686868;
    letter-spacing: 0;
    height: 18px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.services-group__items {
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: .25rem;
    display: inline-flex
}

.services-group__items--column {
    flex-direction: column
}

@media (max-width:767px) {
    .services-group__items--column {
        flex-flow: wrap
    }
}

.services-group__items--wrap {
    content-visibility: auto;
    flex-wrap: wrap
}

.services-group__info {
    color: var(--text-white-default);
    justify-content: flex-start;
    font-size: .75rem;
    font-weight: 400;
    line-height: 18px
}

.services-group--ai {
    max-width: 100px
}

.services-group--tools {
    max-width: 164px
}

.services-group--services {
    max-width: 434px
}

@media (max-width:767px) {

    .services-group--ai,
    .services-group--services,
    .services-group--tools {
        max-width: 100%
    }

    .services-group--tools {
        width: 100%;
        max-width: 100%
    }
}

.service-item {
    background-color: #f3f3f30d;
    border-radius: .375rem;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    width: 100%;
    max-width: 5rem;
    min-height: 30px;
    padding: .375rem .5rem;
    display: inline-flex
}

.service-item__label {
    color: var(--text-white-default);
    justify-content: center;
    font-size: .75rem;
    font-weight: 400;
    line-height: 18px
}

.service-item--full-width {
    align-self: stretch;
    width: auto;
    max-width: 100%
}

@media (max-width:767px) {
    .service-item {
        padding: .375rem .75rem;
        width: fit-content !important;
        max-width: 100% !important
    }
}

.category-divider {
    align-self: stretch;
    width: 0;
    height: auto;
    margin-top: 2rem;
    position: relative
}

.category-divider:after {
    content: "";
    border-left: 1px dashed #f3f3f333;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

@media (max-width:767px) {
    .category-divider {
        width: 100%;
        height: 0;
        margin: 0
    }

    .category-divider:after {
        border-top: 1px solid #f3f3f333;
        border-left: none;
        width: 100%;
        height: 0;
        top: 0;
        left: 0;
        right: 0
    }
}

.hours-section__container {
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: 2.5rem;
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
    display: inline-flex
}

@media (max-width:1023px) {
    .hours-section__container {
        flex-direction: column;
        gap: 1rem
    }
}

.hours-section__content {
    will-change: height;
    background-color: #f3f3f30d;
    border-radius: .5rem;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    transition: height .5s cubic-bezier(.04, .62, .23, .98);
    display: inline-flex
}

.hours-section__content .tooltip_info a {
    color: #1677ff !important
}

.hours-section__content .ant-tooltip {
    width: min-content !important;
    max-width: fit-content !important
}

.hours-section__content .ant-tooltip a {
    color: #1677ff !important
}

@media (max-width:1023px) {
    .hours-section__content {
        padding: 1rem
    }
}

@media (max-width:767px) {
    .hours-section__content {
        border-radius: 1rem;
        justify-content: space-between;
        width: 100%
    }
}

.hours-section__content .content-transition-container {
    will-change: height;
    transition: height .5s cubic-bezier(.04, .62, .23, .98)
}

.hours-section__content .content-container {
    width: 100%;
    position: relative;
    overflow: hidden
}

.hours-section__content .content-wrapper {
    width: 100%;
    overflow: hidden
}

.hours-section__slider {
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 12px;
    transition: opacity .3s;
    display: flex
}

.hours-section__slider-hours {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    display: inline-flex
}

@media (max-width:767px) {
    .hours-section__slider-hours {
        justify-content: space-between
    }
}

.hours-section__slider-track {
    cursor: pointer;
    background-color: #f3f3f333;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    width: 100%;
    height: .25rem;
    margin: 0;
    display: flex;
    position: relative
}

@media (max-width:767px) {
    .hours-section__slider-track {
        border-radius: 33px;
        width: calc(100% - 30px);
        margin-left: 15px
    }
}

.hours-section__slider-placeholder {
    background-color: var(--primary-color);
    border-radius: 33px 0 0 33px;
    flex-shrink: 0;
    width: 2.5rem;
    height: .25rem
}

.hours-section__slider-placeholder:last-child {
    background-color: #f3f3f333;
    border-radius: 0 33px 33px 0
}

@media (max-width:1023px) {
    .hours-section__slider-placeholder {
        width: 1.5rem
    }
}

@media (max-width:767px) {
    .hours-section__slider-placeholder {
        display: none !important
    }
}

.hours-section__slider-track-inner {
    background-color: #f3f3f333;
    flex: 1;
    height: .25rem;
    position: relative
}

.hours-section__slider-track-clickable-area {
    cursor: pointer;
    z-index: 1;
    width: 100%;
    height: 3rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width:767px) {
    .hours-section__slider-track-clickable-area {
        height: 6.5rem
    }
}

.hours-section__slider-progress {
    background-color: var(--primary-color);
    height: .25rem;
    transition: width .3s cubic-bezier(.25, .46, .45, .94);
    position: absolute;
    top: 0;
    left: 0
}

@media (max-width:767px) {
    .hours-section__slider-progress {
        border-radius: 13px
    }
}

.hours-section__slider-handle {
    background-color: var(--background-color);
    outline: 4px solid var(--primary-color);
    cursor: grab;
    z-index: 3;
    border-radius: 50%;
    width: .75rem;
    height: .75rem;
    transition: transform .15s;
    position: absolute;
    top: -4px;
    right: 0;
    transform: translate(50%)
}

.hours-section__slider-handle:before {
    content: "";
    z-index: 2;
    cursor: grab;
    width: 1.75rem;
    height: 1.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.hours-section__slider-handle:active {
    cursor: grabbing;
    transform: translate(50%)scale(1.1)
}

.hours-section__slider-handle:active:before {
    cursor: grabbing
}

@media (max-width:767px) {
    .hours-section__slider {
        gap: .75rem
    }
}

.hours-section__options {
    justify-content: flex-start;
    align-self: stretch;
    align-items: stretch;
    gap: 2.5rem;
    display: inline-flex
}

@media (max-width:767px) {
    .hours-section__options {
        flex-direction: column;
        gap: 1rem;
        width: 100%
    }
}

.hours-section__option {
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    display: inline-flex
}

.hours-section__option-description {
    color: var(--text-color);
    letter-spacing: 0;
    align-self: stretch;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.hours-section__divider {
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    width: 12px;
    display: flex;
    position: relative
}

.hours-section__divider-line {
    border-left: 1px dashed #f3f3f333;
    width: 0;
    height: calc(50% - 12px)
}

.hours-section__divider-text {
    text-align: center;
    color: #fff;
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 400;
    line-height: 18px
}

@media (max-width:767px) {
    .hours-section__divider {
        flex-direction: row;
        width: 100%
    }

    .hours-section__divider-line {
        border-top: 1px dashed #f3f3f333;
        width: calc(50% - 12px);
        height: 0
    }
}

.hour-item {
    cursor: pointer;
    flex: 1;
    justify-content: center;
    align-items: flex-end;
    gap: .625rem;
    width: 100%;
    max-width: 5rem;
    height: 3.5rem;
    display: flex;
    position: relative
}

.hour-item div>div>div {
    max-width: 1000px !important
}

.hour-item div>div>div a {
    color: #1677ff !important
}

.hour-item__label {
    color: var(--text-white-default);
    text-align: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.75rem;
    transition: font-size .3s cubic-bezier(.25, .46, .45, .94), color .3s cubic-bezier(.25, .46, .45, .94), line-height .3s cubic-bezier(.25, .46, .45, .94)
}

.hour-item--selected .hour-item__label {
    color: var(--primary-color);
    font-size: 3rem;
    line-height: 3.5rem
}

@media (max-width:767px) {
    .hour-item {
        max-width: fit-content;
        padding: 0;
        display: none
    }

    .hour-item--selected .hour-item__label {
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 32px;
        font-weight: 800;
        line-height: 40px
    }

    .hour-item:first-child,
    .hour-item:last-child {
        display: flex
    }
}

.service-badge {
    background-color: #f3f3f31a;
    border-radius: .375rem;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    height: 28px;
    padding: .375rem .75rem;
    display: inline-flex
}

.service-badge__label {
    color: var(--text-white-default);
    justify-content: center;
    font-size: 10px;
    font-weight: 400;
    line-height: 1rem
}

.professional-services__container {
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: 2.5rem;
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
    display: inline-flex
}

@media (max-width:1023px) {
    .professional-services__container {
        flex-direction: column;
        gap: 1rem
    }
}

.professional-services__content {
    background-color: #f3f3f30d;
    border-radius: .5rem;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem
}

.professional-services__content,
.professional-services__content-header {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2.5rem;
    display: inline-flex
}

.professional-services__content-header {
    align-self: stretch
}

.professional-services__content-header-description {
    color: #f3f3f3;
    letter-spacing: 0;
    flex: 1;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.professional-services__content-body {
    justify-content: center;
    align-self: stretch;
    align-items: flex-end;
    gap: 2.5rem;
    display: inline-flex
}

@media (max-width:1023px) {
    .professional-services__content {
        border-radius: 1rem;
        gap: 1.5rem;
        width: 100%;
        padding: 1rem
    }

    .professional-services__content-header {
        gap: 1rem
    }

    .professional-services__content-body {
        gap: 1.5rem
    }
}

@media (max-width:767px) {
    .professional-services__content-body {
        flex-direction: column;
        gap: 1.5rem
    }
}

.professional-services__role {
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    max-width: 350px;
    display: inline-flex
}

.professional-services__role--inactive {
    opacity: .3;
    transition: opacity .3s
}

.professional-services__role-title {
    justify-content: flex-start;
    align-self: stretch
}

.professional-services__role-title-text {
    color: var(--text-white-default)
}

.professional-services__role-title-included {
    color: var(--text-color-default);
    background-color: var(--primary-bg);
    border-radius: 40px;
    padding: 2px 12px;
    font-size: 10px;
    font-weight: 900;
    line-height: 16px
}

.professional-services__role-description {
    color: var(--text-color);
    justify-content: flex-start;
    align-self: stretch;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.professional-services__role-description ul {
    padding-left: 1.25rem;
    list-style-type: disc
}

@media (max-width:767px) {
    .professional-services__role {
        max-width: 100%
    }
}

.professional-services__price {
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    display: inline-flex
}

.professional-services__price-amount {
    color: var(--text-white-default);
    justify-content: flex-start;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem
}

@media (max-width:1023px) {
    .professional-services__price-amount {
        justify-content: end;
        width: 100px;
        display: flex
    }
}

.professional-services__price-period {
    color: var(--black-color-40);
    justify-content: flex-start;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.125rem
}

.professional-services__notification {
    will-change: height, opacity, margin-bottom, transform;
    transform-origin: top;
    background-color: #161d80;
    border-radius: .5rem;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    gap: .625rem;
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
    padding: .5rem 1rem;
    transition: all .4s cubic-bezier(.04, .62, .23, .98);
    display: inline-flex;
    overflow: hidden
}

@media (min-width:1024px) {
    .professional-services__notification {
        margin-bottom: 2rem
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .professional-services__notification {
        margin-bottom: 1.5rem
    }
}

@media (max-width:767px) {
    .professional-services__notification {
        margin-bottom: 1rem
    }
}

.professional-services__notification-text {
    text-align: center;
    color: var(--text-white-default);
    will-change: opacity;
    justify-content: flex-start;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.professional-services__notification-text-link {
    cursor: pointer;
    text-decoration: underline;
    transition: color .2s
}

.professional-services__notification-text-link:hover {
    opacity: .8
}

@media screen and (max-width:1023px) {
    .platform-pricing {
        flex-direction: column;
        gap: 16px
    }

    .platform-pricing__plan-comparison {
        padding: 16px
    }
}

@media screen and (max-width:767px) {
    .platform-pricing__plans {
        width: 100%;
        display: block
    }

    .platform-pricing__plan-list {
        flex-direction: column
    }

    .platform-pricing__plan-comparison {
        margin-top: 16px
    }
}

@media screen and (min-width:1024px) {
    .plan-selection__price {
        display: none
    }
}

@media screen and (max-width:767px) {
    .plan-selection {
        width: 100%;
        padding: 16px
    }
}

.summary-section__divider,
.summary-section__item-label-plan {
    display: none
}

@media screen and (max-width:1023px) {

    .summary-section__divider,
    .summary-section__item-label-plan {
        display: flex
    }

    .summary-section__content {
        flex-direction: column;
        align-items: start;
        gap: 16px;
        max-width: 528px
    }

    .summary-section__items {
        flex-direction: column;
        gap: 16px;
        width: 100%
    }

    .summary-section__item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%
    }

    .summary-section__total {
        width: 100%
    }

    .summary-section__cta-content {
        max-width: 528px
    }
}

@media screen and (max-width:767px) {
    .summary-section {
        padding: 0 16px
    }

    .summary-section__total-price {
        font-size: var(--font-size-huge);
        line-height: var(--line-height-huge)
    }

    .summary-section__content {
        max-width: 100%
    }

    .summary-section__cta-content {
        flex-direction: column;
        gap: 16px;
        max-width: 100%
    }

    .summary-section__cta-text {
        text-align: left
    }
}

.mobile-drawer {
    z-index: 1000;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 120vh;
    padding-bottom: 20vh;
    position: fixed;
    bottom: 0;
    right: 0;
    overflow-y: auto
}

.mobile-drawer,
.mobile-drawer__header {
    background-color: var(--background-color);
    display: flex;
    top: 0
}

.mobile-drawer__header {
    z-index: 1;
    border-bottom: 1px solid #f3f3f31a;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    position: sticky
}

.mobile-drawer__title {
    color: var(--text-white-default);
    font-size: 1.125rem;
    font-weight: 600
}

.mobile-drawer__close {
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin: -.5rem;
    padding: .5rem;
    display: flex
}

.mobile-drawer__close:hover {
    background-color: #f3f3f30d
}

.mobile-drawer__content {
    flex: 1;
    padding: 1rem 1rem 0;
    overflow-y: auto
}

.mobile-drawer__overlay {
    z-index: 999;
    background-color: #00000080;
    position: fixed;
    inset: 0
}

.hust-post-form__title {
    color: var(--text-white-default)
}

@media (max-width:1023px) {
    .hust-post-form {
        flex-direction: column
    }

    .hust-post-form__right-container {
        width: 100%
    }
}

@media (max-width:767px) {
    .hust-post-form {
        flex-direction: column
    }

    .hust-post-form__title {
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3)
    }

    .hust-post-form__right-container {
        width: 100%;
        padding: 24px 16px
    }

    .hust-post-form__right-title {
        font-size: var(--font-size-very-large);
        line-height: var(--line-height-large);
        font-weight: var(--font-weight-bold)
    }
}

#hubspotFormContainer label {
    color: var(--text-white-default);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-semi-bold);
    margin-bottom: 8px;
    display: block
}

#hubspotFormContainer fieldset {
    max-width: 100% !important
}

#hubspotFormContainer fieldset .input {
    margin-right: 0
}

#hubspotFormContainer input {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    width: 100%;
    height: 48px;
    margin-right: 0;
    padding: 12px 16px;
    max-width: 100% !important
}

#hubspotFormContainer input::placeholder {
    color: var(--black-color-40)
}

#hubspotFormContainer input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-bg);
    border: 1px solid var(--text-white-default);
    color: var(--black-color);
    cursor: pointer
}

#hubspotFormContainer input[type=submit] {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--text-color-default);
    font-size: var(--font-size-text-button);
    line-height: var(--line-height-text-button);
    font-weight: var(--font-weight-bold);
    border-radius: 64px;
    padding: 0 20px
}

#hubspotFormContainer p {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular)
}

#hubspotFormContainer a {
    color: var(--text-kleine-blue);
    text-decoration: underline
}

#hubspotFormContainer .hs-error-msg.hs-main-font-element,
#hubspotFormContainer li>label {
    line-height: var(--line-height-small);
    font-size: var(--text-sm);
    color: oklch(.637 .237 25.331);
    font-weight: var(--font-weight-regular);
    margin-top: 8px;
    margin-bottom: 0
}

#hubspotFormContainer li>label>span {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular);
    color: var(--text-white-default);
    margin-left: 8px
}

#hubspotFormContainer .hs_email,
#hubspotFormContainer .hs_phone,
#hubspotFormContainer .hs_rlogic {
    margin-bottom: 16px
}

#hubspotFormContainer .hs_firstname .input {
    margin-right: 10px
}

#hubspotFormContainer .hs_phone select {
    margin-right: 10px;
    max-width: 180px !important
}

#hubspotFormContainer .hs_phone input {
    width: 100% !important
}

#hubspotFormContainer .hs_phone .input {
    margin: 0
}

#hubspotFormContainer .hs_phone .input select {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    height: 48px;
    padding: 12px 16px;
    width: 100% !important
}

#hubspotFormContainer .hs_phone .input select::placeholder {
    color: var(--black-color-40)
}

#hubspotFormContainer .hs_phone .input option {
    color: var(--text-color-default)
}

#hubspotFormContainer .hs-input.hs-fieldtype-intl-phone {
    width: 100%;
    display: flex
}

#hubspotFormContainer .smart-field,
#hubspotFormContainer fieldset:has(.hs_firstname) {
    margin-bottom: 16px
}

#hubspotFormContainer .smart-field label {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    align-items: center;
    display: flex
}

#hubspotFormContainer .smart-field span {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    font-weight: var(--font-weight-regular)
}

#hubspotFormContainer .hs_how_do_you_get_creative_delivered_today_ ul {
    flex-direction: column;
    gap: 10px;
    width: max-content;
    display: flex
}

#hubspotFormContainer .hs_how_do_you_get_creative_delivered_today_ ul span {
    cursor: pointer
}

#hubspotFormContainer #what_industry_are_you_in_-4e09a40a-8070-462c-9bed-189282f48fa4 {
    border: 1px solid var(--text-white-default);
    border-radius: 12px;
    outline: none;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 12px 16px
}

#hubspotFormContainer #what_industry_are_you_in_-4e09a40a-8070-462c-9bed-189282f48fa4::placeholder {
    color: var(--black-color-40)
}

#hubspotFormContainer #what_industry_are_you_in_-4e09a40a-8070-462c-9bed-189282f48fa4 option {
    color: var(--text-color-default)
}

#hubspotFormContainer .hs-form-checkbox label {
    margin: 0
}

#hubspotFormContainer .hs-company,
#hubspotFormContainer .hs_fingerprint___country,
#hubspotFormContainer .hs_fingerprint___region {
    margin-bottom: 16px
}

#hubspotFormContainer .legal-consent-container {
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 24px;
    display: flex
}

#hubspotFormContainer .hs_0-2\/website,
#hubspotFormContainer .hs_jobtitle {
    margin-bottom: 16px
}

#hubspotFormContainer .hs-dependent-field label {
    font-size: var(--font-size-medium-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-regular);
    align-items: center;
    margin-bottom: 8px;
    display: flex
}

#hubspotFormContainer .hs-dependent-field span {
    cursor: pointer;
    color: var(--text-white-default);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-semi-bold)
}

#hubspotFormContainer .hs-richtext {
    text-align: center;
    margin-bottom: 16px
}

#hubspotFormContainer .hs-form-required {
    padding-left: 3.5px;
    color: red !important;
    font-weight: 400 !important
}

#hubspotFormContainer .actions input {
    cursor: pointer;
    width: 100%
}

#hubspotFormContainer .actions input:hover {
    background-color: var(--primary-bg-hover);
    border-color: var(--primary-bg-hover)
}

#hubspotFormContainer .actions input:active {
    background-color: var(--primary-bg-active);
    border-color: var(--primary-bg-active)
}

#grnhse_iframe {
    min-height: 600px
}

.masonry-grid,
.masonry-grid div {
    gap: 24px !important
}

.portfolio-navigation {
    background: var(--background-color-dimgrey-7);
    width: 100%
}

.portfolio-navigation__wrapper {
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    position: relative;
    overflow: hidden
}

@media (min-width:1024px) {
    .portfolio-navigation__wrapper {
        padding: 0
    }
}

.portfolio-navigation__list {
    white-space: nowrap;
    scroll-behavior: smooth;
    justify-content: space-between;
    width: 100%;
    max-width: 100vw;
    display: flex;
    position: relative;
    overflow-x: auto
}

@media (min-width:1024px) {
    .portfolio-navigation__list {
        max-width: calc(100vw - 120px)
    }
}

.portfolio-navigation__list::-webkit-scrollbar {
    display: none
}

.portfolio-navigation__indicator {
    border-bottom: 1px dashed var(--primary-color);
    z-index: 5;
    pointer-events: none;
    transition: transform .3s, width .3s;
    position: absolute;
    bottom: 0
}

.portfolio-navigation__item {
    color: var(--black-color-40);
    cursor: pointer;
    background-color: #0000;
    border: none;
    border-radius: 0;
    width: fit-content;
    height: 72px;
    padding: 1.25rem 1.5rem;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    transition: opacity .3s;
    position: relative
}

.portfolio-navigation__item:not(.portfolio-navigation__item--active):hover {
    color: var(--text-color)
}

.portfolio-navigation__item--active {
    color: var(--text-white-default)
}

@media screen and (max-width:1023px) {
    .portfolio-navigation__item {
        padding: 1.25rem 1rem
    }
}

@media screen and (max-width:767px) {
    .portfolio-navigation__item {
        height: 56px;
        padding: 1rem;
        font-size: 16px;
        line-height: 24px
    }
}

.portfolio-navigation__scroll-btn {
    cursor: pointer;
    width: 56px;
    height: 100%;
    color: var(--text-white-default);
    z-index: 10;
    align-items: center;
    transition: opacity .3s;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0
}

.portfolio-navigation__scroll-btn.scroll-btn--left {
    background: linear-gradient(90deg, #1d1d1d, #1d1d1d00);
    justify-content: start;
    left: 0
}

.portfolio-navigation__scroll-btn.scroll-btn--right {
    background: linear-gradient(270deg, #1d1d1d, #1d1d1d00);
    justify-content: end;
    right: 0
}

.portfolio-navigation__scroll-btn:hover {
    opacity: .8
}

.tab-bar-navigation {
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    max-width: 1232px;
    display: flex
}

@media (min-width:1024px) {
    .tab-bar-navigation {
        max-width: calc(100vw - 88px)
    }
}

.tab-bar-navigation__item {
    background-color: var(--black-color-10);
    color: var(--text-color);
    letter-spacing: 0;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 4rem;
    align-items: center;
    gap: 8px;
    padding: .75rem 1.25rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    transition: all .3s;
    display: flex
}

.tab-bar-navigation__item--active,
.tab-bar-navigation__item:hover {
    background-color: var(--black-color-25)
}

.tab-bar-navigation__item--active {
    color: var(--primary-color)
}

.tab-bar-navigation__item--underline {
    letter-spacing: 0;
    color: var(--black-color-40);
    background-color: #0000;
    border-radius: 0;
    height: 72px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    position: relative
}

@media screen and (max-width:1023px) and (min-width:768px) {
    .tab-bar-navigation__item--underline {
        height: 64px;
        font-size: 14px;
        line-height: 20px
    }
}

@media screen and (max-width:767px) {
    .tab-bar-navigation__item--underline {
        height: 56px;
        padding: .375rem .75rem;
        font-size: 14px;
        line-height: 20px
    }
}

.tab-bar-navigation__item--underline:hover {
    opacity: .75;
    background-color: #0000
}

.tab-bar-navigation__item--underline-active {
    color: var(--text-white-default)
}

.tab-bar-navigation__item--underline-active:after {
    content: "";
    border-bottom: 2px dashed var(--primary-color);
    position: absolute;
    bottom: 0;
    left: .5rem;
    right: .5rem
}

.tab-bar-navigation--underline {
    background: #1d1d1d
}

@media screen and (max-width:767px) {
    .tab-bar-navigation--underline {
        justify-content: flex-start;
        gap: 0;
        padding-bottom: 4px;
        overflow-x: auto
    }

    .tab-bar-navigation--underline::-webkit-scrollbar {
        display: none
    }
}

@media screen and (max-width:1023px) and (min-width:768px) {
    .tab-bar-navigation {
        gap: 6px
    }

    .tab-bar-navigation__item {
        padding: .625rem 1rem;
        font-size: 14px;
        line-height: 24px
    }
}

@media screen and (max-width:767px) {
    .tab-bar-navigation {
        justify-content: center;
        gap: 4px
    }

    .tab-bar-navigation__item {
        padding: .5rem .875rem;
        font-size: 12px;
        line-height: 22px
    }
}

.comparison-navigation {
    background: var(--background-color-dimgrey-7);
    width: 100%
}

.comparison-navigation__wrapper {
    justify-content: center;
    padding: 0 1rem;
    display: flex;
    position: relative;
    overflow: hidden
}

@media (min-width:1024px) {
    .comparison-navigation__wrapper {
        padding: 0
    }
}

.comparison-navigation__list {
    white-space: nowrap;
    scroll-behavior: smooth;
    justify-content: space-between;
    width: 100%;
    max-width: 1232px;
    display: flex;
    position: relative;
    overflow-x: auto
}

.comparison-navigation__list::-webkit-scrollbar {
    display: none
}

.comparison-navigation__indicator {
    border-bottom: 1px dashed var(--primary-color);
    z-index: 5;
    pointer-events: none;
    transition: transform .3s, width .3s;
    position: absolute;
    bottom: 0
}

.comparison-navigation__item {
    color: var(--black-color-40);
    cursor: pointer;
    background-color: #0000;
    border: none;
    border-radius: 0;
    width: fit-content;
    height: 72px;
    padding: 1.25rem 1.5rem;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    transition: opacity .3s;
    position: relative
}

.comparison-navigation__item:not(.comparison-navigation__item--active):hover {
    color: var(--text-color)
}

.comparison-navigation__item--active {
    color: var(--text-white-default)
}

@media screen and (max-width:1023px) {
    .comparison-navigation__item {
        padding: 1.25rem 1rem
    }
}

@media screen and (max-width:767px) {
    .comparison-navigation__item {
        height: 56px;
        padding: 1rem;
        font-size: 16px;
        line-height: 24px
    }
}

.comparison-navigation__scroll-btn {
    cursor: pointer;
    width: 56px;
    height: 100%;
    color: var(--text-white-default);
    z-index: 10;
    align-items: center;
    transition: opacity .3s;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0
}

.comparison-navigation__scroll-btn.scroll-btn--left {
    background: linear-gradient(90deg, #1d1d1d, #1d1d1d00);
    justify-content: start;
    left: 0
}

.comparison-navigation__scroll-btn.scroll-btn--right {
    background: linear-gradient(270deg, #1d1d1d, #1d1d1d00);
    justify-content: end;
    right: 0
}

.comparison-navigation__scroll-btn:hover {
    opacity: .8
}

.comparison-table__container {
    border-radius: 8px;
    position: relative;
    overflow: hidden
}

.comparison-table__scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #e5e5e5 #0000;
    width: 100%;
    padding-bottom: 8px;
    overflow: auto hidden
}

.comparison-table__scroll-container::-webkit-scrollbar {
    height: 8px
}

.comparison-table__scroll-container::-webkit-scrollbar-track {
    background: var(--black-color-25)
}

.comparison-table__scroll-container::-webkit-scrollbar-thumb {
    background: var(--black-color-40);
    border-radius: 4px
}

.comparison-table__scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-color)
}

.comparison-table__header {
    height: 112px;
    color: var(--text-white-default);
    background: var(--background-color);
    border-radius: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 1.5rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    display: flex
}

.comparison-table__column:first-child .comparison-table__header {
    border-radius: 8px 0 0 8px
}

.comparison-table__column:last-child .comparison-table__header {
    border-radius: 0 8px 8px 0
}

.comparison-table__row {
    background: var(--bg-white-default);
    border-bottom: 1px solid #e5e5e5;
    align-items: center;
    height: 120px;
    display: flex
}

.comparison-table__row:first-of-type {
    border-top: 1px solid #e5e5e5
}

.comparison-table__row:last-child {
    border-bottom: none
}

@media screen and (max-width:1024px) {
    .comparison-table__row {
        min-height: 150px
    }
}

@media screen and (max-width:768px) {
    .comparison-table__row {
        min-height: 120px
    }
}

.comparison-table__cell {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    display: flex
}

.comparison-table__column--sticky .comparison-table__cell {
    padding: 0 24px
}

.comparison-table__column:not(.comparison-table__column--sticky) .comparison-table__cell {
    padding: 0 32px !important
}

.comparison-table__cell-title {
    color: var(--text-color-default);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px
}

@media screen and (max-width:767px) {
    .comparison-table__cell-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px
    }
}

.comparison-table__cell-description {
    color: var(--text-color-default);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.comparison-table__cell-logo {
    object-fit: contain;
    object-position: left;
    width: 100%;
    height: auto;
    max-height: 40px
}

@media screen and (max-width:767px) {
    .comparison-table__cell {
        gap: 2px
    }

    .comparison-table__column--sticky .comparison-table__cell {
        padding: 0 16px
    }

    .comparison-table__column:not(.comparison-table__column--sticky) .comparison-table__cell {
        padding: 0 20px
    }

    .comparison-table__cell-description,
    .comparison-table__cell-title {
        font-size: 14px;
        line-height: 20px
    }

    .comparison-table__cell-logo {
        max-height: 32px
    }
}

.comparison-table__column {
    flex-shrink: 0;
    width: 355px
}

.comparison-table__column--sticky {
    z-index: 2;
    width: 500px;
    position: sticky;
    left: 0
}

.comparison-table__column--border-left .comparison-table__row {
    border-left: 1px solid #e5e5e5
}

@media screen and (max-width:1024px) {
    .comparison-table__column--sticky {
        width: 420px
    }
}

@media screen and (max-width:768px) {
    .comparison-table__column--sticky {
        width: 200px
    }
}

.comparison-table__shadow {
    pointer-events: none;
    z-index: 3;
    width: 24px;
    height: calc(100% - 132px);
    position: absolute;
    top: 112px
}

.comparison-table__shadow--right {
    background: linear-gradient(270deg, #f3f3f3, #0000);
    right: 0
}

@media screen and (max-width:767px) {
    .comparison-table__shadow {
        width: 16px;
        height: calc(100% - 120px)
    }
}

.comparison-table__scroll-container:not([data-scroll="0"]) .comparison-table__column--sticky:after {
    opacity: 1
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
    initial-value: rotateX(0)
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
    initial-value: rotateY(0)
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
    initial-value: rotateZ(0)
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false;
    initial-value: skewX(0)
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false;
    initial-value: skewY(0)
}

@property --tw-pan-x {
    syntax: "*";
    inherits: false
}

@property --tw-pan-y {
    syntax: "*";
    inherits: false
}

@property --tw-pinch-zoom {
    syntax: "*";
    inherits: false
}

@property --tw-scroll-snap-strictness {
    syntax: "*";
    inherits: false;
    initial-value: proximity
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

/*# sourceMappingURL=6ecfa688ce464cd4.css.map*/