.popup .popuptext {
        visibility: hidden;
        width: 350px;
        background-color: transparent;
        color: black !important;
        text-align: center;
        border-radius: 5px;
        padding: 4px 0;
        position: fixed;
        z-index: 999;
        top: 59px;
        left: 100px;
        margin-left: -70px;
        font-size: 12px;
        font-weight: bold
    }
        .popup .popuptext {
            visibility: hidden;
            width: 350px;
            background-color: yellow;
            color: black !important;
            text-align: center;
            border-radius: 5px;
            padding: 4px 0;
            position: fixed;
            z-index: 999;
            top: 59px;
            left: 100px;
            margin-left: -70px;
            font-size: 12px;
            font-weight: bold
    }
    
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: px;
            border-style: solid;
            border-color: #555 transparent transparent transparent
    }
    
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeinout 5s cubic-bezier(0.18,0.89,0.32,1.28) forwards;
        animation: fadeinout 5s cubic-bezier(0.18,0.89,0.32,1.28) forwards;
    }
    
        .imageid {
            float: left;
            width: 15%
    }
    
        @-webkit-keyframes fadeinout {
    
            0%,
            100% {
                opacity: 0
            }
    
            50% {
                opacity: 1
            }
    }
    
        @keyframes fadeinout {
    
            0%,
            100% {
                opacity: 0
            }
    
            50% {
                opacity: 1
            }
    }
    
        @media only screen and (min-width:769px) {
            #mobilePopup {
                display: none
            }
    }
        .flex-container {
            display: flex; /* Set the container to flex */
            flex-wrap: nowrap; /* Prevent wrapping to the next line */
            overflow-x: auto; /* Allow horizontal scrolling if needed */
    }
    
        .flex-item {
            flex: 0 0 auto; /* Prevent items from shrinking */
            width: 200px; /* Set a fixed width for items */
            margin-right: 10px; /* Add space between items */
            background-color: #4CAF50; /* Background color for visibility */
            color: white; /* Text color */
            padding: 10px; /* Padding inside items */
            border-radius: 5px; /* Rounded corners */
    }
    
        @media (max-width: 600px) {
            .flex-item {
                width: 100px; /* Adjust width for smaller screens */
            }
    }


        .slider {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
    }
        .slider a {
            flex: 1 1 auto; /* Allow items to grow and shrink */
            min-width: 150px; /* Set a minimum width for the buttons */
            margin: 3rem; /* Add some margin for spacing */
    }
        @media (max-width: 768px) {
            .slider a {
                flex: 1 1 100%; /* Stack items on smaller screens */
            }
    }

    @layer components {
        * .btn-primary {
            @apply py-1.5 px-3 text-center bg-blue-700 rounded-md text-white;
        } */
      }
      
      .animate-marquee {
        animation: marquee 10s linear infinite;
        /* Adjust duration and timing function as needed */
        white-space: nowrap;
        /* Prevent text from wrapping */
      }

      .slider-wrapper {
        padding: 2rem;
        background: linear-gradient(135deg,#1e293b,#0f172a);
        color: #fff;
        text-align: center
    }
    
    .slider-header h1 {
        font-size: 2rem;
        font-weight: 700;
        color: #f8fafc
    }
    
    .slider-header span {
        background: linear-gradient(90deg,#f472b6,#c084fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    
    .slider-container {
        display: flex;
        align-items: center;
        position: relative;
        margin-top: 2rem;
        overflow: hidden
    }
    
    .slider-content {
        display: flex;
        gap: 1.5rem;
        transition: transform .5s ease;
        scroll-behavior: smooth;
        overflow-x: scroll;
        padding: 1rem 0
    }
    
    .slider-card {
        min-width: 170px;
        max-width: 200px;
        background: #1e293b;
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 4px 10px rgba(0,0,0,.3);
        transition: transform .3s ease,box-shadow .3s ease;
        text-align: center
    }
    
    .slider-card:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 15px hsla(0,0%,100%,.2)
    }
    
    .card-image img {
        max-width: 100px;
        margin: auto
    }
    
    .card-title {
        margin-top: 1rem;
        font-size: 1rem;
        font-weight: 700;
        color: #fff
    }
    
    .nav-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(233, 227, 227, 0.6);
        border: none;
        border-radius: 50%;
        padding: .5rem;
        cursor: pointer;
        z-index: 10;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center
    }
    
    .nav-button.left {
        left: 10px
    }
    
    .nav-button.right {
        right: 10px
    }
    
    .nav-button img {
        width: 20px;
        height: 20px
    }
    
    .nav-button:hover {
        background: hsla(0,0%,100%,.3)
    }
    
    .slider-content::-webkit-scrollbar {
        display: none
    }
    
    .bounce-in-top {
        animation: bounce-in-top 1.1s both
    }
    
    @keyframes bounce-in-top {
        0% {
            transform: translateY(-500px);
            animation-timing-function: ease-in;
            opacity: 0
        }
    
        38% {
            transform: translateY(0);
            animation-timing-function: ease-out;
            opacity: 1
        }
    
        55% {
            transform: translateY(-65px);
            animation-timing-function: ease-in
        }
    
        72% {
            transform: translateY(0);
            animation-timing-function: ease-out
        }
    
        81% {
            transform: translateY(-28px);
            animation-timing-function: ease-in
        }
    
        90% {
            transform: translateY(0);
            animation-timing-function: ease-out
        }
    
        95% {
            transform: translateY(-8px);
            animation-timing-function: ease-in
        }
    
        to {
            transform: translateY(0);
            animation-timing-function: ease-out
        }
    }
    
    .overflows {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    
    .jello-vertical {
        animation: jello-vertical .9s infinite both
    }
    
    @keyframes jello-vertical {
        0% {
            transform: scaleX(1)
        }
    
        30% {
            transform: scale3d(.75,1.25,1)
        }
    
        40% {
            transform: scale3d(1.25,.75,1)
        }
    
        50% {
            transform: scale3d(.85,1.15,1)
        }
    
        65% {
            transform: scale3d(1.05,.95,1)
        }
    
        75% {
            transform: scale3d(.95,1.05,1)
        }
    
        to {
            transform: scaleX(1)
        }
    }
    
    .jello-horizontal {
        animation: jello-horizontal .9s ease-in-out 1s infinite
    }
    
    @keyframes jello-horizontal {
        0% {
            transform: scaleX(1)
        }
    
        30% {
            transform: scale3d(1.25,.75,1)
        }
    
        40% {
            transform: scale3d(.75,1.25,1)
        }
    
        50% {
            transform: scale3d(1.15,.85,1)
        }
    
        65% {
            transform: scale3d(.95,1.05,1)
        }
    
        75% {
            transform: scale3d(1.05,.95,1)
        }
    
        to {
            transform: scaleX(1)
        }
    }
    
    .slide-in-top {
        animation: slide-in-top .5s cubic-bezier(.25,.46,.45,.94) both
    }
    
    @keyframes slide-in-top {
        0% {
            transform: translateY(-1000px);
            opacity: 0
        }
    
        to {
            transform: translateY(0);
            opacity: 1
        }
    }

    @font-face {
        font-family: Poppins;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/_next/static/media/fe0777f1195381cb-s.woff2) format("woff2");
        unicode-range: u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff
    }
    
    @font-face {
        font-family: Poppins;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/_next/static/media/eafabf029ad39a43-s.p.woff2) format("woff2");
        unicode-range: u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd
    }
    
    @font-face {
        font-family: Poppins Fallback;
        src: local("Arial");
        ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%;size-adjust:112.16%}
    
    .__className_746de4 {
        font-family: Poppins,Poppins Fallback;
        font-weight: 400;
        font-style: normal
    }
    
    *,:after,:before {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position: ;
        --tw-gradient-via-position: ;
        --tw-gradient-to-position: ;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        --tw-contain-size: ;
        --tw-contain-layout: ;
        --tw-contain-paint: ;
        --tw-contain-style:
    }
    
    ::backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position: ;
        --tw-gradient-via-position: ;
        --tw-gradient-to-position: ;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        --tw-contain-size: ;
        --tw-contain-layout: ;
        --tw-contain-paint: ;
        --tw-contain-style:
    }
    
    /*
    ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
    */
    *,:after,:before {
        box-sizing: border-box;
        border: 0 solid #e5e7eb
    }
    
    :after,:before {
        --tw-content: ""
    }
    
    :host,html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        tab-size: 4;
        font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-tap-highlight-color: transparent
    }
    
    body {
        margin: 0;
        line-height: inherit
    }
    
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }
    
    abbr:where([title]) {
        text-decoration: underline dotted
    }
    
    h1,h2,h3,h4,h5,h6 {
        font-size: inherit;
        font-weight: inherit
    }
    
    a {
        color: inherit;
        text-decoration: inherit
    }
    
    b,strong {
        font-weight: bolder
    }
    
    code,kbd,pre,samp {
        font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
        font-feature-settings: normal;
        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: -.25em
    }
    
    sup {
        top: -.5em
    }
    
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }
    
    button,input,optgroup,select,textarea {
        font-family: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        margin: 0;
        padding: 0
    }
    
    button,select {
        text-transform: none
    }
    
    button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none
    }
    
    :-moz-focusring {
        outline: auto
    }
    
    :-moz-ui-invalid {
        box-shadow: none
    }
    
    progress {
        vertical-align: baseline
    }
    
    ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
        height: auto
    }
    
    [type=search] {
        -webkit-appearance: textfield;
        outline-offset: -2px
    }
    
    ::-webkit-search-decoration {
        -webkit-appearance: none
    }
    
    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit
    }
    
    summary {
        display: list-item
    }
    
    blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
        margin: 0
    }
    
    fieldset {
        margin: 0
    }
    
    fieldset,legend {
        padding: 0
    }
    
    menu,ol,ul {
        list-style: none;
        margin: 0;
        padding: 0
    }
    
    dialog {
        padding: 0
    }
    
    textarea {
        resize: vertical
    }
    
    input::placeholder,textarea::placeholder {
        opacity: 1;
        color: #9ca3af
    }
    
    [role=button],button {
        cursor: pointer
    }
    
    :disabled {
        cursor: default
    }
    
    audio,canvas,embed,iframe,img,object,svg,video {
        display: block;
        vertical-align: middle
    }
    
    img,video {
        max-width: 100%;
        height: auto
    }
    
    [hidden]:where(:not([hidden=until-found])) {
        display: none
    }
    
    :root {
        --inherit: inherit;
        --current: currentColor;
        --transparent: transparent;
        --black: #000;
        --white: #fff;
        --slate-50: #f8fafc;
        --slate-100: #f1f5f9;
        --slate-200: #e2e8f0;
        --slate-300: #cbd5e1;
        --slate-400: #94a3b8;
        --slate-500: #64748b;
        --slate-600: #475569;
        --slate-700: #334155;
        --slate-800: #1e293b;
        --slate-900: #0f172a;
        --slate-950: #020617;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-400: #9ca3af;
        --gray-500: #6b7280;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
        --gray-950: #030712;
        --zinc-50: #fafafa;
        --zinc-100: #f4f4f5;
        --zinc-200: #e4e4e7;
        --zinc-300: #d4d4d8;
        --zinc-400: #a1a1aa;
        --zinc-500: #71717a;
        --zinc-600: #52525b;
        --zinc-700: #3f3f46;
        --zinc-800: #27272a;
        --zinc-900: #18181b;
        --zinc-950: #09090b;
        --neutral-50: #fafafa;
        --neutral-100: #f5f5f5;
        --neutral-200: #e5e5e5;
        --neutral-300: #d4d4d4;
        --neutral-400: #a3a3a3;
        --neutral-500: #737373;
        --neutral-600: #525252;
        --neutral-700: #404040;
        --neutral-800: #262626;
        --neutral-900: #171717;
        --neutral-950: #0a0a0a;
        --stone-50: #fafaf9;
        --stone-100: #f5f5f4;
        --stone-200: #e7e5e4;
        --stone-300: #d6d3d1;
        --stone-400: #a8a29e;
        --stone-500: #78716c;
        --stone-600: #57534e;
        --stone-700: #44403c;
        --stone-800: #292524;
        --stone-900: #1c1917;
        --stone-950: #0c0a09;
        --red-50: #fef2f2;
        --red-100: #fee2e2;
        --red-200: #fecaca;
        --red-300: #fca5a5;
        --red-400: #f87171;
        --red-500: #ef4444;
        --red-600: #dc2626;
        --red-700: #b91c1c;
        --red-800: #991b1b;
        --red-900: #7f1d1d;
        --red-950: #450a0a;
        --orange-50: #fff7ed;
        --orange-100: #ffedd5;
        --orange-200: #fed7aa;
        --orange-300: #fdba74;
        --orange-400: #fb923c;
        --orange-500: #f97316;
        --orange-600: #ea580c;
        --orange-700: #c2410c;
        --orange-800: #9a3412;
        --orange-900: #7c2d12;
        --orange-950: #431407;
        --amber-50: #fffbeb;
        --amber-100: #fef3c7;
        --amber-200: #fde68a;
        --amber-300: #fcd34d;
        --amber-400: #fbbf24;
        --amber-500: #f59e0b;
        --amber-600: #d97706;
        --amber-700: #b45309;
        --amber-800: #92400e;
        --amber-900: #78350f;
        --amber-950: #451a03;
        --yellow-50: #fefce8;
        --yellow-100: #fef9c3;
        --yellow-200: #fef08a;
        --yellow-300: #fde047;
        --yellow-400: #facc15;
        --yellow-500: #eab308;
        --yellow-600: #ca8a04;
        --yellow-700: #a16207;
        --yellow-800: #854d0e;
        --yellow-900: #713f12;
        --yellow-950: #422006;
        --lime-50: #f7fee7;
        --lime-100: #ecfccb;
        --lime-200: #d9f99d;
        --lime-300: #bef264;
        --lime-400: #a3e635;
        --lime-500: #84cc16;
        --lime-600: #65a30d;
        --lime-700: #4d7c0f;
        --lime-800: #3f6212;
        --lime-900: #365314;
        --lime-950: #1a2e05;
        --green-50: #f0fdf4;
        --green-100: #dcfce7;
        --green-200: #bbf7d0;
        --green-300: #86efac;
        --green-400: #4ade80;
        --green-500: #22c55e;
        --green-600: #16a34a;
        --green-700: #15803d;
        --green-800: #166534;
        --green-900: #14532d;
        --green-950: #052e16;
        --emerald-50: #ecfdf5;
        --emerald-100: #d1fae5;
        --emerald-200: #a7f3d0;
        --emerald-300: #6ee7b7;
        --emerald-400: #34d399;
        --emerald-500: #10b981;
        --emerald-600: #059669;
        --emerald-700: #047857;
        --emerald-800: #065f46;
        --emerald-900: #064e3b;
        --emerald-950: #022c22;
        --teal-50: #f0fdfa;
        --teal-100: #ccfbf1;
        --teal-200: #99f6e4;
        --teal-300: #5eead4;
        --teal-400: #2dd4bf;
        --teal-500: #14b8a6;
        --teal-600: #0d9488;
        --teal-700: #0f766e;
        --teal-800: #115e59;
        --teal-900: #134e4a;
        --teal-950: #042f2e;
        --cyan-50: #ecfeff;
        --cyan-100: #cffafe;
        --cyan-200: #a5f3fc;
        --cyan-300: #67e8f9;
        --cyan-400: #22d3ee;
        --cyan-500: #06b6d4;
        --cyan-600: #0891b2;
        --cyan-700: #0e7490;
        --cyan-800: #155e75;
        --cyan-900: #164e63;
        --cyan-950: #083344;
        --sky-50: #f0f9ff;
        --sky-100: #e0f2fe;
        --sky-200: #bae6fd;
        --sky-300: #7dd3fc;
        --sky-400: #38bdf8;
        --sky-500: #0ea5e9;
        --sky-600: #0284c7;
        --sky-700: #0369a1;
        --sky-800: #075985;
        --sky-900: #0c4a6e;
        --sky-950: #082f49;
        --blue-50: #eff6ff;
        --blue-100: #dbeafe;
        --blue-200: #bfdbfe;
        --blue-300: #93c5fd;
        --blue-400: #60a5fa;
        --blue-500: #3b82f6;
        --blue-600: #2563eb;
        --blue-700: #1d4ed8;
        --blue-800: #1e40af;
        --blue-900: #1e3a8a;
        --blue-950: #172554;
        --indigo-50: #eef2ff;
        --indigo-100: #e0e7ff;
        --indigo-200: #c7d2fe;
        --indigo-300: #a5b4fc;
        --indigo-400: #818cf8;
        --indigo-500: #6366f1;
        --indigo-600: #4f46e5;
        --indigo-700: #4338ca;
        --indigo-800: #3730a3;
        --indigo-900: #312e81;
        --indigo-950: #1e1b4b;
        --violet-50: #f5f3ff;
        --violet-100: #ede9fe;
        --violet-200: #ddd6fe;
        --violet-300: #c4b5fd;
        --violet-400: #a78bfa;
        --violet-500: #8b5cf6;
        --violet-600: #7c3aed;
        --violet-700: #6d28d9;
        --violet-800: #5b21b6;
        --violet-900: #4c1d95;
        --violet-950: #2e1065;
        --purple-50: #faf5ff;
        --purple-100: #f3e8ff;
        --purple-200: #e9d5ff;
        --purple-300: #d8b4fe;
        --purple-400: #c084fc;
        --purple-500: #a855f7;
        --purple-600: #9333ea;
        --purple-700: #7e22ce;
        --purple-800: #6b21a8;
        --purple-900: #581c87;
        --purple-950: #3b0764;
        --fuchsia-50: #fdf4ff;
        --fuchsia-100: #fae8ff;
        --fuchsia-200: #f5d0fe;
        --fuchsia-300: #f0abfc;
        --fuchsia-400: #e879f9;
        --fuchsia-500: #d946ef;
        --fuchsia-600: #c026d3;
        --fuchsia-700: #a21caf;
        --fuchsia-800: #86198f;
        --fuchsia-900: #701a75;
        --fuchsia-950: #4a044e;
        --pink-50: #fdf2f8;
        --pink-100: #fce7f3;
        --pink-200: #fbcfe8;
        --pink-300: #f9a8d4;
        --pink-400: #f472b6;
        --pink-500: #ec4899;
        --pink-600: #db2777;
        --pink-700: #be185d;
        --pink-800: #9d174d;
        --pink-900: #831843;
        --pink-950: #500724;
        --rose-50: #fff1f2;
        --rose-100: #ffe4e6;
        --rose-200: #fecdd3;
        --rose-300: #fda4af;
        --rose-400: #fb7185;
        --rose-500: #f43f5e;
        --rose-600: #e11d48;
        --rose-700: #be123c;
        --rose-800: #9f1239;
        --rose-900: #881337;
        --rose-950: #4c0519
    }
    
    .pointer-events-none {
        pointer-events: none
    }
    
    .fixed {
        position: fixed
    }
    
    .absolute {
        position: absolute
    }
    
    .relative {
        position: relative
    }
    
    .sticky {
        position: sticky
    }
    
    .inset-0 {
        inset: 0
    }
    
    .inset-\[2px\] {
        inset: 2px
    }
    
    .-left-0\.5 {
        left: -.125rem
    }
    
    .-top-0\.5 {
        top: -.125rem
    }
    
    .bottom-0 {
        bottom: 0
    }
    
    .right-4 {
        right: 1rem
    }
    
    .top-0 {
        top: 0
    }
    
    .top-2 {
        top: .5rem
    }
    
    .z-0 {
        z-index: 0
    }
    
    .z-10 {
        z-index: 10
    }
    
    .z-20 {
        z-index: 20
    }
    
    .z-40 {
        z-index: 40
    }
    
    .z-50 {
        z-index: 50
    }
    
    .z-\[1\] {
        z-index: 1
    }
    
    .z-\[9999\] {
        z-index: 9999
    }
    
    .mx-auto {
        margin-left: auto;
        margin-right: auto
    }
    
    .my-2 {
        margin-top: .5rem;
        margin-bottom: .5rem
    }
    
    .my-5 {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem
    }
    
    .my-6 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem
    }
    
    .mb-1 {
        margin-bottom: .25rem
    }
    
    .mb-2 {
        margin-bottom: .5rem
    }
    
    .mb-3 {
        margin-bottom: .75rem
    }
    
    .mb-4 {
        margin-bottom: 1rem
    }
    
    .mb-5 {
        margin-bottom: 1.25rem
    }
    
    .mr-2 {
        margin-right: .5rem
    }
    
    .mt-1 {
        margin-top: .25rem
    }
    
    .mt-10 {
        margin-top: 2.5rem
    }
    
    .mt-2 {
        margin-top: .5rem
    }
    
    .mt-3 {
        margin-top: .75rem
    }
    
    .mt-4 {
        margin-top: 1rem
    }
    
    .mt-5 {
        margin-top: 1.25rem
    }
    
    .mt-6 {
        margin-top: 1.5rem
    }
    
    .mt-8 {
        margin-top: 2rem
    }
    
    .mt-\[3rem\] {
        margin-top: 3rem
    }
    
    .block {
        display: block
    }
    
    .inline-block {
        display: inline-block
    }
    
    .inline {
        display: inline
    }
    
    .flex {
        display: flex
    }
    
    .hidden {
        display: none
    }
    
    .h-16 {
        height: 4rem
    }
    
    .h-20 {
        height: 5rem
    }
    
    .h-4 {
        height: 1rem
    }
    
    .h-\[calc\(100\%_\+_4px\)\] {
        height: calc(100% + 4px)
    }
    
    .h-fit {
        height: fit-content
    }
    
    .h-full {
        height: 100%
    }
    
    .h-min {
        height: min-content
    }
    
    .max-h-\[27rem\] {
        max-height: 27rem
    }
    
    .max-h-\[30rem\] {
        max-height: 30rem
    }
    
    .max-h-\[36\.3rem\] {
        max-height: 36.3rem
    }
    
    .max-h-\[40vh\] {
        max-height: 40vh
    }
    
    .w-20 {
        width: 5rem
    }
    
    .w-\[1\.2rem\] {
        width: 1.2rem
    }
    
    .w-\[1\.3rem\] {
        width: 1.3rem
    }
    
    .w-\[1\.4rem\] {
        width: 1.4rem
    }
    
    .w-\[1\.5rem\] {
        width: 1.5rem
    }
    
    .w-\[100\%\] {
        width: 100%
    }
    
    .w-\[13rem\] {
        width: 13rem
    }
    
    .w-\[1rem\] {
        width: 1rem
    }
    
    .w-\[2rem\] {
        width: 2rem
    }
    
    .w-\[350px\] {
        width: 350px
    }
    
    .w-\[3rem\] {
        width: 3rem
    }
    
    .w-\[45\%\] {
        width: 45%
    }
    
    .w-\[48\%\] {
        width: 48%
    }
    
    .w-\[4px\] {
        width: 4px
    }
    
    .w-\[80\%\] {
        width: 80%
    }
    
    .w-\[90\%\] {
        width: 90%
    }
    
    .w-\[9rem\] {
        width: 9rem
    }
    
    .w-\[calc\(100\%_\+_4px\)\] {
        width: calc(100% + 4px)
    }
    
    .w-auto {
        width: auto
    }
    
    .w-full {
        width: 100%
    }
    
    .w-max {
        width: max-content
    }
    
    .min-w-full {
        min-width: 100%
    }
    
    .max-w-\[13rem\] {
        max-width: 13rem
    }
    
    .max-w-\[14rem\] {
        max-width: 14rem
    }
    
    .max-w-\[28rem\] {
        max-width: 28rem
    }
    
    .max-w-\[3\.3rem\] {
        max-width: 3.3rem
    }
    
    .max-w-\[30rem\] {
        max-width: 30rem
    }
    
    .max-w-\[3rem\] {
        max-width: 3rem
    }
    
    .max-w-\[50rem\] {
        max-width: 50rem
    }
    
    .max-w-\[65rem\] {
        max-width: 65rem
    }
    
    .max-w-\[7rem\] {
        max-width: 7rem
    }
    
    .max-w-\[80rem\] {
        max-width: 80rem
    }
    
    .max-w-full {
        max-width: 100%
    }
    
    .max-w-lg {
        max-width: 32rem
    }
    
    .flex-none {
        flex: none
    }
    
    .flex-shrink-0,.shrink-0 {
        flex-shrink: 0
    }
    
    .transform {
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
    
    @keyframes bounce {
        0%,to {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(.8,0,1,1)
        }
    
        50% {
            transform: none;
            animation-timing-function: cubic-bezier(0,0,.2,1)
        }
    }
    
    .animate-bounce {
        animation: bounce 1s infinite
    }
    
    @keyframes pulse {
        50% {
            opacity: .5
        }
    }
    
    .animate-pulse {
        animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
    }
    
    @keyframes scroll {
        to {
            transform: translate(calc(-50% - .5rem))
        }
    }
    
    .animate-scroll {
        animation: scroll var(--animation-duration,40s) var(--animation-direction,forwards) linear infinite
    }
    
    .flex-row {
        flex-direction: row
    }
    
    .flex-col {
        flex-direction: column
    }
    
    .flex-wrap {
        flex-wrap: wrap
    }
    
    .flex-nowrap {
        flex-wrap: nowrap
    }
    
    .content-center {
        align-content: center
    }
    
    .items-start {
        align-items: flex-start
    }
    
    .items-center {
        align-items: center
    }
    
    .justify-start {
        justify-content: flex-start
    }
    
    .justify-center {
        justify-content: center
    }
    
    .justify-between {
        justify-content: space-between
    }
    
    .gap-1 {
        gap: .25rem
    }
    
    .gap-10 {
        gap: 2.5rem
    }
    
    .gap-2 {
        gap: .5rem
    }
    
    .gap-3 {
        gap: .75rem
    }
    
    .gap-4 {
        gap: 1rem
    }
    
    .gap-5 {
        gap: 1.25rem
    }
    
    .gap-8 {
        gap: 2rem
    }
    
    .space-x-1>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(.25rem * var(--tw-space-x-reverse));
        margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
    }
    
    .overflow-hidden {
        overflow: hidden
    }
    
    .overflow-visible {
        overflow: visible
    }
    
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
    
    .rounded {
        border-radius: .25rem
    }
    
    .rounded-2xl {
        border-radius: 1rem
    }
    
    .rounded-3xl {
        border-radius: 1.5rem
    }
    
    .rounded-\[100px\] {
        border-radius: 100px
    }
    
    .rounded-\[1rem\] {
        border-radius: 1rem
    }
    
    .rounded-\[22px\] {
        border-radius: 22px
    }
    
    .rounded-\[2rem\] {
        border-radius: 2rem
    }
    
    .rounded-\[inherit\] {
        border-radius: inherit
    }
    
    .rounded-full {
        border-radius: 9999px
    }
    
    .rounded-lg {
        border-radius: .5rem
    }
    
    .rounded-md {
        border-radius: .375rem
    }
    
    .rounded-sm {
        border-radius: .125rem
    }
    
    .rounded-xl {
        border-radius: .75rem
    }
    
    .border,.border-\[1px\] {
        border-width: 1px
    }
    
    .border-\[2px\] {
        border-width: 2px
    }
    
    .border-b-0 {
        border-bottom-width: 0
    }
    
    .border-b-\[1px\] {
        border-bottom-width: 1px
    }
    
    .border-cyan-400 {
        --tw-border-opacity: 1;
        border-color: rgb(34 211 238/var(--tw-border-opacity,1))
    }
    
    .border-gray-300 {
        --tw-border-opacity: 1;
        border-color: rgb(209 213 219/var(--tw-border-opacity,1))
    }
    
    .border-green-500 {
        --tw-border-opacity: 1;
        border-color: rgb(34 197 94/var(--tw-border-opacity,1))
    }
    
    .border-green-600 {
        --tw-border-opacity: 1;
        border-color: rgb(22 163 74/var(--tw-border-opacity,1))
    }
    
    .border-red-600 {
        --tw-border-opacity: 1;
        border-color: rgb(220 38 38/var(--tw-border-opacity,1))
    }
    
    .border-slate-700 {
        --tw-border-opacity: 1;
        border-color: rgb(51 65 85/var(--tw-border-opacity,1))
    }
    
    .border-slate-800 {
        --tw-border-opacity: 1;
        border-color: rgb(30 41 59/var(--tw-border-opacity,1))
    }
    
    .border-white {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255/var(--tw-border-opacity,1))
    }
    
    .border-yellow-400 {
        --tw-border-opacity: 1;
        border-color: rgb(250 204 21/var(--tw-border-opacity,1))
    }
    
    .border-yellow-500 {
        --tw-border-opacity: 1;
        border-color: rgb(234 179 8/var(--tw-border-opacity,1))
    }
    
    .border-yellow-600 {
        --tw-border-opacity: 1;
        border-color: rgb(202 138 4/var(--tw-border-opacity,1))
    }
    
    .bg-black {
        --tw-bg-opacity: 1;
        background-color: rgb(0 0 0/var(--tw-bg-opacity,1))
    }
    
    .bg-black\/20 {
        background-color: rgba(0,0,0,.2)
    }
    
    .bg-blue-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(59 130 246/var(--tw-bg-opacity,1))
    }
    
    .bg-slate-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(71 85 105/var(--tw-bg-opacity,1))
    }
    
    .bg-slate-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(30 41 59/var(--tw-bg-opacity,1))
    }
    
    .bg-slate-900 {
        --tw-bg-opacity: 1;
        background-color: rgb(15 23 42/var(--tw-bg-opacity,1))
    }
    
    .bg-slate-900\/\[0\.8\] {
        background-color: rgba(15,23,42,.8)
    }
    
    .bg-transparent {
        background-color: transparent
    }
    
    .bg-yellow-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(250 204 21/var(--tw-bg-opacity,1))
    }
    
    .bg-yellow-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(234 179 8/var(--tw-bg-opacity,1))
    }
    
    .bg-opacity-75 {
        --tw-bg-opacity: 0.75
    }
    
    .bg-\[radial-gradient\(circle_farthest-side_at_0_100\%\2c \#00ccb1\2c transparent\)\2c radial-gradient\(circle_farthest-side_at_100\%_0\2c \#7b61ff\2c transparent\)\2c radial-gradient\(circle_farthest-side_at_100\%_100\%\2c \#ffc414\2c transparent\)\2c radial-gradient\(circle_farthest-side_at_0_0\2c \#1ca0fb\2c \#141316\)\] {
        background-image: radial-gradient(circle farthest-side at 0 100%,#00ccb1,transparent),radial-gradient(circle farthest-side at 100% 0,#7b61ff,transparent),radial-gradient(circle farthest-side at 100% 100%,#ffc414,transparent),radial-gradient(circle farthest-side at 0 0,#1ca0fb,#141316)
    }
    
    .bg-\[radial-gradient\(var\(--sky-500\)_40\%\2c transparent_60\%\)\] {
        background-image: radial-gradient(var(--sky-500) 40%,transparent 60%)
    }
    
    .bg-gradient-to-r {
        background-image: linear-gradient(to right,var(--tw-gradient-stops))
    }
    
    .from-gray-500 {
        --tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
        --tw-gradient-to: hsla(220,9%,46%,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-green-400 {
        --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(74,222,128,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-green-600 {
        --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(22,163,74,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-indigo-600 {
        --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(79,70,229,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-pink-500 {
        --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(236,72,153,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-red-600 {
        --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(220,38,38,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-slate-900 {
        --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(15,23,42,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-yellow-300 {
        --tw-gradient-from: #fde047 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(253,224,71,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-yellow-400 {
        --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(250,204,21,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .from-yellow-500 {
        --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(234,179,8,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .to-green-900 {
        --tw-gradient-to: #14532d var(--tw-gradient-to-position)
    }
    
    .to-pink-600 {
        --tw-gradient-to: #db2777 var(--tw-gradient-to-position)
    }
    
    .to-red-950 {
        --tw-gradient-to: #450a0a var(--tw-gradient-to-position)
    }
    
    .to-slate-950 {
        --tw-gradient-to: #020617 var(--tw-gradient-to-position)
    }
    
    .to-violet-500 {
        --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position)
    }
    
    .to-yellow-600 {
        --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position)
    }
    
    .to-yellow-700 {
        --tw-gradient-to: #a16207 var(--tw-gradient-to-position)
    }
    
    .to-yellow-800 {
        --tw-gradient-to: #854d0e var(--tw-gradient-to-position)
    }
    
    .decoration-clone {
        box-decoration-break: clone
    }
    
    .bg-cover {
        background-size: cover
    }
    
    .bg-clip-text {
        background-clip: text
    }
    
    .bg-center {
        background-position: 50%
    }
    
    .object-cover {
        object-fit: cover
    }
    
    .object-fill {
        object-fit: fill
    }
    
    .object-center {
        object-position: center
    }
    
    .p-2 {
        padding: .5rem
    }
    
    .p-6 {
        padding: 1.5rem
    }
    
    .p-\[1px\] {
        padding: 1px
    }
    
    .p-\[4px\] {
        padding: 4px
    }
    
    .p-px {
        padding: 1px
    }
    
    .px-1 {
        padding-left: .25rem;
        padding-right: .25rem
    }
    
    .px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }
    
    .px-3 {
        padding-left: .75rem;
        padding-right: .75rem
    }
    
    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }
    
    .px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }
    
    .px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }
    
    .px-\[0\.1rem\] {
        padding-left: .1rem;
        padding-right: .1rem
    }
    
    .py-1 {
        padding-top: .25rem;
        padding-bottom: .25rem
    }
    
    .py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }
    
    .py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
    }
    
    .py-3 {
        padding-top: .75rem;
        padding-bottom: .75rem
    }
    
    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }
    
    .py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }
    
    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }
    
    .pb-2 {
        padding-bottom: .5rem
    }
    
    .pb-3 {
        padding-bottom: .75rem
    }
    
    .pl-3 {
        padding-left: .75rem
    }
    
    .pt-3 {
        padding-top: .75rem
    }
    
    .text-left {
        text-align: left
    }
    
    .text-center {
        text-align: center
    }
    
    .text-right {
        text-align: right
    }
    
    .text-justify {
        text-align: justify
    }
    
    .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }
    
    .text-\[0\.7rem\] {
        font-size: .7rem
    }
    
    .text-\[0\.9rem\] {
        font-size: .9rem
    }
    
    .text-\[1\.1rem\] {
        font-size: 1.1rem
    }
    
    .text-\[1\.2rem\] {
        font-size: 1.2rem
    }
    
    .text-\[1\.3rem\] {
        font-size: 1.3rem
    }
    
    .text-\[1\.5rem\] {
        font-size: 1.5rem
    }
    
    .text-\[1rem\] {
        font-size: 1rem
    }
    
    .text-\[2rem\] {
        font-size: 2rem
    }
    
    .text-\[3rem\] {
        font-size: 3rem
    }
    
    .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
    
    .text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }
    
    .text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
    
    .text-xs {
        font-size: .75rem;
        line-height: 1rem
    }
    
    .font-bold {
        font-weight: 700
    }
    
    .font-normal {
        font-weight: 400
    }
    
    .font-semibold {
        font-weight: 600
    }
    
    .italic {
        font-style: italic
    }
    
    .leading-10 {
        line-height: 2.5rem
    }
    
    .leading-8 {
        line-height: 2rem
    }
    
    .leading-\[1\.6\] {
        line-height: 1.6
    }
    
    .text-black {
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity,1))
    }
    
    .text-gray-100 {
        --tw-text-opacity: 1;
        color: rgb(243 244 246/var(--tw-text-opacity,1))
    }
    
    .text-gray-300 {
        --tw-text-opacity: 1;
        color: rgb(209 213 219/var(--tw-text-opacity,1))
    }
    
    .text-gray-400 {
        --tw-text-opacity: 1;
        color: rgb(156 163 175/var(--tw-text-opacity,1))
    }
    
    .text-green-400 {
        --tw-text-opacity: 1;
        color: rgb(74 222 128/var(--tw-text-opacity,1))
    }
    
    .text-red-500 {
        --tw-text-opacity: 1;
        color: rgb(239 68 68/var(--tw-text-opacity,1))
    }
    
    .text-red-600 {
        --tw-text-opacity: 1;
        color: rgb(220 38 38/var(--tw-text-opacity,1))
    }
    
    .text-transparent {
        color: transparent
    }
    
    .text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity,1))
    }
    
    .text-yellow-400 {
        --tw-text-opacity: 1;
        color: rgb(250 204 21/var(--tw-text-opacity,1))
    }
    
    .text-yellow-500 {
        --tw-text-opacity: 1;
        color: rgb(234 179 8/var(--tw-text-opacity,1))
    }
    
    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }
    
    .opacity-0 {
        opacity: 0
    }
    
    .opacity-60 {
        opacity: .6
    }
    
    .opacity-\[0\.8\] {
        opacity: .8
    }
    
    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
    }
    
    .blur {
        --tw-blur: blur(8px)
    }
    
    .blur,.blur-xl {
        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-xl {
        --tw-blur: blur(24px)
    }
    
    .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)
    }
    
    .backdrop-blur-xl {
        --tw-backdrop-blur: blur(24px);
        -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)
    }
    
    .transition {
        transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
        transition-duration: .15s
    }
    
    .duration-300 {
        transition-duration: .3s
    }
    
    .duration-500 {
        transition-duration: .5s
    }
    
    .will-change-transform {
        will-change: transform
    }
    
    .bg-grid-small-white\/\[0\.2\] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(255 255 255 / 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")
    }
    
    .bg-grid-small-white\/\[0\.4\] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(255 255 255 / 0.4)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")
    }
    
    .\[mask-image\:linear-gradient\(to_right\2c transparent\2c white_20\%\2c white_80\%\2c transparent\)\] {
        mask-image: linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent)
    }
    
    .slider-wrapper {
        padding: 2rem;
        background: linear-gradient(135deg,#1e293b,#0f172a);
        color: #fff;
        text-align: center
    }
    
    .slider-header h1 {
        font-size: 2rem;
        font-weight: 700;
        color: #f8fafc
    }
    
    .slider-header span {
        background: linear-gradient(90deg,#f472b6,#c084fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    
    .slider-container {
        display: flex;
        align-items: center;
        position: relative;
        margin-top: 2rem;
        overflow: hidden
    }
    
    .slider-content {
        display: flex;
        gap: 1.5rem;
        transition: transform .5s ease;
        scroll-behavior: smooth;
        overflow-x: scroll;
        padding: 1rem 0
    }
    
    .slider-card {
        min-width: 170px;
        max-width: 200px;
        background: #1e293b;
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 4px 10px rgba(0,0,0,.3);
        transition: transform .3s ease,box-shadow .3s ease;
        text-align: center
    }
    
    .slider-card:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 15px hsla(0,0%,100%,.2)
    }
    
    .card-image img {
        max-width: 100px;
        margin: auto
    }
    
    .card-title {
        margin-top: 1rem;
        font-size: 1rem;
        font-weight: 700;
        color: #fff
    }
    
    .nav-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,.6);
        border: none;
        border-radius: 50%;
        padding: .5rem;
        cursor: pointer;
        z-index: 10;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center
    }
    
    .nav-button.left {
        left: 10px
    }
    
    .nav-button.right {
        right: 10px
    }
    
    .nav-button img {
        width: 20px;
        height: 20px
    }
    
    .nav-button:hover {
        background: hsla(0,0%,100%,.3)
    }
    
    .slider-content::-webkit-scrollbar {
        display: none
    }
    
    .bounce-in-top {
        animation: bounce-in-top 1.1s both
    }
    
    @keyframes bounce-in-top {
        0% {
            transform: translateY(-500px);
            animation-timing-function: ease-in;
            opacity: 0
        }
    
        38% {
            transform: translateY(0);
            animation-timing-function: ease-out;
            opacity: 1
        }
    
        55% {
            transform: translateY(-65px);
            animation-timing-function: ease-in
        }
    
        72% {
            transform: translateY(0);
            animation-timing-function: ease-out
        }
    
        81% {
            transform: translateY(-28px);
            animation-timing-function: ease-in
        }
    
        90% {
            transform: translateY(0);
            animation-timing-function: ease-out
        }
    
        95% {
            transform: translateY(-8px);
            animation-timing-function: ease-in
        }
    
        to {
            transform: translateY(0);
            animation-timing-function: ease-out
        }
    }
    
    .overflows {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    
    @keyframes jello-vertical {
        0% {
            transform: scaleX(1)
        }
    
        30% {
            transform: scale3d(.75,1.25,1)
        }
    
        40% {
            transform: scale3d(1.25,.75,1)
        }
    
        50% {
            transform: scale3d(.85,1.15,1)
        }
    
        65% {
            transform: scale3d(1.05,.95,1)
        }
    
        75% {
            transform: scale3d(.95,1.05,1)
        }
    
        to {
            transform: scaleX(1)
        }
    }
    
    .jello-horizontal {
        animation: jello-horizontal .9s ease-in-out 1s infinite
    }
    
    @keyframes jello-horizontal {
        0% {
            transform: scaleX(1)
        }
    
        30% {
            transform: scale3d(1.25,.75,1)
        }
    
        40% {
            transform: scale3d(.75,1.25,1)
        }
    
        50% {
            transform: scale3d(1.15,.85,1)
        }
    
        65% {
            transform: scale3d(.95,1.05,1)
        }
    
        75% {
            transform: scale3d(1.05,.95,1)
        }
    
        to {
            transform: scaleX(1)
        }
    }
    
    .slide-in-top {
        animation: slide-in-top .5s cubic-bezier(.25,.46,.45,.94) both
    }
    
    @keyframes slide-in-top {
        0% {
            transform: translateY(-1000px);
            opacity: 0
        }
    
        to {
            transform: translateY(0);
            opacity: 1
        }
    }
    
    .paragraf {
        text-align: justify;
        font-size: .9rem;
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity,1))
    }
    
    @media (min-width: 640px) {
        .paragraf {
            font-size:1rem
        }
    }
    
    .heading {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        font-size: 1.3rem;
        --tw-text-opacity: 1;
        color: rgb(250 204 21/var(--tw-text-opacity,1))
    }
    
    @media (min-width: 640px) {
        .heading {
            font-size:1.5rem
        }
    }
    
    .subheading {
        margin-top: 1rem;
        margin-bottom: .25rem
    }
    
    .strongs,li {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity,1))
    }
    
    .slide-in-blurred-top {
        animation: slide-in-blurred-top .6s cubic-bezier(.23,1,.32,1) both
    }
    
    @keyframes slide-in-blurred-top {
        0% {
            transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
            transform-origin: 50% 0;
            filter: blur(40px);
            opacity: 0
        }
    
        to {
            transform: translateY(0) scaleY(1) scaleX(1);
            transform-origin: 50% 50%;
            filter: blur(0);
            opacity: 1
        }
    }
    
    .hover\:max-w-\[16rem\]:hover {
        max-width: 16rem
    }
    
    .hover\:scale-110:hover {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
    
    .hover\:border-none:hover {
        border-style: none
    }
    
    .hover\:bg-black:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(0 0 0/var(--tw-bg-opacity,1))
    }
    
    .hover\:bg-black\/10:hover {
        background-color: rgba(0,0,0,.1)
    }
    
    .hover\:bg-slate-400:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184/var(--tw-bg-opacity,1))
    }
    
    .hover\:bg-white:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity,1))
    }
    
    .hover\:bg-gradient-to-r:hover {
        background-image: linear-gradient(to right,var(--tw-gradient-stops))
    }
    
    .hover\:from-green-400:hover {
        --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(74,222,128,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .hover\:from-pink-500:hover {
        --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(236,72,153,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .hover\:from-yellow-500:hover {
        --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
        --tw-gradient-to: rgba(234,179,8,0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to)
    }
    
    .hover\:to-green-900:hover {
        --tw-gradient-to: #14532d var(--tw-gradient-to-position)
    }
    
    .hover\:to-orange-500:hover {
        --tw-gradient-to: #f97316 var(--tw-gradient-to-position)
    }
    
    .hover\:to-yellow-700:hover {
        --tw-gradient-to: #a16207 var(--tw-gradient-to-position)
    }
    
    .hover\:fill-black:hover {
        fill: #000
    }
    
    .hover\:text-black:hover {
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity,1))
    }
    
    .hover\:text-white:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity,1))
    }
    
    .hover\:\[animation-play-state\:paused\]:hover {
        animation-play-state: paused
    }
    
    .group:hover .group-hover\:opacity-100 {
        opacity: 1
    }
    
    @media (min-width: 640px) {
        .sm\:h-6 {
            height:1.5rem
        }
    
        .sm\:h-\[20rem\] {
            height: 20rem
        }
    
        .sm\:w-\[1\.3rem\] {
            width: 1.3rem
        }
    
        .sm\:w-\[10rem\] {
            width: 10rem
        }
    
        .sm\:w-\[90\%\] {
            width: 90%
        }
    
        .sm\:w-full {
            width: 100%
        }
    
        .sm\:px-4 {
            padding-left: 1rem;
            padding-right: 1rem
        }
    
        .sm\:px-8 {
            padding-left: 2rem;
            padding-right: 2rem
        }
    
        .sm\:py-2 {
            padding-top: .5rem;
            padding-bottom: .5rem
        }
    
        .sm\:text-\[0\.8rem\] {
            font-size: .8rem
        }
    
        .sm\:text-\[2\.5rem\] {
            font-size: 2.5rem
        }
    
        .sm\:text-base {
            font-size: 1rem;
            line-height: 1.5rem
        }
    }
    
    @media (min-width: 768px) {
        .md\:h-\[2\.5rem\] {
            height:2.5rem
        }
    
        .md\:w-\[19rem\] {
            width: 19rem
        }
    
        .md\:w-\[450px\] {
            width: 450px
        }
    
        .md\:gap-5 {
            gap: 1.25rem
        }
    
        .md\:gap-7 {
            gap: 1.75rem
        }
    
        .md\:px-\[1\.1rem\] {
            padding-left: 1.1rem;
            padding-right: 1.1rem
        }
    
        .md\:px-\[4rem\] {
            padding-left: 4rem;
            padding-right: 4rem
        }
    
        .md\:text-\[2rem\] {
            font-size: 2rem
        }
    
        .md\:text-\[3rem\] {
            font-size: 3rem
        }
    
        .md\:text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem
        }
    }
    
    @media (min-width: 1024px) {
        .lg\:flex {
            display:flex
        }
    
        .lg\:hidden {
            display: none
        }
    
        .lg\:max-h-\[70vh\] {
            max-height: 70vh
        }
    
        .lg\:w-\[1\.4rem\] {
            width: 1.4rem
        }
    
        .lg\:w-\[11rem\] {
            width: 11rem
        }
    
        .lg\:flex-row-reverse {
            flex-direction: row-reverse
        }
    
        .lg\:px-\[3\.5rem\] {
            padding-left: 3.5rem;
            padding-right: 3.5rem
        }
    
        .lg\:px-\[5rem\] {
            padding-left: 5rem;
            padding-right: 5rem
        }
    
        .lg\:text-\[0\.9rem\] {
            font-size: .9rem
        }
    }
    
    @media (min-width: 1280px) {
        .xl\:h-12 {
            height:3rem
        }
    
        .xl\:w-full {
            width: 100%
        }
    
        .xl\:flex-row {
            flex-direction: row
        }
    
        .xl\:px-\[6rem\] {
            padding-left: 6rem;
            padding-right: 6rem
        }
    
        .xl\:px-\[8rem\] {
            padding-left: 8rem;
            padding-right: 8rem
        }
    
        .xl\:text-5xl {
            font-size: 3rem;
            line-height: 1
        }
    
        .xl\:text-\[2\.5rem\] {
            font-size: 2.5rem
        }
    }
    
    @media (prefers-color-scheme: dark) {
        .dark\:bg-white\/20 {
            background-color:hsla(0,0%,100%,.2)
        }
    }