/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
            "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
        --color-red-500: oklch(63.7% 0.237 25.331);
        --color-blue-600: oklch(54.6% 0.245 262.881);
        --color-gray-200: oklch(92.8% 0.006 264.531);
        --color-gray-300: oklch(87.2% 0.01 258.338);
        --color-gray-400: oklch(70.7% 0.022 261.325);
        --color-gray-600: oklch(44.6% 0.03 256.802);
        --color-black: #000;
        --color-white: #fff;
        --spacing: 1px;
        --container-2xl: 42rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 24px;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 30px;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 35px;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-5xl: 50px;
        --text-5xl--line-height: 1;
        --text-6xl: 60px;
        --text-6xl--line-height: 1;
        --text-7xl: 70px;
        --text-7xl--line-height: 1;
        --text-8xl: 6rem;
        --text-8xl--line-height: 1;
        --text-9xl: 120px;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        --font-weight-black: 900;
        --tracking-widest: 0.1em;
        --leading-relaxed: 1.625;
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 20px;
        --radius-4xl: 30px;
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --blur-2xl: 40px;
        --default-transition-duration: 150ms;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --radius: 3px;
        --font-title: "Inter";
        --font-display: "Red Hat Display";
        --font-display-2: "Paytone One";
        --z-index-1: 1;
        --z-index-2: 2;
        --z-index-4: 4;
        --z-index-9999: 9999;
        --z-index-99999: 99999;
        --color-primary: var(--primary);
        --color-secondary: var(--secondary);
        --color-bodyfg: var(--bodyfg);
        --color-bodybg: var(--bodybg);
        --color-bodytext: var(--bodytext);
        --color-card: var(--card);
        --color-gary: #f3f3f3;
        --color-lightbg: #fafafa;
        --color-social: #191b1d;
        --color-socialbox: #ff7836;
        --color-card-light: #191b1d;
        --color-textlight: #171717b3;
        --color-infobg: #d4fff5;
        --color-darkinfo: #028f7b;
        --color-pich: #ffe4f0;
        --color-lightyellow: #f9ffe0;
        --color-lightgarybg: #f5f7f6;
        --color-titelgary: #77775b;
        --color-lightbackground: #f1f1f1;
        --color-yellow: #ffa808;
        --divider-gradient: 90deg, rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 100%;
        --color-green: #17d551;
        --color-lightgreen: #eaf5e9;
        --color-bggreen: #73e371;
        --color-orange: #ff7836;
        --color-textgreen: #03454f;
        --color-banner3text: #bcc0c0;
        --color-banner3title: #5e6d6a;
        --color-banner3bgcolor: #f5f5f5;
        --color-banner3inputcolor: #999999;
        --color-experienceboxborder: #e8e8e8;
        --color-banner2bgcolor: #fff3e6;
        --color-banner2bgsecond: #ffedda;
        --color-bglight: #f9f9f9;
        --color-morange: #ee792d;
        --color-mblue: #1d2b47;
        --text-2xs: 13px;
        --text-2sm: 15px;
        --text-xxl: 22px;
        --text-2\.5xl: 28px;
        --text-4\.5xl: 45px;
        --text-4\.3xl: 43px;
        --text-4\.75xl: 40px;
        --text-4\.8xl: 45px;
        --text-5\.5xl: 55px;
        --text-5\.2xl: 52px;
        --text-6\.5xl: 65px;
        --text-2xxl: 26px;
        --text-7xxl: 80px;
        --text-7\.7xl: 90px;
        --text-8\.5xl: 100px;
        --text-10xl: 130px;
        --animate-rotate: rotate 20s infinite linear;
        --animate-topshap: topshap 4s infinite;
        --animate-dzRing: dzRing 4s infinite;
        --animate-ScaleInOut: ScaleInOut 30s linear infinite;
        --animate-toTopFromBottom: toTopFromBottom 0.8s ease 0s 1 normal
            forwards running;
        --radius-2lg: 10px;
    }
}
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }
    html,
    :host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: var(
            --default-font-family,
            ui-sans-serif,
            system-ui,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji"
        );
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }
    b,
    strong {
        font-weight: bolder;
    }
    code,
    kbd,
    samp,
    pre {
        font-family: var(
            --default-mono-font-family,
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace
        );
        font-feature-settings: var(
            --default-mono-font-feature-settings,
            normal
        );
        font-variation-settings: var(
            --default-mono-font-variation-settings,
            normal
        );
        font-size: 1em;
    }
    small {
        font-size: 80%;
    }
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sub {
        bottom: -0.25em;
    }
    sup {
        top: -0.5em;
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }
    :-moz-focusring {
        outline: auto;
    }
    progress {
        vertical-align: baseline;
    }
    summary {
        display: list-item;
    }
    ol,
    ul,
    menu {
        list-style: none;
    }
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        display: block;
        vertical-align: middle;
    }
    img,
    video {
        max-width: 100%;
        height: auto;
    }
    button,
    input,
    select,
    optgroup,
    textarea,
    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        border-radius: 0;
        background-color: transparent;
        opacity: 1;
    }
    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px;
    }
    ::file-selector-button {
        margin-inline-end: 4px;
    }
    ::placeholder {
        opacity: 1;
    }
    @supports (not (-webkit-appearance: -apple-pay-button)) or
        (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentcolor;
            @supports (color: color-mix(in lab, red, red)) {
                color: color-mix(in oklab, currentcolor 50%, transparent);
            }
        }
    }
    textarea {
        resize: vertical;
    }
    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }
    ::-webkit-datetime-edit {
        display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-year-field,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute-field,
    ::-webkit-datetime-edit-second-field,
    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }
    :-moz-ui-invalid {
        box-shadow: none;
    }
    button,
    input:where([type="button"], [type="reset"], [type="submit"]),
    ::file-selector-button {
        appearance: button;
    }
    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
        height: auto;
    }
    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }
}
@layer utilities {
    .pointer-events-none {
        pointer-events: none;
    }
    .invisible {
        visibility: hidden;
    }
    .visible {
        visibility: visible;
    }
    .\!absolute {
        position: absolute !important;
    }
    .\!relative {
        position: relative !important;
    }
    .\!sticky {
        position: sticky !important;
    }
    .absolute {
        position: absolute;
    }
    .fixed {
        position: fixed;
    }
    .relative {
        position: relative;
    }
    .static {
        position: static;
    }
    .sticky {
        position: sticky;
    }
    .inset-0 {
        inset: calc(var(--spacing) * 0);
    }
    .\!-top-0 {
        top: calc(var(--spacing) * -0) !important;
    }
    .\!top-0 {
        top: calc(var(--spacing) * 0) !important;
    }
    .\!top-1\/2 {
        top: calc(1 / 2 * 100%) !important;
    }
    .-top-10 {
        top: calc(var(--spacing) * -10);
    }
    .-top-50 {
        top: calc(var(--spacing) * -50);
    }
    .-top-190 {
        top: calc(var(--spacing) * -190);
    }
    .top-0 {
        top: calc(var(--spacing) * 0);
    }
    .top-1\/2 {
        top: calc(1 / 2 * 100%);
    }
    .top-10 {
        top: calc(var(--spacing) * 10);
    }
    .top-15 {
        top: calc(var(--spacing) * 15);
    }
    .top-18 {
        top: calc(var(--spacing) * 18);
    }
    .top-20 {
        top: calc(var(--spacing) * 20);
    }
    .top-40 {
        top: calc(var(--spacing) * 40);
    }
    .top-50 {
        top: calc(var(--spacing) * 50);
    }
    .top-97 {
        top: calc(var(--spacing) * 97);
    }
    .top-100 {
        top: calc(var(--spacing) * 100);
    }
    .top-120 {
        top: calc(var(--spacing) * 120);
    }
    .top-200 {
        top: calc(var(--spacing) * 200);
    }
    .top-330 {
        top: calc(var(--spacing) * 330);
    }
    .top-430 {
        top: calc(var(--spacing) * 430);
    }
    .top-665 {
        top: calc(var(--spacing) * 665);
    }
    .top-\[12\%\] {
        top: 12%;
    }
    .top-\[15\%\] {
        top: 15%;
    }
    .top-\[20\%\] {
        top: 20%;
    }
    .top-\[28\%\] {
        top: 28%;
    }
    .top-\[30\%\] {
        top: 30%;
    }
    .top-\[35\%\] {
        top: 35%;
    }
    .top-\[42\%\] {
        top: 42%;
    }
    .top-\[53\%\] {
        top: 53%;
    }
    .top-\[62\%\] {
        top: 62%;
    }
    .\!right-auto {
        right: auto !important;
    }
    .-right-10 {
        right: calc(var(--spacing) * -10);
    }
    .-right-20 {
        right: calc(var(--spacing) * -20);
    }
    .-right-50 {
        right: calc(var(--spacing) * -50);
    }
    .-right-60 {
        right: calc(var(--spacing) * -60);
    }
    .-right-150 {
        right: calc(var(--spacing) * -150);
    }
    .\[right\:calc\(calc\(100\%_-_1691px\)_\/_2\)\] {
        right: calc(calc(100% - 1691px) / 2);
    }
    .right-0 {
        right: calc(var(--spacing) * 0);
    }
    .right-1\/2 {
        right: calc(1 / 2 * 100%);
    }
    .right-10 {
        right: calc(var(--spacing) * 10);
    }
    .right-15 {
        right: calc(var(--spacing) * 15);
    }
    .right-20 {
        right: calc(var(--spacing) * 20);
    }
    .right-30 {
        right: calc(var(--spacing) * 30);
    }
    .right-50 {
        right: calc(var(--spacing) * 50);
    }
    .right-72 {
        right: calc(var(--spacing) * 72);
    }
    .right-78 {
        right: calc(var(--spacing) * 78);
    }
    .right-80 {
        right: calc(var(--spacing) * 80);
    }
    .right-380 {
        right: calc(var(--spacing) * 380);
    }
    .right-\[10\%\] {
        right: 10%;
    }
    .right-\[32\%\] {
        right: 32%;
    }
    .\!-bottom-0 {
        bottom: calc(var(--spacing) * -0) !important;
    }
    .\!bottom-auto {
        bottom: auto !important;
    }
    .-bottom-11 {
        bottom: calc(var(--spacing) * -11);
    }
    .-bottom-18 {
        bottom: calc(var(--spacing) * -18);
    }
    .-bottom-45 {
        bottom: calc(var(--spacing) * -45);
    }
    .-bottom-50 {
        bottom: calc(var(--spacing) * -50);
    }
    .-bottom-65 {
        bottom: calc(var(--spacing) * -65);
    }
    .-bottom-100 {
        bottom: calc(var(--spacing) * -100);
    }
    .bottom-0 {
        bottom: calc(var(--spacing) * 0);
    }
    .bottom-1\/2 {
        bottom: calc(1 / 2 * 100%);
    }
    .bottom-20 {
        bottom: calc(var(--spacing) * 20);
    }
    .bottom-30 {
        bottom: calc(var(--spacing) * 30);
    }
    .bottom-60 {
        bottom: calc(var(--spacing) * 60);
    }
    .bottom-\[3\%\] {
        bottom: 3%;
    }
    .bottom-full {
        bottom: 100%;
    }
    .\!left-30 {
        left: calc(var(--spacing) * 30) !important;
    }
    .\!left-auto {
        left: auto !important;
    }
    .-left-15 {
        left: calc(var(--spacing) * -15);
    }
    .-left-43 {
        left: calc(var(--spacing) * -43);
    }
    .-left-50 {
        left: calc(var(--spacing) * -50);
    }
    .-left-150 {
        left: calc(var(--spacing) * -150);
    }
    .-left-235 {
        left: calc(var(--spacing) * -235);
    }
    .-left-320 {
        left: calc(var(--spacing) * -320);
    }
    .left-0 {
        left: calc(var(--spacing) * 0);
    }
    .left-1\/2 {
        left: calc(1 / 2 * 100%);
    }
    .left-10 {
        left: calc(var(--spacing) * 10);
    }
    .left-20 {
        left: calc(var(--spacing) * 20);
    }
    .left-25 {
        left: calc(var(--spacing) * 25);
    }
    .left-30 {
        left: calc(var(--spacing) * 30);
    }
    .left-40 {
        left: calc(var(--spacing) * 40);
    }
    .left-165 {
        left: calc(var(--spacing) * 165);
    }
    .left-\[18\%\] {
        left: 18%;
    }
    .left-\[43\%\] {
        left: 43%;
    }
    .left-\[78\%\] {
        left: 78%;
    }
    .left-\[calc\(50\%_-_2302\.55px\/2\)\] {
        left: calc(50% - 2302.55px / 2);
    }
    .\!z-0 {
        z-index: 0 !important;
    }
    .-z-1 {
        z-index: calc(var(--z-index-1) * -1);
    }
    .-z-3 {
        z-index: calc(3 * -1);
    }
    .z-0 {
        z-index: 0;
    }
    .z-1 {
        z-index: var(--z-index-1);
    }
    .z-2 {
        z-index: var(--z-index-2);
    }
    .z-3 {
        z-index: 3;
    }
    .z-4 {
        z-index: var(--z-index-4);
    }
    .z-5 {
        z-index: 5;
    }
    .z-9 {
        z-index: 9;
    }
    .z-10 {
        z-index: 10;
    }
    .z-98 {
        z-index: 98;
    }
    .z-99 {
        z-index: 99;
    }
    .z-9999 {
        z-index: var(--z-index-9999);
    }
    .z-99999 {
        z-index: var(--z-index-99999);
    }
    .-order-1 {
        order: calc(1 * -1);
    }
    .order-1 {
        order: 1;
    }
    .order-2 {
        order: 2;
    }
    .col-span-6 {
        grid-column: span 6 / span 6;
    }

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

    .col-span-8 {
        grid-column: span 8 / span 8;
    }
    .col-span-12 {
        grid-column: span 12 / span 12;
    }
    .float-left {
        float: left;
    }
    .\!container {
        width: 100% !important;
        @media (width >= 576px) {
            max-width: 576px !important;
        }
        @media (width >= 768px) {
            max-width: 768px !important;
        }
        @media (width >= 992px) {
            max-width: 992px !important;
        }
        @media (width >= 1024px) {
            max-width: 1024px !important;
        }
        @media (width >= 1200px) {
            max-width: 1200px !important;
        }
        @media (width >= 1400px) {
            max-width: 1400px !important;
        }
        @media (width >= 1600px) {
            max-width: 1600px !important;
        }
        @media (width >= 1700px) {
            max-width: 1700px !important;
        }
    }
    .container {
        width: 100%;
        @media (width >= 576px) {
            max-width: 576px;
        }
        @media (width >= 768px) {
            max-width: 768px;
        }
        @media (width >= 992px) {
            max-width: 992px;
        }
        @media (width >= 1024px) {
            max-width: 1024px;
        }
        @media (width >= 1200px) {
            max-width: 1200px;
        }
        @media (width >= 1400px) {
            max-width: 1400px;
        }
        @media (width >= 1600px) {
            max-width: 1600px;
        }
        @media (width >= 1700px) {
            max-width: 1700px;
        }
    }
    .m-auto {
        margin: auto;
    }
    .-mx-10 {
        margin-inline: calc(var(--spacing) * -10);
    }
    .mx-10 {
        margin-inline: calc(var(--spacing) * 10);
    }
    .mx-15 {
        margin-inline: calc(var(--spacing) * 15);
    }
    .mx-20 {
        margin-inline: calc(var(--spacing) * 20);
    }
    .mx-auto {
        margin-inline: auto;
    }
    .my-10 {
        margin-block: calc(var(--spacing) * 10);
    }
    .my-20 {
        margin-block: calc(var(--spacing) * 20);
    }
    .my-30 {
        margin-block: calc(var(--spacing) * 30);
    }
    .-ms-40 {
        margin-inline-start: calc(var(--spacing) * -40);
    }
    .ms-5 {
        margin-inline-start: calc(var(--spacing) * 5);
    }
    .ms-15 {
        margin-inline-start: calc(var(--spacing) * 15);
    }
    .ms-16 {
        margin-inline-start: calc(var(--spacing) * 16);
    }
    .ms-auto {
        margin-inline-start: auto;
    }
    .-me-13 {
        margin-inline-end: calc(var(--spacing) * -13);
    }
    .me-5 {
        margin-inline-end: calc(var(--spacing) * 5);
    }
    .me-10 {
        margin-inline-end: calc(var(--spacing) * 10);
    }
    .\!mt-0 {
        margin-top: calc(var(--spacing) * 0) !important;
    }
    .\!mt-20 {
        margin-top: calc(var(--spacing) * 20) !important;
    }
    .\!mt-40 {
        margin-top: calc(var(--spacing) * 40) !important;
    }
    .\!mt-auto {
        margin-top: auto !important;
    }
    .-mt-30 {
        margin-top: calc(var(--spacing) * -30);
    }
    .-mt-90 {
        margin-top: calc(var(--spacing) * -90);
    }
    .mt-8 {
        margin-top: calc(var(--spacing) * 8);
    }
    .mt-10 {
        margin-top: calc(var(--spacing) * 10);
    }
    .mt-15 {
        margin-top: calc(var(--spacing) * 15);
    }
    .mt-20 {
        margin-top: calc(var(--spacing) * 20);
    }
    .mt-25 {
        margin-top: calc(var(--spacing) * 25);
    }
    .mt-27 {
        margin-top: calc(var(--spacing) * 27);
    }
    .mt-30 {
        margin-top: calc(var(--spacing) * 30);
    }
    .mt-40 {
        margin-top: calc(var(--spacing) * 40);
    }
    .mt-50 {
        margin-top: calc(var(--spacing) * 50);
    }
    .mt-auto {
        margin-top: auto;
    }
    .mr-1 {
        margin-right: calc(var(--spacing) * 1);
    }
    .mr-2 {
        margin-right: calc(var(--spacing) * 2);
    }
    .mr-4 {
        margin-right: calc(var(--spacing) * 4);
    }
    .mr-5 {
        margin-right: calc(var(--spacing) * 5);
    }
    .mr-8 {
        margin-right: calc(var(--spacing) * 8);
    }
    .mr-10 {
        margin-right: calc(var(--spacing) * 10);
    }
    .mr-15 {
        margin-right: calc(var(--spacing) * 15);
    }
    .mr-16 {
        margin-right: calc(var(--spacing) * 16);
    }
    .mr-20 {
        margin-right: calc(var(--spacing) * 20);
    }
    .mr-30 {
        margin-right: calc(var(--spacing) * 30);
    }
    .mr-40 {
        margin-right: calc(var(--spacing) * 40);
    }
    .\!mb-15 {
        margin-bottom: calc(var(--spacing) * 15) !important;
    }
    .-mb-0\.5 {
        margin-bottom: calc(var(--spacing) * -0.5);
    }
    .-mb-15 {
        margin-bottom: calc(var(--spacing) * -15);
    }
    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2);
    }
    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
    }
    .mb-5 {
        margin-bottom: calc(var(--spacing) * 5);
    }
    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8);
    }
    .mb-10 {
        margin-bottom: calc(var(--spacing) * 10);
    }
    .mb-12 {
        margin-bottom: calc(var(--spacing) * 12);
    }
    .mb-14 {
        margin-bottom: calc(var(--spacing) * 14);
    }
    .mb-14\.5 {
        margin-bottom: calc(var(--spacing) * 14.5);
    }
    .mb-15 {
        margin-bottom: calc(var(--spacing) * 15);
    }
    .mb-16 {
        margin-bottom: calc(var(--spacing) * 16);
    }
    .mb-20 {
        margin-bottom: calc(var(--spacing) * 20);
    }
    .mb-21 {
        margin-bottom: calc(var(--spacing) * 21);
    }
    .mb-24 {
        margin-bottom: calc(var(--spacing) * 24);
    }
    .mb-25 {
        margin-bottom: calc(var(--spacing) * 25);
    }
    .mb-26 {
        margin-bottom: calc(var(--spacing) * 26);
    }
    .mb-30 {
        margin-bottom: calc(var(--spacing) * 30);
    }
    .mb-35 {
        margin-bottom: calc(var(--spacing) * 35);
    }
    .mb-40 {
        margin-bottom: calc(var(--spacing) * 40);
    }
    .mb-45 {
        margin-bottom: calc(var(--spacing) * 45);
    }
    .mb-50 {
        margin-bottom: calc(var(--spacing) * 50);
    }
    .mb-70 {
        margin-bottom: calc(var(--spacing) * 70);
    }
    .mb-100 {
        margin-bottom: calc(var(--spacing) * 100);
    }
    .-ml-45 {
        margin-left: calc(var(--spacing) * -45);
    }
    .ml-9 {
        margin-left: calc(var(--spacing) * 9);
    }
    .ml-10 {
        margin-left: calc(var(--spacing) * 10);
    }
    .ml-18 {
        margin-left: calc(var(--spacing) * 18);
    }
    .ml-auto {
        margin-left: auto;
    }
    .\!block {
        display: block !important;
    }
    .\!flex {
        display: flex !important;
    }
    .block {
        display: block;
    }
    .contents {
        display: contents;
    }
    .flex {
        display: flex;
    }
    .grid {
        display: grid;
    }
    .hidden {
        display: none;
    }
    .inline {
        display: inline;
    }
    .inline-block {
        display: inline-block;
    }
    .inline-flex {
        display: inline-flex;
    }
    .table {
        display: table;
    }
    .table-column {
        display: table-column;
    }
    .table-row {
        display: table-row;
    }
    .\!size-20 {
        width: calc(var(--spacing) * 20) !important;
        height: calc(var(--spacing) * 20) !important;
    }
    .\!size-auto {
        width: auto !important;
        height: auto !important;
    }
    .size-5 {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
    }
    .size-15 {
        width: calc(var(--spacing) * 15);
        height: calc(var(--spacing) * 15);
    }
    .size-16 {
        width: calc(var(--spacing) * 16);
        height: calc(var(--spacing) * 16);
    }
    .size-26 {
        width: calc(var(--spacing) * 26);
        height: calc(var(--spacing) * 26);
    }
    .size-30 {
        width: calc(var(--spacing) * 30);
        height: calc(var(--spacing) * 30);
    }
    .size-34 {
        width: calc(var(--spacing) * 34);
        height: calc(var(--spacing) * 34);
    }
    .size-35 {
        width: calc(var(--spacing) * 35);
        height: calc(var(--spacing) * 35);
    }
    .size-38 {
        width: calc(var(--spacing) * 38);
        height: calc(var(--spacing) * 38);
    }
    .size-40 {
        width: calc(var(--spacing) * 40);
        height: calc(var(--spacing) * 40);
    }
    .size-42 {
        width: calc(var(--spacing) * 42);
        height: calc(var(--spacing) * 42);
    }
    .size-44 {
        width: calc(var(--spacing) * 44);
        height: calc(var(--spacing) * 44);
    }
    .size-45 {
        width: calc(var(--spacing) * 45);
        height: calc(var(--spacing) * 45);
    }
    .size-50 {
        width: calc(var(--spacing) * 50);
        height: calc(var(--spacing) * 50);
    }
    .size-52 {
        width: calc(var(--spacing) * 52);
        height: calc(var(--spacing) * 52);
    }
    .size-55 {
        width: calc(var(--spacing) * 55);
        height: calc(var(--spacing) * 55);
    }
    .size-60 {
        width: calc(var(--spacing) * 60);
        height: calc(var(--spacing) * 60);
    }
    .size-65 {
        width: calc(var(--spacing) * 65);
        height: calc(var(--spacing) * 65);
    }
    .size-70 {
        width: calc(var(--spacing) * 70);
        height: calc(var(--spacing) * 70);
    }
    .size-77 {
        width: calc(var(--spacing) * 77);
        height: calc(var(--spacing) * 77);
    }
    .size-80 {
        width: calc(var(--spacing) * 80);
        height: calc(var(--spacing) * 80);
    }
    .size-85 {
        width: calc(var(--spacing) * 85);
        height: calc(var(--spacing) * 85);
    }
    .size-100 {
        width: calc(var(--spacing) * 100);
        height: calc(var(--spacing) * 100);
    }

    .size-150 {
        width: calc(var(--spacing) * 150);
        height: calc(var(--spacing) * 150);
    }
    .size-110 {
        width: calc(var(--spacing) * 110);
        height: calc(var(--spacing) * 110);
    }
    .size-170 {
        width: calc(var(--spacing) * 170);
        height: calc(var(--spacing) * 170);
    }
    .size-176 {
        width: calc(var(--spacing) * 176);
        height: calc(var(--spacing) * 176);
    }
    .size-290 {
        width: calc(var(--spacing) * 290);
        height: calc(var(--spacing) * 290);
    }
    .size-full {
        width: 100%;
        height: 100%;
    }
    .\!h-1 {
        height: calc(var(--spacing) * 1) !important;
    }
    .\!h-auto {
        height: auto !important;
    }
    .\!h-full {
        height: 100% !important;
    }
    .h-20 {
        height: calc(var(--spacing) * 20);
    }
    .h-30 {
        height: calc(var(--spacing) * 30);
    }
    .h-40 {
        height: calc(var(--spacing) * 40);
    }
    .h-50 {
        height: calc(var(--spacing) * 50);
    }
    .h-150 {
        height: calc(var(--spacing) * 150);
    }
    .h-180 {
        height: calc(var(--spacing) * 180);
    }
    .h-250 {
        height: calc(var(--spacing) * 250);
    }
    .h-300 {
        height: calc(var(--spacing) * 300);
    }
    .h-350 {
        height: calc(var(--spacing) * 350);
    }
    .h-500 {
        height: calc(var(--spacing) * 500);
    }
    .h-720 {
        height: calc(var(--spacing) * 720);
    }
    .h-\[calc\(100vh-140px\)\] {
        height: calc(100vh - 140px);
    }
    .h-auto {
        height: auto;
    }
    .h-full {
        height: 100%;
    }
    .h-px {
        height: 1px;
    }
    .h-screen {
        height: 100vh;
    }
    .max-h-400 {
        max-height: calc(var(--spacing) * 400);
    }
    .max-h-500 {
        max-height: calc(var(--spacing) * 500);
    }
    .max-h-700 {
        max-height: calc(var(--spacing) * 700);
    }
    .max-h-800 {
        max-height: calc(var(--spacing) * 800);
    }
    .max-h-850 {
        max-height: calc(var(--spacing) * 850);
    }
    .max-h-999 {
        max-height: calc(var(--spacing) * 999);
    }
    .min-h-35 {
        min-height: calc(var(--spacing) * 35);
    }
    .min-h-115 {
        min-height: calc(var(--spacing) * 115);
    }
    .min-h-150 {
        min-height: calc(var(--spacing) * 150);
    }
    .min-h-270 {
        min-height: calc(var(--spacing) * 270);
    }
    .min-h-300 {
        min-height: calc(var(--spacing) * 300);
    }
    .min-h-400 {
        min-height: calc(var(--spacing) * 400);
    }
    .\!w-50 {
        width: calc(var(--spacing) * 50) !important;
    }
    .\!w-auto {
        width: auto !important;
    }
    .\!w-full {
        width: 100% !important;
    }
    .w-1\/2 {
        width: calc(1 / 2 * 100%);
    }
    .w-2\/3 {
        width: calc(2 / 3 * 100%);
    }
    .w-2\/5 {
        width: calc(2 / 5 * 100%);
    }
    .w-40 {
        width: calc(var(--spacing) * 40);
    }
    .w-42 {
        width: calc(var(--spacing) * 42);
    }
    .w-58 {
        width: calc(var(--spacing) * 58);
    }
    .w-100 {
        width: calc(var(--spacing) * 100);
    }
    .w-107 {
        width: calc(var(--spacing) * 107);
    }
    .w-110 {
        width: calc(var(--spacing) * 110);
    }
    .w-130 {
        width: calc(var(--spacing) * 130);
    }
    .w-300 {
        width: calc(var(--spacing) * 300);
    }
    .w-320 {
        width: calc(var(--spacing) * 320);
    }
    .w-350 {
        width: calc(var(--spacing) * 350);
    }
    .w-713 {
        width: calc(var(--spacing) * 713);
    }
    .w-\[1\%\] {
        width: 1%;
    }
    .w-\[70\%\] {
        width: 70%;
    }
    .w-full {
        width: 100%;
    }
    .w-max {
        width: max-content;
    }
    .max-w-2xl {
        max-width: var(--container-2xl);
    }
    .max-w-107 {
        max-width: calc(var(--spacing) * 107);
    }
    .max-w-140 {
        max-width: calc(var(--spacing) * 140);
    }
    .max-w-160 {
        max-width: calc(var(--spacing) * 160);
    }
    .max-w-170 {
        max-width: calc(var(--spacing) * 170);
    }
    .max-w-340 {
        max-width: calc(var(--spacing) * 340);
    }
    .max-w-450 {
        max-width: calc(var(--spacing) * 450);
    }
    .max-w-500 {
        max-width: calc(var(--spacing) * 500);
    }
    .max-w-514 {
        max-width: calc(var(--spacing) * 514);
    }
    .max-w-559 {
        max-width: calc(var(--spacing) * 559);
    }
    .max-w-560 {
        max-width: calc(var(--spacing) * 560);
    }
    .max-w-580 {
        max-width: calc(var(--spacing) * 580);
    }
    .max-w-600 {
        max-width: calc(var(--spacing) * 600);
    }
    .max-w-620 {
        max-width: calc(var(--spacing) * 620);
    }
    .max-w-666 {
        max-width: calc(var(--spacing) * 666);
    }
    .max-w-700 {
        max-width: calc(var(--spacing) * 700);
    }
    .max-w-800 {
        max-width: calc(var(--spacing) * 800);
    }
    .max-w-850 {
        max-width: calc(var(--spacing) * 850);
    }
    .max-w-887 {
        max-width: calc(var(--spacing) * 887);
    }
    .max-w-900 {
        max-width: calc(var(--spacing) * 900);
    }
    .max-w-1000 {
        max-width: calc(var(--spacing) * 1000);
    }
    .max-w-1200 {
        max-width: calc(var(--spacing) * 1200);
    }
    .max-w-1320 {
        max-width: calc(var(--spacing) * 1320);
    }
    .max-w-full {
        max-width: 100%;
    }
    .min-w-25 {
        min-width: calc(var(--spacing) * 25);
    }
    .min-w-35 {
        min-width: calc(var(--spacing) * 35);
    }
    .min-w-40 {
        min-width: calc(var(--spacing) * 40);
    }
    .min-w-50 {
        min-width: calc(var(--spacing) * 50);
    }
    .min-w-60 {
        min-width: calc(var(--spacing) * 60);
    }
    .min-w-70 {
        min-width: calc(var(--spacing) * 70);
    }
    .min-w-80 {
        min-width: calc(var(--spacing) * 80);
    }
    .min-w-90 {
        min-width: calc(var(--spacing) * 90);
    }
    .flex-1 {
        flex: 1;
    }
    .flex-auto {
        flex: auto;
    }
    .grow {
        flex-grow: 1;
    }
    .border-collapse {
        border-collapse: collapse;
    }
    .-translate-1\/2 {
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-x-full {
        --tw-translate-x: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-x-1\/2 {
        --tw-translate-x: calc(1 / 2 * 100%);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-x-30 {
        --tw-translate-x: calc(var(--spacing) * 30);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-x-\[-130px\] {
        --tw-translate-x: -130px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-y-0\.5 {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .-translate-y-16 {
        --tw-translate-y: calc(var(--spacing) * -16);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-y-1\/2 {
        --tw-translate-y: calc(1 / 2 * 100%);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .translate-y-10 {
        --tw-translate-y: calc(var(--spacing) * 10);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .scale-\[0\.6\] {
        scale: 0.6;
    }
    .scale-\[0\.30\] {
        scale: 0.3;
    }
    .scale-\[0\.45\] {
        scale: 0.45;
    }
    .scale-\[0\.67\] {
        scale: 0.67;
    }
    .-rotate-90 {
        rotate: calc(90deg * -1);
    }
    .rotate-\[-6deg\] {
        rotate: -6deg;
    }
    .rotate-\[-360deg\] {
        rotate: -360deg;
    }
    .rotate-\[15deg\] {
        rotate: 15deg;
    }
    .rotate-\[35deg\] {
        rotate: 35deg;
    }
    .\[transform\:translate\(-20\%\,_-50\%\)\] {
        transform: translate(-20%, -50%);
    }
    .transform {
        transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
            var(--tw-skew-x) var(--tw-skew-y);
    }
    .animate-ScaleInOut {
        animation: var(--animate-ScaleInOut);
    }
    .animate-dzRing {
        animation: var(--animate-dzRing);
    }
    .animate-rotate {
        animation: var(--animate-rotate);
    }
    .animate-topshap {
        animation: var(--animate-topshap);
    }
    .cursor-default {
        cursor: default;
    }
    .cursor-move {
        cursor: move;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .cursor-text {
        cursor: text;
    }
    .resize {
        resize: both;
    }
    .grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .flex-col {
        flex-direction: column;
    }
    .flex-row {
        flex-direction: row;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .items-baseline {
        align-items: baseline;
    }
    .items-center {
        align-items: center;
    }
    .items-end {
        align-items: flex-end;
    }
    .items-start {
        align-items: flex-start;
    }
    .items-stretch {
        align-items: stretch;
    }
    .justify-between {
        justify-content: space-between;
    }
    .justify-center {
        justify-content: center;
    }
    .justify-end {
        justify-content: flex-end;
    }
    .justify-start {
        justify-content: flex-start;
    }
    .gap-1 {
        gap: calc(var(--spacing) * 1);
    }
    .gap-4 {
        gap: calc(var(--spacing) * 4);
    }
    .gap-5 {
        gap: calc(var(--spacing) * 5);
    }
    .gap-6 {
        gap: calc(var(--spacing) * 6);
    }
    .gap-8 {
        gap: calc(var(--spacing) * 8);
    }
    .gap-10 {
        gap: calc(var(--spacing) * 10);
    }
    .gap-11 {
        gap: calc(var(--spacing) * 11);
    }
    .gap-12 {
        gap: calc(var(--spacing) * 12);
    }
    .gap-13 {
        gap: calc(var(--spacing) * 13);
    }
    .gap-14 {
        gap: calc(var(--spacing) * 14);
    }
    .gap-15 {
        gap: calc(var(--spacing) * 15);
    }
    .gap-17 {
        gap: calc(var(--spacing) * 17);
    }
    .gap-20 {
        gap: calc(var(--spacing) * 20);
    }
    .gap-25 {
        gap: calc(var(--spacing) * 25);
    }
    .gap-26 {
        gap: calc(var(--spacing) * 26);
    }
    .gap-30 {
        gap: calc(var(--spacing) * 30);
    }
    .gap-35 {
        gap: calc(var(--spacing) * 35);
    }
    .gap-37 {
        gap: calc(var(--spacing) * 37);
    }
    .gap-40 {
        gap: calc(var(--spacing) * 40);
    }
    .gap-41 {
        gap: calc(var(--spacing) * 41);
    }
    .gap-43 {
        gap: calc(var(--spacing) * 43);
    }
    .gap-45 {
        gap: calc(var(--spacing) * 45);
    }
    .gap-60 {
        gap: calc(var(--spacing) * 60);
    }
    .gap-x-16 {
        column-gap: calc(var(--spacing) * 16);
    }
    .gap-x-40 {
        column-gap: calc(var(--spacing) * 40);
    }
    .gap-y-6 {
        row-gap: calc(var(--spacing) * 6);
    }
    .gap-y-20 {
        row-gap: calc(var(--spacing) * 20);
    }
    .gap-y-30 {
        row-gap: calc(var(--spacing) * 30);
    }
    .gap-y-66 {
        row-gap: calc(var(--spacing) * 66);
    }
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .overflow-auto {
        overflow: auto;
    }
    .overflow-hidden {
        overflow: hidden;
    }
    .overflow-x-auto {
        overflow-x: auto;
    }
    .overflow-y-auto {
        overflow-y: auto;
    }
    .\!rounded-none {
        border-radius: 0 !important;
    }
    .rounded {
        border-radius: var(--radius);
    }
    .rounded-2lg {
        border-radius: var(--radius-2lg);
    }
    .rounded-2xl {
        border-radius: var(--radius-2xl);
    }
    .rounded-full {
        border-radius: calc(infinity * 1px);
    }
    .rounded-lg {
        border-radius: var(--radius-lg);
    }
    .rounded-md {
        border-radius: var(--radius-md);
    }
    .rounded-none {
        border-radius: 0;
    }
    .rounded-sm {
        border-radius: var(--radius-sm);
    }
    .rounded-xl {
        border-radius: var(--radius-xl);
    }
    .rounded-tl-2lg {
        border-top-left-radius: var(--radius-2lg);
    }
    .rounded-tr-\[15px\] {
        border-top-right-radius: 15px;
    }
    .rounded-br-\[15px\] {
        border-bottom-right-radius: 15px;
    }
    .rounded-bl-2lg {
        border-bottom-left-radius: var(--radius-2lg);
    }
    .border {
        border-style: var(--tw-border-style);
        border-width: 1px;
    }
    .border-2 {
        border-style: var(--tw-border-style);
        border-width: 2px;
    }
    .border-5 {
        border-style: var(--tw-border-style);
        border-width: 5px;
    }
    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
    }
    .border-r {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
    }
    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
    }
    .border-b-2 {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 2px;
    }
    .\!border-none {
        --tw-border-style: none !important;
        border-style: none !important;
    }
    .border-none {
        --tw-border-style: none;
        border-style: none;
    }
    .border-\[\#383B3F\] {
        border-color: #383b3f;
    }
    .border-\[\#24262B\] {
        border-color: #24262b;
    }
    .border-\[\#D7D7D7\] {
        border-color: #d7d7d7;
    }
    .border-black {
        border-color: var(--color-black);
    }
    .border-black\/10 {
        border-color: color-mix(in srgb, #000 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-black) 10%,
                transparent
            );
        }
    }
    .border-black\/15 {
        border-color: color-mix(in srgb, #000 15%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-black) 15%,
                transparent
            );
        }
    }
    .border-black\/20 {
        border-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-black) 20%,
                transparent
            );
        }
    }
    .border-black\/30 {
        border-color: color-mix(in srgb, #000 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-black) 30%,
                transparent
            );
        }
    }
    .border-bodytext\/30 {
        border-color: var(--color-bodytext);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-bodytext) 30%,
                transparent
            );
        }
    }
    .border-card {
        border-color: var(--color-card);
    }
    .border-experienceboxborder {
        border-color: var(--color-experienceboxborder);
    }
    .border-gray-200 {
        border-color: var(--color-gray-200);
    }
    .border-lightbg {
        border-color: var(--color-lightbg);
    }
    .border-primary {
        border-color: var(--color-primary);
    }
    .border-secondary {
        border-color: var(--color-secondary);
    }
    .border-secondary\/10 {
        border-color: var(--color-secondary);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-secondary) 10%,
                transparent
            );
        }
    }
    .border-transparent {
        border-color: transparent;
    }
    .border-white {
        border-color: var(--color-white);
    }
    .border-white\/20 {
        border-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-white) 20%,
                transparent
            );
        }
    }
    .\!bg-lightbg {
        background-color: var(--color-lightbg) !important;
    }
    .\!bg-transparent {
        background-color: transparent !important;
    }
    .bg-\[\#1D1F22\] {
        background-color: #1d1f22;
    }
    .bg-\[\#181D19\] {
        background-color: #181d19;
    }
    .bg-\[\#24262B\] {
        background-color: #24262b;
    }
    .bg-\[\#F9F9F9\] {
        background-color: #f9f9f9;
    }
    .bg-\[\#FFEDDA\] {
        background-color: #ffedda;
    }
    .bg-\[\#fff6ec\] {
        background-color: #fff6ec;
    }
    .bg-banner2bgcolor {
        background-color: var(--color-banner2bgcolor);
    }
    .bg-banner2bgsecond {
        background-color: var(--color-banner2bgsecond);
    }
    .bg-banner3bgcolor {
        background-color: var(--color-banner3bgcolor);
    }
    .bg-bggreen {
        background-color: var(--color-bggreen);
    }
    .bg-bglight {
        background-color: var(--color-bglight);
    }
    .bg-black {
        background-color: var(--color-black);
    }
    .bg-black\/5 {
        background-color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-black) 5%,
                transparent
            );
        }
    }
    .bg-black\/10 {
        background-color: color-mix(in srgb, #000 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-black) 10%,
                transparent
            );
        }
    }
    .bg-black\/20 {
        background-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-black) 20%,
                transparent
            );
        }
    }
    .bg-black\/40 {
        background-color: color-mix(in srgb, #000 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-black) 40%,
                transparent
            );
        }
    }
    .bg-black\/50 {
        background-color: color-mix(in srgb, #000 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-black) 50%,
                transparent
            );
        }
    }
    .bg-black\/80 {
        background-color: color-mix(in srgb, #000 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-black) 80%,
                transparent
            );
        }
    }
    .bg-bodybg {
        background-color: var(--color-bodybg);
    }
    .bg-bodyfg {
        background-color: var(--color-bodyfg);
    }
    .bg-card {
        background-color: var(--color-card);
    }
    .bg-card-light {
        background-color: var(--color-card-light);
    }
    .bg-gray-300 {
        background-color: var(--color-gray-300);
    }
    .bg-infobg {
        background-color: var(--color-infobg);
    }
    .bg-lightbackground {
        background-color: var(--color-lightbackground);
    }
    .bg-lightbackground\/30 {
        background-color: color-mix(in srgb, #f1f1f1 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-lightbackground) 30%,
                transparent
            );
        }
    }
    .bg-lightbg {
        background-color: var(--color-lightbg);
    }
    .bg-lightgarybg {
        background-color: var(--color-lightgarybg);
    }
    .bg-lightgreen {
        background-color: var(--color-lightgreen);
    }
    .bg-lightyellow {
        background-color: var(--color-lightyellow);
    }
    .bg-orange {
        background-color: var(--color-orange);
    }
    .bg-pich {
        background-color: var(--color-pich);
    }
    .bg-primary {
        background-color: var(--color-primary);
    }

    .bg-primary-image {
        background-image: url("../images/monikachudasama/contact-us.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover; /* or contain */
    }

    .bg-secondary {
        background-color: var(--color-secondary);
    }
    .bg-secondary\/10 {
        background-color: var(--color-secondary);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-secondary) 10%,
                transparent
            );
        }
    }
    .bg-textgreen {
        background-color: var(--color-textgreen);
    }
    .bg-transparent {
        background-color: transparent;
    }
    .bg-white {
        background-color: var(--color-white);
    }
    .bg-gradient-to-b {
        --tw-gradient-position: to bottom in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops));
    }
    .bg-\[url\(\'\.\.\/images\/404\.png\'\)\] {
        background-image: url("../images/404.png");
    }
    .bg-\[url\(\'\.\.\/images\/background\/pic1\.png\'\)\] {
        background-image: url("../images/background/pic1.png");
    }
    .bg-\[url\(\.\.\/images\/about-us\/img1\.png\)\] {
        background-image: url(../images/about-us/img1.png);
    }
    .bg-\[url\(\.\.\/images\/background\/bg1\.png\)\] {
        background-image: url(../images/background/bg1.png);
    }
    .bg-\[url\(\.\.\/images\/background\/bg2\.png\)\] {
        background-image: url(../images/background/bg2.png);
    }
    .bg-\[url\(\.\.\/images\/banner3\/background\/bg1\.png\)\] {
        background-image: url(../images/banner3/background/bg1.png);
    }
    .bg-\[url\(\.\.\/images\/blog\/details\/pic3\.png\)\] {
        background-image: url(../images/blog/details/pic3.png);
    }
    .bg-\[url\(\.\.\/images\/service-detail\/pic5\.png\)\] {
        background-image: url(../images/service-detail/pic5.png);
    }
    .from-\[\#FFFFFF\] {
        --tw-gradient-from: #ffffff;
        --tw-gradient-stops: var(
            --tw-gradient-via-stops,
            var(--tw-gradient-position),
            var(--tw-gradient-from) var(--tw-gradient-from-position),
            var(--tw-gradient-to) var(--tw-gradient-to-position)
        );
    }
    .from-\[\#ffffff\] {
        --tw-gradient-from: #ffffff;
        --tw-gradient-stops: var(
            --tw-gradient-via-stops,
            var(--tw-gradient-position),
            var(--tw-gradient-from) var(--tw-gradient-from-position),
            var(--tw-gradient-to) var(--tw-gradient-to-position)
        );
    }
    .to-\[\#F2FBF5\] {
        --tw-gradient-to: #f2fbf5;
        --tw-gradient-stops: var(
            --tw-gradient-via-stops,
            var(--tw-gradient-position),
            var(--tw-gradient-from) var(--tw-gradient-from-position),
            var(--tw-gradient-to) var(--tw-gradient-to-position)
        );
    }
    .to-\[\#f2fbf5\] {
        --tw-gradient-to: #f2fbf5;
        --tw-gradient-stops: var(
            --tw-gradient-via-stops,
            var(--tw-gradient-position),
            var(--tw-gradient-from) var(--tw-gradient-from-position),
            var(--tw-gradient-to) var(--tw-gradient-to-position)
        );
    }
    .bg-cover {
        background-size: cover;
    }
    .bg-fixed {
        background-attachment: fixed;
    }
    .bg-center {
        background-position: center;
    }
    .bg-no-repeat {
        background-repeat: no-repeat;
    }
    .fill-secondary {
        fill: var(--color-secondary);
    }
    .stroke-black {
        stroke: var(--color-black);
    }
    .stroke-secondary {
        stroke: var(--color-secondary);
    }
    .stroke-white {
        stroke: var(--color-white);
    }
    .object-contain {
        object-fit: contain;
    }
    .object-cover {
        object-fit: cover;
    }
    .object-center {
        object-position: center;
    }
    .object-top {
        object-position: top;
    }
    .\!p-0 {
        padding: calc(var(--spacing) * 0) !important;
    }
    .p-0 {
        padding: calc(var(--spacing) * 0);
    }
    .p-2 {
        padding: calc(var(--spacing) * 2);
    }
    .p-4 {
        padding: calc(var(--spacing) * 4);
    }
    .p-6 {
        padding: calc(var(--spacing) * 6);
    }
    .p-8 {
        padding: calc(var(--spacing) * 8);
    }
    .p-10 {
        padding: calc(var(--spacing) * 10);
    }
    .p-15 {
        padding: calc(var(--spacing) * 15);
    }
    .p-16 {
        padding: calc(var(--spacing) * 16);
    }
    .p-20 {
        padding: calc(var(--spacing) * 20);
    }
    .p-30 {
        padding: calc(var(--spacing) * 30);
    }
    .p-40 {
        padding: calc(var(--spacing) * 40);
    }
    .p-100 {
        padding: calc(var(--spacing) * 100);
    }
    .px-2\.5 {
        padding-inline: calc(var(--spacing) * 2.5);
    }
    .px-8 {
        padding-inline: calc(var(--spacing) * 8);
    }
    .px-10 {
        padding-inline: calc(var(--spacing) * 10);
    }
    .px-12 {
        padding-inline: calc(var(--spacing) * 12);
    }
    .px-15 {
        padding-inline: calc(var(--spacing) * 15);
    }
    .px-16 {
        padding-inline: calc(var(--spacing) * 16);
    }
    .px-20 {
        padding-inline: calc(var(--spacing) * 20);
    }
    .px-24 {
        padding-inline: calc(var(--spacing) * 24);
    }
    .px-25 {
        padding-inline: calc(var(--spacing) * 25);
    }
    .px-26 {
        padding-inline: calc(var(--spacing) * 26);
    }
    .px-30 {
        padding-inline: calc(var(--spacing) * 30);
    }
    .px-35 {
        padding-inline: calc(var(--spacing) * 35);
    }
    .px-40 {
        padding-inline: calc(var(--spacing) * 40);
    }
    .py-3 {
        padding-block: calc(var(--spacing) * 3);
    }
    .py-4\.5 {
        padding-block: calc(var(--spacing) * 4.5);
    }
    .py-5 {
        padding-block: calc(var(--spacing) * 5);
    }
    .py-6 {
        padding-block: calc(var(--spacing) * 6);
    }
    .py-7 {
        padding-block: calc(var(--spacing) * 7);
    }
    .py-8 {
        padding-block: calc(var(--spacing) * 8);
    }
    .py-10 {
        padding-block: calc(var(--spacing) * 10);
    }
    .py-11 {
        padding-block: calc(var(--spacing) * 11);
    }
    .py-12 {
        padding-block: calc(var(--spacing) * 12);
    }
    .py-13 {
        padding-block: calc(var(--spacing) * 13);
    }
    .py-14 {
        padding-block: calc(var(--spacing) * 14);
    }
    .py-15 {
        padding-block: calc(var(--spacing) * 15);
    }
    .py-15\.5 {
        padding-block: calc(var(--spacing) * 15.5);
    }
    .py-16 {
        padding-block: calc(var(--spacing) * 16);
    }
    .py-20 {
        padding-block: calc(var(--spacing) * 20);
    }
    .py-22 {
        padding-block: calc(var(--spacing) * 22);
    }
    .py-24 {
        padding-block: calc(var(--spacing) * 24);
    }
    .py-25 {
        padding-block: calc(var(--spacing) * 25);
    }
    .py-30 {
        padding-block: calc(var(--spacing) * 30);
    }
    .py-34 {
        padding-block: calc(var(--spacing) * 34);
    }
    .py-35 {
        padding-block: calc(var(--spacing) * 35);
    }
    .py-36 {
        padding-block: calc(var(--spacing) * 36);
    }
    .py-38 {
        padding-block: calc(var(--spacing) * 38);
    }
    .py-40 {
        padding-block: calc(var(--spacing) * 40);
    }
    .py-50 {
        padding-block: calc(var(--spacing) * 50);
    }
    .py-60 {
        padding-block: calc(var(--spacing) * 60);
    }
    .py-80 {
        padding-block: calc(var(--spacing) * 80);
    }
    .ps-5 {
        padding-inline-start: calc(var(--spacing) * 5);
    }
    .ps-8 {
        padding-inline-start: calc(var(--spacing) * 8);
    }
    .ps-15 {
        padding-inline-start: calc(var(--spacing) * 15);
    }
    .ps-20 {
        padding-inline-start: calc(var(--spacing) * 20);
    }
    .ps-30 {
        padding-inline-start: calc(var(--spacing) * 30);
    }
    .ps-35 {
        padding-inline-start: calc(var(--spacing) * 35);
    }
    .ps-38 {
        padding-inline-start: calc(var(--spacing) * 38);
    }
    .ps-40 {
        padding-inline-start: calc(var(--spacing) * 40);
    }
    .pe-10 {
        padding-inline-end: calc(var(--spacing) * 10);
    }
    .pe-14 {
        padding-inline-end: calc(var(--spacing) * 14);
    }
    .pe-20 {
        padding-inline-end: calc(var(--spacing) * 20);
    }
    .pe-30 {
        padding-inline-end: calc(var(--spacing) * 30);
    }
    .pe-40 {
        padding-inline-end: calc(var(--spacing) * 40);
    }
    .pe-130 {
        padding-inline-end: calc(var(--spacing) * 130);
    }
    .pt-2 {
        padding-top: calc(var(--spacing) * 2);
    }
    .pt-10 {
        padding-top: calc(var(--spacing) * 10);
    }
    .pt-15 {
        padding-top: calc(var(--spacing) * 15);
    }
    .pt-20 {
        padding-top: calc(var(--spacing) * 20);
    }
    .pt-25 {
        padding-top: calc(var(--spacing) * 25);
    }
    .pt-30 {
        padding-top: calc(var(--spacing) * 30);
    }
    .pt-35 {
        padding-top: calc(var(--spacing) * 35);
    }
    .pt-40 {
        padding-top: calc(var(--spacing) * 40);
    }
    .pt-50 {
        padding-top: calc(var(--spacing) * 50);
    }
    .pt-53 {
        padding-top: calc(var(--spacing) * 53);
    }
    .pt-60 {
        padding-top: calc(var(--spacing) * 60);
    }
    .pt-80 {
        padding-top: calc(var(--spacing) * 80);
    }
    .pt-90 {
        padding-top: calc(var(--spacing) * 90);
    }
    .pt-100 {
        padding-top: calc(var(--spacing) * 100);
    }
    .pt-109 {
        padding-top: calc(var(--spacing) * 109);
    }
    .pt-110 {
        padding-top: calc(var(--spacing) * 110);
    }
    .pt-115 {
        padding-top: calc(var(--spacing) * 115);
    }
    .pt-120 {
        padding-top: calc(var(--spacing) * 120);
    }
    .pt-128 {
        padding-top: calc(var(--spacing) * 128);
    }
    .pt-130 {
        padding-top: calc(var(--spacing) * 130);
    }
    .pt-138 {
        padding-top: calc(var(--spacing) * 138);
    }
    .pt-140 {
        padding-top: calc(var(--spacing) * 140);
    }
    .pt-155 {
        padding-top: calc(var(--spacing) * 155);
    }
    .pt-156 {
        padding-top: calc(var(--spacing) * 156);
    }
    .pt-160 {
        padding-top: calc(var(--spacing) * 160);
    }
    .pt-170 {
        padding-top: calc(var(--spacing) * 170);
    }
    .pb-0 {
        padding-bottom: calc(var(--spacing) * 0);
    }
    .pb-15 {
        padding-bottom: calc(var(--spacing) * 15);
    }
    .pb-20 {
        padding-bottom: calc(var(--spacing) * 20);
    }
    .pb-30 {
        padding-bottom: calc(var(--spacing) * 30);
    }
    .pb-36 {
        padding-bottom: calc(var(--spacing) * 36);
    }
    .pb-40 {
        padding-bottom: calc(var(--spacing) * 40);
    }
    .pb-50 {
        padding-bottom: calc(var(--spacing) * 50);
    }
    .pb-55 {
        padding-bottom: calc(var(--spacing) * 55);
    }
    .pb-60 {
        padding-bottom: calc(var(--spacing) * 60);
    }
    .pb-64 {
        padding-bottom: calc(var(--spacing) * 64);
    }
    .pb-70 {
        padding-bottom: calc(var(--spacing) * 70);
    }
    .pb-80 {
        padding-bottom: calc(var(--spacing) * 80);
    }
    .pb-90 {
        padding-bottom: calc(var(--spacing) * 90);
    }
    .pb-110 {
        padding-bottom: calc(var(--spacing) * 110);
    }
    .pb-120 {
        padding-bottom: calc(var(--spacing) * 120);
    }
    .pb-130 {
        padding-bottom: calc(var(--spacing) * 130);
    }
    .pb-160 {
        padding-bottom: calc(var(--spacing) * 160);
    }
    .pb-181 {
        padding-bottom: calc(var(--spacing) * 181);
    }
    .pl-20 {
        padding-left: calc(var(--spacing) * 20);
    }
    .pl-100 {
        padding-left: calc(var(--spacing) * 100);
    }
    .text-center {
        text-align: center;
    }
    .text-left {
        text-align: left;
    }
    .text-right {
        text-align: right;
    }
    .text-start {
        text-align: start;
    }
    .align-middle {
        vertical-align: middle;
    }
    .font-display {
        font-family: var(--font-display);
    }
    .font-display-2 {
        font-family: var(--font-display-2);
    }
    .font-title {
        font-family: var(--font-title);
    }
    .text-2\.5xl\/22 {
        font-size: var(--text-2\.5xl);
        line-height: calc(var(--spacing) * 22);
    }
    .text-2\.5xl\/28 {
        font-size: var(--text-2\.5xl);
        line-height: calc(var(--spacing) * 28);
    }
    .text-2\.5xl\/35 {
        font-size: var(--text-2\.5xl);
        line-height: calc(var(--spacing) * 35);
    }
    .text-2\.5xl\/65 {
        font-size: var(--text-2\.5xl);
        line-height: calc(var(--spacing) * 65);
    }
    .text-2sm\/35 {
        font-size: var(--text-2sm);
        line-height: calc(var(--spacing) * 35);
    }
    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .text-2xl\/28 {
        font-size: var(--text-2xl);
        line-height: calc(var(--spacing) * 28);
    }
    .text-2xl\/35 {
        font-size: var(--text-2xl);
        line-height: calc(var(--spacing) * 35);
    }
    .text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    .text-3xl\/35 {
        font-size: var(--text-3xl);
        line-height: calc(var(--spacing) * 35);
    }
    .text-3xl\/40 {
        font-size: var(--text-3xl);
        line-height: calc(var(--spacing) * 40);
    }
    .text-4\.3xl\/50 {
        font-size: var(--text-4\.3xl);
        line-height: calc(var(--spacing) * 50);
    }
    .text-4\.8xl\/45 {
        font-size: var(--text-4\.8xl);
        line-height: calc(var(--spacing) * 45);
    }
    .text-4\.75xl\/40 {
        font-size: var(--text-4\.75xl);
        line-height: calc(var(--spacing) * 40);
    }
    .text-4\.75xl\/50 {
        font-size: var(--text-4\.75xl);
        line-height: calc(var(--spacing) * 50);
    }
    .text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    .text-4xl\/44 {
        font-size: var(--text-4xl);
        line-height: calc(var(--spacing) * 44);
    }
    .text-4xl\/50 {
        font-size: var(--text-4xl);
        line-height: calc(var(--spacing) * 50);
    }
    .text-5\.5xl\/46 {
        font-size: var(--text-5\.5xl);
        line-height: calc(var(--spacing) * 46);
    }
    .text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    .text-5xl\/50 {
        font-size: var(--text-5xl);
        line-height: calc(var(--spacing) * 50);
    }
    .text-6xl\/69 {
        font-size: var(--text-6xl);
        line-height: calc(var(--spacing) * 69);
    }
    .text-6xl\/\[1\] {
        font-size: var(--text-6xl);
        line-height: 1;
    }
    .text-7xxl\/\[1\] {
        font-size: var(--text-7xxl);
        line-height: 1;
    }
    .text-8xl {
        font-size: var(--text-8xl);
        line-height: var(--tw-leading, var(--text-8xl--line-height));
    }
    .text-\[11px\]\/13 {
        font-size: 11px;
        line-height: calc(var(--spacing) * 13);
    }
    .text-\[17px\]\/24 {
        font-size: 17px;
        line-height: calc(var(--spacing) * 24);
    }
    .text-\[19px\]\/35 {
        font-size: 19px;
        line-height: calc(var(--spacing) * 35);
    }
    .text-\[23px\]\/34 {
        font-size: 23px;
        line-height: calc(var(--spacing) * 34);
    }
    .text-\[48px\]\/65 {
        font-size: 48px;
        line-height: calc(var(--spacing) * 65);
    }
    .text-\[85px\]\/28 {
        font-size: 85px;
        line-height: calc(var(--spacing) * 28);
    }
    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .text-base\/16 {
        font-size: var(--text-base);
        line-height: calc(var(--spacing) * 16);
    }
    .text-base\/35 {
        font-size: var(--text-base);
        line-height: calc(var(--spacing) * 35);
    }
    .text-base\/40 {
        font-size: var(--text-base);
        line-height: calc(var(--spacing) * 40);
    }
    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    .text-lg\/18 {
        font-size: var(--text-lg);
        line-height: calc(var(--spacing) * 18);
    }
    .text-lg\/22 {
        font-size: var(--text-lg);
        line-height: calc(var(--spacing) * 22);
    }
    .text-lg\/24 {
        font-size: var(--text-lg);
        line-height: calc(var(--spacing) * 24);
    }
    .text-lg\/26 {
        font-size: var(--text-lg);
        line-height: calc(var(--spacing) * 26);
    }
    .text-lg\/28 {
        font-size: var(--text-lg);
        line-height: calc(var(--spacing) * 28);
    }
    .text-lg\/30 {
        font-size: var(--text-lg);
        line-height: calc(var(--spacing) * 30);
    }
    .text-lg\/35 {
        font-size: var(--text-lg);
        line-height: calc(var(--spacing) * 35);
    }
    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .text-sm\/24 {
        font-size: var(--text-sm);
        line-height: calc(var(--spacing) * 24);
    }
    .text-sm\/35 {
        font-size: var(--text-sm);
        line-height: calc(var(--spacing) * 35);
    }
    .text-sm\/40 {
        font-size: var(--text-sm);
        line-height: calc(var(--spacing) * 40);
    }
    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .text-xl\/28 {
        font-size: var(--text-xl);
        line-height: calc(var(--spacing) * 28);
    }
    .text-xl\/30 {
        font-size: var(--text-xl);
        line-height: calc(var(--spacing) * 30);
    }
    .text-xl\/35 {
        font-size: var(--text-xl);
        line-height: calc(var(--spacing) * 35);
    }
    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .text-xs\/\[1\] {
        font-size: var(--text-xs);
        line-height: 1;
    }
    .text-xxl\/35 {
        font-size: var(--text-xxl);
        line-height: calc(var(--spacing) * 35);
    }
    .text-2\.5xl {
        font-size: var(--text-2\.5xl);
    }
    .text-2sm {
        font-size: var(--text-2sm);
    }
    .text-2xs {
        font-size: var(--text-2xs);
    }
    .text-2xxl {
        font-size: var(--text-2xxl);
    }
    .text-4\.3xl {
        font-size: var(--text-4\.3xl);
    }
    .text-4\.5xl {
        font-size: var(--text-4\.5xl);
    }
    .text-4\.8xl {
        font-size: var(--text-4\.8xl);
    }
    .text-4\.75xl {
        font-size: var(--text-4\.75xl);
    }
    .text-7xxl {
        font-size: var(--text-7xxl);
    }
    .text-\[13px\] {
        font-size: 13px;
    }
    .text-\[60px\] {
        font-size: 60px;
    }
    .text-xxl {
        font-size: var(--text-xxl);
    }
    .\!leading-36 {
        --tw-leading: calc(var(--spacing) * 36) !important;
        line-height: calc(var(--spacing) * 36) !important;
    }
    .leading-21 {
        --tw-leading: calc(var(--spacing) * 21);
        line-height: calc(var(--spacing) * 21);
    }
    .leading-34 {
        --tw-leading: calc(var(--spacing) * 34);
        line-height: calc(var(--spacing) * 34);
    }
    .leading-38 {
        --tw-leading: calc(var(--spacing) * 38);
        line-height: calc(var(--spacing) * 38);
    }
    .leading-40 {
        --tw-leading: calc(var(--spacing) * 40);
        line-height: calc(var(--spacing) * 40);
    }
    .leading-60 {
        --tw-leading: calc(var(--spacing) * 60);
        line-height: calc(var(--spacing) * 60);
    }
    .leading-\[1\.4\] {
        --tw-leading: 1.4;
        line-height: 1.4;
    }
    .leading-\[27px\] {
        --tw-leading: 27px;
        line-height: 27px;
    }
    .leading-none {
        --tw-leading: 1;
        line-height: 1;
    }
    .leading-relaxed {
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed);
    }
    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
    }
    .font-extrabold {
        --tw-font-weight: var(--font-weight-extrabold);
        font-weight: var(--font-weight-extrabold);
    }
    .font-light {
        --tw-font-weight: var(--font-weight-light);
        font-weight: var(--font-weight-light);
    }
    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
    }
    .font-normal {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
    }
    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
    }
    .tracking-widest {
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest);
    }
    .whitespace-normal {
        white-space: normal;
    }
    .whitespace-nowrap {
        white-space: nowrap;
    }
    .\!text-white {
        color: var(--color-white) !important;
    }
    .text-\[\#333\] {
        color: #333;
    }
    .text-\[\#CEC1B4\] {
        color: #cec1b4;
    }
    .text-banner3text {
        color: var(--color-banner3text);
    }
    .text-banner3title {
        color: var(--color-banner3title);
    }
    .text-bggreen {
        color: var(--color-bggreen);
    }
    .text-black {
        color: var(--color-black);
    }
    .text-black\/5 {
        color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-black) 5%, transparent);
        }
    }
    .text-bodyfg {
        color: var(--color-bodyfg);
    }
    .text-bodytext {
        color: var(--color-bodytext);
    }
    .text-bodytext\/60 {
        color: var(--color-bodytext);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-bodytext) 60%, transparent);
        }
    }
    .text-bodytext\/70 {
        color: var(--color-bodytext);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-bodytext) 70%, transparent);
        }
    }
    .text-darkinfo {
        color: var(--color-darkinfo);
    }
    .text-gray-200 {
        color: var(--color-gray-200);
    }
    .text-gray-300 {
        color: var(--color-gray-300);
    }
    .text-gray-400 {
        color: var(--color-gray-400);
    }
    .text-gray-600 {
        color: var(--color-gray-600);
    }
    .text-green {
        color: var(--color-green);
    }
    .text-orange {
        color: var(--color-orange);
    }
    .text-primary {
        color: var(--color-primary);
    }
    .text-secondary {
        color: var(--color-secondary);
    }
    .text-secondary\/70 {
        color: var(--color-secondary);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-secondary) 70%, transparent);
        }
    }
    .text-textgreen {
        color: var(--color-textgreen);
    }
    .text-textlight {
        color: var(--color-textlight);
    }
    .text-titelgary {
        color: var(--color-titelgary);
    }
    .text-white {
        color: var(--color-white);
    }
    .text-white\/30 {
        color: color-mix(in srgb, #fff 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-white) 30%, transparent);
        }
    }
    .text-white\/50 {
        color: color-mix(in srgb, #fff 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-white) 50%, transparent);
        }
    }
    .text-white\/60 {
        color: color-mix(in srgb, #fff 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-white) 60%, transparent);
        }
    }
    .text-white\/70 {
        color: color-mix(in srgb, #fff 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-white) 70%, transparent);
        }
    }
    .text-white\/80 {
        color: color-mix(in srgb, #fff 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-white) 80%, transparent);
        }
    }
    .text-yellow {
        color: var(--color-yellow);
    }
    .capitalize {
        text-transform: capitalize;
    }
    .uppercase {
        text-transform: uppercase;
    }
    .italic {
        font-style: italic;
    }
    .not-italic {
        font-style: normal;
    }
    .underline {
        text-decoration-line: underline;
    }
    .opacity-0 {
        opacity: 0%;
    }
    .opacity-20 {
        opacity: 20%;
    }
    .opacity-60 {
        opacity: 60%;
    }
    .bg-blend-multiply {
        background-blend-mode: multiply;
    }
    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
            0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-\[0px_0px_5px_rgba\(0\,0\,0\,0\.1\)\] {
        --tw-shadow: 0px 0px 5px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-\[0px_0px_30px_var\(--primary\)\] {
        --tw-shadow: 0px 0px 30px var(--tw-shadow-color, var(--primary));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-banner3Experiencebox {
        --tw-shadow: 0px 2px 5px var(--tw-shadow-color, rgba(0, 0, 0, 0.04));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-banner3icon {
        --tw-shadow: 0px 10px 20px
            var(--tw-shadow-color, rgba(28, 75, 66, 0.08));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-box-shadow {
        --tw-shadow: 0 2 4px var(--tw-shadow-color, rgba(0, 0, 0, 0.3));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-emailbox-shadow {
        --tw-shadow: 0px 10px 40px
            var(--tw-shadow-color, rgba(24, 29, 25, 0.08));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-googal-card {
        --tw-shadow: 0 0 60px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-nobtn-shadow {
        --tw-shadow: 0px 5px 10px
            var(--tw-shadow-color, rgba(255, 120, 54, 0.15));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .shadow-shadow-card {
        --tw-shadow: 0 15px 30px var(--tw-shadow-color, rgba(24, 29, 25, 0.05));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .ring {
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
            calc(1px + var(--tw-ring-offset-width))
            var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .blur-\[52px\] {
        --tw-blur: blur(52px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .brightness-1 {
        --tw-brightness: brightness(1%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .brightness-2 {
        --tw-brightness: brightness(2%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .brightness-3 {
        --tw-brightness: brightness(3%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .brightness-4 {
        --tw-brightness: brightness(4%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .brightness-5 {
        --tw-brightness: brightness(5%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .brightness-6 {
        --tw-brightness: brightness(6%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .brightness-7 {
        --tw-brightness: brightness(7%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .invert {
        --tw-invert: invert(100%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .filter {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .transition {
        transition-property: color, background-color, border-color,
            outline-color, text-decoration-color, fill, stroke,
            --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity,
            box-shadow, transform, translate, scale, rotate, filter,
            -webkit-backdrop-filter, backdrop-filter, display, visibility,
            content-visibility, overlay, pointer-events;
        transition-timing-function: var(
            --tw-ease,
            var(--default-transition-timing-function)
        );
        transition-duration: var(
            --tw-duration,
            var(--default-transition-duration)
        );
    }
    .duration-300 {
        --tw-duration: 300ms;
        transition-duration: 300ms;
    }
    .duration-500 {
        --tw-duration: 500ms;
        transition-duration: 500ms;
    }
    .duration-\[0\.2s\] {
        --tw-duration: 0.2s;
        transition-duration: 0.2s;
    }
    .duration-\[all_400ms_cubic-bezier\(0\.39\,_0\.58\,_0\.57\,_1\)_0s\] {
        --tw-duration: all 400ms cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
        transition-duration: all 400ms cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    }
    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out);
    }
    .outline-none {
        --tw-outline-style: none;
        outline-style: none;
    }
    .select-all {
        -webkit-user-select: all;
        user-select: all;
    }
    .select-none {
        -webkit-user-select: none;
        user-select: none;
    }
    .\[animation-direction\:reverse\] {
        animation-direction: reverse;
    }
    .\[hostname\:port\] {
        hostname: port;
    }
    .\[writing-mode\:sideways-rl\] {
        writing-mode: sideways-rl;
    }
    .\[writing-mode\:vertical-rl\] {
        writing-mode: vertical-rl;
    }
    .backface-hidden {
        backface-visibility: hidden;
    }
    .group-hover\:visible {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                visibility: visible;
            }
        }
    }
    .group-hover\:top-0 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                top: calc(var(--spacing) * 0);
            }
        }
    }
    .group-hover\:top-1\/2 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                top: calc(1 / 2 * 100%);
            }
        }
    }
    .group-hover\:top-50 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                top: calc(var(--spacing) * 50);
            }
        }
    }
    .group-hover\:right-15 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                right: calc(var(--spacing) * 15);
            }
        }
    }
    .group-hover\:right-50 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                right: calc(var(--spacing) * 50);
            }
        }
    }
    .group-hover\:bottom-23 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                bottom: calc(var(--spacing) * 23);
            }
        }
    }
    .group-hover\:bottom-25 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                bottom: calc(var(--spacing) * 25);
            }
        }
    }
    .group-hover\:bottom-\[40\%\] {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                bottom: 40%;
            }
        }
    }
    .group-hover\:left-55 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                left: calc(var(--spacing) * 55);
            }
        }
    }
    .group-hover\:translate-x-0 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                --tw-translate-x: calc(var(--spacing) * 0);
                translate: var(--tw-translate-x) var(--tw-translate-y);
            }
        }
    }
    .group-hover\:translate-x-3 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                --tw-translate-x: calc(var(--spacing) * 3);
                translate: var(--tw-translate-x) var(--tw-translate-y);
            }
        }
    }
    .group-hover\:translate-y-0 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                --tw-translate-y: calc(var(--spacing) * 0);
                translate: var(--tw-translate-x) var(--tw-translate-y);
            }
        }
    }
    .group-hover\:scale-110 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                --tw-scale-x: 110%;
                --tw-scale-y: 110%;
                --tw-scale-z: 110%;
                scale: var(--tw-scale-x) var(--tw-scale-y);
            }
        }
    }
    .group-hover\:scale-\[1\.03\] {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                scale: 1.03;
            }
        }
    }
    .group-hover\:rotate-0 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                rotate: 0deg;
            }
        }
    }
    .group-hover\:animate-toTopFromBottom {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                animation: var(--animate-toTopFromBottom);
            }
        }
    }
    .group-hover\:bg-primary {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                background-color: var(--color-primary);
            }
        }
    }
    .group-hover\:bg-textgreen {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                background-color: var(--color-textgreen);
            }
        }
    }
    .group-hover\:bg-white {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                background-color: var(--color-white);
            }
        }
    }
    .group-hover\:text-bodytext {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                color: var(--color-bodytext);
            }
        }
    }
    .group-hover\:text-secondary {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                color: var(--color-secondary);
            }
        }
    }
    .group-hover\:text-white {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                color: var(--color-white);
            }
        }
    }
    .group-hover\:\!opacity-100 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                opacity: 100% !important;
            }
        }
    }
    .group-hover\:opacity-100 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                opacity: 100%;
            }
        }
    }
    .group-hover\/second\:animate-toTopFromBottom {
        &:is(:where(.group\/second):hover *) {
            @media (hover: hover) {
                animation: var(--animate-toTopFromBottom);
            }
        }
    }
    .selection\:bg-orange {
        & *::selection {
            background-color: var(--color-orange);
        }
        &::selection {
            background-color: var(--color-orange);
        }
    }
    .selection\:bg-primary {
        & *::selection {
            background-color: var(--color-primary);
        }
        &::selection {
            background-color: var(--color-primary);
        }
    }
    .selection\:bg-textgreen {
        & *::selection {
            background-color: var(--color-textgreen);
        }
        &::selection {
            background-color: var(--color-textgreen);
        }
    }
    .selection\:text-white {
        & *::selection {
            color: var(--color-white);
        }
        &::selection {
            color: var(--color-white);
        }
    }
    .placeholder\:text-banner3inputcolor {
        &::placeholder {
            color: var(--color-banner3inputcolor);
        }
    }
    .placeholder\:text-bodytext {
        &::placeholder {
            color: var(--color-bodytext);
        }
    }
    .before\:pointer-events-none {
        &::before {
            content: var(--tw-content);
            pointer-events: none;
        }
    }
    .before\:absolute {
        &::before {
            content: var(--tw-content);
            position: absolute;
        }
    }
    .before\:inset-0 {
        &::before {
            content: var(--tw-content);
            inset: calc(var(--spacing) * 0);
        }
    }
    .before\:top-0 {
        &::before {
            content: var(--tw-content);
            top: calc(var(--spacing) * 0);
        }
    }
    .before\:top-1\/2 {
        &::before {
            content: var(--tw-content);
            top: calc(1 / 2 * 100%);
        }
    }
    .before\:top-20 {
        &::before {
            content: var(--tw-content);
            top: calc(var(--spacing) * 20);
        }
    }
    .before\:top-37 {
        &::before {
            content: var(--tw-content);
            top: calc(var(--spacing) * 37);
        }
    }
    .before\:-bottom-26 {
        &::before {
            content: var(--tw-content);
            bottom: calc(var(--spacing) * -26);
        }
    }
    .before\:-bottom-35 {
        &::before {
            content: var(--tw-content);
            bottom: calc(var(--spacing) * -35);
        }
    }
    .before\:-left-10 {
        &::before {
            content: var(--tw-content);
            left: calc(var(--spacing) * -10);
        }
    }
    .before\:-left-133 {
        &::before {
            content: var(--tw-content);
            left: calc(var(--spacing) * -133);
        }
    }
    .before\:left-0 {
        &::before {
            content: var(--tw-content);
            left: calc(var(--spacing) * 0);
        }
    }
    .before\:left-1\/2 {
        &::before {
            content: var(--tw-content);
            left: calc(1 / 2 * 100%);
        }
    }
    .before\:left-14 {
        &::before {
            content: var(--tw-content);
            left: calc(var(--spacing) * 14);
        }
    }
    .before\:left-\[30\%\] {
        &::before {
            content: var(--tw-content);
            left: 30%;
        }
    }
    .before\:-z-1 {
        &::before {
            content: var(--tw-content);
            z-index: calc(var(--z-index-1) * -1);
        }
    }
    .before\:-z-2 {
        &::before {
            content: var(--tw-content);
            z-index: calc(var(--z-index-2) * -1);
        }
    }
    .before\:z-0 {
        &::before {
            content: var(--tw-content);
            z-index: 0;
        }
    }
    .before\:z-1 {
        &::before {
            content: var(--tw-content);
            z-index: var(--z-index-1);
        }
    }
    .before\:z-2 {
        &::before {
            content: var(--tw-content);
            z-index: var(--z-index-2);
        }
    }
    .before\:-mt-1 {
        &::before {
            content: var(--tw-content);
            margin-top: calc(var(--spacing) * -1);
        }
    }
    .before\:block {
        &::before {
            content: var(--tw-content);
            display: block;
        }
    }
    .before\:hidden {
        &::before {
            content: var(--tw-content);
            display: none;
        }
    }
    .before\:size-6 {
        &::before {
            content: var(--tw-content);
            width: calc(var(--spacing) * 6);
            height: calc(var(--spacing) * 6);
        }
    }
    .before\:size-20 {
        &::before {
            content: var(--tw-content);
            width: calc(var(--spacing) * 20);
            height: calc(var(--spacing) * 20);
        }
    }
    .before\:size-24 {
        &::before {
            content: var(--tw-content);
            width: calc(var(--spacing) * 24);
            height: calc(var(--spacing) * 24);
        }
    }
    .before\:size-60 {
        &::before {
            content: var(--tw-content);
            width: calc(var(--spacing) * 60);
            height: calc(var(--spacing) * 60);
        }
    }
    .before\:size-946 {
        &::before {
            content: var(--tw-content);
            width: calc(var(--spacing) * 946);
            height: calc(var(--spacing) * 946);
        }
    }
    .before\:size-full {
        &::before {
            content: var(--tw-content);
            width: 100%;
            height: 100%;
        }
    }
    .before\:h-1 {
        &::before {
            content: var(--tw-content);
            height: calc(var(--spacing) * 1);
        }
    }
    .before\:h-3 {
        &::before {
            content: var(--tw-content);
            height: calc(var(--spacing) * 3);
        }
    }
    .before\:h-full {
        &::before {
            content: var(--tw-content);
            height: 100%;
        }
    }
    .before\:w-10 {
        &::before {
            content: var(--tw-content);
            width: calc(var(--spacing) * 10);
        }
    }
    .before\:w-20 {
        &::before {
            content: var(--tw-content);
            width: calc(var(--spacing) * 20);
        }
    }
    .before\:w-\[44\%\] {
        &::before {
            content: var(--tw-content);
            width: 44%;
        }
    }
    .before\:w-full {
        &::before {
            content: var(--tw-content);
            width: 100%;
        }
    }
    .before\:-translate-x-1\/2 {
        &::before {
            content: var(--tw-content);
            --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .before\:-translate-x-\[calc\(100\%-40px\)\] {
        &::before {
            content: var(--tw-content);
            --tw-translate-x: calc(calc(100% - 40px) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .before\:-translate-y-1\/2 {
        &::before {
            content: var(--tw-content);
            --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .before\:scale-\[0\.30\] {
        &::before {
            content: var(--tw-content);
            scale: 0.3;
        }
    }
    .before\:rotate-45 {
        &::before {
            content: var(--tw-content);
            rotate: 45deg;
        }
    }
    .before\:rotate-\[-50deg\] {
        &::before {
            content: var(--tw-content);
            rotate: -50deg;
        }
    }
    .before\:rotate-\[39deg\] {
        &::before {
            content: var(--tw-content);
            rotate: 39deg;
        }
    }
    .before\:rounded-full {
        &::before {
            content: var(--tw-content);
            border-radius: calc(infinity * 1px);
        }
    }
    .before\:border-2 {
        &::before {
            content: var(--tw-content);
            border-style: var(--tw-border-style);
            border-width: 2px;
        }
    }
    .before\:border-t {
        &::before {
            content: var(--tw-content);
            border-top-style: var(--tw-border-style);
            border-top-width: 1px;
        }
    }
    .before\:border-l {
        &::before {
            content: var(--tw-content);
            border-left-style: var(--tw-border-style);
            border-left-width: 1px;
        }
    }
    .before\:border-dashed {
        &::before {
            content: var(--tw-content);
            --tw-border-style: dashed;
            border-style: dashed;
        }
    }
    .before\:border-\[\#E4E4E4\] {
        &::before {
            content: var(--tw-content);
            border-color: #e4e4e4;
        }
    }
    .before\:border-bodytext\/30 {
        &::before {
            content: var(--tw-content);
            border-color: var(--color-bodytext);
            @supports (color: color-mix(in lab, red, red)) {
                border-color: color-mix(
                    in oklab,
                    var(--color-bodytext) 30%,
                    transparent
                );
            }
        }
    }
    .before\:bg-black {
        &::before {
            content: var(--tw-content);
            background-color: var(--color-black);
        }
    }
    .before\:bg-black\/10 {
        &::before {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #000 10%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-black) 10%,
                    transparent
                );
            }
        }
    }
    .before\:bg-black\/50 {
        &::before {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #000 50%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-black) 50%,
                    transparent
                );
            }
        }
    }
    .before\:bg-bodytext {
        &::before {
            content: var(--tw-content);
            background-color: var(--color-bodytext);
        }
    }
    .before\:bg-lightgarybg {
        &::before {
            content: var(--tw-content);
            background-color: var(--color-lightgarybg);
        }
    }
    .before\:bg-primary {
        &::before {
            content: var(--tw-content);
            background-color: var(--color-primary);
        }
    }
    .before\:bg-textlight {
        &::before {
            content: var(--tw-content);
            background-color: var(--color-textlight);
        }
    }
    .before\:bg-white {
        &::before {
            content: var(--tw-content);
            background-color: var(--color-white);
        }
    }
    .before\:bg-white\/70 {
        &::before {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #fff 70%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-white) 70%,
                    transparent
                );
            }
        }
    }
    .before\:text-center {
        &::before {
            content: var(--tw-content);
            text-align: center;
        }
    }
    .before\:font-\[\'Font_Awesome_6_Free\'\] {
        &::before {
            content: var(--tw-content);
            font-family: "Font Awesome 6 Free";
        }
    }
    .before\:text-sm {
        &::before {
            content: var(--tw-content);
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
        }
    }
    .before\:text-xs {
        &::before {
            content: var(--tw-content);
            font-size: var(--text-xs);
            line-height: var(--tw-leading, var(--text-xs--line-height));
        }
    }
    .before\:leading-20 {
        &::before {
            content: var(--tw-content);
            --tw-leading: calc(var(--spacing) * 20);
            line-height: calc(var(--spacing) * 20);
        }
    }
    .before\:leading-24 {
        &::before {
            content: var(--tw-content);
            --tw-leading: calc(var(--spacing) * 24);
            line-height: calc(var(--spacing) * 24);
        }
    }
    .before\:font-black {
        &::before {
            content: var(--tw-content);
            --tw-font-weight: var(--font-weight-black);
            font-weight: var(--font-weight-black);
        }
    }
    .before\:text-black {
        &::before {
            content: var(--tw-content);
            color: var(--color-black);
        }
    }
    .before\:text-secondary {
        &::before {
            content: var(--tw-content);
            color: var(--color-secondary);
        }
    }
    .before\:opacity-100 {
        &::before {
            content: var(--tw-content);
            opacity: 100%;
        }
    }
    .before\:backdrop-blur-\[120px\] {
        &::before {
            content: var(--tw-content);
            --tw-backdrop-blur: blur(120px);
            -webkit-backdrop-filter: var(--tw-backdrop-blur)
                var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
                var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
                var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
                var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur)
                var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
                var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
                var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
                var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        }
    }
    .before\:duration-200 {
        &::before {
            content: var(--tw-content);
            --tw-duration: 200ms;
            transition-duration: 200ms;
        }
    }
    .before\:content-\[\'\'\] {
        &::before {
            content: var(--tw-content);
            --tw-content: "";
            content: var(--tw-content);
        }
    }
    .before\:content-\[\'\/\'\] {
        &::before {
            content: var(--tw-content);
            --tw-content: "/";
            content: var(--tw-content);
        }
    }
    .before\:content-\[\'\\f00c\'\] {
        &::before {
            content: var(--tw-content);
            --tw-content: "\f00c";
            content: var(--tw-content);
        }
    }
    .group-hover\:before\:rotate-0 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                &::before {
                    content: var(--tw-content);
                    rotate: 0deg;
                }
            }
        }
    }
    .after\:pointer-events-none {
        &::after {
            content: var(--tw-content);
            pointer-events: none;
        }
    }
    .after\:invisible {
        &::after {
            content: var(--tw-content);
            visibility: hidden;
        }
    }
    .after\:absolute {
        &::after {
            content: var(--tw-content);
            position: absolute;
        }
    }
    .after\:inset-0 {
        &::after {
            content: var(--tw-content);
            inset: calc(var(--spacing) * 0);
        }
    }
    .after\:top-0 {
        &::after {
            content: var(--tw-content);
            top: calc(var(--spacing) * 0);
        }
    }
    .after\:top-1\/2 {
        &::after {
            content: var(--tw-content);
            top: calc(1 / 2 * 100%);
        }
    }
    .after\:top-87 {
        &::after {
            content: var(--tw-content);
            top: calc(var(--spacing) * 87);
        }
    }
    .after\:right-0 {
        &::after {
            content: var(--tw-content);
            right: calc(var(--spacing) * 0);
        }
    }
    .after\:bottom-0 {
        &::after {
            content: var(--tw-content);
            bottom: calc(var(--spacing) * 0);
        }
    }
    .after\:bottom-1\/2 {
        &::after {
            content: var(--tw-content);
            bottom: calc(1 / 2 * 100%);
        }
    }
    .after\:left-0 {
        &::after {
            content: var(--tw-content);
            left: calc(var(--spacing) * 0);
        }
    }
    .after\:left-1 {
        &::after {
            content: var(--tw-content);
            left: calc(var(--spacing) * 1);
        }
    }
    .after\:left-1\/2 {
        &::after {
            content: var(--tw-content);
            left: calc(1 / 2 * 100%);
        }
    }
    .after\:left-\[1\%\] {
        &::after {
            content: var(--tw-content);
            left: 1%;
        }
    }
    .after\:left-\[16\%\] {
        &::after {
            content: var(--tw-content);
            left: 16%;
        }
    }
    .after\:-z-1 {
        &::after {
            content: var(--tw-content);
            z-index: calc(var(--z-index-1) * -1);
        }
    }
    .after\:-z-2 {
        &::after {
            content: var(--tw-content);
            z-index: calc(var(--z-index-2) * -1);
        }
    }
    .after\:z-0 {
        &::after {
            content: var(--tw-content);
            z-index: 0;
        }
    }
    .after\:z-1 {
        &::after {
            content: var(--tw-content);
            z-index: var(--z-index-1);
        }
    }
    .after\:-mt-1 {
        &::after {
            content: var(--tw-content);
            margin-top: calc(var(--spacing) * -1);
        }
    }
    .after\:block {
        &::after {
            content: var(--tw-content);
            display: block;
        }
    }
    .after\:hidden {
        &::after {
            content: var(--tw-content);
            display: none;
        }
    }
    .after\:size-1015 {
        &::after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 1015);
            height: calc(var(--spacing) * 1015);
        }
    }
    .after\:size-full {
        &::after {
            content: var(--tw-content);
            width: 100%;
            height: 100%;
        }
    }
    .after\:h-0 {
        &::after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 0);
        }
    }
    .after\:h-1 {
        &::after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 1);
        }
    }
    .after\:h-2 {
        &::after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 2);
        }
    }
    .after\:h-3 {
        &::after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 3);
        }
    }
    .after\:h-4 {
        &::after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 4);
        }
    }
    .after\:h-450 {
        &::after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 450);
        }
    }
    .after\:h-796 {
        &::after {
            content: var(--tw-content);
            height: calc(var(--spacing) * 796);
        }
    }
    .after\:h-\[68\%\] {
        &::after {
            content: var(--tw-content);
            height: 68%;
        }
    }
    .after\:h-\[74\%\] {
        &::after {
            content: var(--tw-content);
            height: 74%;
        }
    }
    .after\:h-full {
        &::after {
            content: var(--tw-content);
            height: 100%;
        }
    }
    .after\:max-h-360 {
        &::after {
            content: var(--tw-content);
            max-height: calc(var(--spacing) * 360);
        }
    }
    .after\:w-0 {
        &::after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 0);
        }
    }
    .after\:w-1 {
        &::after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 1);
        }
    }
    .after\:w-20 {
        &::after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 20);
        }
    }
    .after\:w-24 {
        &::after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 24);
        }
    }
    .after\:w-295 {
        &::after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 295);
        }
    }
    .after\:w-630 {
        &::after {
            content: var(--tw-content);
            width: calc(var(--spacing) * 630);
        }
    }
    .after\:w-\[51\%\] {
        &::after {
            content: var(--tw-content);
            width: 51%;
        }
    }
    .after\:w-\[70\%\] {
        &::after {
            content: var(--tw-content);
            width: 70%;
        }
    }
    .after\:w-\[80\%\] {
        &::after {
            content: var(--tw-content);
            width: 80%;
        }
    }
    .after\:w-full {
        &::after {
            content: var(--tw-content);
            width: 100%;
        }
    }
    .after\:-translate-x-1\/2 {
        &::after {
            content: var(--tw-content);
            --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .after\:-translate-y-1\/2 {
        &::after {
            content: var(--tw-content);
            --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .after\:-rotate-45 {
        &::after {
            content: var(--tw-content);
            rotate: calc(45deg * -1);
        }
    }
    .after\:rotate-15 {
        &::after {
            content: var(--tw-content);
            rotate: 15deg;
        }
    }
    .after\:rounded-full {
        &::after {
            content: var(--tw-content);
            border-radius: calc(infinity * 1px);
        }
    }
    .after\:rounded-lg {
        &::after {
            content: var(--tw-content);
            border-radius: var(--radius-lg);
        }
    }
    .after\:rounded-t-full {
        &::after {
            content: var(--tw-content);
            border-top-left-radius: calc(infinity * 1px);
            border-top-right-radius: calc(infinity * 1px);
        }
    }
    .after\:rounded-tl-4xl {
        &::after {
            content: var(--tw-content);
            border-top-left-radius: var(--radius-4xl);
        }
    }
    .after\:rounded-tl-full {
        &::after {
            content: var(--tw-content);
            border-top-left-radius: calc(infinity * 1px);
        }
    }
    .after\:rounded-tr-4xl {
        &::after {
            content: var(--tw-content);
            border-top-right-radius: var(--radius-4xl);
        }
    }
    .after\:rounded-tr-full {
        &::after {
            content: var(--tw-content);
            border-top-right-radius: calc(infinity * 1px);
        }
    }
    .after\:border {
        &::after {
            content: var(--tw-content);
            border-style: var(--tw-border-style);
            border-width: 1px;
        }
    }
    .after\:border-black\/5 {
        &::after {
            content: var(--tw-content);
            border-color: color-mix(in srgb, #000 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                border-color: color-mix(
                    in oklab,
                    var(--color-black) 5%,
                    transparent
                );
            }
        }
    }
    .after\:\!bg-secondary {
        &::after {
            content: var(--tw-content);
            background-color: var(--color-secondary) !important;
        }
    }
    .after\:bg-\[\#00102599\] {
        &::after {
            content: var(--tw-content);
            background-color: #00102599;
        }
    }
    .after\:bg-black {
        &::after {
            content: var(--tw-content);
            background-color: var(--color-black);
        }
    }
    .after\:bg-black\/10 {
        &::after {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #000 10%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-black) 10%,
                    transparent
                );
            }
        }
    }
    .after\:bg-black\/50 {
        &::after {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #000 50%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-black) 50%,
                    transparent
                );
            }
        }
    }
    .after\:bg-lightgarybg {
        &::after {
            content: var(--tw-content);
            background-color: var(--color-lightgarybg);
        }
    }
    .after\:bg-lightgreen {
        &::after {
            content: var(--tw-content);
            background-color: var(--color-lightgreen);
        }
    }
    .after\:bg-primary {
        &::after {
            content: var(--tw-content);
            background-color: var(--color-primary);
        }
    }
    .after\:bg-white {
        &::after {
            content: var(--tw-content);
            background-color: var(--color-white);
        }
    }
    .after\:bg-white\/5 {
        &::after {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-white) 5%,
                    transparent
                );
            }
        }
    }
    .after\:bg-white\/10 {
        &::after {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #fff 10%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-white) 10%,
                    transparent
                );
            }
        }
    }
    .after\:bg-white\/50 {
        &::after {
            content: var(--tw-content);
            background-color: color-mix(in srgb, #fff 50%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(
                    in oklab,
                    var(--color-white) 50%,
                    transparent
                );
            }
        }
    }
    .after\:bg-linear-\(--divider-gradient\) {
        &::after {
            content: var(--tw-content);
            --tw-gradient-position: var(--divider-gradient);
            background-image: linear-gradient(
                var(--tw-gradient-stops, var(--divider-gradient))
            );
        }
    }
    .after\:bg-\[url\(\'\.\.\/images\/background\/bg3\.png\'\)\] {
        &::after {
            content: var(--tw-content);
            background-image: url("../images/background/bg3.png");
        }
    }
    .after\:bg-\[url\(\'\.\.\/images\/background\/bg5\.png\'\)\] {
        &::after {
            content: var(--tw-content);
            background-image: url("../images/background/bg5.png");
        }
    }
    .after\:bg-\[url\(\'\.\.\/images\/banner\/pic3\.png\'\)\] {
        &::after {
            content: var(--tw-content);
            background-image: url("../images/banner/pic3.png");
        }
    }
    .after\:bg-\[url\(\.\.\/images\/banner2\/background\/bg1\.png\)\] {
        &::after {
            content: var(--tw-content);
            background-image: url(../images/banner2/background/bg1.png);
        }
    }
    .after\:\[mask-image\:url\(\'\.\.\/images\/banner-mask\.png\'\)\] {
        &::after {
            content: var(--tw-content);
            mask-image: url("../images/banner-mask.png");
        }
    }
    .after\:bg-cover {
        &::after {
            content: var(--tw-content);
            background-size: cover;
        }
    }
    .after\:bg-center {
        &::after {
            content: var(--tw-content);
            background-position: center;
        }
    }
    .after\:bg-left-bottom {
        &::after {
            content: var(--tw-content);
            background-position: left bottom;
        }
    }
    .after\:bg-no-repeat {
        &::after {
            content: var(--tw-content);
            background-repeat: no-repeat;
        }
    }
    .after\:opacity-0 {
        &::after {
            content: var(--tw-content);
            opacity: 0%;
        }
    }
    .after\:opacity-30 {
        &::after {
            content: var(--tw-content);
            opacity: 30%;
        }
    }
    .after\:opacity-100 {
        &::after {
            content: var(--tw-content);
            opacity: 100%;
        }
    }
    .after\:mix-blend-multiply {
        &::after {
            content: var(--tw-content);
            mix-blend-mode: multiply;
        }
    }
    .after\:shadow-banner3imgbox {
        &::after {
            content: var(--tw-content);
            --tw-shadow: 0px -15px 30px var(--tw-shadow-color, rgba(166, 78, 28, 0.1));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
                var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
                var(--tw-shadow);
        }
    }
    .after\:backdrop-blur-2xl {
        &::after {
            content: var(--tw-content);
            --tw-backdrop-blur: blur(var(--blur-2xl));
            -webkit-backdrop-filter: var(--tw-backdrop-blur)
                var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
                var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
                var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
                var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur)
                var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
                var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
                var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
                var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        }
    }
    .after\:backdrop-blur-\[20px\] {
        &::after {
            content: var(--tw-content);
            --tw-backdrop-blur: blur(20px);
            -webkit-backdrop-filter: var(--tw-backdrop-blur)
                var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
                var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
                var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
                var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur)
                var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
                var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
                var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
                var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        }
    }
    .after\:duration-200 {
        &::after {
            content: var(--tw-content);
            --tw-duration: 200ms;
            transition-duration: 200ms;
        }
    }
    .after\:duration-500 {
        &::after {
            content: var(--tw-content);
            --tw-duration: 500ms;
            transition-duration: 500ms;
        }
    }
    .after\:duration-\[\.5s\] {
        &::after {
            content: var(--tw-content);
            --tw-duration: 0.5s;
            transition-duration: 0.5s;
        }
    }
    .after\:content-\[\'\'\] {
        &::after {
            content: var(--tw-content);
            --tw-content: "";
            content: var(--tw-content);
        }
    }
    .group-hover\:after\:rotate-0 {
        &:is(:where(.group):hover *) {
            @media (hover: hover) {
                &::after {
                    content: var(--tw-content);
                    rotate: 0deg;
                }
            }
        }
    }
    .first\:px-0 {
        &:first-child {
            padding-inline: calc(var(--spacing) * 0);
        }
    }
    .first\:ps-0 {
        &:first-child {
            padding-inline-start: calc(var(--spacing) * 0);
        }
    }
    .first\:before\:hidden {
        &:first-child {
            &::before {
                content: var(--tw-content);
                display: none;
            }
        }
    }
    .last\:me-0 {
        &:last-child {
            margin-inline-end: calc(var(--spacing) * 0);
        }
    }
    .last\:px-0 {
        &:last-child {
            padding-inline: calc(var(--spacing) * 0);
        }
    }
    .last\:pe-0 {
        &:last-child {
            padding-inline-end: calc(var(--spacing) * 0);
        }
    }
    .hover\:z-1 {
        &:hover {
            @media (hover: hover) {
                z-index: var(--z-index-1);
            }
        }
    }
    .hover\:\!border-social {
        &:hover {
            @media (hover: hover) {
                border-color: var(--color-social) !important;
            }
        }
    }
    .hover\:\!bg-social {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-social) !important;
            }
        }
    }
    .hover\:bg-bggreen {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-bggreen);
            }
        }
    }
    .hover\:bg-primary {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-primary);
            }
        }
    }
    .hover\:bg-secondary {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-secondary);
            }
        }
    }
    .hover\:bg-textgreen {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-textgreen);
            }
        }
    }
    .hover\:bg-white {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-white);
            }
        }
    }
    .hover\:\!text-white {
        &:hover {
            @media (hover: hover) {
                color: var(--color-white) !important;
            }
        }
    }
    .hover\:text-blue-600 {
        &:hover {
            @media (hover: hover) {
                color: var(--color-blue-600);
            }
        }
    }
    .hover\:text-lightgreen {
        &:hover {
            @media (hover: hover) {
                color: var(--color-lightgreen);
            }
        }
    }
    .hover\:text-orange {
        &:hover {
            @media (hover: hover) {
                color: var(--color-orange);
            }
        }
    }
    .hover\:text-primary {
        &:hover {
            @media (hover: hover) {
                color: var(--color-primary);
            }
        }
    }
    .hover\:text-red-500 {
        &:hover {
            @media (hover: hover) {
                color: var(--color-red-500);
            }
        }
    }
    .hover\:text-secondary {
        &:hover {
            @media (hover: hover) {
                color: var(--color-secondary);
            }
        }
    }
    .hover\:text-white {
        &:hover {
            @media (hover: hover) {
                color: var(--color-white);
            }
        }
    }
    .hover\:underline {
        &:hover {
            @media (hover: hover) {
                text-decoration-line: underline;
            }
        }
    }
    .hover\:opacity-100 {
        &:hover {
            @media (hover: hover) {
                opacity: 100%;
            }
        }
    }
    .hover\:after\:visible {
        &:hover {
            @media (hover: hover) {
                &::after {
                    content: var(--tw-content);
                    visibility: visible;
                }
            }
        }
    }
    .hover\:after\:h-full {
        &:hover {
            @media (hover: hover) {
                &::after {
                    content: var(--tw-content);
                    height: 100%;
                }
            }
        }
    }
    .hover\:after\:opacity-40 {
        &:hover {
            @media (hover: hover) {
                &::after {
                    content: var(--tw-content);
                    opacity: 40%;
                }
            }
        }
    }
    .hover\:after\:opacity-50 {
        &:hover {
            @media (hover: hover) {
                &::after {
                    content: var(--tw-content);
                    opacity: 50%;
                }
            }
        }
    }
    .hover\:after\:opacity-100 {
        &:hover {
            @media (hover: hover) {
                &::after {
                    content: var(--tw-content);
                    opacity: 100%;
                }
            }
        }
    }
    .focus\:border-secondary {
        &:focus {
            border-color: var(--color-secondary);
        }
    }
    .max-4xl\:right-5 {
        @media (width < 1700px) {
            right: calc(var(--spacing) * 5);
        }
    }
    .max-xxl\:hidden {
        @media (width < 1400px) {
            display: none;
        }
    }
    .max-xxl\:w-\[8\%\] {
        @media (width < 1400px) {
            width: 8%;
        }
    }
    .max-xxl\:w-\[15\%\] {
        @media (width < 1400px) {
            width: 15%;
        }
    }
    .max-xxl\:w-\[30\%\] {
        @media (width < 1400px) {
            width: 30%;
        }
    }
    .max-xxl\:overflow-hidden {
        @media (width < 1400px) {
            overflow: hidden;
        }
    }
    .max-xl\:-top-60 {
        @media (width < 1200px) {
            top: calc(var(--spacing) * -60);
        }
    }
    .max-xl\:-bottom-200 {
        @media (width < 1200px) {
            bottom: calc(var(--spacing) * -200);
        }
    }
    .max-xl\:mx-auto {
        @media (width < 1200px) {
            margin-inline: auto;
        }
    }
    .max-xl\:my-30 {
        @media (width < 1200px) {
            margin-block: calc(var(--spacing) * 30);
        }
    }
    .max-xl\:mt-40 {
        @media (width < 1200px) {
            margin-top: calc(var(--spacing) * 40);
        }
    }
    .max-xl\:hidden {
        @media (width < 1200px) {
            display: none;
        }
    }
    .max-xl\:size-150 {
        @media (width < 1200px) {
            width: calc(var(--spacing) * 150);
            height: calc(var(--spacing) * 150);
        }
    }
    .max-xl\:overflow-y-scroll {
        @media (width < 1200px) {
            overflow-y: scroll;
        }
    }
    .max-xl\:pt-40 {
        @media (width < 1200px) {
            padding-top: calc(var(--spacing) * 40);
        }
    }
    .max-xl\:after\:-translate-x-1\/2 {
        @media (width < 1200px) {
            &::after {
                content: var(--tw-content);
                --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
                translate: var(--tw-translate-x) var(--tw-translate-y);
            }
        }
    }
    .max-lg\:top-0 {
        @media (width < 992px) {
            top: calc(var(--spacing) * 0);
        }
    }
    .max-lg\:top-20 {
        @media (width < 992px) {
            top: calc(var(--spacing) * 20);
        }
    }
    .max-lg\:top-55 {
        @media (width < 992px) {
            top: calc(var(--spacing) * 55);
        }
    }
    .max-lg\:right-0 {
        @media (width < 992px) {
            right: calc(var(--spacing) * 0);
        }
    }
    .max-lg\:-bottom-65 {
        @media (width < 992px) {
            bottom: calc(var(--spacing) * -65);
        }
    }
    .max-lg\:order-1 {
        @media (width < 992px) {
            order: 1;
        }
    }
    .max-lg\:float-end {
        @media (width < 992px) {
            float: inline-end;
        }
    }
    .max-lg\:mx-20 {
        @media (width < 992px) {
            margin-inline: calc(var(--spacing) * 20);
        }
    }
    .max-lg\:-mt-30 {
        @media (width < 992px) {
            margin-top: calc(var(--spacing) * -30);
        }
    }
    .max-lg\:-mt-170 {
        @media (width < 992px) {
            margin-top: calc(var(--spacing) * -170);
        }
    }
    .max-lg\:mt-0 {
        @media (width < 992px) {
            margin-top: calc(var(--spacing) * 0);
        }
    }
    .max-lg\:mt-10 {
        @media (width < 992px) {
            margin-top: calc(var(--spacing) * 10);
        }
    }
    .max-lg\:mt-20 {
        @media (width < 992px) {
            margin-top: calc(var(--spacing) * 20);
        }
    }
    .max-lg\:mt-45 {
        @media (width < 992px) {
            margin-top: calc(var(--spacing) * 45);
        }
    }
    .max-lg\:mb-10 {
        @media (width < 992px) {
            margin-bottom: calc(var(--spacing) * 10);
        }
    }
    .max-lg\:mb-15 {
        @media (width < 992px) {
            margin-bottom: calc(var(--spacing) * 15);
        }
    }
    .max-lg\:hidden {
        @media (width < 992px) {
            display: none;
        }
    }
    .max-lg\:\!transform-none {
        @media (width < 992px) {
            transform: none !important;
        }
    }
    .max-lg\:justify-between {
        @media (width < 992px) {
            justify-content: space-between;
        }
    }
    .max-lg\:justify-center {
        @media (width < 992px) {
            justify-content: center;
        }
    }
    .max-lg\:border-social {
        @media (width < 992px) {
            border-color: var(--color-social);
        }
    }
    .max-lg\:pt-50 {
        @media (width < 992px) {
            padding-top: calc(var(--spacing) * 50);
        }
    }
    .max-lg\:text-social {
        @media (width < 992px) {
            color: var(--color-social);
        }
    }
    .max-lg\:opacity-0 {
        @media (width < 992px) {
            opacity: 0%;
        }
    }
    .max-lg\:group-hover\:\!border-social {
        @media (width < 992px) {
            &:is(:where(.group):hover *) {
                @media (hover: hover) {
                    border-color: var(--color-social) !important;
                }
            }
        }
    }
    .max-lg\:group-hover\:\!bg-social {
        @media (width < 992px) {
            &:is(:where(.group):hover *) {
                @media (hover: hover) {
                    background-color: var(--color-social) !important;
                }
            }
        }
    }
    .max-lg\:group-hover\:\!text-white {
        @media (width < 992px) {
            &:is(:where(.group):hover *) {
                @media (hover: hover) {
                    color: var(--color-white) !important;
                }
            }
        }
    }
    .max-lg\:after\:hidden {
        @media (width < 992px) {
            &::after {
                content: var(--tw-content);
                display: none;
            }
        }
    }
    .max-lg\:after\:rounded-tl-full {
        @media (width < 992px) {
            &::after {
                content: var(--tw-content);
                border-top-left-radius: calc(infinity * 1px);
            }
        }
    }
    .max-lg\:after\:rounded-tr-full {
        @media (width < 992px) {
            &::after {
                content: var(--tw-content);
                border-top-right-radius: calc(infinity * 1px);
            }
        }
    }
    .max-md\:top-90 {
        @media (width < 768px) {
            top: calc(var(--spacing) * 90);
        }
    }
    .max-md\:top-180 {
        @media (width < 768px) {
            top: calc(var(--spacing) * 180);
        }
    }
    .max-md\:-left-5 {
        @media (width < 768px) {
            left: calc(var(--spacing) * -5);
        }
    }
    .max-md\:-mt-50 {
        @media (width < 768px) {
            margin-top: calc(var(--spacing) * -50);
        }
    }
    .max-md\:-mt-270 {
        @media (width < 768px) {
            margin-top: calc(var(--spacing) * -270);
        }
    }
    .max-md\:mt-20 {
        @media (width < 768px) {
            margin-top: calc(var(--spacing) * 20);
        }
    }
    .max-md\:hidden {
        @media (width < 768px) {
            display: none;
        }
    }
    .max-md\:size-20 {
        @media (width < 768px) {
            width: calc(var(--spacing) * 20);
            height: calc(var(--spacing) * 20);
        }
    }
    .max-md\:h-400 {
        @media (width < 768px) {
            height: calc(var(--spacing) * 400);
        }
    }
    .max-md\:w-532 {
        @media (width < 768px) {
            width: calc(var(--spacing) * 532);
        }
    }
    .max-md\:pt-103 {
        @media (width < 768px) {
            padding-top: calc(var(--spacing) * 103);
        }
    }
    .max-md\:text-center {
        @media (width < 768px) {
            text-align: center;
        }
    }
    .max-sm\:top-140 {
        @media (width < 576px) {
            top: calc(var(--spacing) * 140);
        }
    }
    .max-sm\:top-335 {
        @media (width < 576px) {
            top: calc(var(--spacing) * 335);
        }
    }
    .max-sm\:\!mt-0 {
        @media (width < 576px) {
            margin-top: calc(var(--spacing) * 0) !important;
        }
    }
    .max-sm\:-mt-430 {
        @media (width < 576px) {
            margin-top: calc(var(--spacing) * -430);
        }
    }
    .max-sm\:mb-10 {
        @media (width < 576px) {
            margin-bottom: calc(var(--spacing) * 10);
        }
    }
    .max-sm\:block {
        @media (width < 576px) {
            display: block;
        }
    }
    .max-sm\:hidden {
        @media (width < 576px) {
            display: none;
        }
    }
    .max-sm\:size-60 {
        @media (width < 576px) {
            width: calc(var(--spacing) * 60);
            height: calc(var(--spacing) * 60);
        }
    }
    .max-sm\:max-h-35 {
        @media (width < 576px) {
            max-height: calc(var(--spacing) * 35);
        }
    }
    .max-sm\:w-330 {
        @media (width < 576px) {
            width: calc(var(--spacing) * 330);
        }
    }
    .max-sm\:w-335 {
        @media (width < 576px) {
            width: calc(var(--spacing) * 335);
        }
    }
    .max-sm\:w-800 {
        @media (width < 576px) {
            width: calc(var(--spacing) * 800);
        }
    }
    .max-sm\:w-full {
        @media (width < 576px) {
            width: 100%;
        }
    }
    .max-sm\:scale-\[1\.5\] {
        @media (width < 576px) {
            scale: 1.5;
        }
    }
    .max-sm\:flex-wrap {
        @media (width < 576px) {
            flex-wrap: wrap;
        }
    }
    .max-sm\:\!p-0 {
        @media (width < 576px) {
            padding: calc(var(--spacing) * 0) !important;
        }
    }
    .max-sm\:p-10 {
        @media (width < 576px) {
            padding: calc(var(--spacing) * 10);
        }
    }
    .max-sm\:\!px-0 {
        @media (width < 576px) {
            padding-inline: calc(var(--spacing) * 0) !important;
        }
    }
    .max-sm\:py-15 {
        @media (width < 576px) {
            padding-block: calc(var(--spacing) * 15);
        }
    }
    .max-sm\:pt-0 {
        @media (width < 576px) {
            padding-top: calc(var(--spacing) * 0);
        }
    }
    .max-sm\:pt-25 {
        @media (width < 576px) {
            padding-top: calc(var(--spacing) * 25);
        }
    }
    .max-sm\:before\:hidden {
        @media (width < 576px) {
            &::before {
                content: var(--tw-content);
                display: none;
            }
        }
    }
    .sm\:absolute {
        @media (width >= 576px) {
            position: absolute;
        }
    }
    .sm\:-top-10 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * -10);
        }
    }
    .sm\:top-0 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * 0);
        }
    }
    .sm\:top-36 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * 36);
        }
    }
    .sm\:top-80 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * 80);
        }
    }
    .sm\:top-120 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * 120);
        }
    }
    .sm\:top-130 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * 130);
        }
    }
    .sm\:top-248 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * 248);
        }
    }
    .sm\:top-260 {
        @media (width >= 576px) {
            top: calc(var(--spacing) * 260);
        }
    }
    .sm\:-right-81 {
        @media (width >= 576px) {
            right: calc(var(--spacing) * -81);
        }
    }
    .sm\:right-50 {
        @media (width >= 576px) {
            right: calc(var(--spacing) * 50);
        }
    }
    .sm\:right-60 {
        @media (width >= 576px) {
            right: calc(var(--spacing) * 60);
        }
    }
    .sm\:-bottom-40 {
        @media (width >= 576px) {
            bottom: calc(var(--spacing) * -40);
        }
    }
    .sm\:bottom-0 {
        @media (width >= 576px) {
            bottom: calc(var(--spacing) * 0);
        }
    }
    .sm\:bottom-60 {
        @media (width >= 576px) {
            bottom: calc(var(--spacing) * 60);
        }
    }
    .sm\:bottom-78 {
        @media (width >= 576px) {
            bottom: calc(var(--spacing) * 78);
        }
    }
    .sm\:-left-66 {
        @media (width >= 576px) {
            left: calc(var(--spacing) * -66);
        }
    }
    .sm\:-left-81 {
        @media (width >= 576px) {
            left: calc(var(--spacing) * -81);
        }
    }
    .sm\:left-0 {
        @media (width >= 576px) {
            left: calc(var(--spacing) * 0);
        }
    }
    .sm\:left-10 {
        @media (width >= 576px) {
            left: calc(var(--spacing) * 10);
        }
    }
    .sm\:left-50 {
        @media (width >= 576px) {
            left: calc(var(--spacing) * 50);
        }
    }
    .sm\:left-204 {
        @media (width >= 576px) {
            left: calc(var(--spacing) * 204);
        }
    }
    .sm\:left-\[42\%\] {
        @media (width >= 576px) {
            left: 42%;
        }
    }
    .sm\:col-span-2 {
        @media (width >= 576px) {
            grid-column: span 2 / span 2;
        }
    }
    .sm\:col-span-3 {
        @media (width >= 576px) {
            grid-column: span 3 / span 3;
        }
    }
    .sm\:col-span-4 {
        @media (width >= 576px) {
            grid-column: span 4 / span 4;
        }
    }
    .sm\:col-span-6 {
        @media (width >= 576px) {
            grid-column: span 6 / span 6;
        }
    }
    .sm\:col-span-8 {
        @media (width >= 576px) {
            grid-column: span 8 / span 8;
        }
    }
    .sm\:col-span-10 {
        @media (width >= 576px) {
            grid-column: span 10 / span 10;
        }
    }
    .sm\:my-20 {
        @media (width >= 576px) {
            margin-block: calc(var(--spacing) * 20);
        }
    }
    .sm\:ms-0 {
        @media (width >= 576px) {
            margin-inline-start: calc(var(--spacing) * 0);
        }
    }
    .sm\:ms-auto {
        @media (width >= 576px) {
            margin-inline-start: auto;
        }
    }
    .sm\:-mt-100 {
        @media (width >= 576px) {
            margin-top: calc(var(--spacing) * -100);
        }
    }
    .sm\:-mt-180 {
        @media (width >= 576px) {
            margin-top: calc(var(--spacing) * -180);
        }
    }
    .sm\:mt-80 {
        @media (width >= 576px) {
            margin-top: calc(var(--spacing) * 80);
        }
    }

    .sm\:mr-15 {
        @media (width >= 576px) {
            margin-right: calc(var(--spacing) * 15);
        }
    }
    .sm\:mb-0 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 0);
        }
    }
    .sm\:mb-2 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 2);
        }
    }
    .sm\:mb-14 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 14);
        }
    }
    .sm\:mb-15 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 15);
        }
    }
    .sm\:mb-20 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 20);
        }
    }
    .sm\:mb-25 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 25);
        }
    }
    .sm\:mb-30 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 30);
        }
    }
    .sm\:mb-35 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 35);
        }
    }
    .sm\:mb-36 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 36);
        }
    }
    .sm\:mb-40 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 40);
        }
    }
    .sm\:mb-43 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 43);
        }
    }
    .sm\:mb-45 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 45);
        }
    }
    .sm\:mb-50 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 50);
        }
    }
    .sm\:mb-54 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 54);
        }
    }
    .sm\:mb-80 {
        @media (width >= 576px) {
            margin-bottom: calc(var(--spacing) * 80);
        }
    }
    .sm\:ml-25 {
        @media (width >= 576px) {
            margin-left: calc(var(--spacing) * 25);
        }
    }
    .sm\:ml-46 {
        @media (width >= 576px) {
            margin-left: calc(var(--spacing) * 46);
        }
    }
    .sm\:ml-63 {
        @media (width >= 576px) {
            margin-left: calc(var(--spacing) * 63);
        }
    }
    .sm\:ml-78 {
        @media (width >= 576px) {
            margin-left: calc(var(--spacing) * 78);
        }
    }
    .sm\:flex {
        @media (width >= 576px) {
            display: flex;
        }
    }
    .sm\:hidden {
        @media (width >= 576px) {
            display: none;
        }
    }
    .sm\:\!size-27 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 27) !important;
            height: calc(var(--spacing) * 27) !important;
        }
    }
    .sm\:size-45 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 45);
            height: calc(var(--spacing) * 45);
        }
    }
    .sm\:size-52 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 52);
            height: calc(var(--spacing) * 52);
        }
    }
    .sm\:size-60 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 60);
            height: calc(var(--spacing) * 60);
        }
    }
    .sm\:size-80 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 80);
            height: calc(var(--spacing) * 80);
        }
    }
    .sm\:size-100 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 100);
            height: calc(var(--spacing) * 100);
        }
    }
    .sm\:size-248 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 248);
            height: calc(var(--spacing) * 248);
        }
    }
    .sm\:size-340 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 340);
            height: calc(var(--spacing) * 340);
        }
    }
    .sm\:h-400 {
        @media (width >= 576px) {
            height: calc(var(--spacing) * 400);
        }
    }
    .sm\:h-500 {
        @media (width >= 576px) {
            height: calc(var(--spacing) * 500);
        }
    }
    .sm\:h-600 {
        @media (width >= 576px) {
            height: calc(var(--spacing) * 600);
        }
    }
    .sm\:h-full {
        @media (width >= 576px) {
            height: 100%;
        }
    }
    .sm\:max-h-342 {
        @media (width >= 576px) {
            max-height: calc(var(--spacing) * 342);
        }
    }
    .sm\:min-h-60 {
        @media (width >= 576px) {
            min-height: calc(var(--spacing) * 60);
        }
    }
    .sm\:\!w-79 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 79) !important;
        }
    }
    .sm\:w-1\/2 {
        @media (width >= 576px) {
            width: calc(1 / 2 * 100%);
        }
    }
    .sm\:w-1\/3 {
        @media (width >= 576px) {
            width: calc(1 / 3 * 100%);
        }
    }
    .sm\:w-62 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 62);
        }
    }
    .sm\:w-500 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 500);
        }
    }
    .sm\:w-538 {
        @media (width >= 576px) {
            width: calc(var(--spacing) * 538);
        }
    }
    .sm\:w-\[43\.65\%\] {
        @media (width >= 576px) {
            width: 43.65%;
        }
    }
    .sm\:w-auto {
        @media (width >= 576px) {
            width: auto;
        }
    }
    .sm\:max-w-200 {
        @media (width >= 576px) {
            max-width: calc(var(--spacing) * 200);
        }
    }
    .sm\:max-w-265 {
        @media (width >= 576px) {
            max-width: calc(var(--spacing) * 265);
        }
    }
    .sm\:max-w-290 {
        @media (width >= 576px) {
            max-width: calc(var(--spacing) * 290);
        }
    }
    .sm\:min-w-60 {
        @media (width >= 576px) {
            min-width: calc(var(--spacing) * 60);
        }
    }
    .sm\:min-w-100 {
        @media (width >= 576px) {
            min-width: calc(var(--spacing) * 100);
        }
    }
    .sm\:min-w-360 {
        @media (width >= 576px) {
            min-width: calc(var(--spacing) * 360);
        }
    }
    .sm\:scale-\[0\.5\] {
        @media (width >= 576px) {
            scale: 0.5;
        }
    }
    .sm\:scale-\[0\.50\] {
        @media (width >= 576px) {
            scale: 0.5;
        }
    }
    .sm\:scale-\[0\.73\] {
        @media (width >= 576px) {
            scale: 0.73;
        }
    }
    .sm\:scale-\[0\.79\] {
        @media (width >= 576px) {
            scale: 0.79;
        }
    }
    .sm\:flex-row {
        @media (width >= 576px) {
            flex-direction: row;
        }
    }
    .sm\:items-center {
        @media (width >= 576px) {
            align-items: center;
        }
    }
    .sm\:justify-end {
        @media (width >= 576px) {
            justify-content: flex-end;
        }
    }
    .sm\:justify-start {
        @media (width >= 576px) {
            justify-content: flex-start;
        }
    }
    .sm\:gap-10 {
        @media (width >= 576px) {
            gap: calc(var(--spacing) * 10);
        }
    }
    .sm\:gap-20 {
        @media (width >= 576px) {
            gap: calc(var(--spacing) * 20);
        }
    }
    .sm\:gap-28 {
        @media (width >= 576px) {
            gap: calc(var(--spacing) * 28);
        }
    }
    .sm\:gap-30 {
        @media (width >= 576px) {
            gap: calc(var(--spacing) * 30);
        }
    }
    .sm\:gap-40 {
        @media (width >= 576px) {
            gap: calc(var(--spacing) * 40);
        }
    }
    .sm\:gap-50 {
        @media (width >= 576px) {
            gap: calc(var(--spacing) * 50);
        }
    }
    .sm\:gap-80 {
        @media (width >= 576px) {
            gap: calc(var(--spacing) * 80);
        }
    }
    .sm\:gap-y-40 {
        @media (width >= 576px) {
            row-gap: calc(var(--spacing) * 40);
        }
    }
    .sm\:bg-size-\[100\%\] {
        @media (width >= 576px) {
            background-size: 100%;
        }
    }
    .sm\:p-15 {
        @media (width >= 576px) {
            padding: calc(var(--spacing) * 15);
        }
    }
    .sm\:p-50 {
        @media (width >= 576px) {
            padding: calc(var(--spacing) * 50);
        }
    }
    .sm\:p-60 {
        @media (width >= 576px) {
            padding: calc(var(--spacing) * 60);
        }
    }
    .sm\:px-13 {
        @media (width >= 576px) {
            padding-inline: calc(var(--spacing) * 13);
        }
    }
    .sm\:px-20 {
        @media (width >= 576px) {
            padding-inline: calc(var(--spacing) * 20);
        }
    }
    .sm\:px-30 {
        @media (width >= 576px) {
            padding-inline: calc(var(--spacing) * 30);
        }
    }
    .sm\:px-31 {
        @media (width >= 576px) {
            padding-inline: calc(var(--spacing) * 31);
        }
    }
    .sm\:px-34 {
        @media (width >= 576px) {
            padding-inline: calc(var(--spacing) * 34);
        }
    }
    .sm\:py-16 {
        @media (width >= 576px) {
            padding-block: calc(var(--spacing) * 16);
        }
    }
    .sm\:py-20 {
        @media (width >= 576px) {
            padding-block: calc(var(--spacing) * 20);
        }
    }
    .sm\:py-35 {
        @media (width >= 576px) {
            padding-block: calc(var(--spacing) * 35);
        }
    }
    .sm\:py-52 {
        @media (width >= 576px) {
            padding-block: calc(var(--spacing) * 52);
        }
    }
    .sm\:py-60 {
        @media (width >= 576px) {
            padding-block: calc(var(--spacing) * 60);
        }
    }
    .sm\:py-80 {
        @media (width >= 576px) {
            padding-block: calc(var(--spacing) * 80);
        }
    }
    .sm\:py-90 {
        @media (width >= 576px) {
            padding-block: calc(var(--spacing) * 90);
        }
    }
    .sm\:ps-60 {
        @media (width >= 576px) {
            padding-inline-start: calc(var(--spacing) * 60);
        }
    }
    .sm\:ps-100 {
        @media (width >= 576px) {
            padding-inline-start: calc(var(--spacing) * 100);
        }
    }
    .sm\:pe-50 {
        @media (width >= 576px) {
            padding-inline-end: calc(var(--spacing) * 50);
        }
    }

    .sm\:pt-25 {
        @media (width <= 576px) {
            padding-top: calc(var(--spacing) * 20);
        }
    }

    .sm\:pt-20 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 20);
        }
    }
    .sm\:pt-37 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 37);
        }
    }
    .sm\:pt-40 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 40);
        }
    }
    .sm\:pt-60 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 60);
        }
    }
    .sm\:pt-80 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 80);
        }
    }
    .sm\:pt-90 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 90);
        }
    }
    .sm\:pt-100 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 100);
        }
    }
    .sm\:pt-128 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 128);
        }
    }
    .sm\:pt-130 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 130);
        }
    }
    .sm\:pt-133 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 133);
        }
    }
    .sm\:pt-145 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 145);
        }
    }
    .sm\:pt-160 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 160);
        }
    }
    .sm\:pt-180 {
        @media (width >= 576px) {
            padding-top: calc(var(--spacing) * 180);
        }
    }

    .sm\:pb-15 {
        @media (width <= 576px) {
            padding-bottom: calc(var(--spacing) * 15);
        }
    }

    .sm\:pb-0 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 0);
        }
    }
    .sm\:pb-40 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 40);
        }
    }
    .sm\:pb-50 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 50);
        }
    }
    .sm\:pb-55 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 55);
        }
    }
    .sm\:pb-60 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 60);
        }
    }
    .sm\:pb-65 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 65);
        }
    }
    .sm\:pb-73 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 73);
        }
    }
    .sm\:pb-80 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 80);
        }
    }
    .sm\:pb-90 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 90);
        }
    }
    .sm\:pb-100 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 100);
        }
    }
    .sm\:pb-133 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 133);
        }
    }
    .sm\:pb-200 {
        @media (width >= 576px) {
            padding-bottom: calc(var(--spacing) * 200);
        }
    }
    .sm\:pl-34 {
        @media (width >= 576px) {
            padding-left: calc(var(--spacing) * 34);
        }
    }
    .sm\:pl-40 {
        @media (width >= 576px) {
            padding-left: calc(var(--spacing) * 40);
        }
    }
    .sm\:pl-50 {
        @media (width >= 576px) {
            padding-left: calc(var(--spacing) * 50);
        }
    }
    .sm\:pl-110 {
        @media (width >= 576px) {
            padding-left: calc(var(--spacing) * 110);
        }
    }
    .sm\:text-2xl {
        @media (width >= 576px) {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }
    .sm\:text-2xl\/35 {
        @media (width >= 576px) {
            font-size: var(--text-2xl);
            line-height: calc(var(--spacing) * 35);
        }
    }
    .sm\:text-2xl\/45 {
        @media (width >= 576px) {
            font-size: var(--text-2xl);
            line-height: calc(var(--spacing) * 45);
        }
    }
    .sm\:text-3xl {
        @media (width >= 576px) {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height));
        }
    }
    .sm\:text-3xl\/50 {
        @media (width >= 576px) {
            font-size: var(--text-3xl);
            line-height: calc(var(--spacing) * 50);
        }
    }
    .sm\:text-4\.75xl\/53 {
        @media (width >= 576px) {
            font-size: var(--text-4\.75xl);
            line-height: calc(var(--spacing) * 53);
        }
    }
    .sm\:text-4\.75xl\/70 {
        @media (width >= 576px) {
            font-size: var(--text-4\.75xl);
            line-height: calc(var(--spacing) * 70);
        }
    }
    .sm\:text-4xl {
        @media (width >= 576px) {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading, var(--text-4xl--line-height));
        }
    }
    .sm\:text-4xl\/52 {
        @media (width >= 576px) {
            font-size: var(--text-4xl);
            line-height: calc(var(--spacing) * 52);
        }
    }
    .sm\:text-5\.5xl\/55 {
        @media (width >= 576px) {
            font-size: var(--text-5\.5xl);
            line-height: calc(var(--spacing) * 55);
        }
    }
    .sm\:text-5\.5xl\/60 {
        @media (width >= 576px) {
            font-size: var(--text-5\.5xl);
            line-height: calc(var(--spacing) * 60);
        }
    }
    .sm\:text-5xl {
        @media (width >= 576px) {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading, var(--text-5xl--line-height));
        }
    }
    .sm\:text-5xl\/50 {
        @media (width >= 576px) {
            font-size: var(--text-5xl);
            line-height: calc(var(--spacing) * 50);
        }
    }
    .sm\:text-6\.5xl\/65 {
        @media (width >= 576px) {
            font-size: var(--text-6\.5xl);
            line-height: calc(var(--spacing) * 65);
        }
    }
    .sm\:text-6xl {
        @media (width >= 576px) {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height));
        }
    }
    .sm\:text-6xl\/60 {
        @media (width >= 576px) {
            font-size: var(--text-6xl);
            line-height: calc(var(--spacing) * 60);
        }
    }
    .sm\:text-7xxl\/80 {
        @media (width >= 576px) {
            font-size: var(--text-7xxl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .sm\:text-\[17px\]\/24 {
        @media (width >= 576px) {
            font-size: 17px;
            line-height: calc(var(--spacing) * 24);
        }
    }
    .sm\:text-base {
        @media (width >= 576px) {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height));
        }
    }
    .sm\:text-lg {
        @media (width >= 576px) {
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height));
        }
    }
    .sm\:text-xl {
        @media (width >= 576px) {
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
        }
    }
    .sm\:text-xl\/30 {
        @media (width >= 576px) {
            font-size: var(--text-xl);
            line-height: calc(var(--spacing) * 30);
        }
    }
    .sm\:text-xl\/35 {
        @media (width >= 576px) {
            font-size: var(--text-xl);
            line-height: calc(var(--spacing) * 35);
        }
    }
    .sm\:text-2\.5xl {
        @media (width >= 576px) {
            font-size: var(--text-2\.5xl);
        }
    }
    .sm\:text-2sm {
        @media (width >= 576px) {
            font-size: var(--text-2sm);
        }
    }
    .sm\:text-2xxl {
        @media (width >= 576px) {
            font-size: var(--text-2xxl);
        }
    }
    .sm\:text-4\.5xl {
        @media (width >= 576px) {
            font-size: var(--text-4\.5xl);
        }
    }
    .sm\:text-5\.5xl {
        @media (width >= 576px) {
            font-size: var(--text-5\.5xl);
        }
    }
    .sm\:text-\[46px\] {
        @media (width >= 576px) {
            font-size: 46px;
        }
    }
    .sm\:text-\[130px\] {
        @media (width >= 576px) {
            font-size: 130px;
        }
    }
    .sm\:opacity-0 {
        @media (width >= 576px) {
            opacity: 0%;
        }
    }
    .before\:sm\:scale-\[0\.50\] {
        &::before {
            content: var(--tw-content);
            @media (width >= 576px) {
                scale: 0.5;
            }
        }
    }
    .sm\:after\:top-200 {
        @media (width >= 576px) {
            &::after {
                content: var(--tw-content);
                top: calc(var(--spacing) * 200);
            }
        }
    }
    .sm\:after\:bottom-2 {
        @media (width >= 576px) {
            &::after {
                content: var(--tw-content);
                bottom: calc(var(--spacing) * 2);
            }
        }
    }
    .md\:-top-25 {
        @media (width >= 768px) {
            top: calc(var(--spacing) * -25);
        }
    }
    .md\:top-0 {
        @media (width >= 768px) {
            top: calc(var(--spacing) * 0);
        }
    }
    .md\:top-55 {
        @media (width >= 768px) {
            top: calc(var(--spacing) * 55);
        }
    }
    .md\:top-210 {
        @media (width >= 768px) {
            top: calc(var(--spacing) * 210);
        }
    }
    .md\:right-100 {
        @media (width >= 768px) {
            right: calc(var(--spacing) * 100);
        }
    }
    .md\:\!bottom-20 {
        @media (width >= 768px) {
            bottom: calc(var(--spacing) * 20) !important;
        }
    }
    .md\:\!left-50 {
        @media (width >= 768px) {
            left: calc(var(--spacing) * 50) !important;
        }
    }
    .md\:left-50 {
        @media (width >= 768px) {
            left: calc(var(--spacing) * 50);
        }
    }
    .md\:left-100 {
        @media (width >= 768px) {
            left: calc(var(--spacing) * 100);
        }
    }
    .md\:order-0 {
        @media (width >= 768px) {
            order: 0;
        }
    }
    .md\:col-span-4 {
        @media (width >= 768px) {
            grid-column: span 4 / span 4;
        }
    }
    .md\:col-span-6 {
        @media (width >= 768px) {
            grid-column: span 6 / span 6;
        }
    }

    .md\:col-span-8 {
        @media (width >= 768px) {
            grid-column: span 8 / span 8;
        }
    }

    .md\:mt-70 {
        @media (width <= 980px) {
            margin-top: calc(var(--spacing) * 70);
        }
    }

    .md\:\!mt-0 {
        @media (width >= 768px) {
            margin-top: calc(var(--spacing) * 0) !important;
        }
    }
    .md\:mt-0 {
        @media (width >= 768px) {
            margin-top: calc(var(--spacing) * 0);
        }
    }
    .md\:mt-13 {
        @media (width >= 768px) {
            margin-top: calc(var(--spacing) * 13);
        }
    }
    .md\:mt-15 {
        @media (width >= 768px) {
            margin-top: calc(var(--spacing) * 15);
        }
    }
    .md\:mt-77 {
        @media (width >= 768px) {
            margin-top: calc(var(--spacing) * 77);
        }
    }
    .md\:mr-30 {
        @media (width >= 768px) {
            margin-right: calc(var(--spacing) * 30);
        }
    }
    .md\:mb-20 {
        @media (width >= 768px) {
            margin-bottom: calc(var(--spacing) * 20);
        }
    }
    .md\:mb-30 {
        @media (width >= 768px) {
            margin-bottom: calc(var(--spacing) * 30);
        }
    }
    .md\:mb-40 {
        @media (width >= 768px) {
            margin-bottom: calc(var(--spacing) * 40);
        }
    }
    .md\:mb-50 {
        @media (width >= 768px) {
            margin-bottom: calc(var(--spacing) * 50);
        }
    }
    .md\:mb-56 {
        @media (width >= 768px) {
            margin-bottom: calc(var(--spacing) * 56);
        }
    }
    .md\:ml-50 {
        @media (width >= 768px) {
            margin-left: calc(var(--spacing) * 50);
        }
    }
    .md\:ml-auto {
        @media (width >= 768px) {
            margin-left: auto;
        }
    }
    .md\:block {
        @media (width >= 768px) {
            display: block;
        }
    }
    .md\:flex {
        @media (width >= 768px) {
            display: flex;
        }
    }
    .md\:hidden {
        @media (width >= 768px) {
            display: none;
        }
    }
    .md\:size-65 {
        @media (width >= 768px) {
            width: calc(var(--spacing) * 65);
            height: calc(var(--spacing) * 65);
        }
    }
    .md\:size-100 {
        @media (width >= 768px) {
            width: calc(var(--spacing) * 100);
            height: calc(var(--spacing) * 100);
        }
    }
    .md\:h-500 {
        @media (width >= 768px) {
            height: calc(var(--spacing) * 500);
        }
    }
    .md\:h-full {
        @media (width >= 768px) {
            height: 100%;
        }
    }
    .md\:max-h-full {
        @media (width >= 768px) {
            max-height: 100%;
        }
    }
    .md\:min-h-350 {
        @media (width >= 768px) {
            min-height: calc(var(--spacing) * 350);
        }
    }
    .md\:w-1\/2 {
        @media (width >= 768px) {
            width: calc(1 / 2 * 100%);
        }
    }
    .md\:w-1\/4 {
        @media (width >= 768px) {
            width: calc(1 / 4 * 100%);
        }
    }
    .md\:w-\[60\%\] {
        @media (width >= 768px) {
            width: 60%;
        }
    }
    .md\:w-\[70\%\] {
        @media (width >= 768px) {
            width: 70%;
        }
    }
    .md\:w-\[80\%\] {
        @media (width >= 768px) {
            width: 80%;
        }
    }
    .md\:min-w-340 {
        @media (width >= 768px) {
            min-width: calc(var(--spacing) * 340);
        }
    }
    .md\:scale-\[0\.65\] {
        @media (width >= 768px) {
            scale: 0.65;
        }
    }
    .md\:scale-\[0\.70\] {
        @media (width >= 768px) {
            scale: 0.7;
        }
    }
    .md\:scale-\[0\.80\] {
        @media (width >= 768px) {
            scale: 0.8;
        }
    }
    .md\:scale-\[0\.89\] {
        @media (width >= 768px) {
            scale: 0.89;
        }
    }
    .md\:flex-col {
        @media (width >= 768px) {
            flex-direction: column;
        }
    }
    .md\:flex-row {
        @media (width >= 768px) {
            flex-direction: row;
        }
    }
    .md\:gap-23 {
        @media (width >= 768px) {
            gap: calc(var(--spacing) * 23);
        }
    }
    .md\:gap-30 {
        @media (width >= 768px) {
            gap: calc(var(--spacing) * 30);
        }
    }
    .md\:gap-40 {
        @media (width >= 768px) {
            gap: calc(var(--spacing) * 40);
        }
    }
    .md\:gap-60 {
        @media (width >= 768px) {
            gap: calc(var(--spacing) * 60);
        }
    }
    .md\:rounded-tl-\[15px\] {
        @media (width >= 768px) {
            border-top-left-radius: 15px;
        }
    }
    .md\:p-10 {
        @media (width >= 768px) {
            padding: calc(var(--spacing) * 10);
        }
    }
    .md\:p-35 {
        @media (width >= 768px) {
            padding: calc(var(--spacing) * 35);
        }
    }
    .md\:p-50 {
        @media (width >= 768px) {
            padding: calc(var(--spacing) * 50);
        }
    }
    .md\:\!px-60 {
        @media (width >= 768px) {
            padding-inline: calc(var(--spacing) * 60) !important;
        }
    }
    .md\:px-30 {
        @media (width >= 768px) {
            padding-inline: calc(var(--spacing) * 30);
        }
    }
    .md\:px-45 {
        @media (width >= 768px) {
            padding-inline: calc(var(--spacing) * 45);
        }
    }
    .md\:px-100 {
        @media (width >= 768px) {
            padding-inline: calc(var(--spacing) * 100);
        }
    }
    .md\:py-13 {
        @media (width >= 768px) {
            padding-block: calc(var(--spacing) * 13);
        }
    }
    .md\:py-50 {
        @media (width >= 768px) {
            padding-block: calc(var(--spacing) * 50);
        }
    }
    .md\:py-80 {
        @media (width >= 768px) {
            padding-block: calc(var(--spacing) * 80);
        }
    }
    .md\:py-100 {
        @media (width >= 768px) {
            padding-block: calc(var(--spacing) * 100);
        }
    }
    .md\:py-120 {
        @media (width >= 768px) {
            padding-block: calc(var(--spacing) * 120);
        }
    }
    .md\:ps-40 {
        @media (width >= 768px) {
            padding-inline-start: calc(var(--spacing) * 40);
        }
    }
    .md\:pe-20 {
        @media (width >= 768px) {
            padding-inline-end: calc(var(--spacing) * 20);
        }
    }
    .md\:pt-20 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 20);
        }
    }
    .md\:pt-30 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 30);
        }
    }
    .md\:pt-45 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 45);
        }
    }
    .md\:pt-50 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 50);
        }
    }
    .md\:pt-65 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 65);
        }
    }
    .md\:pt-81 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 81);
        }
    }
    .md\:pt-120 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 120);
        }
    }
    .md\:pt-150 {
        @media (width >= 768px) {
            padding-top: calc(var(--spacing) * 150);
        }
    }
    .md\:pb-80 {
        @media (width >= 768px) {
            padding-bottom: calc(var(--spacing) * 80);
        }
    }
    .md\:pb-100 {
        @media (width >= 768px) {
            padding-bottom: calc(var(--spacing) * 100);
        }
    }
    .md\:pb-130 {
        @media (width >= 768px) {
            padding-bottom: calc(var(--spacing) * 130);
        }
    }
    .md\:pb-160 {
        @media (width >= 768px) {
            padding-bottom: calc(var(--spacing) * 160);
        }
    }
    .md\:text-start {
        @media (width >= 768px) {
            text-align: start;
        }
    }
    .md\:text-2xl {
        @media (width >= 768px) {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }
    .md\:text-2xl\/28 {
        @media (width >= 768px) {
            font-size: var(--text-2xl);
            line-height: calc(var(--spacing) * 28);
        }
    }
    .md\:text-2xl\/35 {
        @media (width >= 768px) {
            font-size: var(--text-2xl);
            line-height: calc(var(--spacing) * 35);
        }
    }
    .md\:text-3xl\/40 {
        @media (width >= 768px) {
            font-size: var(--text-3xl);
            line-height: calc(var(--spacing) * 40);
        }
    }
    .md\:text-4\.5xl\/50 {
        @media (width >= 768px) {
            font-size: var(--text-4\.5xl);
            line-height: calc(var(--spacing) * 50);
        }
    }
    .md\:text-4\.8xl\/50 {
        @media (width >= 768px) {
            font-size: var(--text-4\.8xl);
            line-height: calc(var(--spacing) * 50);
        }
    }
    .md\:text-4xl\/41 {
        @media (width >= 768px) {
            font-size: var(--text-4xl);
            line-height: calc(var(--spacing) * 41);
        }
    }
    .md\:text-4xl\/52 {
        @media (width >= 768px) {
            font-size: var(--text-4xl);
            line-height: calc(var(--spacing) * 52);
        }
    }
    .md\:text-4xl\/55 {
        @media (width >= 768px) {
            font-size: var(--text-4xl);
            line-height: calc(var(--spacing) * 55);
        }
    }
    .md\:text-5xl {
        @media (width >= 768px) {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading, var(--text-5xl--line-height));
        }
    }
    .md\:text-5xl\/65 {
        @media (width >= 768px) {
            font-size: var(--text-5xl);
            line-height: calc(var(--spacing) * 65);
        }
    }
    .md\:text-6\.5xl\/70 {
        @media (width >= 768px) {
            font-size: var(--text-6\.5xl);
            line-height: calc(var(--spacing) * 70);
        }
    }
    .md\:text-6\.5xl\/73 {
        @media (width >= 768px) {
            font-size: var(--text-6\.5xl);
            line-height: calc(var(--spacing) * 73);
        }
    }
    .md\:text-6xl {
        @media (width >= 768px) {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height));
        }
    }
    .md\:text-6xl\/69 {
        @media (width >= 768px) {
            font-size: var(--text-6xl);
            line-height: calc(var(--spacing) * 69);
        }
    }
    .md\:text-6xl\/70 {
        @media (width >= 768px) {
            font-size: var(--text-6xl);
            line-height: calc(var(--spacing) * 70);
        }
    }
    .md\:text-7xl {
        @media (width >= 768px) {
            font-size: var(--text-7xl);
            line-height: var(--tw-leading, var(--text-7xl--line-height));
        }
    }
    .md\:text-7xl\/70 {
        @media (width >= 768px) {
            font-size: var(--text-7xl);
            line-height: calc(var(--spacing) * 70);
        }
    }
    .md\:text-7xxl\/60 {
        @media (width >= 768px) {
            font-size: var(--text-7xxl);
            line-height: calc(var(--spacing) * 60);
        }
    }
    .md\:text-8\.5xl\/80 {
        @media (width >= 768px) {
            font-size: var(--text-8\.5xl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .md\:text-8xl\/95 {
        @media (width >= 768px) {
            font-size: var(--text-8xl);
            line-height: calc(var(--spacing) * 95);
        }
    }
    .md\:text-\[75px\]\/\[75px\] {
        @media (width >= 768px) {
            font-size: 75px;
            line-height: 75px;
        }
    }
    .md\:text-\[85px\]\/85 {
        @media (width >= 768px) {
            font-size: 85px;
            line-height: calc(var(--spacing) * 85);
        }
    }
    .md\:text-\[190px\]\/\[1\] {
        @media (width >= 768px) {
            font-size: 190px;
            line-height: 1;
        }
    }
    .md\:text-lg {
        @media (width >= 768px) {
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height));
        }
    }
    .md\:text-sm {
        @media (width >= 768px) {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
        }
    }
    .md\:text-xl {
        @media (width >= 768px) {
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
        }
    }
    .md\:text-xxl\/35 {
        @media (width >= 768px) {
            font-size: var(--text-xxl);
            line-height: calc(var(--spacing) * 35);
        }
    }
    .md\:text-4\.75xl {
        @media (width >= 768px) {
            font-size: var(--text-4\.75xl);
        }
    }
    .md\:text-5\.2xl {
        @media (width >= 768px) {
            font-size: var(--text-5\.2xl);
        }
    }
    .md\:text-\[90px\] {
        @media (width >= 768px) {
            font-size: 90px;
        }
    }
    .md\:text-\[160px\] {
        @media (width >= 768px) {
            font-size: 160px;
        }
    }
    .before\:md\:scale-\[0\.70\] {
        &::before {
            content: var(--tw-content);
            @media (width >= 768px) {
                scale: 0.7;
            }
        }
    }
    .md\:after\:bottom-7 {
        @media (width >= 768px) {
            &::after {
                content: var(--tw-content);
                bottom: calc(var(--spacing) * 7);
            }
        }
    }
    .md\:after\:block {
        @media (width >= 768px) {
            &::after {
                content: var(--tw-content);
                display: block;
            }
        }
    }
    .lg\:invisible {
        @media (width >= 992px) {
            visibility: hidden;
        }
    }
    .lg\:absolute {
        @media (width >= 992px) {
            position: absolute;
        }
    }
    .lg\:sticky {
        @media (width >= 992px) {
            position: sticky;
        }
    }
    .lg\:top-0 {
        @media (width >= 992px) {
            top: calc(var(--spacing) * 0);
        }
    }
    .lg\:top-40 {
        @media (width >= 992px) {
            top: calc(var(--spacing) * 40);
        }
    }
    .lg\:top-145 {
        @media (width >= 992px) {
            top: calc(var(--spacing) * 145);
        }
    }
    .lg\:top-165 {
        @media (width >= 992px) {
            top: calc(var(--spacing) * 165);
        }
    }
    .lg\:right-50 {
        @media (width >= 992px) {
            right: calc(var(--spacing) * 50);
        }
    }
    .lg\:right-224 {
        @media (width >= 992px) {
            right: calc(var(--spacing) * 224);
        }
    }
    .lg\:right-\[27\%\] {
        @media (width >= 992px) {
            right: 27%;
        }
    }
    .lg\:-bottom-75 {
        @media (width >= 992px) {
            bottom: calc(var(--spacing) * -75);
        }
    }
    .lg\:left-224 {
        @media (width >= 992px) {
            left: calc(var(--spacing) * 224);
        }
    }
    .lg\:z-2 {
        @media (width >= 992px) {
            z-index: var(--z-index-2);
        }
    }
    .lg\:z-5 {
        @media (width >= 992px) {
            z-index: 5;
        }
    }
    .lg\:order-0 {
        @media (width >= 992px) {
            order: 0;
        }
    }
    .lg\:order-1 {
        @media (width >= 992px) {
            order: 1;
        }
    }
    .lg\:order-2 {
        @media (width >= 992px) {
            order: 2;
        }
    }
    .lg\:order-\[0\] {
        @media (width >= 992px) {
            order: 0;
        }
    }
    .lg\:col-span-3 {
        @media (width >= 992px) {
            grid-column: span 3 / span 3;
        }
    }
    .lg\:col-span-4 {
        @media (width >= 992px) {
            grid-column: span 4 / span 4;
        }
    }
    .lg\:col-span-5 {
        @media (width >= 992px) {
            grid-column: span 5 / span 5;
        }
    }
    .lg\:col-span-6 {
        @media (width >= 992px) {
            grid-column: span 6 / span 6;
        }
    }
    .lg\:col-span-7 {
        @media (width >= 992px) {
            grid-column: span 7 / span 7;
        }
    }
    .lg\:col-span-8 {
        @media (width >= 992px) {
            grid-column: span 8 / span 8;
        }
    }
    .lg\:col-span-9 {
        @media (width >= 992px) {
            grid-column: span 9 / span 9;
        }
    }
    .lg\:float-left {
        @media (width >= 992px) {
            float: left;
        }
    }
    .lg\:float-right {
        @media (width >= 992px) {
            float: right;
        }
    }
    .lg\:mx-0 {
        @media (width >= 992px) {
            margin-inline: calc(var(--spacing) * 0);
        }
    }
    .lg\:\!mt-70 {
        @media (width >= 992px) {
            margin-top: calc(var(--spacing) * 70) !important;
        }
    }
    .lg\:mt-90 {
        @media (width >= 992px) {
            margin-top: calc(var(--spacing) * 90);
        }
    }
    .lg\:mb-0 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 0);
        }
    }
    .lg\:mb-5 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 5);
        }
    }
    .lg\:mb-16 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 16);
        }
    }
    .lg\:mb-20 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 20);
        }
    }
    .lg\:mb-30 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 30);
        }
    }
    .lg\:mb-40 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 40);
        }
    }
    .lg\:mb-50 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 50);
        }
    }
    .lg\:mb-56 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 56);
        }
    }
    .lg\:mb-60 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 60);
        }
    }
    .lg\:mb-70 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 70);
        }
    }
    .lg\:mb-73 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 73);
        }
    }
    .lg\:mb-80 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 80);
        }
    }
    .lg\:mb-85 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 85);
        }
    }
    .lg\:mb-100 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 100);
        }
    }
    .lg\:mb-106 {
        @media (width >= 992px) {
            margin-bottom: calc(var(--spacing) * 106);
        }
    }
    .lg\:-ml-40 {
        @media (width >= 992px) {
            margin-left: calc(var(--spacing) * -40);
        }
    }
    .lg\:ml-50 {
        @media (width >= 992px) {
            margin-left: calc(var(--spacing) * 50);
        }
    }
    .lg\:ml-70 {
        @media (width >= 992px) {
            margin-left: calc(var(--spacing) * 70);
        }
    }
    .lg\:ml-160 {
        @media (width >= 992px) {
            margin-left: calc(var(--spacing) * 160);
        }
    }
    .lg\:block {
        @media (width >= 992px) {
            display: block;
        }
    }
    .lg\:flex {
        @media (width >= 992px) {
            display: flex;
        }
    }
    .lg\:size-129 {
        @media (width >= 992px) {
            width: calc(var(--spacing) * 129);
            height: calc(var(--spacing) * 129);
        }
    }
    .lg\:size-auto {
        @media (width >= 992px) {
            width: auto;
            height: auto;
        }
    }
    .lg\:h-800 {
        @media (width >= 992px) {
            height: calc(var(--spacing) * 800);
        }
    }
    .lg\:h-\[calc\(100px-130px\)\] {
        @media (width >= 992px) {
            height: calc(100px - 130px);
        }
    }
    .lg\:h-full {
        @media (width >= 992px) {
            height: 100%;
        }
    }
    .lg\:h-screen {
        @media (width >= 992px) {
            height: 100vh;
        }
    }
    .lg\:max-h-1200 {
        @media (width >= 992px) {
            max-height: calc(var(--spacing) * 1200);
        }
    }
    .lg\:w-1\/2 {
        @media (width >= 992px) {
            width: calc(1 / 2 * 100%);
        }
    }
    .lg\:w-1\/3 {
        @media (width >= 992px) {
            width: calc(1 / 3 * 100%);
        }
    }
    .lg\:w-2\/5 {
        @media (width >= 992px) {
            width: calc(2 / 5 * 100%);
        }
    }
    .lg\:w-585 {
        @media (width >= 992px) {
            width: calc(var(--spacing) * 585);
        }
    }
    .lg\:w-\[41\.65\%\] {
        @media (width >= 992px) {
            width: 41.65%;
        }
    }
    .lg\:w-\[42vw\] {
        @media (width >= 992px) {
            width: 42vw;
        }
    }
    .lg\:w-\[44\%\] {
        @media (width >= 992px) {
            width: 44%;
        }
    }
    .lg\:w-\[50vw\] {
        @media (width >= 992px) {
            width: 50vw;
        }
    }
    .lg\:w-\[56\%\] {
        @media (width >= 992px) {
            width: 56%;
        }
    }
    .lg\:w-\[68\%\] {
        @media (width >= 992px) {
            width: 68%;
        }
    }
    .lg\:w-\[80\%\] {
        @media (width >= 992px) {
            width: 80%;
        }
    }
    .lg\:w-auto {
        @media (width >= 992px) {
            width: auto;
        }
    }
    .lg\:w-full {
        @media (width >= 992px) {
            width: 100%;
        }
    }
    .lg\:max-w-540 {
        @media (width >= 992px) {
            max-width: calc(var(--spacing) * 540);
        }
    }
    .lg\:max-w-600 {
        @media (width >= 992px) {
            max-width: calc(var(--spacing) * 600);
        }
    }
    .lg\:min-w-129 {
        @media (width >= 992px) {
            min-width: calc(var(--spacing) * 129);
        }
    }
    .lg\:scale-\[0\.7\] {
        @media (width >= 992px) {
            scale: 0.7;
        }
    }
    .lg\:scale-none {
        @media (width >= 992px) {
            scale: none;
        }
    }
    .lg\:flex-row {
        @media (width >= 992px) {
            flex-direction: row;
        }
    }
    .lg\:items-center {
        @media (width >= 992px) {
            align-items: center;
        }
    }
    .lg\:justify-between {
        @media (width >= 992px) {
            justify-content: space-between;
        }
    }
    .lg\:gap-0 {
        @media (width >= 992px) {
            gap: calc(var(--spacing) * 0);
        }
    }
    .lg\:gap-15 {
        @media (width >= 992px) {
            gap: calc(var(--spacing) * 15);
        }
    }
    .lg\:gap-30 {
        @media (width >= 992px) {
            gap: calc(var(--spacing) * 30);
        }
    }
    .lg\:gap-50 {
        @media (width >= 992px) {
            gap: calc(var(--spacing) * 50);
        }
    }
    .lg\:gap-y-100 {
        @media (width >= 992px) {
            row-gap: calc(var(--spacing) * 100);
        }
    }
    .lg\:overflow-y-auto {
        @media (width >= 992px) {
            overflow-y: auto;
        }
    }
    .lg\:border-b-0 {
        @media (width >= 992px) {
            border-bottom-style: var(--tw-border-style);
            border-bottom-width: 0px;
        }
    }
    .lg\:border-social {
        @media (width >= 992px) {
            border-color: var(--color-social);
        }
    }
    .lg\:bg-black {
        @media (width >= 992px) {
            background-color: var(--color-black);
        }
    }
    .lg\:px-0 {
        @media (width >= 992px) {
            padding-inline: calc(var(--spacing) * 0);
        }
    }
    .lg\:px-5 {
        @media (width >= 992px) {
            padding-inline: calc(var(--spacing) * 5);
        }
    }
    .lg\:px-60 {
        @media (width >= 992px) {
            padding-inline: calc(var(--spacing) * 60);
        }
    }
    .lg\:py-0 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 0);
        }
    }
    .lg\:py-60 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 60);
        }
    }
    .lg\:py-80 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 80);
        }
    }
    .lg\:py-100 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 100);
        }
    }
    .lg\:py-120 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 120);
        }
    }
    .lg\:py-140 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 140);
        }
    }
    .lg\:py-150 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 150);
        }
    }
    .lg\:py-160 {
        @media (width >= 992px) {
            padding-block: calc(var(--spacing) * 160);
        }
    }
    .lg\:ps-70 {
        @media (width >= 992px) {
            padding-inline-start: calc(var(--spacing) * 70);
        }
    }
    .lg\:ps-80 {
        @media (width >= 992px) {
            padding-inline-start: calc(var(--spacing) * 80);
        }
    }
    .lg\:ps-100 {
        @media (width >= 992px) {
            padding-inline-start: calc(var(--spacing) * 100);
        }
    }
    .lg\:pe-30 {
        @media (width >= 992px) {
            padding-inline-end: calc(var(--spacing) * 30);
        }
    }
    .lg\:pe-50 {
        @media (width >= 992px) {
            padding-inline-end: calc(var(--spacing) * 50);
        }
    }
    .lg\:pe-60 {
        @media (width >= 992px) {
            padding-inline-end: calc(var(--spacing) * 60);
        }
    }
    .lg\:pe-90 {
        @media (width >= 992px) {
            padding-inline-end: calc(var(--spacing) * 90);
        }
    }
    .lg\:pt-0 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 0);
        }
    }
    .lg\:pt-50 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 50);
        }
    }
    .lg\:pt-65 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 65);
        }
    }
    .lg\:pt-75 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 75);
        }
    }
    .lg\:pt-85 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 85);
        }
    }
    .lg\:pt-100 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 100);
        }
    }
    .lg\:pt-126 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 126);
        }
    }
    .lg\:pt-130 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 130);
        }
    }
    .lg\:pt-133 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 133);
        }
    }
    .lg\:pt-200 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 200);
        }
    }
    .lg\:pt-210 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 210);
        }
    }
    .lg\:pt-239 {
        @media (width >= 992px) {
            padding-top: calc(var(--spacing) * 239);
        }
    }
    .lg\:pr-30 {
        @media (width >= 992px) {
            padding-right: calc(var(--spacing) * 30);
        }
    }
    .lg\:pb-0 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 0);
        }
    }
    .lg\:pb-60 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 60);
        }
    }
    .lg\:pb-100 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 100);
        }
    }
    .lg\:pb-120 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 120);
        }
    }
    .lg\:pb-140 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 140);
        }
    }
    .lg\:pb-150 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 150);
        }
    }
    .lg\:pb-160 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 160);
        }
    }
    .lg\:pb-173 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 173);
        }
    }
    .lg\:pb-180 {
        @media (width >= 992px) {
            padding-bottom: calc(var(--spacing) * 180);
        }
    }
    .lg\:text-center {
        @media (width >= 992px) {
            text-align: center;
        }
    }
    .lg\:text-end {
        @media (width >= 992px) {
            text-align: end;
        }
    }
    .lg\:text-2xl {
        @media (width >= 992px) {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }
    .lg\:text-5xl {
        @media (width >= 992px) {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading, var(--text-5xl--line-height));
        }
    }
    .lg\:text-6xl {
        @media (width >= 992px) {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height));
        }
    }
    .lg\:text-6xl\/65 {
        @media (width >= 992px) {
            font-size: var(--text-6xl);
            line-height: calc(var(--spacing) * 65);
        }
    }
    .lg\:text-7xl\/70 {
        @media (width >= 992px) {
            font-size: var(--text-7xl);
            line-height: calc(var(--spacing) * 70);
        }
    }
    .lg\:text-7xl\/80 {
        @media (width >= 992px) {
            font-size: var(--text-7xl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .lg\:text-8\.5xl\/80 {
        @media (width >= 992px) {
            font-size: var(--text-8\.5xl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .lg\:text-8\.5xl\/100 {
        @media (width >= 992px) {
            font-size: var(--text-8\.5xl);
            line-height: calc(var(--spacing) * 100);
        }
    }
    .lg\:text-9xl\/\[1\] {
        @media (width >= 992px) {
            font-size: var(--text-9xl);
            line-height: 1;
        }
    }
    .lg\:text-\[138px\]\/138 {
        @media (width >= 992px) {
            font-size: 138px;
            line-height: calc(var(--spacing) * 138);
        }
    }
    .lg\:text-lg\/20 {
        @media (width >= 992px) {
            font-size: var(--text-lg);
            line-height: calc(var(--spacing) * 20);
        }
    }
    .lg\:text-social {
        @media (width >= 992px) {
            color: var(--color-social);
        }
    }
    .lg\:opacity-0 {
        @media (width >= 992px) {
            opacity: 0%;
        }
    }
    .lg\:before\:absolute {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                position: absolute;
            }
        }
    }
    .lg\:before\:top-310 {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                top: calc(var(--spacing) * 310);
            }
        }
    }
    .lg\:before\:left-0 {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                left: calc(var(--spacing) * 0);
            }
        }
    }
    .lg\:before\:block {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                display: block;
            }
        }
    }
    .lg\:before\:hidden {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                display: none;
            }
        }
    }
    .lg\:before\:h-2 {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                height: calc(var(--spacing) * 2);
            }
        }
    }
    .lg\:before\:w-1\/2 {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                width: calc(1 / 2 * 100%);
            }
        }
    }
    .lg\:before\:w-32 {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                width: calc(var(--spacing) * 32);
            }
        }
    }
    .lg\:before\:w-full {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                width: 100%;
            }
        }
    }
    .before\:lg\:scale-none {
        &::before {
            content: var(--tw-content);
            @media (width >= 992px) {
                scale: none;
            }
        }
    }
    .lg\:before\:bg-black {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                background-color: var(--color-black);
            }
        }
    }
    .lg\:before\:bg-white {
        @media (width >= 992px) {
            &::before {
                content: var(--tw-content);
                background-color: var(--color-white);
            }
        }
    }
    .lg\:after\:-left-108 {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                left: calc(var(--spacing) * -108);
            }
        }
    }
    .lg\:after\:left-\[calc\(calc\(100vw_-_916px\)_\/_-2\)\] {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                left: calc(calc(100vw - 916px) / -2);
            }
        }
    }
    .lg\:after\:size-450 {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 450);
                height: calc(var(--spacing) * 450);
            }
        }
    }
    .lg\:after\:h-514 {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                height: calc(var(--spacing) * 514);
            }
        }
    }
    .lg\:after\:w-32 {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 32);
            }
        }
    }
    .lg\:after\:w-400 {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 400);
            }
        }
    }
    .lg\:after\:w-screen {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                width: 100vw;
            }
        }
    }
    .lg\:after\:bg-white {
        @media (width >= 992px) {
            &::after {
                content: var(--tw-content);
                background-color: var(--color-white);
            }
        }
    }
    .xl\:sticky {
        @media (width >= 1200px) {
            position: sticky;
        }
    }
    .xl\:\!top-35 {
        @media (width >= 1200px) {
            top: calc(var(--spacing) * 35) !important;
        }
    }
    .xl\:top-0 {
        @media (width >= 1200px) {
            top: calc(var(--spacing) * 0);
        }
    }
    .xl\:top-70 {
        @media (width >= 1200px) {
            top: calc(var(--spacing) * 70);
        }
    }
    .xl\:top-\[4\%\] {
        @media (width >= 1200px) {
            top: 4%;
        }
    }
    .xl\:-right-95 {
        @media (width >= 1200px) {
            right: calc(var(--spacing) * -95);
        }
    }
    .xl\:right-25 {
        @media (width >= 1200px) {
            right: calc(var(--spacing) * 25);
        }
    }
    .xl\:right-\[15\%\] {
        @media (width >= 1200px) {
            right: 15%;
        }
    }
    .xl\:\!bottom-50 {
        @media (width >= 1200px) {
            bottom: calc(var(--spacing) * 50) !important;
        }
    }
    .xl\:left-0 {
        @media (width >= 1200px) {
            left: calc(var(--spacing) * 0);
        }
    }
    .xl\:left-\[30\%\] {
        @media (width >= 1200px) {
            left: 30%;
        }
    }
    .xl\:col-span-3 {
        @media (width >= 1200px) {
            grid-column: span 3 / span 3;
        }
    }
    .xl\:col-span-4 {
        @media (width >= 1200px) {
            grid-column: span 4 / span 4;
        }
    }
    .xl\:col-span-5 {
        @media (width >= 1200px) {
            grid-column: span 5 / span 5;
        }
    }
    .xl\:col-span-6 {
        @media (width >= 1200px) {
            grid-column: span 6 / span 6;
        }
    }
    .xl\:col-span-7 {
        @media (width >= 1200px) {
            grid-column: span 7 / span 7;
        }
    }
    .xl\:col-span-8 {
        @media (width >= 1200px) {
            grid-column: span 8 / span 8;
        }
    }
    .xl\:row-span-2 {
        @media (width >= 1200px) {
            grid-row: span 2 / span 2;
        }
    }
    .xl\:mx-auto {
        @media (width >= 1200px) {
            margin-inline: auto;
        }
    }
    .xl\:mt-2 {
        @media (width >= 1200px) {
            margin-top: calc(var(--spacing) * 2);
        }
    }
    .xl\:mt-119 {
        @media (width >= 1200px) {
            margin-top: calc(var(--spacing) * 119);
        }
    }
    .xl\:mr-30 {
        @media (width >= 1200px) {
            margin-right: calc(var(--spacing) * 30);
        }
    }
    .xl\:mb-0 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 0);
        }
    }
    .xl\:mb-10 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 10);
        }
    }
    .xl\:mb-20 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 20);
        }
    }
    .xl\:mb-44 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 44);
        }
    }
    .xl\:mb-50 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 50);
        }
    }
    .xl\:mb-60 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 60);
        }
    }
    .xl\:mb-66 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 66);
        }
    }
    .xl\:mb-70 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 70);
        }
    }
    .xl\:mb-77 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 77);
        }
    }
    .xl\:mb-100 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 100);
        }
    }
    .xl\:mb-150 {
        @media (width >= 1200px) {
            margin-bottom: calc(var(--spacing) * 150);
        }
    }
    .xl\:ml-20 {
        @media (width >= 1200px) {
            margin-left: calc(var(--spacing) * 20);
        }
    }
    .xl\:ml-40 {
        @media (width >= 1200px) {
            margin-left: calc(var(--spacing) * 40);
        }
    }
    .xl\:ml-50 {
        @media (width >= 1200px) {
            margin-left: calc(var(--spacing) * 50);
        }
    }
    .xl\:ml-80 {
        @media (width >= 1200px) {
            margin-left: calc(var(--spacing) * 80);
        }
    }
    .xl\:ml-94 {
        @media (width >= 1200px) {
            margin-left: calc(var(--spacing) * 94);
        }
    }
    .xl\:ml-170 {
        @media (width >= 1200px) {
            margin-left: calc(var(--spacing) * 170);
        }
    }
    .xl\:block {
        @media (width >= 1200px) {
            display: block;
        }
    }
    .xl\:flex {
        @media (width >= 1200px) {
            display: flex;
        }
    }
    .xl\:hidden {
        @media (width >= 1200px) {
            display: none;
        }
    }
    .xl\:size-76 {
        @media (width >= 1200px) {
            width: calc(var(--spacing) * 76);
            height: calc(var(--spacing) * 76);
        }
    }
    .xl\:h-650 {
        @media (width >= 1200px) {
            height: calc(var(--spacing) * 650);
        }
    }
    .xl\:h-auto {
        @media (width >= 1200px) {
            height: auto;
        }
    }
    .xl\:w-2\/5 {
        @media (width >= 1200px) {
            width: calc(2 / 5 * 100%);
        }
    }
    .xl\:w-3\/5 {
        @media (width >= 1200px) {
            width: calc(3 / 5 * 100%);
        }
    }
    .xl\:w-4\/5 {
        @media (width >= 1200px) {
            width: calc(4 / 5 * 100%);
        }
    }
    .xl\:w-150 {
        @media (width >= 1200px) {
            width: calc(var(--spacing) * 150);
        }
    }
    .xl\:w-\[20\%\] {
        @media (width >= 1200px) {
            width: 20%;
        }
    }
    .xl\:w-\[60\%\] {
        @media (width >= 1200px) {
            width: 60%;
        }
    }
    .xl\:w-\[63\%\] {
        @media (width >= 1200px) {
            width: 63%;
        }
    }
    .xl\:w-full {
        @media (width >= 1200px) {
            width: 100%;
        }
    }
    .xl\:max-w-200 {
        @media (width >= 1200px) {
            max-width: calc(var(--spacing) * 200);
        }
    }
    .xl\:max-w-420 {
        @media (width >= 1200px) {
            max-width: calc(var(--spacing) * 420);
        }
    }
    .xl\:max-w-700 {
        @media (width >= 1200px) {
            max-width: calc(var(--spacing) * 700);
        }
    }
    .xl\:-translate-x-full {
        @media (width >= 1200px) {
            --tw-translate-x: -100%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .xl\:translate-x-10 {
        @media (width >= 1200px) {
            --tw-translate-x: calc(var(--spacing) * 10);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .xl\:-translate-y-5 {
        @media (width >= 1200px) {
            --tw-translate-y: calc(var(--spacing) * -5);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .xl\:rotate-\[-360deg\] {
        @media (width >= 1200px) {
            rotate: -360deg;
        }
    }
    .xl\:gap-20 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 20);
        }
    }
    .xl\:gap-30 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 30);
        }
    }
    .xl\:gap-35 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 35);
        }
    }
    .xl\:gap-40 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 40);
        }
    }
    .xl\:gap-54 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 54);
        }
    }
    .xl\:gap-60 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 60);
        }
    }
    .xl\:gap-63 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 63);
        }
    }
    .xl\:gap-88 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 88);
        }
    }
    .xl\:gap-100 {
        @media (width >= 1200px) {
            gap: calc(var(--spacing) * 100);
        }
    }
    .xl\:rounded-tr-none {
        @media (width >= 1200px) {
            border-top-right-radius: 0;
        }
    }
    .xl\:rounded-bl-\[15px\] {
        @media (width >= 1200px) {
            border-bottom-left-radius: 15px;
        }
    }
    .xl\:p-0 {
        @media (width >= 1200px) {
            padding: calc(var(--spacing) * 0);
        }
    }
    .xl\:p-20 {
        @media (width >= 1200px) {
            padding: calc(var(--spacing) * 20);
        }
    }
    .xl\:p-40 {
        @media (width >= 1200px) {
            padding: calc(var(--spacing) * 40);
        }
    }
    .xl\:p-80 {
        @media (width >= 1200px) {
            padding: calc(var(--spacing) * 80);
        }
    }
    .xl\:p-85 {
        @media (width >= 1200px) {
            padding: calc(var(--spacing) * 85);
        }
    }
    .xl\:px-40 {
        @media (width >= 1200px) {
            padding-inline: calc(var(--spacing) * 40);
        }
    }
    .xl\:px-110 {
        @media (width >= 1200px) {
            padding-inline: calc(var(--spacing) * 110);
        }
    }
    .xl\:py-20 {
        @media (width >= 1200px) {
            padding-block: calc(var(--spacing) * 20);
        }
    }
    .xl\:py-60 {
        @media (width >= 1200px) {
            padding-block: calc(var(--spacing) * 60);
        }
    }
    .xl\:py-126 {
        @media (width >= 1200px) {
            padding-block: calc(var(--spacing) * 126);
        }
    }
    .xl\:py-132 {
        @media (width >= 1200px) {
            padding-block: calc(var(--spacing) * 132);
        }
    }
    .xl\:py-144 {
        @media (width >= 1200px) {
            padding-block: calc(var(--spacing) * 144);
        }
    }
    .xl\:py-150 {
        @media (width >= 1200px) {
            padding-block: calc(var(--spacing) * 150);
        }
    }
    .xl\:py-200 {
        @media (width >= 1200px) {
            padding-block: calc(var(--spacing) * 200);
        }
    }
    .xl\:ps-20 {
        @media (width >= 1200px) {
            padding-inline-start: calc(var(--spacing) * 20);
        }
    }
    .xl\:ps-50 {
        @media (width >= 1200px) {
            padding-inline-start: calc(var(--spacing) * 50);
        }
    }
    .xl\:ps-60 {
        @media (width >= 1200px) {
            padding-inline-start: calc(var(--spacing) * 60);
        }
    }
    .xl\:pe-40 {
        @media (width >= 1200px) {
            padding-inline-end: calc(var(--spacing) * 40);
        }
    }
    .xl\:pe-50 {
        @media (width >= 1200px) {
            padding-inline-end: calc(var(--spacing) * 50);
        }
    }
    .xl\:pe-130 {
        @media (width >= 1200px) {
            padding-inline-end: calc(var(--spacing) * 130);
        }
    }
    .xl\:pt-50 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 50);
        }
    }
    .xl\:pt-70 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 70);
        }
    }
    .xl\:pt-141 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 141);
        }
    }
    .xl\:pt-150 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 150);
        }
    }
    .xl\:pt-153 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 153);
        }
    }
    .xl\:pt-170 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 170);
        }
    }
    .xl\:pt-180 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 180);
        }
    }
    .xl\:pt-200 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 200);
        }
    }
    .xl\:pt-205 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 205);
        }
    }
    .xl\:pt-232 {
        @media (width >= 1200px) {
            padding-top: calc(var(--spacing) * 232);
        }
    }
    .xl\:pb-68 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 68);
        }
    }
    .xl\:pb-74 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 74);
        }
    }
    .xl\:pb-116 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 116);
        }
    }
    .xl\:pb-118 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 118);
        }
    }
    .xl\:pb-120 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 120);
        }
    }
    .xl\:pb-124 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 124);
        }
    }
    .xl\:pb-132 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 132);
        }
    }
    .xl\:pb-150 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 150);
        }
    }
    .xl\:pb-170 {
        @media (width >= 1200px) {
            padding-bottom: calc(var(--spacing) * 170);
        }
    }
    .xl\:text-2\.5xl\/35 {
        @media (width >= 1200px) {
            font-size: var(--text-2\.5xl);
            line-height: calc(var(--spacing) * 35);
        }
    }
    .xl\:text-2\.5xl\/40 {
        @media (width >= 1200px) {
            font-size: var(--text-2\.5xl);
            line-height: calc(var(--spacing) * 40);
        }
    }
    .xl\:text-2\.5xl\/56 {
        @media (width >= 1200px) {
            font-size: var(--text-2\.5xl);
            line-height: calc(var(--spacing) * 56);
        }
    }
    .xl\:text-2xl {
        @media (width >= 1200px) {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }
    .xl\:text-4\.75xl\/46 {
        @media (width >= 1200px) {
            font-size: var(--text-4\.75xl);
            line-height: calc(var(--spacing) * 46);
        }
    }
    .xl\:text-5xl\/65 {
        @media (width >= 1200px) {
            font-size: var(--text-5xl);
            line-height: calc(var(--spacing) * 65);
        }
    }
    .xl\:text-6xl {
        @media (width >= 1200px) {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height));
        }
    }
    .xl\:text-7xl {
        @media (width >= 1200px) {
            font-size: var(--text-7xl);
            line-height: var(--tw-leading, var(--text-7xl--line-height));
        }
    }
    .xl\:text-7xl\/70 {
        @media (width >= 1200px) {
            font-size: var(--text-7xl);
            line-height: calc(var(--spacing) * 70);
        }
    }
    .xl\:text-7xl\/80 {
        @media (width >= 1200px) {
            font-size: var(--text-7xl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .xl\:text-7xxl\/80 {
        @media (width >= 1200px) {
            font-size: var(--text-7xxl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .xl\:text-8\.5xl\/100 {
        @media (width >= 1200px) {
            font-size: var(--text-8\.5xl);
            line-height: calc(var(--spacing) * 100);
        }
    }
    .xl\:text-10xl\/140 {
        @media (width >= 1200px) {
            font-size: var(--text-10xl);
            line-height: calc(var(--spacing) * 140);
        }
    }
    .xl\:text-\[140px\]\/90 {
        @media (width >= 1200px) {
            font-size: 140px;
            line-height: calc(var(--spacing) * 90);
        }
    }
    .xl\:text-\[140px\]\/140 {
        @media (width >= 1200px) {
            font-size: 140px;
            line-height: calc(var(--spacing) * 140);
        }
    }
    .xl\:text-base {
        @media (width >= 1200px) {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height));
        }
    }
    .xl\:text-lg {
        @media (width >= 1200px) {
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height));
        }
    }
    .xl\:text-lg\/40 {
        @media (width >= 1200px) {
            font-size: var(--text-lg);
            line-height: calc(var(--spacing) * 40);
        }
    }
    .xl\:text-\[300px\] {
        @media (width >= 1200px) {
            font-size: 300px;
        }
    }
    .xl\:opacity-0 {
        @media (width >= 1200px) {
            opacity: 0%;
        }
    }
    .xl\:after\:left-0 {
        @media (width >= 1200px) {
            &::after {
                content: var(--tw-content);
                left: calc(var(--spacing) * 0);
            }
        }
    }
    .xl\:after\:w-384 {
        @media (width >= 1200px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 384);
            }
        }
    }
    .xl\:after\:w-450 {
        @media (width >= 1200px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 450);
            }
        }
    }
    .xl\:after\:w-590 {
        @media (width >= 1200px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 590);
            }
        }
    }
    .xxl\:top-0 {
        @media (width >= 1400px) {
            top: calc(var(--spacing) * 0);
        }
    }
    .xxl\:top-\[5\%\] {
        @media (width >= 1400px) {
            top: 5%;
        }
    }
    .xxl\:-right-71 {
        @media (width >= 1400px) {
            right: calc(var(--spacing) * -71);
        }
    }
    .xxl\:right-150 {
        @media (width >= 1400px) {
            right: calc(var(--spacing) * 150);
        }
    }
    .xxl\:right-\[3\%\] {
        @media (width >= 1400px) {
            right: 3%;
        }
    }
    .xxl\:left-260 {
        @media (width >= 1400px) {
            left: calc(var(--spacing) * 260);
        }
    }
    .xxl\:col-span-3 {
        @media (width >= 1400px) {
            grid-column: span 3 / span 3;
        }
    }
    .xxl\:mr-100 {
        @media (width >= 1400px) {
            margin-right: calc(var(--spacing) * 100);
        }
    }
    .xxl\:mb-30 {
        @media (width >= 1400px) {
            margin-bottom: calc(var(--spacing) * 30);
        }
    }
    .xxl\:-ml-0 {
        @media (width >= 1400px) {
            margin-left: calc(var(--spacing) * -0);
        }
    }
    .xxl\:ml-100 {
        @media (width >= 1400px) {
            margin-left: calc(var(--spacing) * 100);
        }
    }
    .xxl\:size-125 {
        @media (width >= 1400px) {
            width: calc(var(--spacing) * 125);
            height: calc(var(--spacing) * 125);
        }
    }
    .xxl\:size-313 {
        @media (width >= 1400px) {
            width: calc(var(--spacing) * 313);
            height: calc(var(--spacing) * 313);
        }
    }
    .xxl\:size-400 {
        @media (width >= 1400px) {
            width: calc(var(--spacing) * 400);
            height: calc(var(--spacing) * 400);
        }
    }
    .xxl\:min-h-940 {
        @media (width >= 1400px) {
            min-height: calc(var(--spacing) * 940);
        }
    }
    .xxl\:w-\[54\%\] {
        @media (width >= 1400px) {
            width: 54%;
        }
    }
    .xxl\:scale-none {
        @media (width >= 1400px) {
            scale: none;
        }
    }
    .xxl\:gap-35 {
        @media (width >= 1400px) {
            gap: calc(var(--spacing) * 35);
        }
    }
    .xxl\:gap-60 {
        @media (width >= 1400px) {
            gap: calc(var(--spacing) * 60);
        }
    }
    .xxl\:px-26 {
        @media (width >= 1400px) {
            padding-inline: calc(var(--spacing) * 26);
        }
    }
    .xxl\:px-100 {
        @media (width >= 1400px) {
            padding-inline: calc(var(--spacing) * 100);
        }
    }
    .xxl\:py-100 {
        @media (width >= 1400px) {
            padding-block: calc(var(--spacing) * 100);
        }
    }
    .xxl\:ps-120 {
        @media (width >= 1400px) {
            padding-inline-start: calc(var(--spacing) * 120);
        }
    }
    .xxl\:pe-90 {
        @media (width >= 1400px) {
            padding-inline-end: calc(var(--spacing) * 90);
        }
    }
    .xxl\:pt-106 {
        @media (width >= 1400px) {
            padding-top: calc(var(--spacing) * 106);
        }
    }
    .xxl\:pt-184 {
        @media (width >= 1400px) {
            padding-top: calc(var(--spacing) * 184);
        }
    }
    .xxl\:pt-198 {
        @media (width >= 1400px) {
            padding-top: calc(var(--spacing) * 198);
        }
    }
    .xxl\:pb-120 {
        @media (width >= 1400px) {
            padding-bottom: calc(var(--spacing) * 120);
        }
    }
    .xxl\:pb-133 {
        @media (width >= 1400px) {
            padding-bottom: calc(var(--spacing) * 133);
        }
    }
    .xxl\:text-2\.5xl\/35 {
        @media (width >= 1400px) {
            font-size: var(--text-2\.5xl);
            line-height: calc(var(--spacing) * 35);
        }
    }
    .xxl\:text-4xl {
        @media (width >= 1400px) {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading, var(--text-4xl--line-height));
        }
    }
    .xxl\:text-6xl {
        @media (width >= 1400px) {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height));
        }
    }
    .xxl\:text-7\.7xl\/95 {
        @media (width >= 1400px) {
            font-size: var(--text-7\.7xl);
            line-height: calc(var(--spacing) * 95);
        }
    }
    .xxl\:text-7xl\/80 {
        @media (width >= 1400px) {
            font-size: var(--text-7xl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .xxl\:text-\[180px\]\/\[160px\] {
        @media (width >= 1400px) {
            font-size: 180px;
            line-height: 160px;
        }
    }
    .xxl\:text-sm {
        @media (width >= 1400px) {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
        }
    }
    .xxl\:text-xl {
        @media (width >= 1400px) {
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
        }
    }
    .xxl\:after\:w-450 {
        @media (width >= 1400px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 450);
            }
        }
    }
    .xxl\:after\:w-600 {
        @media (width >= 1400px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 600);
            }
        }
    }
    .xxl\:after\:w-650 {
        @media (width >= 1400px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 650);
            }
        }
    }
    .\33 xl\:left-68 {
        @media (width >= 1600px) {
            left: calc(var(--spacing) * 68);
        }
    }
    .\33 xl\:-mt-110 {
        @media (width >= 1600px) {
            margin-top: calc(var(--spacing) * -110);
        }
    }
    .\33 xl\:-mt-150 {
        @media (width >= 1600px) {
            margin-top: calc(var(--spacing) * -150);
        }
    }
    .\33 xl\:mb-30 {
        @media (width >= 1600px) {
            margin-bottom: calc(var(--spacing) * 30);
        }
    }
    .\33 xl\:block {
        @media (width >= 1600px) {
            display: block;
        }
    }
    .\33 xl\:w-\[33vw\] {
        @media (width >= 1600px) {
            width: 33vw;
        }
    }
    .\33 xl\:px-80 {
        @media (width >= 1600px) {
            padding-inline: calc(var(--spacing) * 80);
        }
    }
    .\33 xl\:ps-112 {
        @media (width >= 1600px) {
            padding-inline-start: calc(var(--spacing) * 112);
        }
    }
    .\33 xl\:ps-170 {
        @media (width >= 1600px) {
            padding-inline-start: calc(var(--spacing) * 170);
        }
    }
    .\33 xl\:pe-260 {
        @media (width >= 1600px) {
            padding-inline-end: calc(var(--spacing) * 260);
        }
    }
    .\33 xl\:pe-282 {
        @media (width >= 1600px) {
            padding-inline-end: calc(var(--spacing) * 282);
        }
    }
    .\33 xl\:pt-106 {
        @media (width >= 1600px) {
            padding-top: calc(var(--spacing) * 106);
        }
    }
    .\33 xl\:pt-295 {
        @media (width >= 1600px) {
            padding-top: calc(var(--spacing) * 295);
        }
    }
    .\33 xl\:pb-50 {
        @media (width >= 1600px) {
            padding-bottom: calc(var(--spacing) * 50);
        }
    }
    .\33 xl\:pb-84 {
        @media (width >= 1600px) {
            padding-bottom: calc(var(--spacing) * 84);
        }
    }
    .\33 xl\:text-7xl\/80 {
        @media (width >= 1600px) {
            font-size: var(--text-7xl);
            line-height: calc(var(--spacing) * 80);
        }
    }
    .\33 xl\:text-10xl\/165 {
        @media (width >= 1600px) {
            font-size: var(--text-10xl);
            line-height: calc(var(--spacing) * 145);
        }
    }
    .\33 xl\:after\:w-650 {
        @media (width >= 1600px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 650);
            }
        }
    }
    .\34 xl\:right-0 {
        @media (width >= 1700px) {
            right: calc(var(--spacing) * 0);
        }
    }
    .\34 xl\:-bottom-0 {
        @media (width >= 1700px) {
            bottom: calc(var(--spacing) * -0);
        }
    }
    .\34 xl\:mb-200 {
        @media (width >= 1700px) {
            margin-bottom: calc(var(--spacing) * 200);
        }
    }
    .\34 xl\:translate-x-\[-213px\] {
        @media (width >= 1700px) {
            --tw-translate-x: -213px;
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .\34 xl\:after\:w-613 {
        @media (width >= 1700px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 613);
            }
        }
    }
    .\34 xl\:after\:w-615 {
        @media (width >= 1700px) {
            &::after {
                content: var(--tw-content);
                width: calc(var(--spacing) * 615);
            }
        }
    }
}
:root {
    --color-primary: #ee792d;
    --color-secondary: #181d19;
    --common-colour: #021935;
    --theme-colour: #5050f4;
    --color-lightgary: #cbd5e1;
    --color-yellow: #ffa808;
    --bodybg: #191b1d;
    --bodyfg: #fff;
    --bodytext: #666;
    --card: #292d32;
}
body {
    background-color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: #212529;
}
.link-hover {
    position: relative;
    &:hover {
        @media (hover: hover) {
            &::after {
                content: var(--tw-content);
                right: auto;
            }
        }
    }
    &:hover {
        @media (hover: hover) {
            &::after {
                content: var(--tw-content);
                left: calc(var(--spacing) * 0);
            }
        }
    }
    &:hover {
        @media (hover: hover) {
            &::after {
                content: var(--tw-content);
                width: 100%;
            }
        }
    }
}
.link-hover:after {
    position: absolute;
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 1);
    width: calc(var(--spacing) * 0);
    background-color: var(--color-black);
    --tw-duration: 500ms;
    transition-duration: 500ms;
    --tw-content: "";
    content: var(--tw-content);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
.leading-page-1 {
    position: absolute;
}
.dzSubscribeMsg .alert,
.dzFormMsg .alert {
    position: relative;
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3.75);
}
.alert-warning {
    border-color: #ffeeba;
    background-color: #fff3cd;
    color: #856404;
}
.alert-success {
    border-color: #c3e6cb;
    background-color: #d4edda;
    color: #155724;
}
.alert-info {
    border-color: #b8daff;
    background-color: #cce5ff;
    color: #004085;
}
.alert-danger {
    border-color: #f5c6cb;
    background-color: #f8d7da;
    color: #721c24;
}
.page-loaded .preloader {
    bottom: -100%;
}
.preloader {
    position: fixed;
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    z-index: 9999999999999;
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--color-primary);
    --tw-duration: 2s;
    transition-duration: 2s;
}
#videoContainer iframe {
    @media (width < 768px) {
        height: calc(var(--spacing) * 400) !important;
    }
}
#scrollProgress.active {
    opacity: 1;
    pointer-events: auto;
}
#loader:before {
    position: absolute;
    top: calc(1 / 2 * 100%);
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 30);
    margin-bottom: calc(var(--spacing) * 0);
    width: 100%;
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    --tw-content: "Loading";
    content: var(--tw-content);
}
#loader:after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    margin-top: calc(var(--spacing) * -38);
    margin-left: calc(var(--spacing) * -40);
    width: calc(var(--spacing) * 70);
    height: calc(var(--spacing) * 70);
    background-image: url(../img/preloader.html);
    background-position: center;
    background-repeat: no-repeat;
    --tw-content: "";
    content: var(--tw-content);
}
#loader:after {
    animation: fa-spin 10s infinite linear;
}
@keyframes spinner {
    0% {
        stroke-dashoffset: 33px;
        transform: rotatey(0deg) rotate(0deg);
    }
    24.9999% {
        stroke-dashoffset: 11px;
        transform: rotatey(0deg) rotate(0deg);
    }
    25% {
        stroke-dashoffset: 11px;
        transform: rotatey(180deg) rotate(270deg);
    }
    49.9999% {
        stroke-dashoffset: 33px;
        transform: rotatey(180deg) rotate(270deg);
    }
    50% {
        stroke-dashoffset: 33px;
        transform: rotatey(0deg) rotate(180deg);
    }
    74.9999% {
        stroke-dashoffset: 11px;
        transform: rotatey(0deg) rotate(180deg);
    }
    75% {
        stroke-dashoffset: 11px;
        transform: rotatey(180deg) rotate(90deg);
    }
    100% {
        stroke-dashoffset: 33px;
        transform: rotatey(180deg) rotate(90deg);
    }
}
@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#pointer-ring {
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: block;
    border: 1px solid #038371 !important;
    position: fixed;
    border-radius: 100px;
    z-index: 999999;
    pointer-events: none;
    transition: width 0.3s, height 0.3s;
}
#pointer-ring.active {
    width: 60px;
    height: 60px;
    opacity: 0.5;
    background-color: var(--color-primary);
    border: 0 !important;
}
#videoContainer iframe,
#videoContainer video {
    width: 100%;
    height: 676px;
    border: none;
    border-radius: 8px;
}
.container {
    max-width: 1320px;
    --bs-gutter-x: 30px;
    --bs-gutter-y: 0;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}
@layer components {
    .container-lg {
        max-width: 1540px;
        --bs-gutter-x: 30px;
        --bs-gutter-y: 0;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-right: auto;
        margin-left: auto;
    }
    .custom-container {
        max-width: 1700px;
        --bs-gutter-x: 30px;
        --bs-gutter-y: 0;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-right: auto;
        margin-left: auto;
    }
    .container-md {
        max-width: 1600px;
        --bs-gutter-x: 30px;
        --bs-gutter-y: 0;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-right: auto;
        margin-left: auto;
    }
    .container-sm {
        max-width: 946px;
        --bs-gutter-x: 30px;
        --bs-gutter-y: 0;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-right: auto;
        margin-left: auto;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        margin-top: calc(-1 * var(--bs-gutter-y));
        margin-right: calc(-0.5 * var(--bs-gutter-x));
        margin-left: calc(-0.5 * var(--bs-gutter-x));
    }
    .row > * {
        --bs-gutter-x: 1.5rem;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }
    .container-fluid {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        max-width: 1780px;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-right: auto;
        margin-left: auto;
    }
    .card {
        display: flex;
        flex-direction: column;
        border-radius: var(--radius-lg);
        background-color: var(--color-card);
    }
}
@keyframes move {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(-15px, -15px);
    }
    75% {
        transform: translate(-15px, 8px);
    }
    100% {
        transform: translate(0);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes ticker {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(-100%);
    }
}
@keyframes toTopFromBottom {
    49% {
        -webkit-transform: translate(100%, -100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%, 100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes clipRightIn {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }
    to {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }
}
@keyframes clipLeftIn {
    0% {
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
    }
    to {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }
}
@keyframes ScaleInOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes bounceShake {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    25% {
        transform: translateY(-20px) rotate(-10deg);
    }
    50% {
        transform: translateY(0) rotate(10deg);
    }
    75% {
        transform: translateY(-10px) rotate(-5deg);
    }
}
@keyframes sk-rotate {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@keyframes reverse-rotate {
    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}
@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
@keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }
    100% {
        margin-top: 0;
    }
}
@keyframes topshap {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0px);
    }
}
@keyframes dzRing {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
    }
}
.pxl-loader {
    background: white;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 999999;
    top: 0;
    left: 0;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -khtml-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -moz-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -ms-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -o-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
}
.pxl-loader.style-2 .loading-spinner {
    margin: -20px auto 0;
    width: 40px;
    height: 40px;
    top: 50%;
    position: relative;
    text-align: center;
    -webkit-animation: sk-rotate 2s infinite linear;
    animation: sk-rotate 2s infinite linear;
}
.pxl-loader.style-2 .loading-dot1,
.pxl-loader.style-2 .loading-dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    border-radius: 100%;
    -webkit-animation: sk-bounce 2s infinite ease-in-out;
    animation: sk-bounce 2s infinite ease-in-out;
}
.pxl-loader.style-2 .loading-dot1 {
    background-color: var(--color-primary);
}
.pxl-loader.style-2 .loading-dot2 {
    top: auto;
    bottom: 0;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    background-color: var(--color-secondary);
}
@layer components {
    .btn {
        position: relative;
        z-index: 0;
        display: inline-flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: var(--color-primary);
        padding-inline: calc(var(--spacing) * 30);
        padding-block: calc(var(--spacing) * 14);
        font-family: var(--font-display);
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: #fff;
        text-transform: capitalize;
        --tw-duration: 500ms;
        transition-duration: 500ms;
    }
    .bars-icon {
        display: flex;
        width: calc(var(--spacing) * 50);
        height: calc(var(--spacing) * 50);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: calc(infinity * 1px);
        background-color: var(--color-gary);
        font-family: var(--font-display);
        text-transform: capitalize;
    }
    .btn-outline {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: color-mix(in srgb, #000 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-black) 10%,
                transparent
            );
        }
        background-color: transparent;
        color: var(--color-secondary);
    }
    .btn-sm {
        border-radius: var(--radius);
        border-radius: 4px;
        background-color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-black) 5%,
                transparent
            );
        }
        padding-inline: calc(var(--spacing) * 8);
        padding-inline: calc(var(--spacing) * 10);
        padding-block: calc(var(--spacing) * 1);
        padding-block: calc(var(--spacing) * 5);
        font-family: var(--font-display);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        --tw-duration: 500ms;
        transition-duration: 500ms;
    }
    .btn-sm:hover {
        background-color: var(--color-primary);
        color: var(--color-secondary);
    }
    .skillsbtn {
        border-radius: var(--radius-lg);
        background-color: var(--color-white);
        padding-inline: calc(var(--spacing) * 20);
        padding-block: calc(var(--spacing) * 10);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        text-transform: capitalize;
    }
    .skillsbtn:hover {
        background-color: var(--color-orange);
        color: var(--color-white);
        --tw-duration: 500ms;
        transition-duration: 500ms;
    }
    .skillsbtn:hover i {
        color: var(--color-white) !important;
        --tw-duration: 500ms;
        transition-duration: 500ms;
    }
    .btn-secondary:after {
        position: absolute;
        top: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        z-index: var(--z-index-1);
        width: 100%;
        height: 100%;
        --tw-translate-x: -105%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        border-right-style: var(--tw-border-style);
        border-right-width: 2px;
        border-color: var(--color-white);
        background-color: color-mix(in srgb, #fff 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(
                in oklab,
                var(--color-white) 50%,
                transparent
            );
        }
        opacity: 80%;
        --tw-duration: 500ms;
        transition-duration: 500ms;
        --tw-content: "";
        content: var(--tw-content);
    }
    .btn-secondary:hover:after {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        opacity: 0%;
    }
    .btn-secondary {
        position: relative;
        z-index: var(--z-index-1);
        overflow: hidden;
    }
}
.style-1.swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: calc(var(--spacing) * 30);
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    display: none;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    display: none;
}
.swiper-button-next.testimonial-button-next svg:hover g {
    stroke: var(--color-black);
    opacity: 100%;
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.swiper-button-prev.testimonial-button-prev svg:hover g {
    stroke: var(--color-black);
    opacity: 100%;
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.blog-swiper .blog-card {
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.blog-swiper .swiper-slide:nth-child(even) .blog-card {
    @media (width >= 576px) {
        padding-top: calc(var(--spacing) * 70);
    }
}
.pxl-swiper-slider:not(.pxl-swiper-initialized) {
    .pxl-swiper-slider-wrap {
        display: none;
    }
}
a {
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.product-detail-thumbs .swiper-pagination .swiper-pagination-bullet {
    position: relative;
    width: calc(var(--spacing) * 6) !important;
    height: calc(var(--spacing) * 6) !important;
    background-color: color-mix(in srgb, #fff 30%, transparent) !important;
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(
            in oklab,
            var(--color-white) 30%,
            transparent
        ) !important;
    }
    opacity: 100% !important;
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &::after {
        content: var(--tw-content);
        position: absolute;
    }
    &::after {
        content: var(--tw-content);
        top: calc(1 / 2 * 100%);
    }
    &::after {
        content: var(--tw-content);
        left: calc(1 / 2 * 100%);
    }
    &::after {
        content: var(--tw-content);
        width: calc(var(--spacing) * 18);
        height: calc(var(--spacing) * 18);
    }
    &::after {
        content: var(--tw-content);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &::after {
        content: var(--tw-content);
        border-radius: calc(infinity * 1px);
    }
    &::after {
        content: var(--tw-content);
        border-style: var(--tw-border-style);
        border-width: 1px;
    }
    &::after {
        content: var(--tw-content);
        border-color: transparent;
    }
    &::after {
        content: var(--tw-content);
        --tw-content: "";
        content: var(--tw-content);
    }
}
.product-detail-thumbs
    .swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--color-white) !important;
    &::after {
        content: var(--tw-content);
        border-color: var(--color-white);
    }
}
.reviewtwo-slider .swiper-button .swiper-button-next,
.swiper-button .swiper-button-prev {
    display: flex;
    width: calc(var(--spacing) * 48);
    height: calc(var(--spacing) * 48);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-bggreen);
}
.reviewtwo-slider .swiper-button {
    position: absolute;
    bottom: calc(var(--spacing) * 30);
    left: calc(var(--spacing) * 60);
    z-index: 10 !important;
}
.footer-1 .form-control {
    height: calc(var(--spacing) * 53);
    width: 100%;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    background-color: transparent;
    padding-block: calc(var(--spacing) * 15);
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
    --tw-outline-style: none;
    outline-style: none;
}
.footer-1 .hover-box:hover .form-control {
    color: var(--color-white);
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.floating-underline .form-control {
    height: calc(var(--spacing) * 140);
}
.footer-bottom .widget a {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-transform: capitalize;
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.footer-bottom .widget .list-hover1 span:hover {
    color: var(--color-primary);
}
.footer-bottom .social-icon a {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.list-hover1 > li > a > span:after {
    position: absolute;
    right: -1px;
    bottom: calc(var(--spacing) * 0);
    height: 1px;
    width: calc(var(--spacing) * 0);
    background-color: var(--color-primary);
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
    --tw-content: "";
    content: var(--tw-content);
}
footer .widget_services ul li a {
    display: block;
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.footer-bottom .widget_services .list-hover1 li a span {
    color: var(--color-white);
}
.list-hover1 > li > a > span {
    position: relative;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-transform: capitalize;
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
@media (max-width: 1200px) {
    .list-hover1 > li > a > span {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}
.list-hover1 > li > a.active > span:after,
.list-hover1 > li > a:hover > span:after {
    right: auto;
    left: calc(var(--spacing) * 0);
    width: 100%;
}
.list-hover1.social-icon a:hover {
    color: var(--color-primary);
}
.form-check span:after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    z-index: calc(var(--z-index-1) * -1);
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-secondary);
    background-color: transparent;
    opacity: 20%;
    --tw-duration: 500ms;
    transition-duration: 500ms;
    --tw-content: "";
    content: var(--tw-content);
}
.form-check span::after {
    transform: translate(-50%, -50%) scale(0);
}
.form-check .form-check-input:checked + span::after {
    transform: translate(-50%, -50%) scale(1);
}
.product-size .btn-check:checked + label {
    background-color: var(--color-secondary) !important;
    color: var(--color-white);
}
.shop-list .product-size .btn-check:checked + label {
    background-color: transparent !important;
    color: var(--color-black);
}
.bookmark-btn .form-check-input:checked + .form-check-label {
    background-color: var(--color-primary);
}
.form-check-input {
    margin: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 18);
    height: calc(var(--spacing) * 18);
    appearance: none;
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: #d7d7d7;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: top;
}
.form-check-input {
    background-image: var(--tw-form-check-bg-image);
    background-size: contain;
}
.form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form-check-input:checked[type="checkbox"] {
    --tw-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}
.show-pass.active::after {
    opacity: 0%;
}
.dz-marquee.style-1 {
    position: relative;
    z-index: var(--z-index-1);
    padding: calc(var(--spacing) * 30);
}
.dz-marquee.style-1 .marquee-list {
    margin-bottom: calc(var(--spacing) * 0);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--spacing) * 80);
}
.dz-marquee.style-1 .marquee-list .item {
    position: relative;
    z-index: var(--z-index-1);
    margin: calc(var(--spacing) * 0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 300px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    text-transform: capitalize;
}
.dz-marquee.style-1 .marquee-list .item .color {
    color: #f1f1f1;
}
.dz-marquee.style-1:after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    z-index: calc(var(--z-index-1) * -1);
    width: calc(var(--spacing) * 650);
    height: calc(var(--spacing) * 650);
    transform: translate(-50%, -50%) scale(1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-primary);
    --tw-content: "";
    content: var(--tw-content);
}
@media (max-width: 1200px) {
    .dz-marquee.style-1:after {
        width: calc(var(--spacing) * 400);
        height: calc(var(--spacing) * 400);
        transform: translate(-50%, -50%) scale(1);
    }
}
@media (max-width: 768px) {
    .dz-marquee.style-1:after {
        width: calc(var(--spacing) * 300);
        height: calc(var(--spacing) * 300);
        transform: translate(-50%, -45%) scale(1);
    }
}
@media (max-width: 575px) {
    .dz-marquee.style-1:after {
        width: calc(var(--spacing) * 180);
        height: calc(var(--spacing) * 180);
        transform: translate(-50%, -35%) scale(1);
    }
}
.gsapanimate {
    position: relative;
    z-index: var(--z-index-1);
    margin-inline: auto;
    margin-block: calc(var(--spacing) * 0);
    display: gird;
    width: 100%;
    height: 100%;
    min-height: 150vh;
    grid-template-columns: repeat(20, 3%);
    align-items: center;
    justify-content: center;
    object-fit: cover;
}
.gsapanimate .content__slide-item {
    position: relative;
    width: 100%;
    height: 100%;
}
.gsapanimate img:nth-child(1) {
    grid-area: 9/1/12/10;
}
.gsapanimate img:nth-child(2) {
    grid-area: 7/11/8/21;
}
.gsapanimate img:nth-child(3) {
    grid-area: 9/21/35/12;
}
.gsapanimate img:nth-child(4) {
    grid-area: 30/1/20/11;
}
.gsapanimate img:nth-child(5) {
    grid-area: 16/12/20/19;
}
.gsapanimate img:nth-child(6) {
    grid-area: 20/2/25/9;
}
.gsapanimate img:nth-child(7) {
    grid-area: 22/11/24/20;
}
.gsapanimate img:nth-child(8) {
    grid-area: 26/5/30/15;
}
.dz-meta li:not(:first-child):after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(var(--spacing) * -25);
    z-index: var(--z-index-1);
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(
            in oklab,
            var(--color-black) 40%,
            transparent
        );
    }
    --tw-content: "";
    content: var(--tw-content);
}
#Experience .dz-meta li:not(:first-child):after {
    background-color: color-mix(in srgb, #03454f 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(
            in oklab,
            var(--color-textgreen) 20%,
            transparent
        );
    }
}
.cardafter:after {
    position: absolute;
    bottom: calc(var(--spacing) * -40);
    left: calc(1 / 2 * 100%);
    z-index: calc(var(--z-index-1) * -1);
    height: calc(var(--spacing) * 40);
    width: calc(var(--spacing) * 2);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    background-color: var(--color-black);
    --tw-content: "";
    content: var(--tw-content);
}
.cardafter:before {
    position: absolute;
    bottom: calc(var(--spacing) * -50);
    left: 50%;
    z-index: var(--z-index-1);
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: 50%;
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-secondary);
    background-color: var(--color-primary);
    --tw-content: "";
    content: var(--tw-content);
}
@media (max-width: 991px) {
    .cardafter:after {
        display: none;
    }
    .cardafter:before {
        display: none;
    }
}
.cardafter.bottom:after {
    top: calc(var(--spacing) * -40);
    bottom: auto;
}
.cardafter.bottom:before {
    top: calc(var(--spacing) * -50);
    bottom: auto;
}
.cardafter.bottom {
    margin-bottom: calc(var(--spacing) * 20);
    @media (width >= 576px) {
        margin-bottom: calc(var(--spacing) * 0);
    }
    @media (width >= 1200px) {
        margin-top: calc(var(--spacing) * 40);
    }
}
.text-char {
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(50% - 90px);
    display: block;
    width: calc(var(--spacing) * 180);
    height: calc(var(--spacing) * 180);
    transform-origin: center;
    rotate: var(--char-rotate);
    padding-top: calc(var(--spacing) * 8);
    text-align: center;
    font-family: var(--font-title);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}
.word-rotate-box .text-char {
    width: calc(var(--spacing) * 180);
    height: calc(var(--spacing) * 180);
    font-family: var(--font-title);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-black);
}
.hero-banner .word-rotate-box .text-char {
    width: calc(var(--spacing) * 190);
    height: calc(var(--spacing) * 190);
}
@media (max-width: 1200px) {
    .word-rotate-box .text-char {
        left: calc(50% - 75px);
        width: calc(var(--spacing) * 150);
        height: calc(var(--spacing) * 150);
    }
}
.hero-banner.style-1 .item5 {
    position: absolute;
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 532);
    z-index: 3;
}
.hero-banner.style-1 .item5 .popup-youtube {
    position: relative;
    z-index: var(--z-index-1);
}
.hero-banner.style-1 .item5 .counter {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    font-family: var(--font-title);
    font-size: 85px;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: #181d19;
    text-transform: uppercase;
}
.word-rotate-box {
    position: relative;
    z-index: 10;
    display: flex;
    width: calc(var(--spacing) * 180);
    height: calc(var(--spacing) * 180);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-primary);
    padding: calc(var(--spacing) * 15);
    text-align: center;
}
@media (max-width: 1200px) {
    .word-rotate-box {
        width: calc(var(--spacing) * 150);
        height: calc(var(--spacing) * 150);
    }
}
.top-gradient:after {
    position: absolute;
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: calc(var(--z-index-1) * -1);
    height: calc(var(--spacing) * 458);
    width: 100%;
    --tw-content: "";
    content: var(--tw-content);
}
.tech-item {
    position: absolute;
    bottom: calc(var(--spacing) * 175);
    left: 47%;
    width: calc(var(--spacing) * 60);
    height: calc(var(--spacing) * 60);
    border-radius: calc(infinity * 1px);
}
.tech-item {
    --angle: calc(180deg / (var(--total) - 1));
    transform: rotate(calc(var(--angle) * var(--i))) translateX(0px)
        rotate(calc(90deg - var(--angle) * var(--i)));
    transition: transform 0.8s ease-in-out;
}
.scale-black {
    scale: 1.05;
    color: var(--color-black);
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
}
.tech-item img {
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
}
.tech-item img.zoomed {
    scale: 1.1;
}

.tech-item.active {
    /* scale: 1.05; */
    color: var(--color-black);
}

.tech-item.active img {
    scale: 1.1;
}

#pointer-ring.title-active {
    width: calc(var(--spacing) * 136);
    height: calc(var(--spacing) * 136);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: calc(infinity * 1px);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    mix-blend-mode: exclusion;
}
.pxl-heading-scroll-effect {
    --heading-color-1: rgba(0, 0, 0, 0.5);
}
.pxl-heading-scroll-effect .heading-text div {
    background-clip: text;
    color: transparent;
    background: linear-gradient(
            to right,
            var(--fxl-heading) 50%,
            var(--heading-color-1) 50%
        )
        no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% 100%;
    background-position-x: 100%;
    transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.75s;
}
.pxl-heading-scroll-effect .heading-text div {
    --fxl-heading: black;
}
.tech-wrapper.active .tech-item {
    transform: rotate(calc(var(--angle) * var(--i))) translateX(-470px)
        rotate(calc(90deg - var(--angle) * var(--i)));
}
.socialiconbox:hover {
    background-color: var(--color-socialbox);
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.socialiconbox:hover svg > path {
    stroke: var(--color-white);
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.widget-timeline .timeline:before {
    position: absolute;
    top: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * -0);
    left: calc(var(--spacing) * 46);
    width: 2.04px;
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
    border-color: var(--color-orange);
    --tw-content: "";
    content: var(--tw-content);
}
@media (max-width: 575px) {
    .widget-timeline .timeline:before {
        display: none;
    }
}
.widget-timeline .timeline .timeline-box:after {
    position: relative;
    top: calc(var(--spacing) * -200);
    display: block;
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 3px;
    border-color: var(--color-orange);
    background-color: var(--color-white);
    --tw-content: "";
    content: var(--tw-content);
}
@media (max-width: 575px) {
    .widget-timeline .timeline .timeline-box:after {
        display: none;
    }
}
.workbox:after {
    visibility: hidden;
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: var(--z-index-1);
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        180deg,
        rgba(255, 120, 54, 0.4) 0%,
        #ff7836 100%
    );
    opacity: 0%;
    --tw-duration: 500ms;
    transition-duration: 500ms;
    --tw-content: "";
    content: var(--tw-content);
}
.workbox:hover:after {
    visibility: visible;
    opacity: 100%;
}
.plusicon {
    visibility: hidden;
    display: flex;
    width: calc(var(--spacing) * 50);
    height: calc(var(--spacing) * 50);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-orange);
    color: var(--color-white);
    opacity: 0%;
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.workbox:hover .plusicon {
    visibility: visible;
    opacity: 100%;
}
.group:hover .plusicon:after {
    visibility: visible;
    scale: 1.8;
    opacity: 100%;
}
.group:hover .plusicon:before {
    visibility: visible;
    scale: 2.6;
    opacity: 100%;
}
.plusicon:after {
    visibility: hidden;
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: calc(var(--z-index-1) * -1);
    width: 100%;
    height: 100%;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
    opacity: 0%;
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-content: "";
    content: var(--tw-content);
}
.plusicon:before {
    visibility: hidden;
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: calc(var(--z-index-1) * -1);
    width: 100%;
    height: 100%;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    opacity: 0%;
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-content: "";
    content: var(--tw-content);
}
.hero-banner3 .word-rotate-box .text-char {
    width: calc(var(--spacing) * 200) !important;
    height: calc(var(--spacing) * 200) !important;
}

.break-word{
    word-break:all;
}
.circle {
    position: relative;
    z-index: var(--z-index-1);
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 10);
    display: inline-block;
    width: calc(var(--spacing) * 150);
    height: calc(var(--spacing) * 150);
    text-align: center;
}
.progressbar .circle canvas {
    rotate: -30deg;
}
.site-filters .filters li.active {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-orange);
}
.site-filters .filters li.active:hover {
    position: relative;
    &:hover {
        @media (hover: hover) {
            &::after {
                content: var(--tw-content);
                right: auto;
            }
        }
    }
    &:hover {
        @media (hover: hover) {
            &::after {
                content: var(--tw-content);
                left: calc(var(--spacing) * 0);
            }
        }
    }
    &:hover {
        @media (hover: hover) {
            &::after {
                content: var(--tw-content);
                width: 100%;
            }
        }
    }
}
.site-filters .filters li:after {
    position: absolute;
    right: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 1);
    width: calc(var(--spacing) * 0);
    background-color: var(--color-orange);
    --tw-duration: 500ms;
    transition-duration: 500ms;
    --tw-content: "";
    content: var(--tw-content);
}
.side-menu a.active {
    background-color: var(--color-orange);
}
.side-menu a.active svg path {
    stroke: var(--color-white);
}
.sidebar-right a.active {
    background-color: var(--color-white);
}
.sticky-header.is-fixed a.active svg path {
    stroke: var(--color-white);
}
.sticky-header.is-fixed a.active span {
    color: var(--color-white);
}
.sticky-header.is-fixed .active {
    background-color: var(--color-green);
}
.lg-backdrop {
    z-index: var(--z-index-9999);
}
.lg-outer {
    z-index: var(--z-index-99999);
}
.header-2.sidebar {
    position: fixed;
    top: calc(var(--spacing) * 0);
    right: calc(var(--spacing) * -381);
    z-index: 99;
    height: 100%;
    width: calc(var(--spacing) * 380);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 20);
    padding-block: calc(var(--spacing) * 30);
    --tw-shadow: 0px 0px 5px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
@media (max-width: 575px) {
    .header-2.sidebar {
        width: calc(var(--spacing) * 360);
    }
}
.header-2.sidebar.show {
    right: calc(var(--spacing) * 0);
}
.pxl-history-carousel.layout-1 {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}
.pxl-history-carousel.layout-1 .content-item {
    text-align: center;
}
.pxl-history-carousel.layout-1 .item-title {
    margin-bottom: calc(var(--spacing) * 12);
    font-size: var(--text-2\.5xl);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
}
@media (max-width: 575px) {
    .pxl-history-carousel.layout-1 .item-title {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
}
.pxl-history-carousel.layout-1 .item-des,
.pxl-history-carousel.layout-1 .item-des > * {
    margin-inline: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    max-width: calc(var(--spacing) * 378);
    overflow: hidden;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: calc(var(--spacing) * 24);
    line-height: calc(var(--spacing) * 24);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    text-overflow: ellipsis;
}
@media (max-width: 575px) {
    .pxl-history-carousel.layout-1 .item-des {
        max-width: calc(var(--spacing) * 330);
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        --tw-leading: calc(var(--spacing) * 22);
        line-height: calc(var(--spacing) * 22);
    }
}
.pxl-history-carousel.layout-1 .pxl-button-more {
    margin-top: calc(var(--spacing) * 52);
}
@media (max-width: 575px) {
    .pxl-history-carousel.layout-1 .pxl-button-more {
        margin-top: calc(var(--spacing) * 35);
    }
}
.pxl-history-carousel.layout-1 .pxl-button-more .pxl-icon {
    display: flex;
    overflow: hidden;
}
.pxl-history-carousel.layout-1 .pxl-button-more .btn-primary {
    gap: calc(var(--spacing) * 5);
}
.pxl-history-carousel.layout-1 .pxl-button-more .btn-primary:hover i {
    animation: toTopFromBottom 0.4s forwards;
}
.pxl-history-carousel.layout-1 .item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pxl-history-carousel.layout-1 .pxl-swiper-container {
    padding-inline: calc(var(--spacing) * 24);
    padding-block: calc(var(--spacing) * 35);
}
.pxl-history-carousel.layout-1 .item-slide {
    position: absolute;
    top: 64.5%;
    left: calc(1 / 2 * 100%);
    display: flex;
    height: auto;
    width: calc(var(--spacing) * 460);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
        var(--tw-skew-x) var(--tw-skew-y);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: calc(var(--spacing) * 0);
    transition-property: width, height;
    transition-timing-function: var(
        --tw-ease,
        var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
}
.pxl-swiper-wrapper {
    position: relative;
    z-index: var(--z-index-1);
    box-sizing: content-box;
    display: flex;
    width: 100%;
    height: 100%;
    --tw-duration: 400ms;
    transition-duration: 400ms;
}
.align-items-center {
    align-items: center;
}
.elementor *,
.elementor :after,
.elementor :before {
    box-sizing: border-box;
}
.pxl-history-carousel.layout-1 .pxl-swiper-wrapper {
    position: relative;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: var(--z-index-2);
    margin-bottom: calc(var(--spacing) * -927);
    height: calc(var(--spacing) * 1580);
    overflow: visible;
}
@media (max-width: 1199px) {
    .pxl-history-carousel.layout-1 .pxl-swiper-wrapper {
        margin-bottom: calc(var(--spacing) * -966);
    }
}
@media (max-width: 991px) {
    .pxl-history-carousel.layout-1 .pxl-swiper-wrapper {
        margin-bottom: calc(var(--spacing) * -986);
    }
}
@media (max-width: 767px) {
    .pxl-history-carousel.layout-1 .pxl-swiper-wrapper {
        margin-bottom: calc(var(--spacing) * -1050);
        height: calc(var(--spacing) * 1500);
    }
    .pxl-history-carousel.layout-1
        .pxl-swiper-wrapper
        .item-slide:nth-child(even)
        .item-image {
        opacity: 0 !important;
        transition: all 300ms ease-in-out 0s;
    }
}
.pxl-history-carousel.layout-1 .box-pev-next {
    position: absolute;
    bottom: calc(var(--spacing) * 146);
    left: calc(1 / 2 * 100%);
    z-index: 10;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
        var(--tw-skew-x) var(--tw-skew-y);
    text-align: center;
}
@media (max-width: 767px) {
    .pxl-history-carousel.layout-1 .box-pev-next {
        bottom: calc(var(--spacing) * 0);
    }
}
.pxl-history-carousel.layout-1 .box-pev-next .text-pev-next {
    position: relative;
    display: inline-block;
    border-radius: var(--radius);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 6);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: 2;
    line-height: 2;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}
.pxl-history-carousel.layout-1 .box-pev-next .text-pev-next::after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    z-index: calc(var(--z-index-1) * -1);
    height: 1px;
    width: calc(var(--spacing) * 158);
    transform: translate(-50%, 0);
    --tw-content: "";
    content: var(--tw-content);
}
.pxl-history-carousel.layout-1 .box-pev-next .text-pev-next::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50.5%,
        rgba(255, 255, 255, 0) 100%
    );
}
.pxl-history-carousel.layout-1 .pxl-swiper-dots {
    margin-top: calc(var(--spacing) * 20);
    display: flex;
    justify-content: center;
}
.pxl-history-carousel.layout-1 .thumb-item {
    width: auto;
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
        var(--tw-skew-x) var(--tw-skew-y);
    opacity: 60%;
}
.pxl-history-carousel.layout-1 .thumb-item .item-year {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: calc(var(--spacing) * 30);
    line-height: calc(var(--spacing) * 30);
    color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
}
@media (max-width: 575px) {
    .pxl-history-carousel.layout-1 .thumb-item .item-year {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}
.pxl-history-carousel.layout-1 .thumb-item.active {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    opacity: 100%;
}
.pxl-history-carousel.layout-1 .thumb-item.active .item-year {
    font-size: var(--text-2\.5xl);
    color: var(--color-secondary);
}
@media (max-width: 575px) {
    .pxl-history-carousel.layout-1 .thumb-item.active .item-year {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
}
.pxl-history-carousel.layout-1 .pxl-thumbs-wrapper {
    gap: calc(var(--spacing) * 25);
}
.pxl-history-carousel.layout-1 .pxl-swiper-thumbs {
    max-width: calc(var(--spacing) * 210);
}
.pxl-history-carousel.layout-1 .pxl-swiper-slider-thumbs {
    margin-top: calc(var(--spacing) * 14);
}
.pxl-history-carousel.layout-1 .pxl-carousel-inner {
    padding-top: calc(var(--spacing) * 78);
}
@media (max-width: 991px) {
    .pxl-history-carousel.layout-1 .pxl-carousel-inner {
        padding-top: calc(var(--spacing) * 30);
    }
}
@media (max-width: 575px) {
    .pxl-history-carousel.layout-1 .pxl-carousel-inner {
        padding-top: calc(var(--spacing) * 0);
    }
}
.pxl-team-list .project::before,
.pxl-team-list .project::after {
    pointer-events: none;
    position: absolute;
    left: calc(1 / 2 * 100%);
    z-index: var(--z-index-1);
    display: none;
    height: calc(var(--spacing) * 0);
    width: 100%;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    background-repeat: no-repeat;
    --tw-content: "";
    content: var(--tw-content);
    @media (width >= 576px) {
        display: block;
    }
    transition: height 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.pxl-team-list .project::before {
    bottom: calc(1 / 2 * 100%);
    background-color: var(--color-primary);
}
.pxl-team-list .project::after {
    top: calc(1 / 2 * 100%);
    background-color: var(--color-primary);
}
.pxl-team-list .project:hover::before,
.pxl-team-list .project:hover::after {
    height: 51%;
    @media (width >= 576px) {
        height: calc(1 / 2 * 100%);
    }
}
.project .project-title h3 {
    color: var(--color-secondary);
}
.project .project-title .post {
    color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
}
.project:hover .project-title h3 {
    @media (width >= 576px) {
        color: var(--color-black);
    }
}
.project:hover .project-title .post {
    @media (width >= 576px) {
        color: color-mix(in srgb, #000 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-black) 70%, transparent);
        }
    }
}
.project .project-categ a {
    color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
}
.project:hover .project-categ a {
    @media (width >= 576px) {
        color: var(--color-secondary);
    }
}
.tab-title.tab-underline.active a::after,
.tab-title.tab-underline.active button::after {
    width: 100%;
}
.tab-title.tab-underline.active a {
    color: var(--color-black);
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.shop-tab .tab-title.active {
    background-color: var(--color-primary);
}
.custom-accordion.style-1 .accordion-item {
    margin-bottom: calc(var(--spacing) * 20);
    cursor: pointer;
}
.custom-accordion.style-1 .accordion-item .accordion-header {
    display: flex;
    width: 100%;
    cursor: pointer !important;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius);
    padding-inline: calc(var(--spacing) * 15);
    padding-block: calc(var(--spacing) * 20);
    text-align: start;
    color: var(--color-bodyfg);
    --tw-duration: 300ms;
    transition-duration: 300ms;
    @media (width >= 576px) {
        padding-inline: calc(var(--spacing) * 35);
    }
}
.custom-accordion.style-1 .accordion-item .accordion-header.open {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}
.custom-accordion.style-1 .accordion-item .accordion-header .arrow {
    width: calc(var(--spacing) * 30);
    height: calc(var(--spacing) * 30);
    min-width: calc(var(--spacing) * 30);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-primary);
    text-align: center;
    --tw-leading: calc(var(--spacing) * 30);
    line-height: calc(var(--spacing) * 30);
    color: var(--color-secondary);
    --tw-duration: 300ms;
    transition-duration: 300ms;
}
.custom-accordion.style-1 .accordion-item .accordion-header.open .arrow {
    background-color: var(--color-secondary);
    color: var(--color-bodyfg);
}
.custom-accordion.style-1
    .accordion-item
    .accordion-header.open
    .arrow.active
    i {
    rotate: 180deg;
}
.custom-accordion.style-1 .accordion-item .accordion-content .content-inner {
    padding-inline: calc(var(--spacing) * 15);
    padding-block: calc(var(--spacing) * 14);
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-bodytext);
    @media (width >= 576px) {
        padding-inline: calc(var(--spacing) * 35);
    }
    @media (width >= 1200px) {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
}
.custom-accordion.style-2 .accordion-item .accordion-header {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
    padding-block: calc(var(--spacing) * 20);
    text-align: start;
    color: var(--color-secondary);
    --tw-duration: 300ms;
    transition-duration: 300ms;
}
.custom-accordion.style-2 .accordion-item .accordion-content .content-inner {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
    padding-block: calc(var(--spacing) * 26);
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-light);
    /* font-weight: var(--font-weight-light); */
    color: var(--color-bodytext);
    @media (width >= 1200px) {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}
.custom-accordion.style-2 .accordion-item .accordion-header .arrow {
    width: calc(var(--spacing) * 30);
    height: calc(var(--spacing) * 30);
}
.custom-accordion.style-2 .accordion-item .accordion-header .arrow .fa-plus {
    display: block;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
    @media (width >= 576px) {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
}
.custom-accordion.style-2 .accordion-item .accordion-header .arrow .fa-minus {
    display: none;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.custom-accordion.style-2
    .accordion-item
    .accordion-header.open
    .arrow.active
    .fa-minus {
    display: block;
}
.custom-accordion.style-2
    .accordion-item
    .accordion-header.open
    .arrow.active
    .fa-plus {
    display: none;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.arrow.rotate {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}
.gl-star-rating--stars span {
    --gl-star-size: 20px;
}
.clip-right-animation {
    animation-name: clipRightIn;
    animation-timing-function: cubic-bezier(0, 0.57, 0.55, 1);
}
.clip-left-animation {
    animation-name: clipLeftIn;
    animation-timing-function: cubic-bezier(0, 0.57, 0.55, 1);
}
.dlab-img-overlay1:before {
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    z-index: var(--z-index-1);
    width: 100%;
    height: 100%;
    border-radius: var(--radius-2lg);
    background-color: var(--color-black);
    opacity: 0%;
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
    --tw-content: "";
    content: var(--tw-content);
}
.dlab-img-overlay1:hover:before {
    opacity: 20%;
}
.grid-wrapper > div {
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-select {
    position: relative;
}
.custom-select.right .select-items {
    right: auto;
    left: calc(var(--spacing) * 0);
}
.select-selected {
    position: relative;
    display: flex;
    cursor: pointer;
    align-items: center;
    padding-block: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 35);
    padding-left: calc(var(--spacing) * 15);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    -webkit-user-select: none;
    user-select: none;
}
.select-selected {
    color: var(--color-black);
}
.select-selected span {
    display: none;
}
.select-selected:after {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--color-black);
}
.select-selected:after {
    position: absolute;
    right: calc(var(--spacing) * 15);
    margin-top: calc(var(--spacing) * -4);
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    rotate: 135deg;
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
    --tw-content: "";
    content: var(--tw-content);
}
.select-selected.select-active:after {
    margin-top: calc(var(--spacing) * 4);
    rotate: -45deg;
}
.select-items {
    background-color: var(--color-white);
    color: var(--color-black);
}
.select-items {
    visibility: visible;
    position: absolute;
    right: calc(var(--spacing) * 0);
    z-index: 99;
    display: block;
    max-height: calc(var(--spacing) * 320);
    width: calc(var(--spacing) * 200);
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 0);
    padding-block: calc(var(--spacing) * 10);
    opacity: 100%;
    --tw-shadow-color: rgba(17, 12, 46, 0.15);
    @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(
            in oklab,
            rgba(17, 12, 46, 0.15) 0px 48px 100px 0px var(--tw-shadow-alpha),
            transparent
        );
    }
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
    scrollbar-width: thin;
}
.select-item {
    cursor: pointer;
    padding-inline: calc(var(--spacing) * 20);
    padding-block: calc(var(--spacing) * 5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    -webkit-user-select: none;
    user-select: none;
}
.select-item.active {
    background-color: var(--color-primary);
    color: var(--color-black);
}
.select-item:hover {
    background-color: var(--color-primary);
    color: var(--color-black);
}
.select-items.select-hide {
    display: none;
    --tw-translate-y: 15px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 0%;
}
.lang-select .custom-select .select-selected {
    padding: calc(var(--spacing) * 0);
    padding-right: calc(var(--spacing) * 41);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    text-transform: capitalize;
    @media (width < 992px) {
        display: none;
    }
}
.header-white .lang-select .custom-select .select-selected {
    color: var(--color-white);
}
.header-white .nobox .lang-select .custom-select .select-selected {
    color: var(--color-secondary);
}
.lang-select .custom-select .select-selected:after {
    right: calc(var(--spacing) * 25);
}
.header-white .select-selected:after {
    border-color: var(--color-white);
}
.header-white .nobox .select-selected:after {
    border-color: var(--color-secondary);
}
.lang-select .custom-select .select-item:hover,
.lang-select .custom-select .select-item.active {
    background-color: #bfebe57d;
}
.noUi-horizontal {
    height: calc(var(--spacing) * 4) !important;
}
.noUi-connect {
    background-color: var(--color-secondary) !important;
}
.noUi-target {
    border-radius: 0 !important;
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
    background-color: color-mix(in srgb, #000 15%, transparent) !important;
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(
            in oklab,
            var(--color-black) 15%,
            transparent
        ) !important;
    }
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.noUi-horizontal .noUi-handle {
    width: calc(var(--spacing) * 9) !important;
    height: calc(var(--spacing) * 9) !important;
    border-radius: 1px !important;
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
    outline-style: var(--tw-outline-style);
    outline-width: 3px;
    outline-color: var(--color-black);
    &::before {
        content: var(--tw-content);
        display: none;
    }
    &::after {
        content: var(--tw-content);
        display: none;
    }
}
.noUi-touch-area {
    background-color: var(--color-white);
}
.noUi-tooltip {
    display: none;
}
.noUi-horizontal .noUi-handle {
    top: calc(var(--spacing) * -3);
    right: calc(var(--spacing) * -9);
}
@layer components {
    .main-bar {
        position: relative;
        width: 100%;
        padding-inline: calc(var(--spacing) * 80);
        padding-block: calc(var(--spacing) * 20);
        --tw-duration: 0.5s;
        transition-duration: 0.5s;
    }
    @media (max-width: 1400px) {
        .main-bar {
            padding-inline: calc(var(--spacing) * 20);
        }
    }
    .is-fixed:not(.sticky-no) .main-bar {
        position: fixed;
        top: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        background-color: var(--color-white);
        padding-block: calc(var(--spacing) * 10);
        --tw-shadow: 0 0 50px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
        --tw-duration: 0.5s;
        transition-duration: 0.5s;
    }
    .header-white.is-fixed:not(.sticky-no) .main-bar {
        background-color: var(--color-black);
    }
    .header-3.is-fixed .lang-select .custom-select .select-selected {
        color: var(--color-white) !important;
    }
    .header-3.is-fixed .lang-select .custom-select .select-selected:after {
        border-color: var(--color-white) !important;
    }
    .header-3.is-fixed .nobox .text-color {
        color: var(--color-white) !important;
    }
    .full-sidenav {
        pointer-events: none;
        position: fixed;
        top: calc(var(--spacing) * 0);
        left: -100%;
        z-index: 99;
        display: flex;
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        background-color: var(--color-bodyfg);
        --tw-duration: 500ms;
        transition-duration: 500ms;
        --tw-duration: 700ms;
        transition-duration: 700ms;
    }
    @media (min-width: 992px) {
        .full-sidenav.show {
            visibility: visible;
            display: flex;
            width: 100%;
            align-items: center;
            overflow: hidden;
            opacity: 100%;
        }
    }
    .full-sidenav.show {
        pointer-events: auto;
        left: calc(var(--spacing) * 0);
    }
    .flsbg {
        position: absolute;
        top: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        z-index: calc(10 * -1);
        display: none;
        height: 100%;
        width: 100%;
        @media (width >= 992px) {
            display: flex;
        }
    }
    .flsbg .bg-wrap {
        pointer-events: none;
        position: relative;
        margin: -1px;
        box-sizing: content-box;
        display: block;
        width: 11%;
        --tw-translate-y: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        overflow: hidden;
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(
                in oklab,
                var(--color-black) 5%,
                transparent
            );
        }
        background-color: var(--color-white);
    }
    .flsbg .bg-wrap:nth-child(1) {
        transition: 0.1s;
    }
    .flsbg .bg-wrap:nth-child(2) {
        transition: 0.2s;
    }
    .flsbg .bg-wrap:nth-child(3) {
        transition: 0.3s;
    }
    .flsbg .bg-wrap:nth-child(4) {
        transition: 0.4s;
    }
    .flsbg .bg-wrap:nth-child(5) {
        transition: 0.5s;
    }
    .flsbg .bg-wrap:nth-child(6) {
        transition: 0.6s;
    }
    .flsbg .bg-wrap:nth-child(7) {
        transition: 0.7s;
    }
    .flsbg .bg-wrap:nth-child(8) {
        transition: 0.8s;
    }
    .flsbg .bg-wrap:nth-child(9) {
        transition: 0.9s;
    }
    .flsbg .bg-wrap:nth-child(10) {
        transition: 1s;
    }
    .flsbg .bg-wrap:nth-child(11) {
        transition: 1.1s;
    }
    .full-sidenav.show .flsbg .bg-wrap {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .flsbg .bg-wrap span {
        position: absolute;
        top: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        height: 100%;
        width: 100%;
    }
    .site-header .nav > li > a {
        position: relative;
        display: block;
        width: 100%;
        padding-inline: calc(var(--spacing) * 10);
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        line-height: calc(var(--spacing) * 35);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        color: var(--color-black);
    }
    @media (min-width: 992px) {
        .site-header .nav > li > a {
            font-size: 39px;
            line-height: 50px;
        }
    }
    @media (min-width: 992px) {
        .site-header .nav > li > a {
            padding-inline: calc(var(--spacing) * 0);
        }
    }
    @media (max-width: 576px) {
        .site-header .nav > li > a {
            padding-inline: calc(var(--spacing) * 20);
        }
    }
    @media (min-width: 992px) {
        .site-header .nav .sub-menu-down > a:after {
            font-size: var(--text-2xl);
            line-height: 35px;
        }
    }
    @media (min-width: 992px) {
        .site-header .nav .sub-menu-down > a:after {
            right: calc(var(--spacing) * 0);
        }
    }
    .site-header .nav .sub-menu-down > a:after {
        position: absolute;
        top: calc(1 / 2 * 100%);
        right: calc(var(--spacing) * 20);
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        font-family: "Line Awesome Free";
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
        --tw-font-weight: var(--font-weight-black);
        font-weight: var(--font-weight-black);
        opacity: 50%;
        --tw-content: "\f107";
        content: var(--tw-content);
        @media (width >= 992px) {
            right: calc(var(--spacing) * 0);
        }
        @media (width >= 992px) {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }
    .full-sidenav.header-nav .nav > li .sub-menu {
        opacity: 100%;
    }
    @media (min-width: 992px) {
        .full-sidenav .navbar-nav > li .sub-menu {
            visibility: visible;
            position: relative;
            margin: calc(var(--spacing) * 0);
            display: block;
            width: 100%;
            opacity: 100%;
            --tw-shadow: 0 0 #0000;
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
                var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
                var(--tw-shadow);
            --tw-duration: 500ms;
            transition-duration: 500ms;
        }
    }
    .sub-menu,
    .mega-menu {
        max-height: calc(var(--spacing) * 0);
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    @media (min-width: 992px) {
        .full-sidenav .navbar-nav > li .sub-menu li a {
            padding-inline: calc(var(--spacing) * 20);
        }
    }
    @media (max-width: 576px) {
        .full-sidenav .navbar-nav > li .sub-menu li a {
            padding-inline: calc(var(--spacing) * 40);
        }
    }
    .full-sidenav .navbar-nav > li .sub-menu li a {
        display: block;
        padding-inline: calc(var(--spacing) * 20);
        padding-block: calc(var(--spacing) * 5);
        font-family: var(--font-display);
        font-size: var(--text-lg);
        line-height: 28px;
        color: var(--color-black);
    }
    .site-header .nav > li > a:hover {
        color: var(--color-primary);
        --tw-duration: 500ms;
        transition-duration: 500ms;
    }
    .full-sidenav .navbar-nav > li .sub-menu li a:hover {
        color: var(--color-primary);
        --tw-duration: 500ms;
        transition-duration: 500ms;
    }
    @media (min-width: 992px) {
        .full-sidenav {
            visibility: hidden;
            left: calc(var(--spacing) * 0);
            width: 100%;
            overflow: hidden;
            opacity: 0%;
        }
    }
    body.menu-btn-open {
        height: 100vh !important;
        overflow: hidden;
    }
    .select-items {
        width: calc(var(--spacing) * 60) !important;
    }
}
.tooltip-arrow:before {
    position: absolute;
    top: auto;
    right: calc(1 / 2 * 100%);
    bottom: calc(var(--spacing) * -14);
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 0);
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-style: var(--tw-border-style);
    border-width: 7px;
    border-color: transparent;
    border-top-color: var(--color-card-light);
    --tw-content: "";
    content: var(--tw-content);
    background: 0 0;
}
.group:hover .tooltip-arrow::before {
    border-top-color: var(--color-primary);
}
.ct:hover .content {
    opacity: 100%;
}
.service-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    --tw-duration: 500ms;
    transition-duration: 500ms;
    @media (width >= 992px) {
        width: 37.8%;
    }
}
.service-card.active {
    @media (width >= 992px) {
        width: 62.2%;
    }
}
.service-card.active .service-img::after {
    opacity: 60%;
}
.service-card.active .content {
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}
.service-card.active .service-text {
    left: -20%;
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
}
.pricing-wrapper {
    &::after {
        content: var(--tw-content);
        position: absolute;
    }
    &::after {
        content: var(--tw-content);
        top: calc(var(--spacing) * 0);
    }
    &::after {
        content: var(--tw-content);
        right: calc(var(--spacing) * 0);
    }
    &::after {
        content: var(--tw-content);
        z-index: calc(var(--z-index-1) * -1);
    }
    &::after {
        content: var(--tw-content);
        width: 100%;
        height: 100%;
    }
    &::after {
        content: var(--tw-content);
        background-image: url("../images/background/bg4.png");
    }
    &::after {
        content: var(--tw-content);
        background-position: right;
    }
    &::after {
        content: var(--tw-content);
        background-repeat: no-repeat;
    }
    &::after {
        content: var(--tw-content);
        opacity: 0%;
    }
    &::after {
        content: var(--tw-content);
        --tw-duration: 300ms;
        transition-duration: 300ms;
    }
    &::after {
        content: var(--tw-content);
        --tw-content: "";
        content: var(--tw-content);
    }
}
.pricing-wrapper.active {
    background-color: var(--color-primary);
    --tw-duration: 300ms;
    transition-duration: 300ms;
    &::after {
        content: var(--tw-content);
        opacity: 100%;
    }
}
.pricing-wrapper.active .badge {
    display: inline-block;
}
.pricing-wrapper.active .title,
.pricing-wrapper.active .title span {
    color: var(--color-secondary);
}
.pricing-wrapper.active p,
.pricing-wrapper.active h4 {
    color: var(--color-secondary);
}
.pricing-wrapper.active .list-items li {
    color: var(--color-secondary);
}
.pricing-wrapper.active .list-items li::before {
    background-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(
            in oklab,
            var(--color-black) 10%,
            transparent
        );
    }
    background-image: none;
    color: var(--color-secondary);
}
.pricing-wrapper.active .btn {
    background-color: var(--color-secondary);
    background-image: none;
    color: var(--color-white);
}
.product-gallery-swiper .swiper-slide.swiper-slide-thumb-active img {
    border-color: var(--color-black);
}
.pxl-loader {
    background: white;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 999999;
    top: 0;
    left: 0;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -khtml-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -moz-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -ms-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    -o-transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 1, 1);
}
.pxl-loader.style-2 .loading-spinner {
    margin: -20px auto 0;
    width: 40px;
    height: 40px;
    top: 50%;
    position: relative;
    text-align: center;
    -webkit-animation: sk-rotate 2s infinite linear;
    animation: sk-rotate 2s infinite linear;
}
.pxl-loader.style-2 .loading-dot1,
.pxl-loader.style-2 .loading-dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    border-radius: 100%;
    -webkit-animation: sk-bounce 2s infinite ease-in-out;
    animation: sk-bounce 2s infinite ease-in-out;
}
.pxl-loader.style-2 .loading-dot1 {
    background-color: var(--color-primary);
}
.pxl-loader.style-2 .loading-dot2 {
    top: auto;
    bottom: 0;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    background-color: var(--color-secondary);
}
@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
}
@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
}
@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
}
@property --tw-skew-x {
    syntax: "*";
    inherits: false;
}
@property --tw-skew-y {
    syntax: "*";
    inherits: false;
}
@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}
@property --tw-gradient-position {
    syntax: "*";
    inherits: false;
}
@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}
@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}
@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}
@property --tw-gradient-stops {
    syntax: "*";
    inherits: false;
}
@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false;
}
@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}
@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%;
}
@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-leading {
    syntax: "*";
    inherits: false;
}
@property --tw-font-weight {
    syntax: "*";
    inherits: false;
}
@property --tw-tracking {
    syntax: "*";
    inherits: false;
}
@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff;
}
@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-blur {
    syntax: "*";
    inherits: false;
}
@property --tw-brightness {
    syntax: "*";
    inherits: false;
}
@property --tw-contrast {
    syntax: "*";
    inherits: false;
}
@property --tw-grayscale {
    syntax: "*";
    inherits: false;
}
@property --tw-hue-rotate {
    syntax: "*";
    inherits: false;
}
@property --tw-invert {
    syntax: "*";
    inherits: false;
}
@property --tw-opacity {
    syntax: "*";
    inherits: false;
}
@property --tw-saturate {
    syntax: "*";
    inherits: false;
}
@property --tw-sepia {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}
@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false;
}
@property --tw-duration {
    syntax: "*";
    inherits: false;
}
@property --tw-ease {
    syntax: "*";
    inherits: false;
}
@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}
@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}
@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}
@property --tw-content {
    syntax: "*";
    initial-value: "";
    inherits: false;
}
@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false;
}
@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}
@layer properties {
    @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
        ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
        *,
        ::before,
        ::after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-content: "";
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-outline-style: solid;
        }
    }
}

.list-disc li {
    margin-left: 25px;
    font-size: var(--text-base);
}

.blog-description p {
    margin-bottom: 15px;
    font-size: var(--text-base);
}

.blog-description ul li {
    margin-bottom: 5px !important;
    list-style-type: disc !important;
    margin-left: 25px;
    font-size: var(--text-base);
}

.blog-description ul li p {
    margin-bottom: 5px !important;
    font-size: var(--text-base);
}

.blog-description ul {
    margin-bottom: 15px !important;
}

.blog-description h2,
.blog-description h3,
.blog-description h4 {
    margin-bottom: 10px !important;
}

/*custome menu code */

.nav-link {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    display: inline-flex;
}

.nav-link i {
    font-size: 12px;
    line-height: 1;
    position: relative;
    top: 1px; /* ✅ micro vertical alignment */
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    z-index: 999;
}

.group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu a {
    padding: 12px 20px;
    display: block;
    white-space: nowrap;
}

.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.25s ease;
    border-radius: 8px;
}

.group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    transition: background 0.2s ease, padding-left 0.2s ease;
}

.dropdown-menu li a:hover {
    padding-left: 26px;
    background: #f5f7f7;
}

/* MOBILE SIDENAV */
.full-sidenav {
    position: fixed;
    inset: 0;
    background: #fff;
    transform: translateX(-100%);
    transition: 0.3s;
}

.full-sidenav.show {
    transform: translateX(0);
}

.sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Default mobile (1250px → 400px) */
@media (max-width: 1250px) {
    .full-sidenav {
        width: 50vw; /* ✅ half screen */
        max-width: 520px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .full-sidenav {
        width: 100vw; /* ✅ full screen */
    }
}

@media (max-width: 1250px) {
    .full-sidenav .nav > li > a {
        font-size: 16px; /* ⬇ from big size */
        font-weight: 500;
        padding: 10px 0;
    }

    .full-sidenav .sub-menu a {
        font-size: 14px;
        font-weight: 400;
        padding: 8px 0;
    }
}

.sub-menu {
    transition: max-height 0.35s ease;
}

.sub-menu li {
    padding-left: 12px;
}

/* Active menu item */
.nav-link.active,
.full-sidenav .nav a.active {
    color: var(--color-morange);
}

/* Active dropdown parent */
.nav-item-active > a {
    color: var(--color-morange);
}

.quate-highlight {
    color: var(--color-morange);
    font-weight: 500;
    font-size: x-large;
}

/* Side menu base link */
.training-side-menu a {
    color: #000;
    transition: color 0.25s ease, padding-left 0.25s ease;
    display: inline-block;
}

/* Hover effect */
.training-side-menu a:hover {
    color: var(--color-morange); /* theme color */
    padding-left: 6px; /* subtle move */
}

/* Active link */
.training-side-menu a.active {
    color: var(--color-morange);
    font-weight: 600;
}

/* Optional left indicator */

.mlink {
    color: var(--color-morange);
}

.sm\:mt-10 {
    @media (width <= 576px) {
        margin-top: calc(var(--spacing) * 10);
    }
}

.xsm\:display-block {
    @media (width <= 576px) {
        display: block;
    }
}

.xsm\:display-text-center {
    @media (width <= 576px) {
        text-align: center;
    }
}

.sm\:custom-heading {
    @media (width <= 778px) {
        font-size: 24px;
    }
}

.sm\:min-h-300 {
    @media (width <= 778px) {
        min-height: 250px;
    }
}

.sm\:pt-160{
  @media (width <= 778px){
    padding-top:110px;
  }
}

.xsm\:pt-25{
    @media (width <= 576px){
    margin-top:25px;
  }
}


.sm\:pt-200{
    @media (width <= 650px){
    padding-top:200px;
  }
}

.sm\:bottom-100{
    @media (width <= 650px){
    bottom:50px;
  }
}

.md\:right-10{
    @media (width <= 992px){
    right:10px;
  }
}