@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url(./base.css);
@import url(./easings.css);

@layer General, Presets, Utils, Button, Block;


:root {
    --clr-primary-main: #151d37;
    --clr-primary-dark: #101010;
    --clr-primary-light: #e5e7eb;
    --clr-primary-text: #02040b;
    --clr-primary-hsl: 185, 87%, 15%;
    --clr-secondary-main: #eab214;
    --clr-secondary-dark: #cb9a10;
    --clr-secondary-light: #fbf0da;
    --clr-secondary-text: #130c00;
    --clr-secondary-hsl: 72, 53%, 68%;
    --clamp-title: clamp(1.35rem, 2vw + 0.725rem, 2.5rem);
    --clamp-sub-title: clamp(1.15rem, 1.5vw + 0.335rem, 1.5rem);
    --clr-black: #000;
    --clr-dark: #101010;
    --clr-body: #585858;
    --clr-white: #fff;
    --clr-gray: #808080;
    --clr-gray-100: #f8f8f8;
    --clr-gray-200: #f2f2f2;
    --clr-gray-300: #ededed;
    --clr-gray-400: #d8d8d8;
    --clr-gray-500: #ccc;
    --clr-gray-600: #bfbfbf;
    --clr-gray-700: #a1a1a1;
    --clr-gray-800: #9d9d9d;
    --clr-gray-900: #909090;
    --clr-link: #646cff;
    --clr-link-hover: #535bf2;
    --font-title: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --smooth-shadow:
        0px 0.6px 0.9px rgba(0, 0, 0, 0.006),
        0px 1.4px 2.1px rgba(0, 0, 0, 0.009),
        0px 2.3px 3.5px rgba(0, 0, 0, 0.011),
        0px 3.5px 5.2px rgba(0, 0, 0, 0.013),
        0px 5px 7.5px rgba(0, 0, 0, 0.015),
        0px 7.1px 10.6px rgba(0, 0, 0, 0.017),
        0px 10.1px 15.1px rgba(0, 0, 0, 0.019),
        0px 14.6px 21.9px rgba(0, 0, 0, 0.021),
        0px 22.5px 33.8px rgba(0, 0, 0, 0.024),
        0px 40px 60px rgba(0, 0, 0, 0.03);
    --border-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;

    --elevation-1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    --elevation-2: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    --elevation-3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    --elevation-4: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
    --elevation-6: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
    --elevation-8: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
    --elevation-12: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
    --elevation-16: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
    --elevation-24: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;

    --clamp-btn: clamp(1em, 2.5vw, 1.25em) clamp(1em, 2.5vw, 2em);
    --clamp-box: clamp(1rem, 3vw, 1.25rem);
    --overlay-linear: linear-gradient(hsl(0 0% 0% / 85%), hsl(0 0% 0% / 85%));
    --overlay-secondary-and-dark: linear-gradient(hsl(90.87deg 89.61% 30.2% / 50%), hsl(0 0% 0% / 85%));
    --block-spacing: clamp(40px, 5vw + 2rem, 80px);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: unset !important;
    }
}

@layer Button {
    .Action-root:not(:first-of-type) {
        margin-block-start: 1.5rem;
    }

    .Button-root {
        --_size: 0.725em;
        text-decoration: none;
        background: unset;
        background-color: var(--clr-gray-300);
        color: var(--clr-black);
        font-size: 1rem;
        font-weight: 600;
        padding: calc(var(--_size) * 1.35) calc(var(--_size) * 2.5);
        display: inline-block;
        text-align: center;
        border: 0;
        overflow: hidden;
        isolation: isolate;
        position: relative;
        background-image: none;
        /* border-radius: calc(var(--_size) * 0.5); */
        border-radius: 0;
        transition: all 300ms;
        text-transform: uppercase;
        font-family: var(--font-title);
        line-height: 1;
        cursor: pointer;
    }

    .Button-root[data-size="sm"] {
        font-size: 0.925rem;
    }

    .Button-root[data-size="md"] {
        font-size: 1rem;
    }

    .Button-root[data-size="lg"] {
        font-size: 1.25rem;
    }

    .Button-root[data-variant="contained"] {
        background-color: var(--clr-body);
        color: var(--clr-primary-light);
    }

    .Button-root[data-variant="contained"]:hover {
        background-color: var(--clr-dark);
    }

    .Button-root.Button-primary[data-variant="contained"] {
        background-color: var(--clr-primary-main);
        color: var(--clr-primary-light);
    }

    .Button-root.Button-primary[data-variant="contained"]:hover {
        background-color: var(--clr-primary-dark);
    }

    .Button-root.Button-secondary[data-variant="contained"] {
        background-color: var(--clr-secondary-main);
        color: var(--clr-secondary-text);
    }

    .Button-root.Button-secondary[data-variant="contained"]:hover {
        background-color: var(--clr-secondary-dark);
    }

    .Button-root.Button-light[data-variant="contained"] {
        color: var(--clr-primary-text);
        background-color: var(--clr-primary-light);
    }

    .Button-root.Button-light[data-variant="contained"]:hover {
        color: var(--clr-primary-text);
        background-color: var(--clr-gray-100);
    }

    .Button-root[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-body);
        background-color: transparent;
    }

    .Button-root[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(0, 0%, 0%, 5%);
        backdrop-filter: blur(0.5em);
    }

    .Button-root.Button-light[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-white);
        background-color: transparent;
    }

    .Button-root.Button-light[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(0, 0%, 100%, 5%);
        backdrop-filter: blur(0.5em);
    }

    .Button-root.Button-primary[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-primary-main);
        background-color: transparent;
    }

    .Button-root.Button-primary[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(160, 98%, 25%, 10%);
        backdrop-filter: blur(0.5em);
    }

    .Button-root.Button-secondary[data-variant="outlined"] {
        border: 2px solid currentColor;
        color: var(--clr-secondary-main);
        background-color: transparent;
    }

    .Button-root.Button-secondary[data-variant="outlined"]:not([data-ripple]):hover {
        background-color: hsl(42, 92%, 55%, 10%);
        backdrop-filter: blur(0.5em);
    }

    .Button-root.Button-icon {
        --_size: 1.35em;
        padding: 0.375em;
        width: calc(var(--_size) * 1.525);
        height: calc(var(--_size) * 1.525);
        font-size: var(--_size);
        border-radius: 100vmax;
        align-content: center;
        background-color: transparent;
        -webkit-border-radius: 100vmax;
        -moz-border-radius: 100vmax;
        -ms-border-radius: 100vmax;
        -o-border-radius: 100vmax;
    }

    .Button-root.Button-icon:hover {
        background-color: hsl(0 0% 0% / 5%);
    }

    .Button-root.Button-icon> :is(img, svg) {
        /* max-width: 1.25em; */
    }

    .Button-root.Button-icon>i {
        font-size: 1.25em;
    }

    .Button-root>* {
        pointer-events: none;
    }

    .Button-root[data-variant="underline"] {
        background-color: transparent;
        background-image: linear-gradient(var(--clr-primary-main), var(--clr-primary-main));
        background-size: 100% 1px;
        background-position-y: 100%;
        background-repeat: no-repeat;
        transition: background-size 75ms ease;
    }

    .Button-root[data-variant="underline"]:hover {
        background-size: 100% 2px;
    }

    [data-group="btns"] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    [data-group="btns"]>* {
        margin: 0;
    }

    .ripple-orb {
        position: absolute;
        inset: 0;
        width: 100%;
        scale: 0;
        aspect-ratio: 1;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        z-index: -2;
        transition: 700ms opacity ease, scale 1s cubic-bezier(0.275, 0.82, 0.165, 1);
        transform-origin: center;
    }

    .Button-root:hover .ripple-orb {
        transition: 100ms opacity ease, scale 1s cubic-bezier(0.275, 0.82, 0.165, 1);
        scale: 2;
        opacity: 1;
    }

    .Button-root:focus-visible .ripple-orb {
        opacity: 1;
        margin: auto;
        scale: 0.75;
    }

    .Button-root:not([data-ripple="true"]) .ripple-orb {
        margin: auto;
    }
}


/* @layer Block {
    .Block-root {
        padding-block: var(--block-spacing);
    }

    .Block-root.Block-gray {
        background-color: var(--clr-gray-200) !important;
    }

    .Block-root.Block-primary {
        background-color: var(--clr-primary-main) !important;
        color: var(--clr-primary-light);
    }

    .Block-root.Block-light {
        background-color: var(--clr-primary-light) !important;
    }

    .Block-root.Block-primary .Block-heading>* {
        color: #fdc260;
    }

    .Block-root.Block-secondary {
        background-color: var(--clr-secondary-light) !important;
        color: var(--clr-secondary-text);
    }

    .Block-root.Block-primary .List-root>* {
        --clr: var(--clr-primary-light) !important;
    }

    .Block-root:nth-child(even) {
        background-color: var(--clr-gray-200);
    }

    .Block-heading:not(:only-child, :last-child) {
        margin-block-end: 1.725rem;
    }

    .Block-heading~.Block-heading {
        margin-block-start: 1.5rem;
    }

    .Block-heading[data-level]:not(:only-child, :last-child) {
        margin-block-end: 1.5rem;
    }

    .Block-heading[data-level="2"]>*:not(p) {
        font-size: var(--clamp-sub-title);
        font-weight: 500;
        text-transform: uppercase;
    }

    .Block-heading> :not(:last-child) {
        margin-bottom: 0.5em;
    }

    .Block-heading[data-level="1"]>:not(p) {
        font-size: var(--clamp-title);
        font-weight: 500;
        text-transform: capitalize;
        text-wrap: balance;
        color: var(--clr-primary-text);
    }

    .Block-heading[data-aos]>* {
        transition: 1s clip-path cubic-bezier(0.375, 0.82, 0.165, 1);
        clip-path: inset(0 100% 0 0);
    }

    .Block-heading[data-aos]>:nth-child(1) {
        transition-delay: 200ms;
        display: block;
    }

    .Block-heading[data-aos]>:nth-child(2) {
        transition-delay: 400ms;
    }

    .Block-heading.aos-animate>* {
        clip-path: inset(0);
    }

    .Parallax-dark .Block-heading:not([data-level])> :not(p, span) {
        color: var(--clr-primary-light);
    }

    .Block-heading> :not(p, span) b {
        font-weight: 700;
        color: var(--clr-primary-dark);
    }

    .Block-root.BlockNote-root :where(.Note-wrapper, .Note-content) {
        max-width: 100ch;
        margin-inline: auto;
        text-align: center;
        text-wrap-style: pretty;
    }

    .Block-root.BlockParallax-root {
        position: relative;
        isolation: isolate;
        clip-path: inset(0);
        overflow: hidden;
    }

    .Parallax-container {
        clip-path: inset(0);
        height: 100%;
        position: relative;
    }

    .Block-root.BlockParallax-root .Parallax-object>* {
        inset: 0;
        z-index: -2;
        width: 100%;
        height: calc(100vh + 50px);
        height: calc(100dvh + 50px);
        object-fit: cover;
        object-position: center;
        user-select: none;
        pointer-events: none;
    }

    .Block-root.BlockParallax-root:not(.Block-fluid) .Parallax-object>* {
        position: absolute;
    }

    .Parallax-dark {
        color: var(--clr-primary-light);
    }

    .Parallax-dark .Block-object>* {
        filter: brightness(0.5);
    }

    .Block-root.Block-static .Block-object>*:not(picture) {
        width: 100%;
        object-fit: cover;
        background-color: var(--clr-gray-300);
    }

    .Block-root.Block-static .Block-object>picture * {
        width: 100%;
        object-fit: cover;
        background-color: var(--clr-gray-300);
    }

    .Block-root.Block-root .Block-row~.Block-row {
        margin-block-start: 3rem;
    }

    .Block-object picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .Block-object {
        isolation: isolate;
    }

    @media (min-width: 992px) {

        .Block-static.Block-static {
            --_gap: 5rem;
        }

        .Block-root.Block-static.Block-offset-y {
            margin-top: 100px;
        }

        .Block-root.Block-static .Block-object {
            width: 100%;
            aspect-ratio: 1;
        }

        .Block-root.Block-static.Block-offset-y .Block-object>* {
            translate: 0 -100px;
        }

        .Block-static.Block-static:not(.Block-offset-y) .Block-object>* {
            aspect-ratio: 1 / 0.725;
            min-height: 100%;
        }

        .Block-static.Block-static .Block-row {
            margin: 0;
            column-gap: var(--_gap);
        }

        .Block-static.Block-static:not(.Block-offset-y) .Block-row>*:not(.Block-object) {
            align-self: center;
        }

        .Block-static.Block-static .Block-row>* {
            flex: 1;
            padding: 0;
        }


        .Block-root.Block-fluid.Block-offset-y {
            margin-top: 100px;
        }

        .Block-root.Block-fluid {
            --_gap: 5rem;
            position: relative;
            isolation: isolate;
        }

        .Block-root.Block-fluid .Block-row {
            gap: 1.5rem var(--_gap);
            margin: 0;
        }

        .Block-root.Block-fluid .Block-row>* {
            padding: 0;
            flex: 1;
        }

        .Block-root.Block-fluid:not(.BlockParallax-root) .Block-object>* {
            position: absolute;
            inset: 0;
            z-index: -2;
            width: 50%;
            height: 100%;
            object-fit: cover;
        }

        .Block-root.Block-fluid.Block-offset-y .Block-object {
            aspect-ratio: 1;
        }

        .Block-root.Block-fluid.Block-offset-y .Block-object>* {
            translate: 0 -100px;
        }

        .Block-root.Block-fluid.Block-fluid-100 {
            min-height: 100vh;
            min-height: 100dvh;
            align-content: center;
        }

        .Block-root.Block-fluid.Block-fluid-100 .Block-object>* {
            width: 100%;
        }

        .Block-root.Block-fluid .Block-object:last-child>* {
            margin-left: auto;
        }

        .Block-root.BlockParallax-root.Block-fluid .Block-object>* {
            width: 50%;
            position: absolute;
        }
    }

    @media (max-width: 991.98px) {
        .Block-row {
            row-gap: 1.5rem;
        }

        .Block-root:is(.Block-fluid, .Block-static) .Block-row>:not(.Block-object) {
            order: 2;
        }

        .Block-root:is(.Block-fluid, .Block-static) .Block-object:last-child {
            order: 1;
        }

        .Block-root.Block-fluid .Block-object>* {
            border-radius: 1rem;
            aspect-ratio: 16 / 10;
            height: auto;
            width: 100%;
        }

        .Block-root.Block-static .Block-object {
            aspect-ratio: 16 / 12;
        }
    }
} */

@layer Scroller {
    [data-scroll="lenis"] {
        height: 100vh;
        overflow: auto;
    }
}







/*--------------------------------------------------------------
# Back To Top
--------------------------------------------------------------*/

/* .back-to-top {
    position: fixed;
    right: clamp(15px, 3vw, 24px);
    bottom: clamp(15px, 3vw, 24px);
    display: grid;
    place-items: center;
}

.back-to-top>* {
    grid-area: 1 / -1;
}

.back-to-top svg {
    transform: rotate(-90deg);
}

.back-to-top svg circle {
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 3px;
    stroke-linecap: round;
    fill: transparent;
    width: 100%;
}

.back-to-top svg .progress-bar {
    stroke: url(#grad);
    fill: #fff;
    transition: stroke-dashoffset 0s ease-in-out;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}

.back-to-top .pct {
    color: var(--clr-dark);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    margin: 0;
    font-size: 14px;
    z-index: 1;
} */

::selection {
    background-color: var(--clr-gray-400);
    color: var(--clr-black);
}




/*=============================================
=            Form-Control            =
=============================================*/

.Form-root .row {
    row-gap: 1.5rem;
}

.FormControl-root {
    --_size-y: 50px;
    --_size-x: 100%;
    --_rounded: 0;
    --_fz: 1rem;
    --_fz-shrink: 0.725rem;
    --_autofill-bg: hsl(0, 0%, 100%, 15%);
    --_autofill-color: #fff;
    position: relative;
    isolation: isolate;
}

.FormControl-root.FormControl-required :is(.FormLabel-root, legend) {
    contain: layout;
}

.FormControl-root.FormControl-required :is(.FormLabel-root, legend)::after {
    content: "*";
    color: #ff0000;
}

.FormControl-root .FormLabel-root {
    position: absolute;
    inset: 0;
    text-indent: 1rem;
    font-size: var(--_fz);
    transition: 500ms cubic-bezier(0.175, 0.92, 0.165, 1);
    pointer-events: none;
    height: var(--_size-y);
    line-height: var(--_size-y);
}

.FormControl-root:is(:focus-within, .FormControl-shrink) .FormLabel-root {
    /* .FormControl-root:has(.InputBase-input:not(:placeholder-shown), .InputBase-input:-webkit-autofill) .FormLabel-root { */
    transform: translateY(-50%);
    font-size: var(--_fz-shrink);
}


.FormControl-root .InputBase-root {
    display: grid;
}

.FormControl-root .InputBase-root>* {
    grid-area: 1 / -1;
}

.FormControl-root .InputBase-input {
    padding: 0.5rem 1rem;
    margin: 0;
    border: none;
    outline: none;
    height: var(--_size-y);
    box-sizing: border-box;
}

.FormControl-root select.InputBase-input {
    transition: all 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.FormControl-root select.InputBase-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z'/%3e%3c/svg%3e");
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-size: 1rem 1rem;
    background-position: calc(100% - 1rem);
    background-repeat: no-repeat;
}

.FormControl-root select.InputBase-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z'/%3e%3c/svg%3e");
    background-size: 1rem 1rem;
    background-position: calc(100% - 1rem);
    background-repeat: no-repeat;
}

.FormControl-root .InputBase-input option {
    font-size: initial;
    color: initial;
}

.FormControl-root .InputBase-input:-webkit-autofill {
    box-shadow: inset 0 0 0 100px var(--_autofill-bg) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--_autofill-color);
    color: var(--_autofill-color)
}

.FormControl-root fieldset {
    border: 1px solid currentColor;
    padding-inline: 0.5rem;
    position: absolute;
    inset: -0.5rem 0 0 0;
    pointer-events: none;
    height: calc(100% + 0.5rem);
    opacity: 0.5;
    box-sizing: border-box;
}

.FormControl-root:is(:hover, .FormControl-shrink) fieldset {
    opacity: 1;
}

.FormControl-root legend {
    all: revert-layer;
    margin: 0;
    font-size: 0;
    padding-inline: 0;
    height: 1rem;
    visibility: hidden;
    overflow: hidden;
    width: 0;
    box-sizing: border-box;
    transition: 500ms cubic-bezier(0.175, 0.92, 0.165, 1);
}

.FormControl-root.FormControl-shrink legend {
    width: auto;
    padding-inline: 0.5rem;
    font-size: var(--_fz-shrink);
}

.FormControl-root :is(.InputBase-input, fieldset) {
    width: 100%;
    border-radius: var(--_rounded, 0);
    -webkit-border-radius: var(--_rounded, 0);
    -moz-border-radius: var(--_rounded, 0);
    -ms-border-radius: var(--_rounded, 0);
    -o-border-radius: var(--_rounded, 0);
}

.FormControl-root:not(.FormControl-shrink) .InputBase-input:is([type="date"], select) {
    font-size: 0px;
    color: transparent;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: none;
    -moz-appearance: textfield;
}


/*=====  End of Form-Control  ======*/











/*=============================================
=            Drawer-root            =
=============================================*/

.Drawer-root {
    position: fixed;
    inset: 0;
    z-index: 999;
    backdrop-filter: blur(0);
    transition: var(--duration) backdrop-filter cubic-bezier(0.245, 0.97, 0.125, 1);
}

.Drawer-root.Drawer-open {
    backdrop-filter: blur(1rem);
}

.Drawer-root[data-direction="left"] .Drawer-container {
    right: auto;
}

.Drawer-root[data-direction="right"] .Drawer-container {
    left: auto;
}

.Drawer-root[data-direction="top"] .Drawer-container {
    bottom: auto;
}

.Drawer-root[data-direction="bottom"] .Drawer-container {
    top: auto;
}

.Drawer-root::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: hsl(0 0% 0% / 50%);
    opacity: 0;
    transition: var(--duration) opacity cubic-bezier(0.245, 0.97, 0.125, 1);
}

.Drawer-root.Drawer-open::before {
    opacity: 1;
}


.Drawer-container {
    width: 100%;
    position: absolute;
    inset: 0;
    height: 100%;
    background-color: var(--drawer-bg, var(--clr-gray-200));
    max-width: var(--drawer-width, 450px);
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
}


.Drawer-root[data-direction="top"] .Drawer-container,
.Drawer-root[data-direction="bottom"] .Drawer-container {
    --drawer-width: 100%;
}

.Drawer-root[data-direction="left"] .Drawer-container {
    box-shadow: var(--drawer-shadow, 2rem 0 3rem 0 hsl(0, 0%, 0%, 50%));
}

.Drawer-root[data-direction="right"] .Drawer-container {
    box-shadow: var(--drawer-shadow, -2rem 0 3rem 0 hsl(0, 0%, 0%, 10%));
}

.Drawer-container>* {
    padding: var(--drawer-padding, 1.5rem);
    background-color: var(--drawer-bg, var(--clr-gray-200));
}

.Drawer-header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--drawer-border, hsl(0, 0%, 10%));
    z-index: 9;
}

.Drawer-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--drawer-border, hsl(0, 0%, 10%));
}

.Drawer-root.Drawer-collapsing {
    transition: 1s transform cubic-bezier(0.145, 0.88, 0.122, 1);
}

[data-drawer-close] {
    font-size: 1.25rem;
}

.Drawer-sidebar .Drawer-body {
    padding: 3rem;
}


/*=====  End of Drawer-root  ======*/












/*=============================================
=            Header-root            =
=============================================*/

.Header-root {
    position: sticky;
    inset: 0 0 auto 0;
    z-index: 99;
    padding-block: 0.5rem;
    background-color: var(--clr-white);
}
.Header-root {
    transition: 200ms background-color ease !important;
}
.Header-root.Header-scrolled {
    box-shadow: 0 1px hsl(0 0% 0% / 10%);
}
.Drawer-active-right .Header-root {
    right: var(--scrollbar-width);
}

.Drawer-active-left .Header-root {
    left: var(--scrollbar-width);
}


.Header-topbar {
    text-align: center;
    padding: 0.5em;
    margin-top: -0.5rem;
    background-color: var(--clr-primary-main);
    color: var(--clr-primary-light);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}
.Header-root .container {
	max-width: 1200px;
	margin-inline: auto;
}
.Header-topbar > * {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.Header-topbar > * > * {
    background-color: var(--clr-primary-light);
    color: var(--clr-primary-text);
    padding: 0.5em;
    flex-wrap: wrap;
    font-weight: 700;
    border-radius: 0.25em;
    background-image: unset;
    text-transform: uppercase;
}
.Header-topbar > * > *:not(a) {
    font-size: 0.85rem;
    font-family: monospace;
}


@media (min-width: 992px) {
    #Button-sidebar {
        display: none;
    }
}
@media (max-width: 991.98px) {
    .Header-topbar {
        display: none;
    }
    #Button-sidebar {
        padding: 0.5em;
    }
}
@media (max-width: 991.98px) {
    #Button-sidebar {
        background-color: var(--clr-secondary-main);
        color: var(--clr-secondary-text);
    }
    #Button-sidebar span {
        display: none;
    }
}


/*=====  End of Header-root  ======*/












/*=============================================
=            BLock-header            =
=============================================*/


.Navbar-root {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: 0.5rem;
    position: relative;
}

.Navbar-root .Navbar-actions {
    display: flex;
    align-items: center;
}

.Navbar-root .Navbar-cta {
    align-items: center;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: 1s all cubic-bezier(0.245, 0.97, 0.125, 1);
}

#Drawer-sidebar .Navbar-root .Navbar-brand {
    background-image: unset;
    max-width: 200px;
}

.Navbar-root .Navbar-nav {
    display: flex;
    gap: 1.5rem;
    margin-inline: auto 2rem;
}
.Navbar-root .Navbar-brand {
    padding: 0.5rem;
    max-width: 200px;
}

.Navbar-root .Navbar-nav a {
    color: var(--clr-primary-text);
}

.Navbar-root .Button-sidebar {
    display: flex;
    gap: 0.5rem;
    background-color: transparent;
}

.Navbar-root .Button-root:not(.Button-icon) {
    background-color: transparent;
}

/* 11 december  */
/* header  */
.Navbar-actions svg {
    height: 24px;
    width: 24px;
}
.Navbar-actions button {
    padding: 0;
}

@media (max-width: 991.98px) {
    #Navbar-nav {
        display: none;
    }
    .Navbar-root {
        justify-content: flex-end;
    }
    .Navbar-root .Navbar-cta {
        display: none;
    }
}


@media (max-width: 575.98px) {
    #Button-sidebar svg + span {
        display: none;
    }
}

/*=====  End of BLock-header  ======*/



.Footer-root .Footer-copyrights {
    padding: 1rem;
    text-align: center;
    background-color: var(--clr-primary-main);
    color: var(--clr-primary-light);
    border-top: 1px solid hsl(0, 0%, 100%, 50%);
}
.Footer-root .Footer-copyrights .copy {
    margin-top: 1rem;
}
.Footer-root .Footer-copyrights a {
    margin-inline: 0.5rem;
    color: var(--clr-primary-light);
}