/*!
Theme Name: PrimsiteWP
Author: Florin Nita
Author URI: https://primsite.net/
Description: Fast website theme.
Version: 1.0.0
======================================
*/
@layer reset,base,framework,styles,darkmode,utilities;@layer reset {
    *:where(:not(html,iframe,canvas,img,svg,video,audio): not(svg *,symbol *)) {
        all:unset;
        display: revert
    }

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

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none
    }

    a,button {
        cursor: revert
    }

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

    ol {
        counter-reset: revert
    }

    img {
        max-inline-size: 100%;
        max-block-size: 100%
    }

    table {
        border-collapse: collapse
    }

    input,textarea {
        -webkit-user-select: auto
    }

    textarea {
        white-space: revert
    }

    meter {
        -webkit-appearance: revert;
        appearance: revert
    }

    :where(pre) {
        all: revert;
        box-sizing: border-box
    }

    ::placeholder {
        color: unset
    }

    :where([hidden]) {
        display: none
    }

    :where([contenteditable]: not([contenteditable="false"])) {
        -moz-user-modify:read-write;
        -webkit-user-modify: read-write;
        overflow-wrap: break-word;
        -webkit-line-break: after-white-space;
        -webkit-user-select: auto
    }

    :where([draggable="true"]) {
        -webkit-user-drag: element
    }

    :where(dialog: modal) {
        all:revert;
        box-sizing: border-box
    }

    ::-webkit-details-marker {
        display: none
    }

    :focus-visible {
        outline: 2px solid var(--color-secondary-medium);
        outline-offset: 5px
    }
}

@layer base {
    @font-face {
        font-display: swap;
        font-family: 'Domine';
        font-style: normal;
        font-weight: 400;
        src: url(/fonts/domine-v23-latin-regular.woff2) format('woff2')
    }

    @font-face {
        font-display: swap;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: url(/fonts/open-sans-v40-latin-regular.woff2) format('woff2')
    }

    @font-face {
        font-display: swap;
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 400;
        src: url(/fonts/open-sans-v40-latin-italic.woff2) format('woff2')
    }

    @font-face {
        font-display: swap;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 500;
        src: url(/fonts/open-sans-v40-latin-500.woff2) format('woff2')
    }

    @font-face {
        font-display: swap;
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 500;
        src: url(/fonts/open-sans-v40-latin-500italic.woff2) format('woff2')
    }

    @font-face {
        font-display: swap;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        src: url(/fonts/open-sans-v40-latin-600.woff2) format('woff2')
    }

    @font-face {
        font-display: swap;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 800;
        src: url(/fonts/open-sans-v40-latin-800.woff2) format('woff2')
    }

    @font-face {
        font-family: "Domine-fallback";
        size-adjust:119.83999999999992%;ascent-override:70%;src: local("Times New Roman")
    }

    @font-face {
        font-family: "Open-Sans-fallback";
        size-adjust:105.41000000000004%;ascent-override:105%;src: local("Arial")
    }

    :root {
        --fs-1: clamp(0.7901rem, 0.7679rem + 0.1113vw, 0.8681rem);
        --fs-2: clamp(0.8889rem, 0.8452rem + 0.2183vw, 1.0417rem);
        --fs-3: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
        --fs-4: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
        --fs-5: clamp(1.2656rem, 1.1129rem + 0.7634vw, 1.8rem);
        --fs-6: clamp(1.4238rem, 1.2135rem + 1.0517vw, 2.16rem);
        --fs-7: clamp(1.6018rem, 1.3189rem + 1.4146vw, 2.592rem);
        --fs-8: clamp(1.802rem, 1.4282rem + 1.8691vw, 3.1104rem);
        --space-1: 0.25rem;
        --space-2: clamp(0.41rem, calc(0.04vw + 0.4rem), 0.44rem);
        --space-3: clamp(0.51rem, calc(0.16vw + 0.48rem), 0.62rem);
        --space-4: clamp(0.64rem, calc(0.35vw + 0.57rem), 0.88rem);
        --space-5: clamp(0.8rem, calc(0.65vw + 0.67rem), 1.24rem);
        --space-6: clamp(1rem, calc(1.11vw + 0.78rem), 1.75rem);
        --space-7: clamp(1.25rem, calc(1.81vw + 0.89rem), 2.47rem);
        --space-8: clamp(1.56rem, calc(2.87vw + 0.99rem), 3.5rem);
        --space-9: clamp(1.95rem, calc(4.44vw + 1.07rem), 4.95rem);
        --space-10: clamp(2.44rem, calc(6.75vw + 1.09rem), 7rem);
        --color-primary: #0068A7;
        --color-primary-medium: #8EC0DB;
        --color-primary-light: #E2EEF5;
        --color-secondary: #C8602F;
        --color-secondary-medium: #F0BEA7;
        --color-secondary-light: #FBEEE7;
        --color-tertiary: #3C3C3C;
        --color-tertiary-medium: #B1B1B1;
        --color-tertiary-light: #F7F7F7;
        --color-white: hsl(0, 0%, 100%);
        --color-black: hsl(0, 0%, 5%);
        --color-ghost: hsla(0, 0%, 100%, 0.5);
        --color-layer-1: var(--color-white);
        --color-layer-2: var(--color-tertiary-light);
        --color-layer-3: hsl(0, 0%, 90%);
        --color-title: var(--color-primary);
        --color-text: var(--color-tertiary);
        --color-text-inverse: hsl(0, 0%, 100%);
        --font-family-title: 'Domine', 'Domine-fallback', serif;
        --font-family-text: 'Open Sans', 'Open-Sans-fallback', sans-serif;
        interpolate-size: allow-keywords
    }

    body {
        font-family: var(--font-family-text);
        font-size: var(--fs-3);
        color: var(--color-text);
        background-color: var(--color-layer-1);
        line-height: 1.5;
        margin: 0;
        transition: color .2s ease,background-color .2s ease
    }

    section {
        padding: var(--space-10) var(--space-7)
    }

    .tagline {
        display: block;
        font-size: var(--fs-3);
        line-height: 1rem;
        margin-bottom: var(--space-4);
        text-transform: uppercase;
        font-weight: 600;
        color: var(--color-secondary);
        letter-spacing: .5px
    }

    hr {
        margin-top: var(--space-6);
        margin-bottom: var(--space-6);
        border-bottom: 1px solid var(--color-text);
        opacity: .25
    }
}

@layer framework {
    @layer texts {
        p {
            font-size: var(--fs-3);
            margin-top: 0;
            margin-bottom: 1rem;
            text-wrap: pretty;
            letter-spacing: .75px
        }

        a {
            color: var(--color-primary);
            cursor: pointer;
            text-decoration: none
        }

        h1,h2,h3,h4,h5,h6 {
            font-family: var(--font-family-title);
            font-weight: 400;
            color: var(--color-title);
            margin-top: 0;
            margin-bottom: .5rem;
            text-wrap: balance;
            -ms-word-wrap: break-word;
            word-wrap: break-word;
            letter-spacing: .5px;
            transition: color .2s ease
        }

        h1 {
            font-size: var(--fs-8);
            line-height: 1.3
        }

        h2 {
            font-size: var(--fs-7);
            line-height: 1.3
        }

        h3 {
            font-size: var(--fs-6);
            line-height: 1.2
        }

        h4 {
            font-size: var(--fs-5);
            line-height: 1.3
        }

        h5 {
            font-size: var(--fs-4);
            line-height: 1.4
        }

        h6 {
            font-size: var(--fs-3);
            line-height: 1.5
        }

        .fs-1 {
            font-size: var(--fs-8)
        }

        .fs-2 {
            font-size: var(--fs-7)
        }

        .fs-3 {
            font-size: var(--fs-6)
        }

        .fs-4 {
            font-size: var(--fs-5)
        }

        .fs-5 {
            font-size: var(--fs-4)
        }

        .fs-6 {
            font-size: var(--fs-3)
        }

        .fs-7 {
            font-size: var(--fs-2)
        }

        .fs-8 {
            font-size: var(--fs-1)
        }

        small {
            font-size: var(--fs-1)
        }

        .text-regular {
            font-weight: 400
        }

        .text-semibold {
            font-weight: 500
        }

        b,strong,.text-bold {
            font-weight: 600
        }

        .text-title {
            font-family: var(--font-family-title)
        }

        .text-body {
            font-family: var(--font-family-text)
        }

        .text-italic {
            font-style: italic
        }

        .text-normal {
            font-style: normal
        }

        .text-uppercase {
            text-transform: uppercase
        }

        .text-lowercase {
            text-transform: lowercase
        }

        .text-capitalize {
            text-transform: capitalize
        }

        .text-underline {
            text-decoration: underline
        }

        .text-line-through {
            text-decoration: line-through
        }

        .lh-1 {
            line-height: 1
        }

        .lh-2 {
            line-height: 2
        }
    }

    @layer colors {
        .text-color {
            color: var(--color-text);
            transition: color .2s ease
        }

        .text-primary {
            color: var(--color-primary);
            transition: color .2s ease
        }

        .text-primary-medium {
            color: var(--color-primary-medium);
            transition: color .2s ease
        }

        .text-secondary {
            color: var(--color-secondary);
            transition: color .2s ease
        }

        .text-secondary-medium {
            color: var(--color-secondary-medium);
            transition: color .2s ease
        }

        .text-white {
            color: var(--color-white);
            transition: color .2s ease
        }

        .text-inverse {
            color: var(--color-text-inverse);
            transition: color .2s ease
        }

        .bg-white {
            background-color: var(--color-white);
            transition: background-color .2s ease
        }

        .bg-layer-1 {
            background-color: var(--color-layer-1);
            transition: background-color .2s ease
        }

        .bg-layer-2 {
            background-color: var(--color-layer-2);
            transition: background-color .2s ease
        }

        .bg-primary {
            background-color: var(--color-primary);
            transition: background-color .2s ease
        }

        .bg-primary-medium {
            background-color: var(--color-primary-medium);
            transition: background-color .2s ease
        }

        .bg-primary-light {
            background-color: var(--color-primary-light);
            transition: background-color .2s ease
        }

        .bg-secondary {
            background-color: var(--color-secondary);
            transition: background-color .2s ease
        }

        .bg-secondary-medium {
            background-color: var(--color-secondary-medium);
            transition: background-color .2s ease
        }

        .bg-secondary-light {
            background-color: var(--color-secondary-light);
            transition: background-color .2s ease
        }

        .bg-tertiary {
            background-color: var(--color-tertiary);
            transition: background-color .2s ease
        }

        .bg-tertiary-medium {
            background-color: var(--color-tertiary-medium);
            transition: background-color .2s ease
        }

        .bg-tertiary-light {
            background-color: var(--color-tertiary-light);
            transition: background-color .2s ease
        }

        .bg-quaternary {
            background-color: var(--color-quaternary);
            transition: background-color .2s ease
        }

        .bg-quaternary-medium {
            background-color: var(--color-quaternary-medium);
            transition: background-color .2s ease
        }

        .bg-quaternary-light {
            background-color: var(--color-quaternary-light);
            transition: background-color .2s ease
        }

        @property --startColor {
            syntax: '<color>';
            initial-value: #fff;
            inherits: false
        }

        @property --endColor {
            syntax: '<color>';
            initial-value: lightgrey;
            inherits: false
        }

        .bg-gradient {
            --startColor: var(--color-primary-light);
            --endColor: var(--color-layer-1);
            background: var(--startColor);
            background: linear-gradient(180deg,var(--startColor) 0%,var(--endColor) 100%);
            transition: --startColor .2s ease,--endColor .2s ease
        }
    }

    @layer images {
        img,svg {
            max-width: 100%;
            height: auto;
            vertical-align: middle;
            font-style: italic;
            background-repeat: no-repeat;
            background-size: cover;
            shape-margin: 1rem
        }

        .img-fluid {
            width: 100%;
            height: auto
        }

        .image-wrapper {
            width: 100%;
            height: auto;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 250ms ease-in-out
        }

        .flip {
            width: fit-content;
            height: 2.5rem;
            margin: 0;
            box-sizing: border-box;
            padding: 0;
            display: block;
            z-index: 10;
            position: relative;
            transform-style: preserve-3d;
            perspective: 700px
        }

        .flip img {
            width: 100%;
            height: 100%;
            object-fit: contain
        }

        .flip .after {
            width: auto;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transform: rotateX(180deg);
            transition: opacity .3s,transform .6s
        }

        .flip .before {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: opacity .3s,transform .6s
        }
    }

    @layer borders {
        .border {
            --border-width: 1px;
            --border-color: var(--color-text);
            --border-style: solid;
            border-width: var(--border-width);
            border-style: var(--border-style);
            border-color: var(--border-color);
            transition: border-color .2s ease
        }

        .border-left {
            border-left-width: var(--border-width)
        }

        .border-right {
            border-right-width: var(--border-width)
        }

        .border-top {
            border-top-width: var(--border-width)
        }

        .border-bottom {
            border-bottom-width: var(--border-width)
        }

        .border-dotted {
            --border-style: dotted
        }

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

        .border-2 {
            --border-width: 2px
        }

        .border-3 {
            --border-width: 3px
        }

        .border-4 {
            --border-width: 4px
        }

        .border-5 {
            --border-width: 5px
        }

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

        .border-primary-light {
            --border-color: var(--color-primary-light)
        }

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

        .border-secondary-light {
            --border-color: var(--color-secondary-light)
        }

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

        .border-bg {
            --border-color: var(--color-layer-1)
        }

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

    @layer buttons {
        [type=button],[type=reset],[type=submit],button {
            appearance: button;
            -webkit-appearance: button
        }

        [type=button]: not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled) {
            cursor:pointer
        }

        button,.btn {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            line-height: .8;
            font-size: var(--fs-2);
            font-weight: 600;
            font-family: var(--font-family-text);
            height: clamp(2.5rem, 5vw, 3rem);
            background-color: #fff0;
            color: var(--color-text);
            transition: background-color .2s ease,color .2s ease
        }

        .btn.inverse {
            color: var(--color-text-inverse)
        }

        .btn.arrow:after {
            content: '';
            display: flex;
            align-items: center;
            justify-content: center;
            height: .8rem;
            width: .8rem;
            margin-left: .75rem;
            background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ3XzExKSI+CjxwYXRoIGQ9Ik00LjcxNDM3IDE2LjAwMDJDNC4zNDI5NCAxNi4wMDAyIDMuOTg1OCAxNS44NTczIDMuNzAwMDggMTUuNTg1OUMzLjE0Mjk0IDE1LjAyODcgMy4xNDI5NCAxNC4xMjg3IDMuNzAwMDggMTMuNTcxNkw5LjI1NzIzIDguMDE0NDRMMy43MDAwOCAyLjQ0MzAxQzMuMTQyOTQgMS44ODU4NyAzLjE0Mjk0IDAuOTcxNTgyIDMuNzAwMDggMC40MTQ0MzlDNC4yNTcyMyAtMC4xNDI3MDQgNS4xNzE1MSAtMC4xNDI3MDQgNS43Mjg2NiAwLjQxNDQzOUwxMi4zMDAxIDYuOTg1ODdDMTIuODU3MiA3LjU0MzAxIDEyLjg1NzIgOC40NDMwMSAxMi4zMDAxIDkuMDAwMTVMNS43Mjg2NiAxNS41ODU5QzUuNDQyOTQgMTUuODcxNiA1LjA4NTggMTYuMDAwMiA0LjcxNDM3IDE2LjAwMDJaIiBmaWxsPSJibGFjayIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQ3XzExIj4KPHJlY3Qgd2lkdGg9IjkuNDI4NTciIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjI4NTc3KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPg==) no-repeat center / contain;
            transition: transform .2s ease
        }

        .btn.arrow:hover:after {
            transform: translateX(.25rem)
        }

        .bg-primary .btn:hover,.bg-primary button: hover {
            color:var(--color-white)
        }

        button svg {
            width: 1rem;
            height: 1rem
        }

        .btn-solid {
            padding-inline:var(--space-6);position: relative;
            font-size: var(--fs-2);
            color: var(--color-white);
            border-radius: var(--space-1);
            background-color: var(--color-secondary)
        }

        .btn-solid.arrow:after {
            background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ3XzIpIj4KPHBhdGggZD0iTTQuNzE0MzcgMTYuMDAwMkM0LjM0Mjk0IDE2LjAwMDIgMy45ODU4IDE1Ljg1NzMgMy43MDAwOCAxNS41ODU5QzMuMTQyOTQgMTUuMDI4NyAzLjE0Mjk0IDE0LjEyODcgMy43MDAwOCAxMy41NzE2TDkuMjU3MjMgOC4wMTQ0NEwzLjcwMDA4IDIuNDQzMDFDMy4xNDI5NCAxLjg4NTg3IDMuMTQyOTQgMC45NzE1ODIgMy43MDAwOCAwLjQxNDQzOUM0LjI1NzIzIC0wLjE0MjcwNCA1LjE3MTUxIC0wLjE0MjcwNCA1LjcyODY2IDAuNDE0NDM5TDEyLjMwMDEgNi45ODU4N0MxMi44NTcyIDcuNTQzMDEgMTIuODU3MiA4LjQ0MzAxIDEyLjMwMDEgOS4wMDAxNUw1LjcyODY2IDE1LjU4NTlDNS40NDI5NCAxNS44NzE2IDUuMDg1OCAxNi4wMDAyIDQuNzE0MzcgMTYuMDAwMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNDdfMiI+CjxyZWN0IHdpZHRoPSI5LjQyODU3IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4yODU3NykiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat center / contain
        }

        .btn-solid.inverse {
            color: var(--color-text);
            background-color: var(--color-layer-1)
        }

        .btn-solid.inverse:hover {
            color: var(--color-text)
        }

        .btn-solid:before {
            content: '';
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            border-radius: var(--space-1);
            box-shadow: rgb(0 0 0 / .16) 0 10px 36px 0,rgb(0 0 0 / .06) 0 0 0 1px;
            opacity: 0;
            transition: opacity 0.2s ease
        }

        .btn-solid:hover {
            background-color: var(--color-primary)
        }

        .btn-solid:hover:before {
            opacity: 1
        }

        .btn-solid svg path {
            fill: var(--color-white)
        }

        .btn-hollow {
            padding: 0 1.5rem;
            position: relative;
            font-size: var(--fs-2);
            color: var(--color-primary);
            border-radius: var(--space-1);
            background-color: #fff0;
            border: 1px solid var(--color-primary);
            transition: background-color 0.2s ease,color 0.2s ease
        }

        .btn-hollow:hover {
            background-color: var(--color-primary);
            color: var(--color-white)
        }

        .btn-hollow.inverse {
            color: var(--color-text);
            border-color: var(--color-text)
        }

        .btn-hollow.inverse:hover {
            background-color: var(--color-text);
            color: var(--color-white)
        }

        .btn-hollow svg path {
            fill: var(--color-primary)
        }

        .btn-hollow:hover svg path {
            fill: var(--color-white)
        }

        .btn-ghost {
            padding: 0 1.5rem;
            position: relative;
            font-size: var(--fs-2);
            color: var(--color-text);
            background-color: var(--color-ghost)
        }

        .btn-ghost:hover,.btn-ghost:focus {
            color: var(--color-primary)
        }

        .btn-icon {
            padding: 0;
            aspect-ratio: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 2rem;
            min-width: 2rem;
            border-radius: var(--space-1);
            background-color: var(--color-ghost);
            transition: background-color 0.2s ease
        }

        .btn-icon svg {
            width: 1.5rem;
            height: 1.5rem
        }

        .btn-icon svg path {
            fill: var(--color-text);
            opacity: .4;
            transition: opacity 0.2s ease
        }

        .btn-icon:hover svg path {
            opacity: 1
        }

        .btn-icon.active svg path {
            fill: var(--color-primary);
            opacity: 1
        }

        .btn-icon.active,.btn-icon:hover {
            background-color: var(--color-layer-2)
        }

        .btn.back {
            padding-left: 1.5rem;
            opacity: .5;
            font-weight: 400;
            transition: opacity 0.2s ease
        }

        .btn.back:hover {
            opacity: 1
        }

        .btn.back:after {
            position: absolute;
            left: 0;
            margin-left: 0;
            background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ3XzExKSI+CjxwYXRoIGQ9Ik00LjcxNDM3IDE2LjAwMDJDNC4zNDI5NCAxNi4wMDAyIDMuOTg1OCAxNS44NTczIDMuNzAwMDggMTUuNTg1OUMzLjE0Mjk0IDE1LjAyODcgMy4xNDI5NCAxNC4xMjg3IDMuNzAwMDggMTMuNTcxNkw5LjI1NzIzIDguMDE0NDRMMy43MDAwOCAyLjQ0MzAxQzMuMTQyOTQgMS44ODU4NyAzLjE0Mjk0IDAuOTcxNTgyIDMuNzAwMDggMC40MTQ0MzlDNC4yNTcyMyAtMC4xNDI3MDQgNS4xNzE1MSAtMC4xNDI3MDQgNS43Mjg2NiAwLjQxNDQzOUwxMi4zMDAxIDYuOTg1ODdDMTIuODU3MiA3LjU0MzAxIDEyLjg1NzIgOC40NDMwMSAxMi4zMDAxIDkuMDAwMTVMNS43Mjg2NiAxNS41ODU5QzUuNDQyOTQgMTUuODcxNiA1LjA4NTggMTYuMDAwMiA0LjcxNDM3IDE2LjAwMDJaIiBmaWxsPSJibGFjayIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQ3XzExIj4KPHJlY3Qgd2lkdGg9IjkuNDI4NTciIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjI4NTc3KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPg==) no-repeat center / contain;
            rotate: 180deg
        }

        .btn.back:hover:after {
            transform: translateX(5px)
        }

        .btn-mini {
            font-size: var(--fs-1);
            height: clamp(2rem, 5vw, 2.5rem);
            padding-inline:var(--space-4)}

        input[type=text].input-mini {
            font-size: var(--fs-1);
            height: clamp(2rem, 5vw, 2.5rem)
        }

        form input.input-mini: :placeholder {
            font-size:var(--fs-1)
        }

        form input.input-mini: -ms-input-placeholder {
            font-size:var(--fs-1)
        }

        form input.input-mini: :-ms-input-placeholder {
            font-size:var(--fs-1)
        }

        input.switch {
            --bg-off: var(--color-layer-3);
            --bg-on: var(--color-primary);
            --knob-off: var(--color-layer-1);
            --knob-on: var(--color-layer-1);
            max-width: 2.5rem;
            --s: 1.25rem;
            margin: 0;
            height: calc(var(--s) + var(--s)/5);
            width: auto;
            aspect-ratio: 2.25;
            border-radius: var(--s);
            display: grid;
            cursor: pointer;
            background-color: var(--bg-off);
            border: 1px solid var(--bg-off);
            box-sizing: content-box;
            overflow: hidden;
            transition: .3s .1s;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none
        }

        input.switch: before {
            content:"";
            padding: calc(var(--s)/10);
            --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%, var(--knob-off) 96%, #0000);
            background: var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box,var(--_g) var(--_p,0)/var(--s) 100% no-repeat content-box,#0000;
            transition: .4s,background-position .4s .1s,padding cubic-bezier(0,calc(var(--_i, -1)*200),1,calc(var(--_i, -1)*200)) .25s .1s
        }

        input.switch: checked {
            background-color:var(--bg-on)
        }

        input.switch: checked:before {
            --_g:radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%, var(--knob-on) 96%, #0000)
        }

        input.switch: checked:before {
            padding:calc(var(--s)/10 + .05px) calc(var(--s)/10);
            --_p: 100%;
            --_i: 1
        }

        .skip-to-main-content-link {
            position: absolute;
            left: -9999px;
            z-index: 99999;
            padding: 0 1.5rem;
            font-size: 1rem;
            height: 5rem;
            display: flex;
            align-items: center;
            background-color: #000;
            color: #fff;
            opacity: 0;
            visibility: visible
        }

        .skip-to-main-content-link:focus {
            left: 0;
            opacity: 1
        }

        @media (min-width: 36rem) {
            button,.btn {
                width:auto
            }
        }
    }

    @layer forms {
        label {
            font-size: var(--fs-2)
        }

        form label {
            display: inline-block
        }

        input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select {
            display: block;
            width: 100%;
            min-height: 2.5rem;
            padding: 0 1rem;
            font-size: var(--fs-2);
            font-weight: 400;
            font-family: var(--font-family-text);
            line-height: 1.5;
            color: var(--color-text);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--color-layer-2);
            background-clip: padding-box;
            border: none;
            border-radius: var(--space-2);
            transition: background-color .2s ease,color .2s ease
        }

        input[type="text"],input[type="email"],input[type="password"],input[type="tel"] {
            height: clamp(2.5rem, 5vw, 3rem)
        }

        textarea {
            height: clamp(10rem, 5vw, 20rem);
            padding: .75rem 1rem
        }

        input[type="text"]: :placeholder,input[type="email"]::placeholder,input[type="password"]::placeholder,input[type="tel"]::placeholder,textarea::placeholder {
            color:var(--color-text);
            opacity: .5;
            font-size: var(--fs-2);
            font-family: var(--font-family-text);
            transition: color .2s ease
        }

        input[type="text"]: -ms-input-placeholder,input[type="email"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder,input[type="tel"]:-ms-input-placeholder,textarea:-ms-input-placeholder {
            color:var(--color-text);
            opacity: .5;
            font-size: var(--fs-2);
            font-family: var(--font-family-text);
            transition: color .2s ease
        }

        input[type="text"]: :-ms-input-placeholder,input[type="email"]::-ms-input-placeholder,input[type="password"]::-ms-input-placeholder,input[type="tel"]::-ms-input-placeholder,textarea::-ms-input-placeholder {
            color:var(--color-text);
            opacity: .5;
            font-size: var(--fs-2);
            font-family: var(--font-family-text);
            transition: color .2s ease
        }

        .wpcf7 form .wpcf7-response-output {
            padding: .5rem 1.5rem!important;
            border-radius: var(--space-2);
            margin-inline:0}

        input[type="submit"] {
            display: inline-flex;
            align-items: center;
            width: auto;
            border: none;
            cursor: pointer;
            line-height: .8;
            font-size: var(--fs-2);
            font-weight: 500;
            font-family: var(--font-family-text);
            height: 2.5rem;
            background-color: var(--color-primary);
            color: var(--color-white);
            padding: 0 1.5rem;
            border-radius: var(--space-1);
            transition: background-color .2s ease,color .2s ease
        }

        .form-check {
            display: flex;
            align-items: center;
            margin-bottom: .25rem
        }

        input[type="radio"] {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--color-layer-2);
            margin-right: .75rem;
            font: inherit;
            color: var(--color-primary);
            width: 1rem;
            height: 1rem;
            border: 2px solid var(--color-text);
            border-radius: 50%;
            display: inline-grid;
            place-content: center;
            transition: border-color 120ms ease-in-out
        }

        input[type="radio"]: :before {
            content:"";
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em var(--color-primary)
        }

        input[type="radio"]: checked {
            border-color:var(--color-primary)
        }

        input[type="radio"]: checked::before {
            transform:scale(1)
        }

        input[type="radio"]: focus {
            outline:2px solid currentColor;
            outline-offset: 2px
        }

        select {
            height: clamp(2.5rem, 5vw, 3rem)
        }
    }

    @layer ratios {
        .ratio-1x1 {
            aspect-ratio: 1 / 1
        }

        .ratio-4x3 {
            aspect-ratio: 4 / 3
        }

        .ratio-3x2 {
            aspect-ratio: 3 / 2
        }

        .ratio-16x9 {
            aspect-ratio: 16 / 9
        }

        .ratio-3x4 {
            aspect-ratio: 3 / 4
        }

        .ratio-2x3 {
            aspect-ratio: 2 / 3
        }

        .ratio-9x16 {
            aspect-ratio: 9 / 16
        }

        @media (min-width: 36rem) {
            .ratio-1x1--sm {
                aspect-ratio:1 / 1
            }

            .ratio-4x3--sm {
                aspect-ratio: 4 / 3
            }

            .ratio-3x2--sm {
                aspect-ratio: 3 / 2
            }

            .ratio-16x9--sm {
                aspect-ratio: 16 / 9
            }

            .ratio-3x4--sm {
                aspect-ratio: 3 / 4
            }

            .ratio-2x3--sm {
                aspect-ratio: 2 / 3
            }

            .ratio-9x16--sm {
                aspect-ratio: 9 / 16
            }
        }

        @media (min-width: 48rem) {
            .ratio-1x1--md {
                aspect-ratio:1 / 1
            }

            .ratio-4x3--md {
                aspect-ratio: 4 / 3
            }

            .ratio-3x2--md {
                aspect-ratio: 3 / 2
            }

            .ratio-16x9--md {
                aspect-ratio: 16 / 9
            }

            .ratio-3x4--md {
                aspect-ratio: 3 / 4
            }

            .ratio-2x3--md {
                aspect-ratio: 2 / 3
            }

            .ratio-9x16--md {
                aspect-ratio: 9 / 16
            }
        }

        @media (min-width: 62rem) {
            .ratio-1x1--lg {
                aspect-ratio:1 / 1
            }

            .ratio-4x3--lg {
                aspect-ratio: 4 / 3
            }

            .ratio-3x2--lg {
                aspect-ratio: 3 / 2
            }

            .ratio-16x9--lg {
                aspect-ratio: 16 / 9
            }

            .ratio-3x4--lg {
                aspect-ratio: 3 / 4
            }

            .ratio-2x3--lg {
                aspect-ratio: 2 / 3
            }

            .ratio-9x16--lg {
                aspect-ratio: 9 / 16
            }
        }

        @media (min-width: 75rem) {
            .ratio-1x1--xl {
                aspect-ratio:1 / 1
            }

            .ratio-4x3--xl {
                aspect-ratio: 4 / 3
            }

            .ratio-3x2--xl {
                aspect-ratio: 3 / 2
            }

            .ratio-16x9--xl {
                aspect-ratio: 16 / 9
            }

            .ratio-3x4--xl {
                aspect-ratio: 3 / 4
            }

            .ratio-2x3--xl {
                aspect-ratio: 2 / 3
            }

            .ratio-9x16--xl {
                aspect-ratio: 9 / 16
            }
        }

        @media (min-width: 90rem) {
            .ratio-1x1--xxl {
                aspect-ratio:1 / 1
            }

            .ratio-4x3--xxl {
                aspect-ratio: 4 / 3
            }

            .ratio-3x2--xxl {
                aspect-ratio: 3 / 2
            }

            .ratio-16x9--xxl {
                aspect-ratio: 16 / 9
            }

            .ratio-3x4--xxl {
                aspect-ratio: 3 / 4
            }

            .ratio-2x3--xxl {
                aspect-ratio: 2 / 3
            }

            .ratio-9x16--xxl {
                aspect-ratio: 9 / 16
            }
        }
    }

    @media (min-width: 0rem) {
        .container,.container--sm,.container--md,.container--lg,.container--xl {
            --container-max-width:100%;
            --gap: var(--space-8);
            width: min(var(--container-max-width), 100%);
            margin-inline:auto;display: flex;
            flex-direction: column;
            gap: var(--gap)
        }

        .grid {
            --gap: var(--space-6);
            --min-column-size: 15rem;
            display: grid;
            grid-gap: var(--gap)
        }

        .grid-auto {
            grid-template-columns: repeat(auto-fit,minmax(min(var(--min-column-size), 100%),1fr))
        }

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

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

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

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

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

        .grid-12 {
            --gap: 2.5rem;
            --min-column-size: 4.375rem;
            grid-template-columns: repeat(12,1fr)
        }

        .grid-12>* {
            grid-column: span 12
        }

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

        .flexible-grid {
            --gap: var(--space-6);
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap)
        }

        .flexible-grid>* {
            flex: 1
        }

        .col-1 {
            grid-column: span 1
        }

        .col-2 {
            grid-column: span 2
        }

        .col-3 {
            grid-column: span 3
        }

        .col-4 {
            grid-column: span 4
        }

        .col-5 {
            grid-column: span 5
        }

        .col-6 {
            grid-column: span 6
        }

        .col-7 {
            grid-column: span 7
        }

        .col-8 {
            grid-column: span 8
        }

        .col-9 {
            grid-column: span 9
        }

        .col-10 {
            grid-column: span 10
        }

        .col-11 {
            grid-column: span 11
        }

        .row-2 {
            grid-row: span 2
        }

        .row-3 {
            grid-row: span 3
        }

        .row-4 {
            grid-row: span 4
        }

        .row-5 {
            grid-row: span 5
        }

        .row-6 {
            grid-row: span 6
        }
    }

    @media (min-width: 36rem) {
        .container,.container--sm,.container--md,.container--lg,.container--xl {
            --container-max-width:34rem
        }

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

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

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

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

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

        .grid-uneven-3--sm {
            grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)
        }

        .col-1--sm {
            grid-column: span 1
        }

        .col-2--sm {
            grid-column: span 2
        }

        .col-3--sm {
            grid-column: span 3
        }

        .col-4--sm {
            grid-column: span 4
        }

        .col-5--sm {
            grid-column: span 5
        }

        .col-6--sm {
            grid-column: span 6
        }

        .col-7--sm {
            grid-column: span 7
        }

        .col-8--sm {
            grid-column: span 8
        }

        .col-9--sm {
            grid-column: span 9
        }

        .col-10--sm {
            grid-column: span 10
        }

        .col-11--sm {
            grid-column: span 11
        }

        .row-2--sm {
            grid-row: span 2
        }

        .row-3--sm {
            grid-row: span 3
        }

        .row-4--sm {
            grid-row: span 4
        }

        .row-5--sm {
            grid-row: span 5
        }

        .row-6--sm {
            grid-row: span 6
        }
    }

    @media (min-width: 48rem) {
        .container,.container--md,.container--lg,.container--xl {
            --container-max-width:45rem
        }

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

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

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

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

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

        .grid-uneven-3--md {
            grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)
        }

        .col-1--md {
            grid-column: span 1
        }

        .col-2--md {
            grid-column: span 2
        }

        .col-3--md {
            grid-column: span 3
        }

        .col-4--md {
            grid-column: span 4
        }

        .col-5--md {
            grid-column: span 5
        }

        .col-6--md {
            grid-column: span 6
        }

        .col-7--md {
            grid-column: span 7
        }

        .col-8--md {
            grid-column: span 8
        }

        .col-9--md {
            grid-column: span 9
        }

        .col-10--md {
            grid-column: span 10
        }

        .col-11--md {
            grid-column: span 11
        }

        .row-2--md {
            grid-row: span 2
        }

        .row-3--md {
            grid-row: span 3
        }

        .row-4--md {
            grid-row: span 4
        }

        .row-5--md {
            grid-row: span 5
        }

        .row-6--md {
            grid-row: span 6
        }
    }

    @media (min-width: 62rem) {
        .container,.container--lg,.container--xl {
            --container-max-width:60rem
        }

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

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

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

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

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

        .grid-uneven-3--lg {
            grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)
        }

        .col-1--lg {
            grid-column: span 1
        }

        .col-2--lg {
            grid-column: span 2
        }

        .col-3--lg {
            grid-column: span 3
        }

        .col-4--lg {
            grid-column: span 4
        }

        .col-5--lg {
            grid-column: span 5
        }

        .col-6--lg {
            grid-column: span 6
        }

        .col-7--lg {
            grid-column: span 7
        }

        .col-8--lg {
            grid-column: span 8
        }

        .col-9--lg {
            grid-column: span 9
        }

        .col-10--lg {
            grid-column: span 10
        }

        .col-11--lg {
            grid-column: span 11
        }

        .row-2--lg {
            grid-row: span 2
        }

        .row-3--lg {
            grid-row: span 3
        }

        .row-4--lg {
            grid-row: span 4
        }

        .row-5--lg {
            grid-row: span 5
        }

        .row-6--lg {
            grid-row: span 6
        }
    }

    @media (min-width: 75rem) {
        .container,.container--xl {
            --container-max-width:70rem
        }

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

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

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

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

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

        .grid-uneven-3--xl {
            grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)
        }

        .order-1--xl {
            order: 1
        }

        .order-2--xl {
            order: 2
        }

        .order-3--xl {
            order: 3
        }

        .order-4--xl {
            order: 4
        }

        .order-5--xl {
            order: 5
        }

        .order-6--xl {
            order: 6
        }

        .col-1--xl {
            grid-column: span 1
        }

        .col-2--xl {
            grid-column: span 2
        }

        .col-3--xl {
            grid-column: span 3
        }

        .col-4--xl {
            grid-column: span 4
        }

        .col-5--xl {
            grid-column: span 5
        }

        .col-6--xl {
            grid-column: span 6
        }

        .col-7--xl {
            grid-column: span 7
        }

        .col-8--xl {
            grid-column: span 8
        }

        .col-9--xl {
            grid-column: span 9
        }

        .col-10--xl {
            grid-column: span 10
        }

        .col-11--xl {
            grid-column: span 11
        }

        .row-2--xl {
            grid-row: span 2
        }

        .row-3--xl {
            grid-row: span 3
        }

        .row-4--xl {
            grid-row: span 4
        }

        .row-5--xl {
            grid-row: span 5
        }

        .row-6--xl {
            grid-row: span 6
        }

        .g-0--xl {
            --gap: 0
        }

        .g-1--xl {
            --gap: var(--space-1)
        }

        .g-2--xl {
            --gap: var(--space-2)
        }

        .g-3--xl {
            --gap: var(--space-3)
        }

        .g-4--xl {
            --gap: var(--space-4)
        }

        .g-5--xl {
            --gap: var(--space-5)
        }

        .g-6--xl {
            --gap: var(--space-6)
        }

        .g-7--xl {
            --gap: var(--space-7)
        }

        .g-8--xl {
            --gap: var(--space-8)
        }

        .g-9--xl {
            --gap: var(--space-9)
        }

        .g-10--xl {
            --gap: var(--space-10)
        }
    }

    @media (min-width: 90rem) {
        .container,.container--xxl {
            --container-max-width:81.25rem
        }
    }
}

@layer darkmode {
    :root.dark-mode {
        --color-primary: var(--color-primary-medium);
        --color-secondary: var(--color-secondary-medium);
        --color-primary-light: #181818;
        --color-tertiary-light: #202020;
        --color-layer-1: #181818;
        --color-layer-2: #202020;
        --color-layer-3: #313131;
        --color-title: #dce3ea;
        --color-text: #dce3ea;
        --color-text-inverse: #25313c;
        --color-ghost: rgba(37, 49, 60, 0.5)
    }

    .dark-mode .lightmode-only {
        display: none!important;
        visibility: hidden
    }

    .dark-mode .darkmode-only {
        display: block!important;
        visibility: visible
    }

    .dark-mode #navigation,.dark-mode #navigation:before,.dark-mode #navigation .sub-menu {
        box-shadow: none
    }

    .dark-mode .bg-primary .btn.arrow:not(.btn-solid):hover {
        color: var(--color-text-inverse)
    }

    .dark-mode .flip .before {
        transform: rotateX(-180deg);
        opacity: 0
    }

    .dark-mode .flip .after {
        transform: rotateX(0deg);
        opacity: 1
    }

    .dark-mode .backdrop {
        background-color: hsl(208 24% 19% / .5)
    }

    .dark-mode .social-icons a img {
        filter: brightness(0) invert(1)
    }

    .dark-mode .social-icons a: hover img {
        filter:brightness(0) saturate(100%) invert(73%) sepia(35%) saturate(303%) hue-rotate(157deg) brightness(93%) contrast(98%)
    }

    .dark-mode .bg-primary-light,.dark-mode #navigation,.dark-mode footer,.dark-mode .bg-primary,.dark-mode .grid-custom .bg-layer-1,.dark-mode .item h3 {
        background-color: var(--color-layer-2)
    }

    .dark-mode input[type="text"],.dark-mode input[type="email"],.dark-mode input[type="tel"],.dark-mode textarea,.dark-mode select,.dark-mode .bg-gradient-cta .bg-primary-light,.dark-mode .bg-secondary,.dark-mode .bg-secondary-light,.dark-mode .bg-primary-light.bg-layer-3,.dark-mode .bg-primary.bg-layer-3,.dark-mode .item: hover h3 {
        background-color:var(--color-layer-3)
    }

    .dark-mode .btn-solid {
        background-color: var(--color-primary);
        color: var(--color-text-inverse)
    }

    .dark-mode .btn.arrow:after {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ3XzIpIj4KPHBhdGggZD0iTTQuNzE0MzcgMTYuMDAwMkM0LjM0Mjk0IDE2LjAwMDIgMy45ODU4IDE1Ljg1NzMgMy43MDAwOCAxNS41ODU5QzMuMTQyOTQgMTUuMDI4NyAzLjE0Mjk0IDE0LjEyODcgMy43MDAwOCAxMy41NzE2TDkuMjU3MjMgOC4wMTQ0NEwzLjcwMDA4IDIuNDQzMDFDMy4xNDI5NCAxLjg4NTg3IDMuMTQyOTQgMC45NzE1ODIgMy43MDAwOCAwLjQxNDQzOUM0LjI1NzIzIC0wLjE0MjcwNCA1LjE3MTUxIC0wLjE0MjcwNCA1LjcyODY2IDAuNDE0NDM5TDEyLjMwMDEgNi45ODU4N0MxMi44NTcyIDcuNTQzMDEgMTIuODU3MiA4LjQ0MzAxIDEyLjMwMDEgOS4wMDAxNUw1LjcyODY2IDE1LjU4NTlDNS40NDI5NCAxNS44NzE2IDUuMDg1OCAxNi4wMDAyIDQuNzE0MzcgMTYuMDAwMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNDdfMiI+CjxyZWN0IHdpZHRoPSI5LjQyODU3IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4yODU3NykiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat center / contain
    }

    .dark-mode .btn-solid.arrow:after {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ3XzExKSI+CjxwYXRoIGQ9Ik00LjcxNDM3IDE2LjAwMDJDNC4zNDI5NCAxNi4wMDAyIDMuOTg1OCAxNS44NTczIDMuNzAwMDggMTUuNTg1OUMzLjE0Mjk0IDE1LjAyODcgMy4xNDI5NCAxNC4xMjg3IDMuNzAwMDggMTMuNTcxNkw5LjI1NzIzIDguMDE0NDRMMy43MDAwOCAyLjQ0MzAxQzMuMTQyOTQgMS44ODU4NyAzLjE0Mjk0IDAuOTcxNTgyIDMuNzAwMDggMC40MTQ0MzlDNC4yNTcyMyAtMC4xNDI3MDQgNS4xNzE1MSAtMC4xNDI3MDQgNS43Mjg2NiAwLjQxNDQzOUwxMi4zMDAxIDYuOTg1ODdDMTIuODU3MiA3LjU0MzAxIDEyLjg1NzIgOC40NDMwMSAxMi4zMDAxIDkuMDAwMTVMNS43Mjg2NiAxNS41ODU5QzUuNDQyOTQgMTUuODcxNiA1LjA4NTggMTYuMDAwMiA0LjcxNDM3IDE2LjAwMDJaIiBmaWxsPSJibGFjayIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQ3XzExIj4KPHJlY3Qgd2lkdGg9IjkuNDI4NTciIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjI4NTc3KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPg==) no-repeat center / contain
    }

    .dark-mode .tagline {
        color: var(--color-primary)
    }

    .dark-mode .svg-bg {
        fill: var(--color-layer-3)
    }

    .dark-mode .svg-bg-2 {
        fill: var(--color-layer-2)
    }

    .dark-mode .bg-gradient-primary {
        --endColor: var(--color-layer-2)
    }
}

@layer utilities {
    @media (min-width: 0rem) {
        .lightmode-only {
            display:block;
            visibility: visible
        }

        .darkmode-only {
            display: none;
            visibility: hidden
        }

        .block {
            display: block
        }

        .flex {
            --gap: 0;
            display: flex;
            gap: var(--gap)
        }

        .fixed {
            position: fixed
        }

        .hide {
            display: none
        }

        .text-center {
            text-align: center
        }

        .text-start {
            text-align: start
        }

        .text-end {
            text-align: end
        }

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

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

        .align-items-center {
            align-items: center
        }

        .align-items-between {
            align-items: space-between
        }

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

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

        .justify-content-center {
            justify-content: center
        }

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

        .flex-column {
            flex-direction: column
        }

        .flex-fill {
            flex: 1
        }

        .flex-grow {
            flex-grow: 1
        }

        .flex-noshrink {
            flex-shrink: 0
        }

        .flex-wrap {
            flex-wrap: wrap
        }

        .relative {
            position: relative
        }

        .absolute {
            position: absolute
        }

        .overflow-hidden {
            overflow: hidden
        }

        .overflow-visible {
            overflow: hidden
        }

        .order-1 {
            order: 1
        }

        .order-2 {
            order: 2
        }

        .order-3 {
            order: 3
        }

        .order-4 {
            order: 4
        }

        .order-5 {
            order: 5
        }

        .order-6 {
            order: 6
        }
    }

    @media (min-width: 36rem) {
        .block--sm {
            display:block
        }

        .flex--sm {
            --gap: 0;
            display: flex;
            gap: var(--gap)
        }

        .fixed--sm {
            position: fixed
        }

        .hide--sm {
            display: none
        }

        .d-grid--sm {
            display: grid
        }

        .text-center--sm {
            text-align: center
        }

        .text-start--sm {
            text-align: start
        }

        .text-end--sm {
            text-align: end
        }

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

        .justify-content-center--sm {
            justify-content: center
        }

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

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

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

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

        .align-items-center--sm {
            align-items: center
        }

        .align-items-between--sm {
            align-items: space-between
        }

        .relative--sm {
            position: relative
        }

        .absolute--sm {
            position: absolute
        }

        .overflow-hidden--sm {
            overflow: hidden
        }

        .overflow-visible--sm {
            overflow: hidden
        }

        .order-1--sm {
            order: 1
        }

        .order-2--sm {
            order: 2
        }

        .order-3--sm {
            order: 3
        }

        .order-4--sm {
            order: 4
        }

        .order-5--sm {
            order: 5
        }

        .order-6--sm {
            order: 6
        }
    }

    @media (min-width: 48rem) {
        .hide--md {
            display:none
        }

        .flex--md {
            --gap: 0;
            display: flex;
            gap: var(--gap)
        }

        .fixed--md {
            position: fixed
        }

        .block--md {
            display: block
        }

        .d-grid--md {
            display: grid
        }

        .text-center--md {
            text-align: center
        }

        .text-start--md {
            text-align: start
        }

        .text-end--md {
            text-align: end
        }

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

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

        .justify-content-center--md {
            justify-content: center
        }

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

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

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

        .align-items-center--md {
            align-items: center
        }

        .align-items-between--md {
            align-items: space-between
        }

        .relative--md {
            position: relative
        }

        .absolute--md {
            position: absolute
        }

        .overflow-hidden--md {
            overflow: hidden
        }

        .overflow-visible--md {
            overflow: hidden
        }

        .order-1--md {
            order: 1
        }

        .order-2--md {
            order: 2
        }

        .order-3--md {
            order: 3
        }

        .order-4--md {
            order: 4
        }

        .order-5--md {
            order: 5
        }

        .order-6--md {
            order: 6
        }
    }

    @media (min-width: 62rem) {
        .hide--lg {
            display:none
        }

        .flex--lg {
            --gap: 0;
            display: flex;
            gap: var(--gap)
        }

        .fixed--lg {
            position: fixed
        }

        .block--lg {
            display: block
        }

        .d-grid--lg {
            display: grid
        }

        .text-center--lg {
            text-align: center
        }

        .text-start--lg {
            text-align: start
        }

        .text-end--lg {
            text-align: end
        }

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

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

        .justify-content-center--lg {
            justify-content: center
        }

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

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

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

        .align-items-center--lg {
            align-items: center
        }

        .align-items-between--lg {
            align-items: space-between
        }

        .relative--lg {
            position: relative
        }

        .absolute--lg {
            position: absolute
        }

        .overflow-hidden--lg {
            overflow: hidden
        }

        .overflow-visible--lg {
            overflow: hidden
        }

        .order-1--lg {
            order: 1
        }

        .order-2--lg {
            order: 2
        }

        .order-3--lg {
            order: 3
        }

        .order-4--lg {
            order: 4
        }

        .order-5--lg {
            order: 5
        }

        .order-6--lg {
            order: 6
        }
    }

    @media (min-width: 75rem) {
        .hide--xl {
            display:none
        }

        .flex--xl {
            --gap: 0;
            display: flex;
            gap: var(--gap)
        }

        .fixed--xl {
            position: fixed
        }

        .block--xl {
            display: block
        }

        .d-grid--xl {
            display: grid
        }

        .text-center--xl {
            text-align: center
        }

        .text-start--xl {
            text-align: start
        }

        .text-end--xl {
            text-align: end
        }

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

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

        .justify-content-center--xl {
            justify-content: center
        }

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

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

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

        .align-items-center--xl {
            align-items: center
        }

        .align-items-between--xl {
            align-items: space-between
        }

        .relative--xl {
            position: relative
        }

        .absolute--xl {
            position: absolute
        }

        .overflow-hidden--xl {
            overflow: hidden
        }

        .overflow-visible--xl {
            overflow: hidden
        }

        .order-1--xl {
            order: 1
        }

        .order-2--xl {
            order: 2
        }

        .order-3--xl {
            order: 3
        }

        .order-4--xl {
            order: 4
        }

        .order-5--xl {
            order: 5
        }

        .order-6--xl {
            order: 6
        }
    }

    @media (min-width: 0rem) {
        .g-0 {
            --gap:0
        }

        .g-1 {
            --gap: var(--space-1)
        }

        .g-2 {
            --gap: var(--space-2)
        }

        .g-3 {
            --gap: var(--space-3)
        }

        .g-4 {
            --gap: var(--space-4)
        }

        .g-5 {
            --gap: var(--space-5)
        }

        .g-6 {
            --gap: var(--space-6)
        }

        .g-7 {
            --gap: var(--space-7)
        }

        .g-8 {
            --gap: var(--space-8)
        }

        .g-9 {
            --gap: var(--space-9)
        }

        .g-10 {
            --gap: var(--space-10)
        }

        .p-0 {
            padding: 0
        }

        .px-0 {
            padding-inline:0}

        .py-0 {
            padding-block:0}

        .ps-0 {
            padding-left: 0
        }

        .pt-0 {
            padding-top: 0
        }

        .pe-0 {
            padding-right: 0
        }

        .pb-0 {
            padding-bottom: 0
        }

        .p-1 {
            padding: var(--space-1)
        }

        .px-1 {
            padding-inline:var(--space-1)}

        .py-1 {
            padding-block: var(--space-1)
        }

        .ps-1 {
            padding-left: var(--space-1)
        }

        .pe-1 {
            padding-right: var(--space-1)
        }

        .pt-1 {
            padding-top: var(--space-1)
        }

        .pb-1 {
            padding-bottom: var(--space-1)
        }

        .p-2 {
            padding: var(--space-2)
        }

        .px-2 {
            padding-inline:var(--space-2)}

        .py-2 {
            padding-block: var(--space-2)
        }

        .ps-2 {
            padding-left: var(--space-2)
        }

        .pe-2 {
            padding-right: var(--space-2)
        }

        .pt-2 {
            padding-top: var(--space-2)
        }

        .pb-2 {
            padding-bottom: var(--space-2)
        }

        .p-3 {
            padding: var(--space-3)
        }

        .py-3 {
            padding-block:var(--space-3)}

        .px-3 {
            padding-inline: var(--space-3)
        }

        .ps-3 {
            padding-left: var(--space-3)
        }

        .pe-3 {
            padding-right: var(--space-3)
        }

        .pb-3 {
            padding-bottom: var(--space-3)
        }

        .pt-3 {
            padding-top: var(--space-3)
        }

        .p-4 {
            padding: var(--space-4)
        }

        .px-4 {
            padding-inline:var(--space-4)}

        .py-4 {
            padding-block: var(--space-4)
        }

        .ps-4 {
            padding-left: var(--space-4)
        }

        .pe-4 {
            padding-right: var(--space-4)
        }

        .pt-4 {
            padding-top: var(--space-4)
        }

        .pb-4 {
            padding-bottom: var(--space-4)
        }

        .p-5 {
            padding: var(--space-5)
        }

        .px-5 {
            padding-inline:var(--space-5)}

        .py-5 {
            padding-block: var(--space-5)
        }

        .ps-5 {
            padding-left: var(--space-5)
        }

        .pe-5 {
            padding-right: var(--space-5)
        }

        .pt-5 {
            padding-top: var(--space-5)
        }

        .pb-5 {
            padding-bottom: var(--space-5)
        }

        .p-6 {
            padding: var(--space-6)
        }

        .px-6 {
            padding-inline:var(--space-6)}

        .py-6 {
            padding-block: var(--space-6)
        }

        .ps-6 {
            padding-left: var(--space-6)
        }

        .pe-6 {
            padding-right: var(--space-6)
        }

        .pt-6 {
            padding-top: var(--space-6)
        }

        .pb-6 {
            padding-bottom: var(--space-6)
        }

        .p-7 {
            padding: var(--space-7)
        }

        .px-7 {
            padding-inline:var(--space-7)}

        .py-7 {
            padding-block: var(--space-7)
        }

        .ps-7 {
            padding-left: var(--space-7)
        }

        .pe-7 {
            padding-right: var(--space-7)
        }

        .pt-7 {
            padding-top: var(--space-7)
        }

        .pb-7 {
            padding-bottom: var(--space-7)
        }

        .p-8 {
            padding: var(--space-8)
        }

        .px-8 {
            padding-inline:var(--space-8)}

        .py-8 {
            padding-block: var(--space-8)
        }

        .ps-8 {
            padding-left: var(--space-8)
        }

        .pe-8 {
            padding-right: var(--space-8)
        }

        .pt-8 {
            padding-top: var(--space-8)
        }

        .pb-8 {
            padding-bottom: var(--space-8)
        }

        .p-9 {
            padding: var(--space-9)
        }

        .px-9 {
            padding-inline:var(--space-9)}

        .py-9 {
            padding-block: var(--space-9)
        }

        .ps-9 {
            padding-left: var(--space-9)
        }

        .pe-9 {
            padding-right: var(--space-9)
        }

        .pt-9 {
            padding-top: var(--space-9)
        }

        .pb-9 {
            padding-bottom: var(--space-9)
        }

        .p-10 {
            padding: var(--space-10)
        }

        .px-10 {
            padding-inline:var(--space-10)}

        .py-10 {
            padding-block: var(--space-10)
        }

        .ps-10 {
            padding-left: var(--space-10)
        }

        .pe-10 {
            padding-right: var(--space-10)
        }

        .pt-10 {
            padding-top: var(--space-10)
        }

        .pb-10 {
            padding-bottom: var(--space-10)
        }

        .mx-auto {
            margin-inline:auto}

        .m-0 {
            margin: 0
        }

        .mx-0 {
            margin-inline:0}

        .my-0 {
            margin-block:0}

        .ms-0 {
            margin-left: 0
        }

        .mt-0 {
            margin-top: 0
        }

        .me-0 {
            margin-right: 0
        }

        .mb-0 {
            margin-bottom: 0
        }

        .m-1 {
            margin: var(--space-1)
        }

        .mx-1 {
            margin-inline:var(--space-1)}

        .my-1 {
            margin-block: var(--space-1)
        }

        .ms-1 {
            margin-left: var(--space-1)
        }

        .me-1 {
            margin-right: var(--space-1)
        }

        .mt-1 {
            margin-top: var(--space-1)
        }

        .mb-1 {
            margin-bottom: var(--space-1)
        }

        .m-2 {
            margin: var(--space-2)
        }

        .mx-2 {
            margin-inline:var(--space-2)}

        .my-2 {
            margin-block: var(--space-2)
        }

        .ms-2 {
            margin-left: var(--space-2)
        }

        .me-2 {
            margin-right: var(--space-2)
        }

        .mt-2 {
            margin-top: var(--space-2)
        }

        .mb-2 {
            margin-bottom: var(--space-2)
        }

        .m-3 {
            margin: var(--space-3)
        }

        .my-3 {
            margin-block:var(--space-3)}

        .mx-3 {
            margin-inline: var(--space-3)
        }

        .ms-3 {
            margin-left: var(--space-3)
        }

        .me-3 {
            margin-right: var(--space-3)
        }

        .mb-3 {
            margin-bottom: var(--space-3)
        }

        .mt-3 {
            margin-top: var(--space-3)
        }

        .m-4 {
            margin: var(--space-4)
        }

        .mx-4 {
            margin-inline:var(--space-4)}

        .my-4 {
            margin-block: var(--space-4)
        }

        .ms-4 {
            margin-left: var(--space-4)
        }

        .me-4 {
            margin-right: var(--space-4)
        }

        .mt-4 {
            margin-top: var(--space-4)
        }

        .mb-4 {
            margin-bottom: var(--space-4)
        }

        .m-5 {
            margin: var(--space-5)
        }

        .mx-5 {
            margin-inline:var(--space-5)}

        .my-5 {
            margin-block: var(--space-5)
        }

        .ms-5 {
            margin-left: var(--space-5)
        }

        .me-5 {
            margin-right: var(--space-5)
        }

        .mt-5 {
            margin-top: var(--space-5)
        }

        .mb-5 {
            margin-bottom: var(--space-5)
        }

        .m-6 {
            margin: var(--space-6)
        }

        .mx-6 {
            margin-inline:var(--space-6)}

        .my-6 {
            margin-block: var(--space-6)
        }

        .ms-6 {
            margin-left: var(--space-6)
        }

        .me-6 {
            margin-right: var(--space-6)
        }

        .mt-6 {
            margin-top: var(--space-6)
        }

        .mb-6 {
            margin-bottom: var(--space-6)
        }

        .m-7 {
            margin: var(--space-7)
        }

        .mx-7 {
            margin-inline:var(--space-7)}

        .my-7 {
            margin-block: var(--space-7)
        }

        .ms-7 {
            margin-left: var(--space-7)
        }

        .me-7 {
            margin-right: var(--space-7)
        }

        .mt-7 {
            margin-top: var(--space-7)
        }

        .mb-7 {
            margin-bottom: var(--space-7)
        }

        .m-8 {
            margin: var(--space-8)
        }

        .mx-8 {
            margin-inline:var(--space-8)}

        .my-8 {
            margin-block: var(--space-8)
        }

        .ms-8 {
            margin-left: var(--space-8)
        }

        .me-8 {
            margin-right: var(--space-8)
        }

        .mt-8 {
            margin-top: var(--space-8)
        }

        .mb-8 {
            margin-bottom: var(--space-8)
        }

        .m-9 {
            margin: var(--space-9)
        }

        .mx-9 {
            margin-inline:var(--space-9)}

        .my-9 {
            margin-block: var(--space-9)
        }

        .ms-9 {
            margin-left: var(--space-9)
        }

        .me-9 {
            margin-right: var(--space-9)
        }

        .mt-9 {
            margin-top: var(--space-9)
        }

        .mb-9 {
            margin-bottom: var(--space-9)
        }

        .m-10 {
            margin: var(--space-10)
        }

        .mx-10 {
            margin-inline:var(--space-10)}

        .my-10 {
            margin-block: var(--space-10)
        }

        .ms-10 {
            margin-left: var(--space-10)
        }

        .me-10 {
            margin-right: var(--space-10)
        }

        .mt-10 {
            margin-top: var(--space-10)
        }

        .mb-10 {
            margin-bottom: var(--space-10)
        }
    }

    @media (min-width: 36rem) {
        .g-0--sm {
            --gap:0
        }

        .g-1--sm {
            --gap: var(--space-1)
        }

        .g-2--sm {
            --gap: var(--space-2)
        }

        .g-3--sm {
            --gap: var(--space-3)
        }

        .g-4--sm {
            --gap: var(--space-4)
        }

        .g-5--sm {
            --gap: var(--space-5)
        }

        .g-6--sm {
            --gap: var(--space-6)
        }

        .g-7--sm {
            --gap: var(--space-7)
        }

        .g-8--sm {
            --gap: var(--space-8)
        }

        .g-9--sm {
            --gap: var(--space-9)
        }

        .g-10--sm {
            --gap: var(--space-10)
        }

        .p-0--sm {
            padding: 0
        }

        .px-0--sm {
            padding-inline:0}

        .py-0--sm {
            padding-block:0}

        .ps-0--sm {
            padding-left: 0
        }

        .pt-0--sm {
            padding-top: 0
        }

        .pe-0--sm {
            padding-right: 0
        }

        .pb-0--sm {
            padding-bottom: 0
        }

        .p-1--sm {
            padding: var(--space-1)
        }

        .px-1--sm {
            padding-inline:var(--space-1)}

        .py-1--sm {
            padding-block: var(--space-1)
        }

        .ps-1--sm {
            padding-left: var(--space-1)
        }

        .pe-1--sm {
            padding-right: var(--space-1)
        }

        .pt-1--sm {
            padding-top: var(--space-1)
        }

        .pb-1--sm {
            padding-bottom: var(--space-1)
        }

        .p-2--sm {
            padding: var(--space-2)
        }

        .px-2--sm {
            padding-inline:var(--space-2)}

        .py-2--sm {
            padding-block: var(--space-2)
        }

        .ps-2--sm {
            padding-left: var(--space-2)
        }

        .pe-2--sm {
            padding-right: var(--space-2)
        }

        .pt-2--sm {
            padding-top: var(--space-2)
        }

        .pb-2--sm {
            padding-bottom: var(--space-2)
        }

        .p-3--sm {
            padding: var(--space-3)
        }

        .px-3--sm {
            padding-inline:var(--space-3)}

        .py-3--sm {
            padding-block: var(--space-3)
        }

        .ps-3--sm {
            padding-left: var(--space-3)
        }

        .pe-3--sm {
            padding-right: var(--space-3)
        }

        .pt-3--sm {
            padding-top: var(--space-3)
        }

        .pb-3--sm {
            padding-bottom: var(--space-3)
        }

        .p-4--sm {
            padding: var(--space-4)
        }

        .px-4--sm {
            padding-inline:var(--space-4)}

        .py-4--sm {
            padding-block: var(--space-4)
        }

        .ps-4--sm {
            padding-left: var(--space-4)
        }

        .pe-4--sm {
            padding-right: var(--space-4)
        }

        .pt-4--sm {
            padding-top: var(--space-4)
        }

        .pb-4--sm {
            padding-bottom: var(--space-4)
        }

        .p-5--sm {
            padding: var(--space-5)
        }

        .px-5--sm {
            padding-inline:var(--space-5)}

        .py-5--sm {
            padding-block: var(--space-5)
        }

        .ps-5--sm {
            padding-left: var(--space-5)
        }

        .pe-5--sm {
            padding-right: var(--space-5)
        }

        .pt-5--sm {
            padding-top: var(--space-5)
        }

        .pb-5--sm {
            padding-bottom: var(--space-5)
        }

        .p-6--sm {
            padding: var(--space-6)
        }

        .px-6--sm {
            padding-inline:var(--space-6)}

        .py-6--sm {
            padding-block: var(--space-6)
        }

        .ps-6--sm {
            padding-left: var(--space-6)
        }

        .pe-6--sm {
            padding-right: var(--space-6)
        }

        .pt-6--sm {
            padding-top: var(--space-6)
        }

        .pb-6--sm {
            padding-bottom: var(--space-6)
        }

        .p-7--sm {
            padding: var(--space-7)
        }

        .px-7--sm {
            padding-inline:var(--space-7)}

        .py-7--sm {
            padding-block: var(--space-7)
        }

        .ps-7--sm {
            padding-left: var(--space-7)
        }

        .pe-7--sm {
            padding-right: var(--space-7)
        }

        .pt-7--sm {
            padding-top: var(--space-7)
        }

        .pb-7--sm {
            padding-bottom: var(--space-7)
        }

        .p-8--sm {
            padding: var(--space-8)
        }

        .px-8--sm {
            padding-inline:var(--space-8)}

        .py-8--sm {
            padding-block: var(--space-8)
        }

        .ps-8--sm {
            padding-left: var(--space-8)
        }

        .pe-8--sm {
            padding-right: var(--space-8)
        }

        .pt-8--sm {
            padding-top: var(--space-8)
        }

        .pb-8--sm {
            padding-bottom: var(--space-8)
        }

        .p-9--sm {
            padding: var(--space-9)
        }

        .px-9--sm {
            padding-inline:var(--space-9)}

        .py-9--sm {
            padding-block: var(--space-9)
        }

        .ps-9--sm {
            padding-left: var(--space-9)
        }

        .pe-9--sm {
            padding-right: var(--space-9)
        }

        .pt-9--sm {
            padding-top: var(--space-9)
        }

        .pb-9--sm {
            padding-bottom: var(--space-9)
        }

        .p-10--sm {
            padding: var(--space-10)
        }

        .px-10--sm {
            padding-inline:var(--space-10)}

        .py-10--sm {
            padding-block: var(--space-10)
        }

        .ps-10--sm {
            padding-left: var(--space-10)
        }

        .pe-10--sm {
            padding-right: var(--space-10)
        }

        .pt-10--sm {
            padding-top: var(--space-10)
        }

        .pb-10--sm {
            padding-bottom: var(--space-10)
        }

        .mx-auto--sm {
            margin-inline:auto}

        .m-0--sm {
            margin: 0
        }

        .mx-0--sm {
            margin-inline:0}

        .my-0--sm {
            margin-block:0}

        .ms-0--sm {
            margin-left: 0
        }

        .mt-0--sm {
            margin-top: 0
        }

        .me-0--sm {
            margin-right: 0
        }

        .mb-0--sm {
            margin-bottom: 0
        }

        .m-1--sm {
            margin: var(--space-1)
        }

        .mx-1--sm {
            margin-inline:var(--space-1)}

        .my-1--sm {
            margin-block: var(--space-1)
        }

        .ms-1--sm {
            margin-left: var(--space-1)
        }

        .me-1--sm {
            margin-right: var(--space-1)
        }

        .mt-1--sm {
            margin-top: var(--space-1)
        }

        .mb-1--sm {
            margin-bottom: var(--space-1)
        }

        .m-2--sm {
            margin: var(--space-2)
        }

        .mx-2--sm {
            margin-inline:var(--space-2)}

        .my-2--sm {
            margin-block: var(--space-2)
        }

        .ms-2--sm {
            margin-left: var(--space-2)
        }

        .me-2--sm {
            margin-right: var(--space-2)
        }

        .mt-2--sm {
            margin-top: var(--space-2)
        }

        .mb-2--sm {
            margin-bottom: var(--space-2)
        }

        .m-3--sm {
            margin: var(--space-3)
        }

        .mx-3--sm {
            margin-inline:var(--space-3)}

        .my-3--sm {
            margin-block: var(--space-3)
        }

        .ms-3--sm {
            margin-left: var(--space-3)
        }

        .me-3--sm {
            margin-right: var(--space-3)
        }

        .mt-3--sm {
            margin-top: var(--space-3)
        }

        .mb-3--sm {
            margin-bottom: var(--space-3)
        }

        .m-4--sm {
            margin: var(--space-4)
        }

        .mx-4--sm {
            margin-inline:var(--space-4)}

        .my-4--sm {
            margin-block: var(--space-4)
        }

        .ms-4--sm {
            margin-left: var(--space-4)
        }

        .me-4--sm {
            margin-right: var(--space-4)
        }

        .mt-4--sm {
            margin-top: var(--space-4)
        }

        .mb-4--sm {
            margin-bottom: var(--space-4)
        }

        .m-5--sm {
            margin: var(--space-5)
        }

        .mx-5--sm {
            margin-inline:var(--space-5)}

        .my-5--sm {
            margin-block: var(--space-5)
        }

        .ms-5--sm {
            margin-left: var(--space-5)
        }

        .me-5--sm {
            margin-right: var(--space-5)
        }

        .mt-5--sm {
            margin-top: var(--space-5)
        }

        .mb-5--sm {
            margin-bottom: var(--space-5)
        }

        .m-6--sm {
            margin: var(--space-6)
        }

        .mx-6--sm {
            margin-inline:var(--space-6)}

        .my-6--sm {
            margin-block: var(--space-6)
        }

        .ms-6--sm {
            margin-left: var(--space-6)
        }

        .me-6--sm {
            margin-right: var(--space-6)
        }

        .mt-6--sm {
            margin-top: var(--space-6)
        }

        .mb-6--sm {
            margin-bottom: var(--space-6)
        }

        .m-7--sm {
            margin: var(--space-7)
        }

        .mx-7--sm {
            margin-inline:var(--space-7)}

        .my-7--sm {
            margin-block: var(--space-7)
        }

        .ms-7--sm {
            margin-left: var(--space-7)
        }

        .me-7--sm {
            margin-right: var(--space-7)
        }

        .mt-7--sm {
            margin-top: var(--space-7)
        }

        .mb-7--sm {
            margin-bottom: var(--space-7)
        }

        .m-8--sm {
            margin: var(--space-8)
        }

        .mx-8--sm {
            margin-inline:var(--space-8)}

        .my-8--sm {
            margin-block: var(--space-8)
        }

        .ms-8--sm {
            margin-left: var(--space-8)
        }

        .me-8--sm {
            margin-right: var(--space-8)
        }

        .mt-8--sm {
            margin-top: var(--space-8)
        }

        .mb-8--sm {
            margin-bottom: var(--space-8)
        }

        .m-9--sm {
            margin: var(--space-9)
        }

        .mx-9--sm {
            margin-inline:var(--space-9)}

        .my-9--sm {
            margin-block: var(--space-9)
        }

        .ms-9--sm {
            margin-left: var(--space-9)
        }

        .me-9--sm {
            margin-right: var(--space-9)
        }

        .mt-9--sm {
            margin-top: var(--space-9)
        }

        .mb-9--sm {
            margin-bottom: var(--space-9)
        }

        .m-10--sm {
            margin: var(--space-10)
        }

        .mx-10--sm {
            margin-inline:var(--space-10)}

        .my-10--sm {
            margin-block: var(--space-10)
        }

        .ms-10--sm {
            margin-left: var(--space-10)
        }

        .me-10--sm {
            margin-right: var(--space-10)
        }

        .mt-10--sm {
            margin-top: var(--space-10)
        }

        .mb-10--sm {
            margin-bottom: var(--space-10)
        }
    }

    @media (min-width: 48rem) {
        .g-0--md {
            --gap:0
        }

        .g-1--md {
            --gap: var(--space-1)
        }

        .g-2--md {
            --gap: var(--space-2)
        }

        .g-3--md {
            --gap: var(--space-3)
        }

        .g-4--md {
            --gap: var(--space-4)
        }

        .g-5--md {
            --gap: var(--space-5)
        }

        .g-6--md {
            --gap: var(--space-6)
        }

        .g-7--md {
            --gap: var(--space-7)
        }

        .g-8--md {
            --gap: var(--space-8)
        }

        .g-9--md {
            --gap: var(--space-9)
        }

        .g-10--md {
            --gap: var(--space-10)
        }

        .p-0--md {
            padding: 0
        }

        .px-0--md {
            padding-inline:0}

        .py-0--md {
            padding-block:0}

        .ps-0--md {
            padding-left: 0
        }

        .pt-0--md {
            padding-top: 0
        }

        .pe-0--md {
            padding-right: 0
        }

        .pb-0--md {
            padding-bottom: 0
        }

        .p-1--md {
            padding: var(--space-1)
        }

        .px-1--md {
            padding-inline:var(--space-1)}

        .py-1--md {
            padding-block: var(--space-1)
        }

        .ps-1--md {
            padding-left: var(--space-1)
        }

        .pe-1--md {
            padding-right: var(--space-1)
        }

        .pt-1--md {
            padding-top: var(--space-1)
        }

        .pb-1--md {
            padding-bottom: var(--space-1)
        }

        .p-2--md {
            padding: var(--space-2)
        }

        .px-2--md {
            padding-inline:var(--space-2)}

        .py-2--md {
            padding-block: var(--space-2)
        }

        .ps-2--md {
            padding-left: var(--space-2)
        }

        .pe-2--md {
            padding-right: var(--space-2)
        }

        .pt-2--md {
            padding-top: var(--space-2)
        }

        .pb-2--md {
            padding-bottom: var(--space-2)
        }

        .p-3--md {
            padding: var(--space-3)
        }

        .px-3--md {
            padding-inline:var(--space-3)}

        .py-3--md {
            padding-block: var(--space-3)
        }

        .ps-3--md {
            padding-left: var(--space-3)
        }

        .pe-3--md {
            padding-right: var(--space-3)
        }

        .pt-3--md {
            padding-top: var(--space-3)
        }

        .pb-3--md {
            padding-bottom: var(--space-3)
        }

        .p-4--md {
            padding: var(--space-4)
        }

        .px-4--md {
            padding-inline:var(--space-4)}

        .py-4--md {
            padding-block: var(--space-4)
        }

        .ps-4--md {
            padding-left: var(--space-4)
        }

        .pe-4--md {
            padding-right: var(--space-4)
        }

        .pt-4--md {
            padding-top: var(--space-4)
        }

        .pb-4--md {
            padding-bottom: var(--space-4)
        }

        .p-5--md {
            padding: var(--space-5)
        }

        .px-5--md {
            padding-inline:var(--space-5)}

        .py-5--md {
            padding-block: var(--space-5)
        }

        .ps-5--md {
            padding-left: var(--space-5)
        }

        .pe-5--md {
            padding-right: var(--space-5)
        }

        .pt-5--md {
            padding-top: var(--space-5)
        }

        .pb-5--md {
            padding-bottom: var(--space-5)
        }

        .p-6--md {
            padding: var(--space-6)
        }

        .px-6--md {
            padding-inline:var(--space-6)}

        .py-6--md {
            padding-block: var(--space-6)
        }

        .ps-6--md {
            padding-left: var(--space-6)
        }

        .pe-6--md {
            padding-right: var(--space-6)
        }

        .pt-6--md {
            padding-top: var(--space-6)
        }

        .pb-6--md {
            padding-bottom: var(--space-6)
        }

        .p-7--md {
            padding: var(--space-7)
        }

        .px-7--md {
            padding-inline:var(--space-7)}

        .py-7--md {
            padding-block: var(--space-7)
        }

        .ps-7--md {
            padding-left: var(--space-7)
        }

        .pe-7--md {
            padding-right: var(--space-7)
        }

        .pt-7--md {
            padding-top: var(--space-7)
        }

        .pb-7--md {
            padding-bottom: var(--space-7)
        }

        .p-8--md {
            padding: var(--space-8)
        }

        .px-8--md {
            padding-inline:var(--space-8)}

        .py-8--md {
            padding-block: var(--space-8)
        }

        .ps-8--md {
            padding-left: var(--space-8)
        }

        .pe-8--md {
            padding-right: var(--space-8)
        }

        .pt-8--md {
            padding-top: var(--space-8)
        }

        .pb-8--md {
            padding-bottom: var(--space-8)
        }

        .p-9--md {
            padding: var(--space-9)
        }

        .px-9--md {
            padding-inline:var(--space-9)}

        .py-9--md {
            padding-block: var(--space-9)
        }

        .ps-9--md {
            padding-left: var(--space-9)
        }

        .pe-9--md {
            padding-right: var(--space-9)
        }

        .pt-9--md {
            padding-top: var(--space-9)
        }

        .pb-9--md {
            padding-bottom: var(--space-9)
        }

        .p-10--md {
            padding: var(--space-10)
        }

        .px-10--md {
            padding-inline:var(--space-10)}

        .py-10--md {
            padding-block: var(--space-10)
        }

        .ps-10--md {
            padding-left: var(--space-10)
        }

        .pe-10--md {
            padding-right: var(--space-10)
        }

        .pt-10--md {
            padding-top: var(--space-10)
        }

        .pb-10--md {
            padding-bottom: var(--space-10)
        }

        .mx-auto--md {
            margin-inline:auto}

        .m-0--md {
            margin: 0
        }

        .mx-0--md {
            margin-inline:0}

        .my-0--md {
            margin-block:0}

        .ms-0--md {
            margin-left: 0
        }

        .mt-0--md {
            margin-top: 0
        }

        .me-0--md {
            margin-right: 0
        }

        .mb-0--md {
            margin-bottom: 0
        }

        .m-1--md {
            margin: var(--space-1)
        }

        .mx-1--md {
            margin-inline:var(--space-1)}

        .my-1--md {
            margin-block: var(--space-1)
        }

        .ms-1--md {
            margin-left: var(--space-1)
        }

        .me-1--md {
            margin-right: var(--space-1)
        }

        .mt-1--md {
            margin-top: var(--space-1)
        }

        .mb-1--md {
            margin-bottom: var(--space-1)
        }

        .m-2--md {
            margin: var(--space-2)
        }

        .mx-2--md {
            margin-inline:var(--space-2)}

        .my-2--md {
            margin-block: var(--space-2)
        }

        .ms-2--md {
            margin-left: var(--space-2)
        }

        .me-2--md {
            margin-right: var(--space-2)
        }

        .mt-2--md {
            margin-top: var(--space-2)
        }

        .mb-2--md {
            margin-bottom: var(--space-2)
        }

        .m-3--md {
            margin: var(--space-3)
        }

        .mx-3--md {
            margin-inline:var(--space-3)}

        .my-3--md {
            margin-block: var(--space-3)
        }

        .ms-3--md {
            margin-left: var(--space-3)
        }

        .me-3--md {
            margin-right: var(--space-3)
        }

        .mt-3--md {
            margin-top: var(--space-3)
        }

        .mb-3--md {
            margin-bottom: var(--space-3)
        }

        .m-4--md {
            margin: var(--space-4)
        }

        .mx-4--md {
            margin-inline:var(--space-4)}

        .my-4--md {
            margin-block: var(--space-4)
        }

        .ms-4--md {
            margin-left: var(--space-4)
        }

        .me-4--md {
            margin-right: var(--space-4)
        }

        .mt-4--md {
            margin-top: var(--space-4)
        }

        .mb-4--md {
            margin-bottom: var(--space-4)
        }

        .m-5--md {
            margin: var(--space-5)
        }

        .mx-5--md {
            margin-inline:var(--space-5)}

        .my-5--md {
            margin-block: var(--space-5)
        }

        .ms-5--md {
            margin-left: var(--space-5)
        }

        .me-5--md {
            margin-right: var(--space-5)
        }

        .mt-5--md {
            margin-top: var(--space-5)
        }

        .mb-5--md {
            margin-bottom: var(--space-5)
        }

        .m-6--md {
            margin: var(--space-6)
        }

        .mx-6--md {
            margin-inline:var(--space-6)}

        .my-6--md {
            margin-block: var(--space-6)
        }

        .ms-6--md {
            margin-left: var(--space-6)
        }

        .me-6--md {
            margin-right: var(--space-6)
        }

        .mt-6--md {
            margin-top: var(--space-6)
        }

        .mb-6--md {
            margin-bottom: var(--space-6)
        }

        .m-7--md {
            margin: var(--space-7)
        }

        .mx-7--md {
            margin-inline:var(--space-7)}

        .my-7--md {
            margin-block: var(--space-7)
        }

        .ms-7--md {
            margin-left: var(--space-7)
        }

        .me-7--md {
            margin-right: var(--space-7)
        }

        .mt-7--md {
            margin-top: var(--space-7)
        }

        .mb-7--md {
            margin-bottom: var(--space-7)
        }

        .m-8--md {
            margin: var(--space-8)
        }

        .mx-8--md {
            margin-inline:var(--space-8)}

        .my-8--md {
            margin-block: var(--space-8)
        }

        .ms-8--md {
            margin-left: var(--space-8)
        }

        .me-8--md {
            margin-right: var(--space-8)
        }

        .mt-8--md {
            margin-top: var(--space-8)
        }

        .mb-8--md {
            margin-bottom: var(--space-8)
        }

        .m-9--md {
            margin: var(--space-9)
        }

        .mx-9--md {
            margin-inline:var(--space-9)}

        .my-9--md {
            margin-block: var(--space-9)
        }

        .ms-9--md {
            margin-left: var(--space-9)
        }

        .me-9--md {
            margin-right: var(--space-9)
        }

        .mt-9--md {
            margin-top: var(--space-9)
        }

        .mb-9--md {
            margin-bottom: var(--space-9)
        }

        .m-10--md {
            margin: var(--space-10)
        }

        .mx-10--md {
            margin-inline:var(--space-10)}

        .my-10--md {
            margin-block: var(--space-10)
        }

        .ms-10--md {
            margin-left: var(--space-10)
        }

        .me-10--md {
            margin-right: var(--space-10)
        }

        .mt-10--md {
            margin-top: var(--space-10)
        }

        .mb-10--md {
            margin-bottom: var(--space-10)
        }
    }

    @media (min-width: 62rem) {
        .g-0--lg {
            --gap:0
        }

        .g-1--lg {
            --gap: var(--space-1)
        }

        .g-2--lg {
            --gap: var(--space-2)
        }

        .g-3--lg {
            --gap: var(--space-3)
        }

        .g-4--lg {
            --gap: var(--space-4)
        }

        .g-5--lg {
            --gap: var(--space-5)
        }

        .g-6--lg {
            --gap: var(--space-6)
        }

        .g-7--lg {
            --gap: var(--space-7)
        }

        .g-8--lg {
            --gap: var(--space-8)
        }

        .g-9--lg {
            --gap: var(--space-9)
        }

        .g-10--lg {
            --gap: var(--space-10)
        }

        .p-0--lg {
            padding: 0
        }

        .px-0--lg {
            padding-inline:0}

        .py-0--lg {
            padding-block:0}

        .ps-0--lg {
            padding-left: 0
        }

        .pt-0--lg {
            padding-top: 0
        }

        .pe-0--lg {
            padding-right: 0
        }

        .pb-0--lg {
            padding-bottom: 0
        }

        .p-1--lg {
            padding: var(--space-1)
        }

        .px-1--lg {
            padding-inline:var(--space-1)}

        .py-1--lg {
            padding-block: var(--space-1)
        }

        .ps-1--lg {
            padding-left: var(--space-1)
        }

        .pe-1--lg {
            padding-right: var(--space-1)
        }

        .pt-1--lg {
            padding-top: var(--space-1)
        }

        .pb-1--lg {
            padding-bottom: var(--space-1)
        }

        .p-2--lg {
            padding: var(--space-2)
        }

        .px-2--lg {
            padding-inline:var(--space-2)}

        .py-2--lg {
            padding-block: var(--space-2)
        }

        .ps-2--lg {
            padding-left: var(--space-2)
        }

        .pe-2--lg {
            padding-right: var(--space-2)
        }

        .pt-2--lg {
            padding-top: var(--space-2)
        }

        .pb-2--lg {
            padding-bottom: var(--space-2)
        }

        .p-3--lg {
            padding: var(--space-3)
        }

        .px-3--lg {
            padding-inline:var(--space-3)}

        .py-3--lg {
            padding-block: var(--space-3)
        }

        .ps-3--lg {
            padding-left: var(--space-3)
        }

        .pe-3--lg {
            padding-right: var(--space-3)
        }

        .pt-3--lg {
            padding-top: var(--space-3)
        }

        .pb-3--lg {
            padding-bottom: var(--space-3)
        }

        .p-4--lg {
            padding: var(--space-4)
        }

        .px-4--lg {
            padding-inline:var(--space-4)}

        .py-4--lg {
            padding-block: var(--space-4)
        }

        .ps-4--lg {
            padding-left: var(--space-4)
        }

        .pe-4--lg {
            padding-right: var(--space-4)
        }

        .pt-4--lg {
            padding-top: var(--space-4)
        }

        .pb-4--lg {
            padding-bottom: var(--space-4)
        }

        .p-5--lg {
            padding: var(--space-5)
        }

        .px-5--lg {
            padding-inline:var(--space-5)}

        .py-5--lg {
            padding-block: var(--space-5)
        }

        .ps-5--lg {
            padding-left: var(--space-5)
        }

        .pe-5--lg {
            padding-right: var(--space-5)
        }

        .pt-5--lg {
            padding-top: var(--space-5)
        }

        .pb-5--lg {
            padding-bottom: var(--space-5)
        }

        .p-6--lg {
            padding: var(--space-6)
        }

        .px-6--lg {
            padding-inline:var(--space-6)}

        .py-6--lg {
            padding-block: var(--space-6)
        }

        .ps-6--lg {
            padding-left: var(--space-6)
        }

        .pe-6--lg {
            padding-right: var(--space-6)
        }

        .pt-6--lg {
            padding-top: var(--space-6)
        }

        .pb-6--lg {
            padding-bottom: var(--space-6)
        }

        .p-7--lg {
            padding: var(--space-7)
        }

        .px-7--lg {
            padding-inline:var(--space-7)}

        .py-7--lg {
            padding-block: var(--space-7)
        }

        .ps-7--lg {
            padding-left: var(--space-7)
        }

        .pe-7--lg {
            padding-right: var(--space-7)
        }

        .pt-7--lg {
            padding-top: var(--space-7)
        }

        .pb-7--lg {
            padding-bottom: var(--space-7)
        }

        .p-8--lg {
            padding: var(--space-8)
        }

        .px-8--lg {
            padding-inline:var(--space-8)}

        .py-8--lg {
            padding-block: var(--space-8)
        }

        .ps-8--lg {
            padding-left: var(--space-8)
        }

        .pe-8--lg {
            padding-right: var(--space-8)
        }

        .pt-8--lg {
            padding-top: var(--space-8)
        }

        .pb-8--lg {
            padding-bottom: var(--space-8)
        }

        .p-9--lg {
            padding: var(--space-9)
        }

        .px-9--lg {
            padding-inline:var(--space-9)}

        .py-9--lg {
            padding-block: var(--space-9)
        }

        .ps-9--lg {
            padding-left: var(--space-9)
        }

        .pe-9--lg {
            padding-right: var(--space-9)
        }

        .pt-9--lg {
            padding-top: var(--space-9)
        }

        .pb-9--lg {
            padding-bottom: var(--space-9)
        }

        .p-10--lg {
            padding: var(--space-10)
        }

        .px-10--lg {
            padding-inline:var(--space-10)}

        .py-10--lg {
            padding-block: var(--space-10)
        }

        .ps-10--lg {
            padding-left: var(--space-10)
        }

        .pe-10--lg {
            padding-right: var(--space-10)
        }

        .pt-10--lg {
            padding-top: var(--space-10)
        }

        .pb-10--lg {
            padding-bottom: var(--space-10)
        }

        .mx-auto--lg {
            margin-inline:auto}

        .m-0--lg {
            margin: 0
        }

        .mx-0--lg {
            margin-inline:0}

        .my-0--lg {
            margin-block:0}

        .ms-0--lg {
            margin-left: 0
        }

        .mt-0--lg {
            margin-top: 0
        }

        .me-0--lg {
            margin-right: 0
        }

        .mb-0--lg {
            margin-bottom: 0
        }

        .m-1--lg {
            margin: var(--space-1)
        }

        .mx-1--lg {
            margin-inline:var(--space-1)}

        .my-1--lg {
            margin-block: var(--space-1)
        }

        .ms-1--lg {
            margin-left: var(--space-1)
        }

        .me-1--lg {
            margin-right: var(--space-1)
        }

        .mt-1--lg {
            margin-top: var(--space-1)
        }

        .mb-1--lg {
            margin-bottom: var(--space-1)
        }

        .m-2--lg {
            margin: var(--space-2)
        }

        .mx-2--lg {
            margin-inline:var(--space-2)}

        .my-2--lg {
            margin-block: var(--space-2)
        }

        .ms-2--lg {
            margin-left: var(--space-2)
        }

        .me-2--lg {
            margin-right: var(--space-2)
        }

        .mt-2--lg {
            margin-top: var(--space-2)
        }

        .mb-2--lg {
            margin-bottom: var(--space-2)
        }

        .m-3--lg {
            margin: var(--space-3)
        }

        .mx-3--lg {
            margin-inline:var(--space-3)}

        .my-3--lg {
            margin-block: var(--space-3)
        }

        .ms-3--lg {
            margin-left: var(--space-3)
        }

        .me-3--lg {
            margin-right: var(--space-3)
        }

        .mt-3--lg {
            margin-top: var(--space-3)
        }

        .mb-3--lg {
            margin-bottom: var(--space-3)
        }

        .m-4--lg {
            margin: var(--space-4)
        }

        .mx-4--lg {
            margin-inline:var(--space-4)}

        .my-4--lg {
            margin-block: var(--space-4)
        }

        .ms-4--lg {
            margin-left: var(--space-4)
        }

        .me-4--lg {
            margin-right: var(--space-4)
        }

        .mt-4--lg {
            margin-top: var(--space-4)
        }

        .mb-4--lg {
            margin-bottom: var(--space-4)
        }

        .m-5--lg {
            margin: var(--space-5)
        }

        .mx-5--lg {
            margin-inline:var(--space-5)}

        .my-5--lg {
            margin-block: var(--space-5)
        }

        .ms-5--lg {
            margin-left: var(--space-5)
        }

        .me-5--lg {
            margin-right: var(--space-5)
        }

        .mt-5--lg {
            margin-top: var(--space-5)
        }

        .mb-5--lg {
            margin-bottom: var(--space-5)
        }

        .m-6--lg {
            margin: var(--space-6)
        }

        .mx-6--lg {
            margin-inline:var(--space-6)}

        .my-6--lg {
            margin-block: var(--space-6)
        }

        .ms-6--lg {
            margin-left: var(--space-6)
        }

        .me-6--lg {
            margin-right: var(--space-6)
        }

        .mt-6--lg {
            margin-top: var(--space-6)
        }

        .mb-6--lg {
            margin-bottom: var(--space-6)
        }

        .m-7--lg {
            margin: var(--space-7)
        }

        .mx-7--lg {
            margin-inline:var(--space-7)}

        .my-7--lg {
            margin-block: var(--space-7)
        }

        .ms-7--lg {
            margin-left: var(--space-7)
        }

        .me-7--lg {
            margin-right: var(--space-7)
        }

        .mt-7--lg {
            margin-top: var(--space-7)
        }

        .mb-7--lg {
            margin-bottom: var(--space-7)
        }

        .m-8--lg {
            margin: var(--space-8)
        }

        .mx-8--lg {
            margin-inline:var(--space-8)}

        .my-8--lg {
            margin-block: var(--space-8)
        }

        .ms-8--lg {
            margin-left: var(--space-8)
        }

        .me-8--lg {
            margin-right: var(--space-8)
        }

        .mt-8--lg {
            margin-top: var(--space-8)
        }

        .mb-8--lg {
            margin-bottom: var(--space-8)
        }

        .m-9--lg {
            margin: var(--space-9)
        }

        .mx-9--lg {
            margin-inline:var(--space-9)}

        .my-9--lg {
            margin-block: var(--space-9)
        }

        .ms-9--lg {
            margin-left: var(--space-9)
        }

        .me-9--lg {
            margin-right: var(--space-9)
        }

        .mt-9--lg {
            margin-top: var(--space-9)
        }

        .mb-9--lg {
            margin-bottom: var(--space-9)
        }

        .m-10--lg {
            margin: var(--space-10)
        }

        .mx-10--lg {
            margin-inline:var(--space-10)}

        .my-10--lg {
            margin-block: var(--space-10)
        }

        .ms-10--lg {
            margin-left: var(--space-10)
        }

        .me-10--lg {
            margin-right: var(--space-10)
        }

        .mt-10--lg {
            margin-top: var(--space-10)
        }

        .mb-10--lg {
            margin-bottom: var(--space-10)
        }
    }

    @media (min-width: 75rem) {
        .p-0--xl {
            padding:0
        }

        .px-0--xl {
            padding-inline:0}

        .py-0--xl {
            padding-block:0}

        .ps-0--xl {
            padding-left: 0
        }

        .pt-0--xl {
            padding-top: 0
        }

        .pe-0--xl {
            padding-right: 0
        }

        .pb-0--xl {
            padding-bottom: 0
        }

        .p-1--xl {
            padding: var(--space-1)
        }

        .px-1--xl {
            padding-inline:var(--space-1)}

        .py-1--xl {
            padding-block: var(--space-1)
        }

        .ps-1--xl {
            padding-left: var(--space-1)
        }

        .pe-1--xl {
            padding-right: var(--space-1)
        }

        .pt-1--xl {
            padding-top: var(--space-1)
        }

        .pb-1--xl {
            padding-bottom: var(--space-1)
        }

        .p-2--xl {
            padding: var(--space-2)
        }

        .px-2--xl {
            padding-inline:var(--space-2)}

        .py-2--xl {
            padding-block: var(--space-2)
        }

        .ps-2--xl {
            padding-left: var(--space-2)
        }

        .pe-2--xl {
            padding-right: var(--space-2)
        }

        .pt-2--xl {
            padding-top: var(--space-2)
        }

        .pb-2--xl {
            padding-bottom: var(--space-2)
        }

        .p-3--xl {
            padding: var(--space-3)
        }

        .px-3--xl {
            padding-inline:var(--space-3)}

        .py-3--xl {
            padding-block: var(--space-3)
        }

        .ps-3--xl {
            padding-left: var(--space-3)
        }

        .pe-3--xl {
            padding-right: var(--space-3)
        }

        .pt-3--xl {
            padding-top: var(--space-3)
        }

        .pb-3--xl {
            padding-bottom: var(--space-3)
        }

        .p-4--xl {
            padding: var(--space-4)
        }

        .px-4--xl {
            padding-inline:var(--space-4)}

        .py-4--xl {
            padding-block: var(--space-4)
        }

        .ps-4--xl {
            padding-left: var(--space-4)
        }

        .pe-4--xl {
            padding-right: var(--space-4)
        }

        .pt-4--xl {
            padding-top: var(--space-4)
        }

        .pb-4--xl {
            padding-bottom: var(--space-4)
        }

        .p-5--xl {
            padding: var(--space-5)
        }

        .px-5--xl {
            padding-inline:var(--space-5)}

        .py-5--xl {
            padding-block: var(--space-5)
        }

        .ps-5--xl {
            padding-left: var(--space-5)
        }

        .pe-5--xl {
            padding-right: var(--space-5)
        }

        .pt-5--xl {
            padding-top: var(--space-5)
        }

        .pb-5--xl {
            padding-bottom: var(--space-5)
        }

        .p-6--xl {
            padding: var(--space-6)
        }

        .px-6--xl {
            padding-inline:var(--space-6)}

        .py-6--xl {
            padding-block: var(--space-6)
        }

        .ps-6--xl {
            padding-left: var(--space-6)
        }

        .pe-6--xl {
            padding-right: var(--space-6)
        }

        .pt-6--xl {
            padding-top: var(--space-6)
        }

        .pb-6--xl {
            padding-bottom: var(--space-6)
        }

        .p-7--xl {
            padding: var(--space-7)
        }

        .px-7--xl {
            padding-inline:var(--space-7)}

        .py-7--xl {
            padding-block: var(--space-7)
        }

        .ps-7--xl {
            padding-left: var(--space-7)
        }

        .pe-7--xl {
            padding-right: var(--space-7)
        }

        .pt-7--xl {
            padding-top: var(--space-7)
        }

        .pb-7--xl {
            padding-bottom: var(--space-7)
        }

        .p-8--xl {
            padding: var(--space-8)
        }

        .px-8--xl {
            padding-inline:var(--space-8)}

        .py-8--xl {
            padding-block: var(--space-8)
        }

        .ps-8--xl {
            padding-left: var(--space-8)
        }

        .pe-8--xl {
            padding-right: var(--space-8)
        }

        .pt-8--xl {
            padding-top: var(--space-8)
        }

        .pb-8--xl {
            padding-bottom: var(--space-8)
        }

        .p-9--xl {
            padding: var(--space-9)
        }

        .px-9--xl {
            padding-inline:var(--space-9)}

        .py-9--xl {
            padding-block: var(--space-9)
        }

        .ps-9--xl {
            padding-left: var(--space-9)
        }

        .pe-9--xl {
            padding-right: var(--space-9)
        }

        .pt-9--xl {
            padding-top: var(--space-9)
        }

        .pb-9--xl {
            padding-bottom: var(--space-9)
        }

        .p-10--xl {
            padding: var(--space-10)
        }

        .px-10--xl {
            padding-inline:var(--space-10)}

        .py-10--xl {
            padding-block: var(--space-10)
        }

        .ps-10--xl {
            padding-left: var(--space-10)
        }

        .pe-10--xl {
            padding-right: var(--space-10)
        }

        .pt-10--xl {
            padding-top: var(--space-10)
        }

        .pb-10--xl {
            padding-bottom: var(--space-10)
        }

        .mx-auto--xl {
            margin-inline:auto}

        .m-0--xl {
            margin: 0
        }

        .mx-0--xl {
            margin-inline:0}

        .my-0--xl {
            margin-block:0}

        .ms-0--xl {
            margin-left: 0
        }

        .mt-0--xl {
            margin-top: 0
        }

        .me-0--xl {
            margin-right: 0
        }

        .mb-0--xl {
            margin-bottom: 0
        }

        .m-1--xl {
            margin: var(--space-1)
        }

        .mx-1--xl {
            margin-inline:var(--space-1)}

        .my-1--xl {
            margin-block: var(--space-1)
        }

        .ms-1--xl {
            margin-left: var(--space-1)
        }

        .me-1--xl {
            margin-right: var(--space-1)
        }

        .mt-1--xl {
            margin-top: var(--space-1)
        }

        .mb-1--xl {
            margin-bottom: var(--space-1)
        }

        .m-2--xl {
            margin: var(--space-2)
        }

        .mx-2--xl {
            margin-inline:var(--space-2)}

        .my-2--xl {
            margin-block: var(--space-2)
        }

        .ms-2--xl {
            margin-left: var(--space-2)
        }

        .me-2--xl {
            margin-right: var(--space-2)
        }

        .mt-2--xl {
            margin-top: var(--space-2)
        }

        .mb-2--xl {
            margin-bottom: var(--space-2)
        }

        .m-3--xl {
            margin: var(--space-3)
        }

        .mx-3--xl {
            margin-inline:var(--space-3)}

        .my-3--xl {
            margin-block: var(--space-3)
        }

        .ms-3--xl {
            margin-left: var(--space-3)
        }

        .me-3--xl {
            margin-right: var(--space-3)
        }

        .mt-3--xl {
            margin-top: var(--space-3)
        }

        .mb-3--xl {
            margin-bottom: var(--space-3)
        }

        .m-4--xl {
            margin: var(--space-4)
        }

        .mx-4--xl {
            margin-inline:var(--space-4)}

        .my-4--xl {
            margin-block: var(--space-4)
        }

        .ms-4--xl {
            margin-left: var(--space-4)
        }

        .me-4--xl {
            margin-right: var(--space-4)
        }

        .mt-4--xl {
            margin-top: var(--space-4)
        }

        .mb-4--xl {
            margin-bottom: var(--space-4)
        }

        .m-5--xl {
            margin: var(--space-5)
        }

        .mx-5--xl {
            margin-inline:var(--space-5)}

        .my-5--xl {
            margin-block: var(--space-5)
        }

        .ms-5--xl {
            margin-left: var(--space-5)
        }

        .me-5--xl {
            margin-right: var(--space-5)
        }

        .mt-5--xl {
            margin-top: var(--space-5)
        }

        .mb-5--xl {
            margin-bottom: var(--space-5)
        }

        .m-6--xl {
            margin: var(--space-6)
        }

        .mx-6--xl {
            margin-inline:var(--space-6)}

        .my-6--xl {
            margin-block: var(--space-6)
        }

        .ms-6--xl {
            margin-left: var(--space-6)
        }

        .me-6--xl {
            margin-right: var(--space-6)
        }

        .mt-6--xl {
            margin-top: var(--space-6)
        }

        .mb-6--xl {
            margin-bottom: var(--space-6)
        }

        .m-7--xl {
            margin: var(--space-7)
        }

        .mx-7--xl {
            margin-inline:var(--space-7)}

        .my-7--xl {
            margin-block: var(--space-7)
        }

        .ms-7--xl {
            margin-left: var(--space-7)
        }

        .me-7--xl {
            margin-right: var(--space-7)
        }

        .mt-7--xl {
            margin-top: var(--space-7)
        }

        .mb-7--xl {
            margin-bottom: var(--space-7)
        }

        .m-8--xl {
            margin: var(--space-8)
        }

        .mx-8--xl {
            margin-inline:var(--space-8)}

        .my-8--xl {
            margin-block: var(--space-8)
        }

        .ms-8--xl {
            margin-left: var(--space-8)
        }

        .me-8--xl {
            margin-right: var(--space-8)
        }

        .mt-8--xl {
            margin-top: var(--space-8)
        }

        .mb-8--xl {
            margin-bottom: var(--space-8)
        }

        .m-9--xl {
            margin: var(--space-9)
        }

        .mx-9--xl {
            margin-inline:var(--space-9)}

        .my-9--xl {
            margin-block: var(--space-9)
        }

        .ms-9--xl {
            margin-left: var(--space-9)
        }

        .me-9--xl {
            margin-right: var(--space-9)
        }

        .mt-9--xl {
            margin-top: var(--space-9)
        }

        .mb-9--xl {
            margin-bottom: var(--space-9)
        }

        .m-10--xl {
            margin: var(--space-10)
        }

        .mx-10--xl {
            margin-inline:var(--space-10)}

        .my-10--xl {
            margin-block: var(--space-10)
        }

        .ms-10--xl {
            margin-left: var(--space-10)
        }

        .me-10--xl {
            margin-right: var(--space-10)
        }

        .mt-10--xl {
            margin-top: var(--space-10)
        }

        .mb-10--xl {
            margin-bottom: var(--space-10)
        }
    }

    @media (min-width: 0rem) {
        .w-10 {
            width:10%
        }

        .w-20 {
            width: 20%
        }

        .w-30 {
            width: 30%
        }

        .w-40 {
            width: 40%
        }

        .w-50 {
            width: 50%
        }

        .w-60 {
            width: 60%
        }

        .w-70 {
            width: 70%
        }

        .w-80 {
            width: 80%
        }

        .w-90 {
            width: 90%
        }

        .w-100 {
            width: 100%
        }

        .h-50 {
            height: 50vh
        }

        .h-100 {
            height: 100vh
        }
    }

    @media (min-width: 36rem) {
        .w-10--sm {
            width:10%
        }

        .w-20--sm {
            width: 20%
        }

        .w-30--sm {
            width: 30%
        }

        .w-40--sm {
            width: 40%
        }

        .w-50--sm {
            width: 50%
        }

        .w-60--sm {
            width: 60%
        }

        .w-70--sm {
            width: 70%
        }

        .w-80--sm {
            width: 80%
        }

        .w-90--sm {
            width: 90%
        }

        .w-100--sm {
            width: 100%
        }

        .h-50--sm {
            height: 50vh
        }

        .h-100--sm {
            height: 100vh
        }
    }

    @media (min-width: 48rem) {
        .w-10--md {
            width:10%
        }

        .w-20--md {
            width: 20%
        }

        .w-30--md {
            width: 30%
        }

        .w-40--md {
            width: 40%
        }

        .w-50--md {
            width: 50%
        }

        .w-60--md {
            width: 60%
        }

        .w-70--md {
            width: 70%
        }

        .w-80--md {
            width: 80%
        }

        .w-90--md {
            width: 90%
        }

        .w-100--md {
            width: 100%
        }

        .h-50--md {
            height: 50vh
        }

        .h-100--md {
            height: 100vh
        }
    }

    @media (min-width: 62rem) {
        .w-10--lg {
            width:10%
        }

        .w-20--lg {
            width: 20%
        }

        .w-30--lg {
            width: 30%
        }

        .w-40--lg {
            width: 40%
        }

        .w-50--lg {
            width: 50%
        }

        .w-60--lg {
            width: 60%
        }

        .w-70--lg {
            width: 70%
        }

        .w-80--lg {
            width: 80%
        }

        .w-90--lg {
            width: 90%
        }

        .w-100--lg {
            width: 100%
        }

        .h-50--lg {
            height: 50vh
        }

        .h-100--lg {
            height: 100vh
        }
    }

    @media (min-width: 0rem) {
        .radius-0 {
            border-radius:0
        }

        .radius-1 {
            border-radius: var(--space-1)
        }

        .radius-2 {
            border-radius: var(--space-2)
        }

        .radius-3 {
            border-radius: var(--space-3)
        }

        .radius-4 {
            border-radius: var(--space-4)
        }

        .radius-5 {
            border-radius: var(--space-5)
        }

        .radius-6 {
            border-radius: var(--space-6)
        }

        .radius-7 {
            border-radius: var(--space-7)
        }

        .radius-8 {
            border-radius: var(--space-8)
        }

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

        .radius-circle,.radius-100 {
            border-radius: 100%
        }

        .radius-t-0 {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .radius-b-0 {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-l-0 {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

        .radius-r-0 {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-tl-0 {
            border-top-left-radius: 0
        }

        .radius-tr-0 {
            border-top-right-radius: 0
        }

        .radius-bl-0 {
            border-bottom-left-radius: 0
        }

        .radius-br-0 {
            border-bottom-right-radius: 0
        }
    }

    @media (min-width: 36rem) {
        .radius-0--sm {
            border-radius:0
        }

        .radius-1--sm {
            border-radius: var(--space-1)
        }

        .radius-2--sm {
            border-radius: var(--space-2)
        }

        .radius-3--sm {
            border-radius: var(--space-3)
        }

        .radius-4--sm {
            border-radius: var(--space-4)
        }

        .radius-5--sm {
            border-radius: var(--space-5)
        }

        .radius-6--sm {
            border-radius: var(--space-6)
        }

        .radius-7--sm {
            border-radius: var(--space-7)
        }

        .radius-8--sm {
            border-radius: var(--space-8)
        }

        .radius-pill--sm,.radius-50--sm {
            border-radius: 50rem
        }

        .radius-circle--sm,.radius-100--sm {
            border-radius: 100%
        }

        .radius-t-0--sm {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .radius-b-0--sm {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-l-0--sm {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

        .radius-r-0--sm {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-tl-0--sm {
            border-top-left-radius: 0
        }

        .radius-tr-0--sm {
            border-top-right-radius: 0
        }

        .radius-bl-0--sm {
            border-bottom-left-radius: 0
        }

        .radius-br-0--sm {
            border-bottom-right-radius: 0
        }
    }

    @media (min-width: 48rem) {
        .radius-0--md {
            border-radius:0
        }

        .radius-1--md {
            border-radius: var(--space-1)
        }

        .radius-2--md {
            border-radius: var(--space-2)
        }

        .radius-3--md {
            border-radius: var(--space-3)
        }

        .radius-4--md {
            border-radius: var(--space-4)
        }

        .radius-5--md {
            border-radius: var(--space-5)
        }

        .radius-6--md {
            border-radius: var(--space-6)
        }

        .radius-7--md {
            border-radius: var(--space-7)
        }

        .radius-8--md {
            border-radius: var(--space-8)
        }

        .radius-pill--md,.radius-50--md {
            border-radius: 50rem
        }

        .radius-circle--md,.radius-100--md {
            border-radius: 100%
        }

        .radius-t-0--md {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .radius-b-0--md {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-l-0--md {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

        .radius-r-0--md {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-tl-0--md {
            border-top-left-radius: 0
        }

        .radius-tr-0--md {
            border-top-right-radius: 0
        }

        .radius-bl-0--md {
            border-bottom-left-radius: 0
        }

        .radius-br-0--md {
            border-bottom-right-radius: 0
        }
    }

    @media (min-width: 62rem) {
        .radius-0--lg {
            border-radius:0
        }

        .radius-1--lg {
            border-radius: var(--space-1)
        }

        .radius-2--lg {
            border-radius: var(--space-2)
        }

        .radius-3--lg {
            border-radius: var(--space-3)
        }

        .radius-4--lg {
            border-radius: var(--space-4)
        }

        .radius-5--lg {
            border-radius: var(--space-5)
        }

        .radius-6--lg {
            border-radius: var(--space-6)
        }

        .radius-7--lg {
            border-radius: var(--space-7)
        }

        .radius-8--lg {
            border-radius: var(--space-8)
        }

        .radius-pill--lg,.radius-50--lg {
            border-radius: 50rem
        }

        .radius-circle--lg,.radius-100--lg {
            border-radius: 100%
        }

        .radius-t-0--lg {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .radius-b-0--lg {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-l-0--lg {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

        .radius-r-0--lg {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .radius-tl-0--lg {
            border-top-left-radius: 0
        }

        .radius-tr-0--lg {
            border-top-right-radius: 0
        }

        .radius-bl-0--lg {
            border-bottom-left-radius: 0
        }

        .radius-br-0--lg {
            border-bottom-right-radius: 0
        }
    }
}

@layer styles {
    @media (min-width: 0rem) {
        .contact-bar {
            padding-inline:var(--space-1);
            padding-block:var(--space-2);background-color: var(--color-tertiary-light);
            border-bottom: 1px solid var(--color-layer-3)
        }

        .contact-bar a {
            color: var(--color-primary);
            text-decoration: none;
            font-size: .8rem;
            font-weight: 400;
            text-transform: uppercase;
            transition: color 0.2s ease
        }

        .contact-bar a:hover {
            color: var(--color-primary)
        }
    }

    @media only screen and (max-width: 61.9375rem) {
        body.open {
            overflow:hidden
        }

        body.open:after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(0 0 0 / .5);
            z-index: 1
        }

        body.scroll #navigation .ul-wrapper {
            top: 100%
        }

        #navigation {
            width: 100%;
            display: flex;
            align-items: center;
            max-width: 80rem;
            height: 4rem;
            position: sticky;
            top: 0;
            left: 0;
            padding-left: 1rem;
            padding-right: 1rem;
            z-index: 10000;
            transition: top 0.3s,border-radius 0.3s,width 0.3s,max-width 0.3s
        }

        #navigation:before {
            content: "";
            width: 100%;
            height: 100%;
            background: var(--color-layer-1);
            box-shadow: rgb(149 157 165 / .2) 0 8px 24px;
            opacity: 1;
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: transform 0.2s,border-radius 0.3s ease-in-out
        }

        #navigation.active .ul-wrapper {
            transform: scaleY(1);
            transition-delay: 0.15s
        }

        #navigation.active .menu-item {
            opacity: 1;
            transform: translateY(0)
        }

        #navigation .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.5rem
        }

        #navigation .toggle {
            width: 2.5rem;
            height: 2.5rem;
            margin: 0 0 0 auto;
            background-color: #fff0;
            border: none;
            border-radius: var(--space-1);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 10;
            transition: transform 0.6s
        }

        #navigation .nav {
            order: 3
        }

        #navigation .active .line1 {
            top: 50%;
            transform: translate(-50%,-50%) rotate(225deg)
        }

        #navigation .active .line2 {
            top: 50%;
            transform: translate(-50%,-50%) translateY(0) rotate(-225deg);
            transform-origin: center
        }

        #navigation .active .line3 {
            opacity: 0;
            bottom: 100%
        }

        #navigation .box {
            width: clamp(1.5rem, 2vw, 1.75rem);
            height: 1rem;
            position: relative
        }

        #navigation .line {
            width: 100%;
            height: 2px;
            background-color: var(--color-primary);
            border-radius: 2px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%)
        }

        #navigation .line1 {
            top: 0;
            transition: transform 0.5s,top 0.3s,left 0.3s;
            animation-duration: 0.7s;
            animation-timing-function: ease;
            animation-direction: normal;
            animation-fill-mode: forwards;
            transform-origin: center
        }

        #navigation .line2 {
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            transition: top 0.3s,left 0.3s,transform 0.5s;
            animation-duration: 0.7s;
            animation-timing-function: ease;
            animation-direction: normal;
            animation-fill-mode: forwards
        }

        #navigation .line3 {
            bottom: 0;
            transition: bottom 0.3s,opacity 0.3s
        }

        #navigation .ul-wrapper {
            width: 100%;
            height: auto;
            padding: 2rem 0;
            background-color: var(--color-layer-1);
            position: absolute;
            z-index: 1;
            overflow: hidden;
            top: 4rem;
            left: 0;
            box-shadow: rgb(149 157 165 / .2) 0 8px 24px;
            transform: scaleY(0);
            transition: transform 0.4s;
            transform-origin: top
        }

        #navigation .nav-ul {
            width: calc(100% - 4rem);
            height: auto;
            max-height: 65vh;
            margin-inline:auto;margin-block:0;padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 1.25rem;
            overflow: auto
        }

        #navigation .menu-item {
            list-style: none;
            width: 100%;
            margin-right: 0;
            opacity: 0;
            transform: translateY(-70/16rem);
            transition: transform 0.6s,opacity 0.9s
        }

        #navigation .menu-item:nth-of-type(1) {
            transition-delay: 0.05s
        }

        #navigation .menu-item:nth-of-type(2) {
            transition-delay: 0.1s
        }

        #navigation .menu-item:nth-of-type(3) {
            transition-delay: 0.15s
        }

        #navigation .menu-item:nth-of-type(4) {
            transition-delay: 0.2s
        }

        #navigation .menu-item:nth-of-type(5) {
            transition-delay: 0.25s
        }

        #navigation .menu-item:nth-of-type(6) {
            transition-delay: 0.3s
        }

        #navigation .menu-item:nth-of-type(7) {
            transition-delay: 0.35s
        }

        #navigation .menu-item:nth-of-type(8) {
            transition-delay: 0.4s
        }

        #navigation .menu-item:nth-of-type(9) {
            transition-delay: 0.45s
        }

        #navigation .menu-item:nth-of-type(10) {
            transition-delay: 0.5s
        }

        #navigation .menu-item:nth-of-type(11) {
            transition-delay: 0.55s
        }

        #navigation .menu-item:nth-of-type(12) {
            transition-delay: 0.6s
        }

        #navigation .menu-item:nth-of-type(13) {
            transition-delay: 0.65s
        }

        #navigation .menu-item a {
            font-size: var(--fs-2);
            text-transform: uppercase;
            font-weight: 500;
            text-decoration: none;
            margin: 0;
            color: var(--color-text);
            display: inline-block;
            position: relative
        }

        #navigation .current-menu-item a {
            color: var(--color-secondary)
        }

        #navigation .menu-item:hover a {
            color: var(--color-secondary)
        }

        #navigation .btn {
            display: none
        }

        #navigation .menu-item-has-children {
            position: relative
        }

        #navigation .menu-item-has-children .sub-menu {
            background-color: hsla(from var(--color-layer-2) h s l / .5);
            height: auto;
            margin: .75rem 0 0 0;
            padding: .5rem .75rem;
            opacity: 1;
            visibility: visible
        }

        #navigation .menu-item-has-children a {
            display: block;
            opacity: 1
        }

        #navigation .menu-item-has-children .sub-menu .menu-item {
            position: relative;
            transition: opacity 0.3s
        }

        #navigation .drop-icon {
            width: .9375rem;
            height: auto;
            position: absolute;
            top: 50%;
            right: -1.25rem;
            transform: translateY(-50%)
        }

        #navigation .sub-menu {
            width: 100%;
            height: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
            display: flex;
            visibility: hidden;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: .75rem;
            overflow: hidden;
            transition: padding 0.3s,margin 0.3s,height 0.3s,opacity 0.3s,visibility 0.3s
        }

        #navigation .sub-menu .menu-item {
            list-style: none
        }

        #navigation .sub-menu .menu-item a {
            font-size: clamp(0.875rem, 2vw, 1.25rem);
            color: var(--color-text)
        }
    }

    @media only screen and (min-width: 62rem) {
        body.scroll #navigation {
            width:100%;
            max-width: 100%;
            border-radius: 0;
            top: 0
        }

        body.admin-bar #navigation {
            top: 2rem
        }

        body.with-announcement #navigation {
            top: 3rem
        }

        body.admin-bar.with-announcement #navigation {
            top: 5rem
        }

        #navigation {
            width: 100%;
            height: 6rem;
            background-color: var(--color-layer-1);
            box-shadow: rgb(149 157 165 / .2) 0 8px 24px;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10000;
            transition: top 0.3s,border-radius 0.3s,width 0.3s,max-width 0.3s
        }

        #navigation .nav-container {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.5rem
        }

        #navigation .toggle {
            display: none
        }

        .logo {
            height: 3.5rem;
            width: auto;
            max-width: 25rem;
            margin: 0;
            padding: 0;
            display: inline-block;
            z-index: 100
        }

        .logo img {
            width: auto;
            height: 100%
        }

        #navigation .nav {
            height: 6rem
        }

        #navigation .ul-wrapper {
            height: 100%;
            display: flex;
            align-items: center
        }

        #navigation .nav-ul {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: flex-start;
            align-items: center
        }

        #navigation .menu-item {
            list-style: none;
            height: 100%;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            flex: none
        }

        #navigation .menu-item a {
            font-size: 1rem;
            line-height: 1.5em;
            text-decoration: none;
            margin: 0;
            color: var(--color-text);
            display: block;
            position: relative;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
            transition: color 0.2s ease
        }

        #navigation .menu-item a:hover {
            color: var(--color-secondary)
        }

        #navigation .menu-item-has-children {
            position: relative;
            cursor: pointer
        }

        #navigation .menu-item-has-children:hover>.sub-menu {
            opacity: 1;
            visibility: visible;
            transform: scaleY(1)
        }

        #navigation .menu-item-has-children:hover>.sub-menu>.menu-item {
            opacity: 1;
            transform: translateY(0)
        }

        #navigation .sub-menu {
            min-width: 12.5rem;
            margin: 0;
            padding: 0;
            background-color: var(--color-layer-1);
            box-shadow: rgb(149 157 165 / .2) 0 8px 24px;
            opacity: 0;
            border-radius: 0 0 var(--space-1) var(--space-1);
            visibility: hidden;
            position: absolute;
            right: 0;
            top: 100%;
            z-index: 1;
            transform: scaleY(0);
            transition: transform 0.3s,visibility 0.3s,opacity 0.3s;
            transform-origin: top
        }

        #navigation .sub-menu .menu-item {
            padding: 0;
            font-size: 1rem;
            text-decoration: none;
            list-style: none;
            width: 100%;
            height: auto;
            opacity: 0;
            visibility: visible;
            display: flex;
            align-items: center;
            transform: translateY(-.625rem);
            transition: opacity 0.6s,transform 0.6s
        }

        #navigation .sub-menu .menu-item:nth-of-type(1) {
            transition-delay: 0.05s
        }

        #navigation .sub-menu .menu-item:nth-of-type(2) {
            transition-delay: 0.1s
        }

        #navigation .sub-menu .menu-item:nth-of-type(3) {
            transition-delay: 0.15s
        }

        #navigation .sub-menu .menu-item:nth-of-type(4) {
            transition-delay: 0.2s
        }

        #navigation .sub-menu .menu-item:nth-of-type(5) {
            transition-delay: 0.25s
        }

        #navigation .sub-menu .menu-item:nth-of-type(6) {
            transition-delay: 0.3s
        }

        #navigation .sub-menu .menu-item:nth-of-type(7) {
            transition-delay: 0.35s
        }

        #navigation .sub-menu .menu-item:nth-of-type(8) {
            transition-delay: 0.4s
        }

        #navigation .sub-menu .menu-item:nth-of-type(9) {
            transition-delay: 0.45s
        }

        #navigation .sub-menu .menu-item a {
            font-size: 1rem;
            line-height: 1.5em;
            text-transform: capitalize;
            text-decoration: none;
            width: 100%;
            padding: .75rem 1.25rem;
            color: var(--color-text);
            display: block;
            transition: color 0.3s,background-color 0.3s
        }

        #navigation .sub-menu .menu-item a:hover {
            color: var(--color-secondary);
            background-color: var(--color-secondary)
        }

        #navigation .sub-menu .menu-item a:before {
            display: none
        }

        #navigation .current-menu-ancestor>a,#navigation .current-menu-item>a {
            color: var(--color-secondary)!important
        }

        #navigation .nav-ul>.current-menu-ancestor,#navigation .nav-ul>.current-menu-item {
            border-top: 4px solid #fff0;
            border-bottom: 4px solid var(--color-secondary)
        }

        #navigation .sub-menu .sub-menu {
            border-radius: var(--space-1);
            left: 100%;
            top: 0
        }

        #navigation .menu-item-has-children:before {
            content: "";
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4xNSAyMCI+PGcgaWQ9IkxheWVyXzEtMiI+PHBhdGggZD0iTTMuNDIsMTkuMjlsOC4zMi04LjMyYy41NC0uNTQuNTQtMS40LDAtMS45NEwzLjQyLjcxYy0uOTQtLjk0LTIuNDgtLjk0LTMuNDIsMGgwczQuOTQsNy44Myw0Ljk0LDcuODNjLjU3Ljg5LjU3LDIuMDQsMCwyLjkzTDAsMTkuMjloMGMuOTQuOTQsMi40OC45NCwzLjQyLDBaIiBmaWxsPSIjMzdkM2FlIi8+PC9nPjwvc3ZnPg==) no-repeat center / contain;
            position: absolute;
            right: .75rem;
            width: .75rem;
            height: .75rem;
            z-index: 1;
            transform: rotate(90deg);
            color: var(--color-text);
            transition: transform 0.2s ease
        }

        #navigation .menu-item-has-children:hover:before {
            transform: rotate(-90deg)
        }

        #navigation .sub-menu .menu-item-has-children:before {
            transform: rotate(0deg)
        }

        #navigation .menu-item-has-children {
            padding-right: 2.25rem
        }
    }

    @media (min-width: 0rem) {
        footer a,footer p {
            color:var(--color-text)
        }

        footer {
            padding: var(--space-8) clamp(1rem, 4vw, 3rem) 0;
            background-color: var(--color-tertiary-light);
            transition: background-color .2s ease
        }

        footer .logo {
            width: 4rem;
            height: 4rem;
            margin-left: auto;
            margin-right: auto
        }

        footer .slogan {
            color: var(--color-text);
            text-align: center;
            font-size: 1.3rem;
            text-decoration: none;
            line-height: 1.5em;
            letter-spacing: .5px
        }

        footer .menu-item a {
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
            line-height: 1.5em;
            color: var(--color-text);
            position: relative;
            text-transform: uppercase;
            letter-spacing: .5px
        }

        footer .menu-item a:before {
            content: "";
            width: 0%;
            height: .125rem;
            background: currentColor;
            opacity: 1;
            position: absolute;
            display: block;
            bottom: -.125rem;
            left: 0;
            transition: width 0.3s
        }

        footer .menu-item a:hover:before,footer .current-menu-item a:before {
            width: 100%
        }

        footer .current-menu-item a {
            color: var(--color-secondary)
        }

        .social-icons a {
            margin-right: 1rem
        }

        .social-icons a img {
            display: block;
            filter: brightness(0) saturate(100%) invert(40%) sepia(82%) saturate(684%) hue-rotate(340deg) brightness(91%) contrast(83%)
        }

        .social-icons a:hover img {
            filter: none
        }

        .social-icons a:last-of-type {
            margin-right: 0
        }

        #menu-top-menu,#menu-footer-menu {
            margin-bottom: 0;
            margin-left: 0;
            padding-left: 0;
            list-style-type: none;
            align-items: center
        }

        #menu-footer-menu .menu-item a {
            text-transform: none;
            color: var(--color-tertiary-medium);
            font-size: var(--fs-1);
            transition: color 0.2s ease
        }

        #menu-footer-menu .menu-item a:hover {
            color: var(--color-text)
        }

        .copyright {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-tertiary-medium)
        }

        .underfooter {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-block:var(--space-4)}

        footer #menu-top-menu {
            text-align: center;
            margin-block:var(--space-4)}

        footer #menu-top-menu .menu-item {
            margin-block: 0
        }
    }

    @media screen and (min-width: 48rem) {
        footer .logo {
            margin-left:0;
            margin-right: auto
        }

        footer .slogan {
            text-align: start
        }

        .copyright {
            justify-content: start
        }

        .underfooter {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--color-layer-3)
        }

        footer #menu-top-menu {
            text-align: end;
            margin-block:0}
    }

    @media screen and (min-width: 62rem) {
        #navigation .menu-item a {
            font-size:.9rem
        }
    }

    @media screen and (min-width: 75rem) {
        #navigation .menu-item a {
            font-size:1rem
        }
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translate3d(0,-50px,0)
        }

        to {
            opacity: 1;
            transform: translate3d(0,0,0)
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0,50px,0)
        }

        to {
            opacity: 1;
            transform: translate3d(0,0,0)
        }
    }

    button,.btn,.btn-solid: before {
        border-radius:999rem
    }

    .grid-custom {
        display: block
    }

    .grid-custom .rows-background {
        grid-row-start: 1;
        grid-row-end: 10;
        grid-column-start: 1;
        grid-column-end: -1
    }

    .grid-custom .rows-background img {
        object-position: top
    }

    .grid-custom .rows-card {
        grid-row-start: 8;
        grid-row-end: -1;
        grid-column-start: 1;
        grid-column-end: -1
    }

    .grid-custom .rows-overflow {
        grid-row-start: 10;
        grid-row-end: -1;
        grid-column-start: 1;
        grid-column-end: -1
    }

    .z-index-3 {
        z-index: 3
    }

    .col-full-grid {
        grid-column-start: 1;
        grid-column-end: -1;
        grid-row-start: 1;
        grid-row-end: -1
    }

    .z-index--2 {
        z-index: -2
    }

    .z-index--1 {
        z-index: -1
    }

    .image-custom {
        aspect-ratio: 4 / 3
    }

    .bg-gradient-cta {
        --startColor: var(--color-layer-1);
        --endColor: var(--color-tertiary-light);
        background: var(--startColor);
        background: linear-gradient(180deg,var(--startColor) 0%,var(--startColor) 50%,var(--endColor) 50%,var(--endColor) 100%);
        transition: --startColor .2s ease,--endColor .2s ease
    }

    .bg-gradient-cta.reverse-gradient {
        --endColor: var(--color-layer-1);
        --startColor: var(--color-tertiary-light)
    }

    .bg-gradient-primary {
        --endColor: var(--color-primary)
    }

    .svg-bg {
        fill: #e4eef4;
        transition: fill 0.2s ease
    }

    .svg-bg-2 {
        fill: #f7f7f7;
        transition: fill 0.2s ease
    }

    .services-icon .svg-bg-2 {
        fill: #f9eee8
    }

    #navigation .menu-item .btn-solid {
        display: inline-flex;
        background-color: var(--color-primary);
        color: var(--color-white)
    }

    #navigation .menu-item .btn-solid:hover {
        background-color: var(--color-secondary);
        color: var(--color-white)
    }

    .splide {
        margin-bottom: 40px
    }

    .splide__pagination {
        display: none!important;
        visibility: hidden!important
    }

    .splide__arrow {
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: calc(100% + 10px);
        z-index: 2;
        cursor: pointer;
        background: none;
        border-radius: .5rem;
        border: none;
        transition: background 0.3s
    }

    .splide__arrow:hover {
        background: var(--color-layer-2)
    }

    .splide__arrow--prev {
        left: 0
    }

    .splide__arrow--next {
        right: 0
    }

    .splide__arrow svg {
        width: 2rem;
        height: 2rem
    }

    .splide__arrow svg path {
        fill: var(--color-secondary)
    }

    #loginBannerTop {
        max-width: 320px
    }

    #loginBannerTop>* {
        float: right
    }

    #loginBannerTop input[type="text"],#loginBannerTop input[type="password"] {
        display: inline-block;
        padding: 0 .5rem;
        min-height: 2rem;
        height: 2rem;
        max-width: 120px;
        border: 1px solid var(--color-secondary);
        border-radius: 99rem;
        font-size: var(--fs-1);
        background-color: var(--color-layer-1)
    }

    #loginBannerTop input[type="text"]: focus-visible,#loginBannerTop input[type="password"]:focus-visible {
        outline:2px solid var(--color-secondary-medium);
        outline-offset: 0
    }

    #loginBannerTop input[type="submit"],#loginBannerTop input[type="button"] {
        display: inline-block;
        min-height: 2rem;
        height: 2rem;
        padding: 0 1rem;
        margin-left: .25rem;
        font-size: var(--fs-1);
        border-radius: 99rem;
        background-color: var(--color-secondary);
        color: var(--color-white);
        transition: backgound-color 0.2s ease,color 0.2s ease
    }

    #loginBannerTop input[type="submit"]: hover,#loginBannerTop input[type="button"]:hover {
        background-color:var(--color-primary)
    }

    #loginBannerTop a {
        color: var(--color-secondary);
        text-decoration: none;
        text-transform: none
    }

    #loginBannerTop a: hover {
        text-decoration:underline
    }

    #loginBannerTop input: :placeholder {
        font-size:var(--fs-1)
    }

    #loginBannerTop img {
        height: 32px;
        width: auto;
        margin-right: 10px
    }

    @media (max-width: 47.999rem) {
        .grid-custom .container {
            display:block;
            width: 100%
        }
    }

    @media screen and (min-width: 36rem) {
        .radius-tr-7--sm {
            border-top-right-radius:var(--space-7)
        }

        .splide {
            padding-inline:3rem;margin-bottom: 0
        }

        .splide__arrow {
            top: 50%;
            transform: translate(0,-50%)
        }
    }

    @media screen and (min-width: 48rem) {
        .flex-row--md {
            flex-direction:row!important
        }

        .grid-custom {
            --row-height: min(calc(100vw / 20), 100px);
            display: grid;
            grid-template-rows: repeat(11,var(--row-height));
            gap: 0
        }

        .stats-item {
            padding-right: var(--space-6);
            border-right: 1px solid hsla(from var(--color-text) h s l / .5)
        }

        .stats-item:last-child {
            border-right: none
        }

        .stats-item .fs-1 {
            font-size: clamp(2.5rem, 2rem + 1.5vw, 4rem)
        }
    }

    @media screen and (min-width: 62rem) {
        .radius-tr-7--lg {
            border-top-right-radius:var(--space-7)!important
        }

        .image-custom {
            position: absolute;
            height: calc(100% + 2*var(--space-10))
        }
    }

    .timeline,.bullets {
        padding-left: var(--space-2)
    }

    .timeline li,.bullets li {
        position: relative;
        padding-left: var(--space-7);
        padding-bottom: var(--space-6);
        letter-spacing: .75px
    }

    .bullets li {
        padding-left: var(--space-6)
    }

    .timeline li: :before {
        content:"";
        position: absolute;
        top: 5px;
        left: 0;
        width: 2px;
        height: 100%;
        background-color: var(--color-tertiary-medium)
    }

    .timeline li: last-of-type:before {
        height:0
    }

    .timeline li: :after,.bullets li::after {
        content:"";
        position: absolute;
        top: 0;
        left: -9px;
        width: 20px;
        height: 20px;
        background-color: var(--color-tertiary-light);
        border-radius: 50%;
        border: 3px solid var(--color-secondary)
    }

    .timeline li: last-of-type,.bullets li:last-of-type {
        padding-bottom:0
    }

    @media only screen and (min-width: 62rem) {
        .timeline {
            max-width:90%
        }

        .timeline li::after,.bullets li::after {
            top: 5px
        }
    }

    .services-item {
        padding-left: var(--space-8)
    }

    .services-icon {
        margin-bottom: var(--space-6);
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    @media only screen and (min-width: 48rem) {
        .services-item {
            position:relative;
            margin-left: 50px;
            padding-left: calc(50px + var(--space-8))
        }

        .services-icon {
            position: absolute;
            top: 50%;
            left: -50px;
            transform: translateY(-50%);
            left: -50px;
            margin-bottom: 0
        }
    }

    @media only screen and (min-width: 62rem) {
        .services-item {
            margin-left:75px;
            padding-left: calc(75px + var(--space-8))
        }

        .services-icon {
            left: -75px;
            width: 150px;
            height: 150px
        }
    }

    .page-header {
        position: relative;
        z-index: 2
    }

    .page-header h1 {
        color: var(--color-secondary)
    }

    .page-header p {
        max-width: 20rem
    }

    .page-about .page-header p,.page-services .page-header p {
        max-width: 24rem
    }

    .image-pattern {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1
    }

    .btn-secondary {
        color: var(--color-secondary)
    }

    .has-separator {
        padding-bottom: var(--space-5);
        border-bottom: 1px solid var(--color-layer-3)
    }

    .date {
        font-size: var(--fs-1);
        opacity: .7
    }

    .search-bar {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 20rem;
        gap: var(--space-6)
    }

    #search {
        border: none;
        padding: 10px 20px;
        width: 100%;
        max-width: 20rem;
        background-color: var(--color-tertiary-light);
        border-radius: 999rem;
        padding-right: 3rem
    }

    #search-button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text);
        opacity: .5;
        padding: .5rem 1rem;
        cursor: pointer;
        border-radius: 999rem;
        justify-content: end;
        width: auto;
        transition: opacity 0.2s ease
    }

    #search-button:active,#search-button:focus {
        opacity: 1
    }

    .search-bar:hover #search-button {
        opacity: 1
    }

    .item h3 {
        position: relative;
        font-size: var(--fs-6);
        aspect-ratio: 16 / 9;
        background-color: var(--color-primary-light);
        padding: var(--space-6);
        border-radius: var(--space-6);
        margin-bottom: var(--space-6);
        overflow: hidden;
        transition: color 0.2s ease,background-color 0.2s ease
    }

    .item h3: :before {
        content:"";
        position: absolute;
        inset: 0;
        background: url(/images/thumbnail_background.svg) no-repeat center;
        transition: rotate 0.2s ease,transform 0.2s ease,opacity 0.2s ease,scale 0.2s ease
    }

    .item:hover h3: :before {
        opacity:.5;
        rotate: -90deg;
        transform: translate(-80px,30px);
        scale: 1.5
    }

    .item:hover h3 {
        background-color: var(--color-secondary-light);
        color: var(--color-secondary)
    }

    .item-news h3 {
        font-size: var(--fs-4)
    }

    .item-news p {
        font-size: var(--fs-2)
    }

    @media screen and (min-width: 48rem) {
        .item h3 {
            font-size:var(--fs-5)
        }
    }

    @media screen and (min-width: 62rem) {
        .no-separator--lg {
            padding-bottom:0;
            border-bottom: none;
            margin-bottom: 0
        }

        .item p {
            margin-bottom: 0
        }

        .item .btn {
            margin-top: 1rem
        }

        .item .content>p {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .sidebar {
            position: sticky;
            top: 100px;
            border-left: 1px solid var(--color-layer-3);
            padding-left: var(--space-7)
        }
    }

    .col-full-grid {
        grid-column-start: 1;
        grid-column-end: -1;
        grid-row-start: 1;
        grid-row-end: -1
    }

    .col-full-grid .image-background {
        height: 100vh
    }

    .z-index--1 {
        z-index: -1
    }

    .page-content {
        max-width: 80ch;
        margin-inline:auto}

    .page-content>* {
        margin-bottom: var(--space-6)
    }

    .page-content>h3 {
        font-size: var(--fs-4)
    }

    .btn-block {
        width: 100%
    }

    .form-wrapper input,.form-wrapper textarea {
        background-color: var(--color-layer-1)
    }

    .hidden-link {
        color: var(--color-text);
        transition: color 0.2s ease
    }

    .hidden-link:hover {
        color: var(--color-primary)
    }
}