/* Pixlabon design system — Bootstrap 5 companion stylesheet (no Tailwind) */
@property --tw-animation-delay {
    syntax: "*";
    inherits: false;
    initial-value: 0s
}

@property --tw-animation-direction {
    syntax: "*";
    inherits: false;
    initial-value: normal
}

@property --tw-animation-duration {
    syntax: "*";
    inherits: false
}

@property --tw-animation-fill-mode {
    syntax: "*";
    inherits: false;
    initial-value: none
}

@property --tw-animation-iteration-count {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@keyframes marquee {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes float-soft {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@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-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-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-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
        filter: blur(var(--tw-enter-blur, 0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
        filter: blur(var(--tw-exit-blur, 0))
    }
}

@keyframes accordion-down {
    0% {
        height: 0
    }

    to {
        height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
    }
}

@keyframes accordion-up {
    0% {
        height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
    }

    to {
        height: 0
    }
}

@keyframes caret-blink {

    0%,
    70%,
    to {
        opacity: 1
    }

    20%,
    50% {
        opacity: 0
    }
}

/* base */
@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-scale-x: 1;
        --tw-scale-y: 1;
        --tw-scale-z: 1;
        --tw-rotate-x: initial;
        --tw-rotate-y: initial;
        --tw-rotate-z: initial;
        --tw-skew-x: initial;
        --tw-skew-y: initial;
        --tw-space-y-reverse: 0;
        --tw-space-x-reverse: 0;
        --tw-border-style: solid;
        --tw-gradient-position: initial;
        --tw-gradient-from: #0000;
        --tw-gradient-via: #0000;
        --tw-gradient-to: #0000;
        --tw-gradient-stops: initial;
        --tw-gradient-via-stops: initial;
        --tw-gradient-from-position: 0%;
        --tw-gradient-via-position: 50%;
        --tw-gradient-to-position: 100%;
        --tw-leading: initial;
        --tw-font-weight: initial;
        --tw-tracking: initial;
        --tw-ordinal: initial;
        --tw-slashed-zero: initial;
        --tw-numeric-figure: initial;
        --tw-numeric-spacing: initial;
        --tw-numeric-fraction: initial;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-color: initial;
        --tw-shadow-alpha: 100%;
        --tw-inset-shadow: 0 0 #0000;
        --tw-inset-shadow-color: initial;
        --tw-inset-shadow-alpha: 100%;
        --tw-ring-color: initial;
        --tw-ring-shadow: 0 0 #0000;
        --tw-inset-ring-color: initial;
        --tw-inset-ring-shadow: 0 0 #0000;
        --tw-ring-inset: initial;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-outline-style: solid;
        --tw-blur: initial;
        --tw-brightness: initial;
        --tw-contrast: initial;
        --tw-grayscale: initial;
        --tw-hue-rotate: initial;
        --tw-invert: initial;
        --tw-opacity: initial;
        --tw-saturate: initial;
        --tw-sepia: initial;
        --tw-drop-shadow: initial;
        --tw-drop-shadow-color: initial;
        --tw-drop-shadow-alpha: 100%;
        --tw-drop-shadow-size: initial;
        --tw-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-duration: initial;
        --tw-ease: initial;
        --tw-content: "";
        --tw-animation-delay: 0s;
        --tw-animation-direction: normal;
        --tw-animation-duration: initial;
        --tw-animation-fill-mode: none;
        --tw-animation-iteration-count: 1;
        --tw-enter-blur: 0;
        --tw-enter-opacity: 1;
        --tw-enter-rotate: 0;
        --tw-enter-scale: 1;
        --tw-enter-translate-x: 0;
        --tw-enter-translate-y: 0;
        --tw-exit-blur: 0;
        --tw-exit-opacity: 1;
        --tw-exit-rotate: 0;
        --tw-exit-scale: 1;
        --tw-exit-translate-x: 0;
        --tw-exit-translate-y: 0
    }
}

:root,
:host {
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md: 12px;
    --blur-xl: 24px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --default-mono-font-family: var(--font-mono);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-border: var(--border)
}

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

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

html,
:host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

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

:-moz-focusring:where(:not(iframe)) {
    outline: auto
}

progress {
    vertical-align: baseline
}

summary {
    display: list-item
}

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

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

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

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

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

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

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

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

::placeholder {
    opacity: 1
}

@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
        color: currentColor
    }
}

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

textarea {
    resize: vertical
}

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

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

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

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

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

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

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

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

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

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

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

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

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

::-webkit-calendar-picker-indicator {
    line-height: 1
}

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

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

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

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

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

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

* {
    border-color: var(--color-border)
}

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility
}

body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans)
}

h1,
h2,
h3,
h4 {
    letter-spacing: -.03em;
    text-wrap: balance
}

::selection {
    background: var(--primary)
}

@supports (color:color-mix(in lab, red, red)) {
    ::selection {
        background: color-mix(in oklab, var(--primary) 22%, transparent)
    }
}

:root {
    --radius: 1rem;
    --background: oklch(98.6% .005 95);
    --foreground: oklch(21% .06 275);
    --card: oklch(100% 0 0);
    --card-foreground: oklch(21% .06 275);
    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(21% .06 275);
    --primary: oklch(50% .24 274);
    --primary-foreground: oklch(99% .005 275);
    --secondary: oklch(96% .012 275);
    --secondary-foreground: oklch(28% .09 275);
    --muted: oklch(96.5% .008 275);
    --muted-foreground: oklch(53% .03 275);
    --accent: oklch(94% .03 274);
    --accent-foreground: oklch(35% .16 274);
    --destructive: oklch(60% .22 25);
    --destructive-foreground: oklch(99% .005 275);
    --success: oklch(68% .16 155);
    --warning: oklch(78% .16 75);
    --border: oklch(92% .01 275);
    --input: oklch(92% .01 275);
    --ring: oklch(50% .24 274);
    --ink: oklch(22% .09 279);
    --ink-foreground: oklch(98% .006 275);
    --ink-muted: oklch(78% .03 275);
    --surface: oklch(97.5% .006 275);
    --gradient-brand: linear-gradient(120deg, oklch(50% .24 274), oklch(58% .2 292), oklch(55% .2 258));
    --gradient-ink: linear-gradient(150deg, oklch(24% .1 279), oklch(16% .07 275));
    --gradient-aurora: radial-gradient(60% 60% at 15% 20%, oklab(50% .0167416 -.239415/.22), transparent 70%), radial-gradient(55% 55% at 85% 10%, oklab(62% .0950001 -.164545/.18), transparent 70%);
    --shadow-soft: 0 1px 2px oklch(21% .06 275/.04), 0 12px 32px -12px oklch(21% .06 275/.12);
    --shadow-lift: 0 24px 60px -24px oklch(30% .14 274/.35);
    --shadow-glow: 0 0 0 1px oklab(50% .0167416 -.239415/.18), 0 20px 60px -20px oklab(50% .0167416 -.239415/.45)
}

@media (prefers-reduced-motion:reduce) {

    *,
    :before,
    :after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important
    }
}

/* components & utilities */
.px-aurora {
    isolation: isolate;
    position: relative
}

.px-aurora:before {
    content: "";
    z-index: -1;
    background-image: var(--gradient-aurora);
    pointer-events: none;
    position: absolute;
    inset: 0
}

.noise:after {
    content: "";
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    position: absolute;
    inset: 0
}

.px-pointer-events-auto {
    pointer-events: auto
}

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

.px-sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.px-absolute {
    position: absolute
}

.px-fixed {
    position: fixed
}

.px-relative {
    position: relative
}

.px-sticky {
    position: sticky
}

.px-inset-1-over-2 {
    inset: -50%
}

.px-inset-60 {
    inset: -60%
}

.px-inset-65 {
    inset: -65%
}

.px-inset-0 {
    inset: 0
}

.px-inset-x-3p5 {
    inset-inline: calc(var(--spacing) * 3.5)
}

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

.top-0 {
    top: 0
}

.px-top-1-over-2 {
    top: 50%
}

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

.px-right-0 {
    right: 0
}

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

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

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

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

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

.px-left-0 {
    left: 0
}

.px-left-1-over-2 {
    left: 50%
}

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

.px-isolate {
    isolation: isolate
}

.px-z-10 {
    z-index: calc(10 * -1)
}

.px-z-20 {
    z-index: calc(20 * -1)
}

.px-z-10 {
    z-index: 10
}

.px-z-40 {
    z-index: 40
}

.px-z-50 {
    z-index: 50
}

.container-x {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 1.25rem
}

@media (width>=1024px) {
    .container-x {
        padding-inline: 2rem
    }
}

.mx-auto {
    margin-inline: auto
}

.px-mt-4p7rem {
    margin-top: -4.7rem
}

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

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

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

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

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

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

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

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

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

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

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

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

.mt-auto {
    margin-top: auto
}

.px-block {
    display: block
}

.px-flex {
    display: flex
}

.px-grid {
    display: grid
}

.px-hidden {
    display: none
}

.px-inline-block {
    display: inline-block
}

.px-inline-flex {
    display: inline-flex
}

.px-aspect-4-over-3 {
    aspect-ratio: 4/3
}

.px-aspect-16-over-10 {
    aspect-ratio: 16/10
}

.px-size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4)
}

.px-size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5)
}

.px-size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9)
}

.px-size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10)
}

.px-size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11)
}

.px-size-72 {
    width: calc(var(--spacing) * 72);
    height: calc(var(--spacing) * 72)
}

.px-size-80 {
    width: calc(var(--spacing) * 80);
    height: calc(var(--spacing) * 80)
}

.px-size-3px {
    width: 3px;
    height: 3px
}

.px-size-full {
    width: 100%;
    height: 100%
}

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

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

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

.px-min-h-100svh {
    min-height: 100svh
}

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

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

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

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

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

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

.px-max-w-md {
    max-width: var(--container-md)
}

.px-max-w-sm {
    max-width: var(--container-sm)
}

.px-max-w-xs {
    max-width: var(--container-xs)
}

.px-min-w-0 {
    min-width: 0
}

.px-flex-1 {
    flex: 1
}

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

.px-origin-left {
    transform-origin: 0
}

.px-origin-top {
    transform-origin: top
}

.px-translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

.px-scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.px-scale-x-0 {
    --tw-scale-x: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.surface-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 8px);
    box-shadow: var(--shadow-soft);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1), border-color .4s
}

.surface-card:hover {
    box-shadow: var(--shadow-lift);
    border-color: var(--primary);
    transform: translateY(-6px)
}

@supports (color:color-mix(in lab, red, red)) {
    .surface-card:hover {
        border-color: color-mix(in oklab, var(--primary) 35%, var(--border))
    }
}

.marquee-track {
    animation: 32s linear infinite marquee
}

.px-cursor-pointer {
    cursor: pointer
}

.px-resize-none {
    resize: none
}

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

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

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

.px-flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.px-place-items-center {
    place-items: center
}

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

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

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

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

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

.gap-0 {
    gap: 0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.overflow-hidden {
    overflow: hidden
}

.ink-panel {
    background-image: var(--gradient-ink);
    color: var(--ink-foreground);
    border-radius: calc(var(--radius) + 12px)
}

.px-rounded-2xl {
    border-radius: calc(var(--radius) + 8px)
}

.px-rounded-3xl {
    border-radius: calc(var(--radius) + 12px)
}

.px-rounded-2rem {
    border-radius: 2rem
}

.px-rounded-full {
    border-radius: 2147483647px
}

.px-rounded-xl {
    border-radius: calc(var(--radius) + 4px)
}

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

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

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

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

.px-border-border,
.px-border-border\/50 {
    border-color: var(--border)
}

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

.px-border-white-over-10 {
    border-color: #ffffff1a
}

@supports (color:color-mix(in lab, red, red)) {
    .px-border-white-over-10 {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent)
    }
}

.px-border-white-over-15 {
    border-color: #ffffff26
}

@supports (color:color-mix(in lab, red, red)) {
    .px-border-white-over-15 {
        border-color: color-mix(in oklab, var(--color-white) 15%, transparent)
    }
}

.px-border-white-over-25 {
    border-color: #ffffff40
}

@supports (color:color-mix(in lab, red, red)) {
    .px-border-white-over-25 {
        border-color: color-mix(in oklab, var(--color-white) 25%, transparent)
    }
}

.px-bg-accent {
    background-color: var(--accent)
}

.px-bg-background,
.px-bg-background-over-95 {
    background-color: var(--background)
}

@supports (color:color-mix(in lab, red, red)) {
    .px-bg-background-over-95 {
        background-color: color-mix(in oklab, var(--background) 95%, transparent)
    }
}

.px-bg-card {
    background-color: var(--card)
}

.px-bg-ink {
    background-color: var(--ink)
}

.px-bg-muted,
.px-bg-muted\/50 {
    background-color: var(--muted)
}

.bg-primary,
.bg-primary\/10 {
    background-color: var(--primary)
}

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

.px-bg-white-over-5 {
    background-color: #ffffff0d
}

@supports (color:color-mix(in lab, red, red)) {
    .px-bg-white-over-5 {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent)
    }
}

.px-bg-white-over-10 {
    background-color: #ffffff1a
}

@supports (color:color-mix(in lab, red, red)) {
    .px-bg-white-over-10 {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent)
    }
}

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

.px-grid-lines {
    background-image: linear-gradient(to right, var(--foreground) 1px, transparent 1px), linear-gradient(to bottom, var(--foreground) 1px, transparent 1px)
}

@supports (color:color-mix(in lab, red, red)) {
    .px-grid-lines {
        background-image: linear-gradient(to right, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px)
    }
}

.px-grid-lines {
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, #0000 85%);
    mask-image: radial-gradient(70% 60% at 50% 30%, #000, #0000 85%)
}

.text-gradient {
    background-image: var(--gradient-brand);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text
}

.px-from-ink-over-50 {
    --tw-gradient-from: var(--ink)
}

@supports (color:color-mix(in lab, red, red)) {
    .px-from-ink-over-50 {
        --tw-gradient-from: color-mix(in oklab, var(--ink) 50%, transparent)
    }
}

.px-from-ink-over-50 {
    --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))
}

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

.px-mask-image-linear-gradient-to_right-transparent-black_12-black_88-transparent {
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 12% 88%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 12% 88%, #0000)
}

.px-object-cover {
    object-fit: cover
}

.p-0 {
    padding: 0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.px-pt-4p7rem {
    padding-top: 4.7rem
}

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

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

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

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

.text-center {
    text-align: center
}

.px-text-left {
    text-align: left
}

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

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

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

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

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

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

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

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

.px-text-0p7rem {
    font-size: .7rem
}

.px-text-0p8rem {
    font-size: .8rem
}

.px-text-0p55rem {
    font-size: .55rem
}

.px-text-0p65rem {
    font-size: .65rem
}

.px-text-1p15rem {
    font-size: 1.15rem
}

.px-text-clamp-3p25rem-11vw-9rem {
    font-size: clamp(3.25rem, 11vw, 9rem)
}

.px-leading-0p9 {
    --tw-leading: .9;
    line-height: .9
}

.px-leading-1p1 {
    --tw-leading: 1.1;
    line-height: 1.1
}

.px-leading-1p08 {
    --tw-leading: 1.08;
    line-height: 1.08
}

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

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

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

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

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

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

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

.px-tracking-0p05em {
    --tw-tracking: -.05em;
    letter-spacing: -.05em
}

.px-tracking-0p3em {
    --tw-tracking: .3em;
    letter-spacing: .3em
}

.px-tracking-0p28em {
    --tw-tracking: .28em;
    letter-spacing: .28em
}

.px-tracking-0p55em {
    --tw-tracking: .55em;
    letter-spacing: .55em
}

.px-tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight)
}

.px-text-accent-foreground {
    color: var(--accent-foreground)
}

.px-text-foreground {
    color: var(--foreground)
}

.px-text-ink-foreground,
.px-text-ink-foreground-over-75 {
    color: var(--ink-foreground)
}

@supports (color:color-mix(in lab, red, red)) {
    .px-text-ink-foreground-over-75 {
        color: color-mix(in oklab, var(--ink-foreground) 75%, transparent)
    }
}

.px-text-ink-muted {
    color: var(--ink-muted)
}

.px-text-muted-foreground,
.px-text-muted-foreground-over-70 {
    color: var(--muted-foreground)
}

@supports (color:color-mix(in lab, red, red)) {
    .px-text-muted-foreground-over-70 {
        color: color-mix(in oklab, var(--muted-foreground) 70%, transparent)
    }
}

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

.px-text-primary-foreground {
    color: var(--primary-foreground)
}

.px-text-white-over-85 {
    color: #ffffffd9
}

@supports (color:color-mix(in lab, red, red)) {
    .px-text-white-over-85 {
        color: color-mix(in oklab, var(--color-white) 85%, transparent)
    }
}

.px-uppercase {
    text-transform: uppercase
}

.opacity-0 {
    opacity: 0
}

.px-opacity-30 {
    opacity: .3
}

.px-opacity-40 {
    opacity: .4
}

.px-shadow-var-shadow-glow {
    --tw-shadow: var(--shadow-glow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.px-shadow-var-shadow-lift {
    --tw-shadow: var(--shadow-lift);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.px-shadow-var-shadow-soft {
    --tw-shadow: var(--shadow-soft);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.px-blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    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, )
}

.px-drop-shadow-0_18px_60px_rgba-0-0-0-0p55 {
    --tw-drop-shadow-size: drop-shadow(0 18px 60px var(--tw-drop-shadow-color, #0000008c));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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, )
}

.px-backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -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, )
}

.px-backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -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, )
}

.px-backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -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, )
}

.glass {
    background: var(--card)
}

@supports (color:color-mix(in lab, red, red)) {
    .glass {
        background: color-mix(in oklab, var(--card) 72%, transparent)
    }
}

.glass {
    -webkit-backdrop-filter: blur(18px)saturate(160%);
    backdrop-filter: blur(18px)saturate(160%);
    border: 1px solid var(--foreground)
}

@supports (color:color-mix(in lab, red, red)) {
    .glass {
        border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent)
    }
}

.px-transition-padding {
    transition-property: padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
}

.px-transition-width-height-opacity {
    transition-property: width, height, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
}

.px-transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
}

.px-transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
}

.px-transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
}

.px-transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
}

.px-transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
}

.px-duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s
}

.px-duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s
}

.px-duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s
}

.px-duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s
}

.px-will-change-transform {
    will-change: transform
}

.px-outline-none {
    --tw-outline-style: none;
    outline-style: none
}

@media (hover:hover) {
    .px-group-hover-translate-x-0p5:is(:where(.px-group):hover *) {
        --tw-translate-x: calc(var(--spacing) * .5);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }
}

@media (hover:hover) {
    .px-group-hover-translate-x-1:is(:where(.px-group):hover *) {
        --tw-translate-x: var(--spacing);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }
}

@media (hover:hover) {
    .px-group-hover-translate-y-0p5:is(:where(.px-group):hover *) {
        --tw-translate-y: calc(var(--spacing) * -.5);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }
}

@media (hover:hover) {
    .px-group-hover-scale-105:is(:where(.px-group):hover *) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }
}

@media (hover:hover) {
    .px-group-hover-scale-110:is(:where(.px-group):hover *) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }
}

@media (hover:hover) {
    .px-group-hover-scale-x-100:is(:where(.px-group):hover *) {
        --tw-scale-x: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }
}

@media (hover:hover) {

    .px-group-hover-opacity-100:is(:where(.px-group):hover *),
    .px-group-hover\/menu-item\:opacity-100:is(:where(.px-group\/menu-item):hover *) {
        opacity: 1
    }
}

.px-group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.px-group)[data-collapsible=icon] *) {
    margin-top: calc(var(--spacing) * -8)
}

.px-group-data-\[collapsible\=icon\]\:hidden:is(:where(.px-group)[data-collapsible=icon] *) {
    display: none
}

.px-group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.px-group)[data-collapsible=icon] *) {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important
}

.px-group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.px-group)[data-collapsible=icon] *) {
    width: var(--sidebar-width-icon)
}

.px-group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.px-group)[data-collapsible=icon] *) {
    width: calc(var(--sidebar-width-icon) + 1rem)
}

.px-group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.px-group)[data-collapsible=icon] *) {
    width: calc(var(--sidebar-width-icon) + 1rem + 2px)
}

.px-group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.px-group)[data-collapsible=icon] *) {
    overflow: hidden
}

.px-group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.px-group)[data-collapsible=icon] *) {
    padding: 0 !important
}

.px-group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.px-group)[data-collapsible=icon] *) {
    padding: calc(var(--spacing) * 2) !important
}

.px-group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.px-group)[data-collapsible=icon] *) {
    opacity: 0
}

.px-group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.px-group)[data-collapsible=offcanvas] *) {
    right: calc(var(--sidebar-width) * -1)
}

.px-group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.px-group)[data-collapsible=offcanvas] *) {
    left: calc(var(--sidebar-width) * -1)
}

.px-group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.px-group)[data-collapsible=offcanvas] *) {
    width: 0
}

.px-group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.px-group)[data-collapsible=offcanvas] *) {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

.px-group-data-\[side\=left\]\:-right-4:is(:where(.px-group)[data-side=left] *) {
    right: calc(var(--spacing) * -4)
}

.px-group-data-\[side\=left\]\:border-r:is(:where(.px-group)[data-side=left] *) {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px
}

.px-group-data-\[side\=right\]\:left-0:is(:where(.px-group)[data-side=right] *) {
    left: 0
}

.px-group-data-\[side\=right\]\:rotate-180:is(:where(.px-group)[data-side=right] *) {
    rotate: 180deg
}

.px-group-data-\[side\=right\]\:border-l:is(:where(.px-group)[data-side=right] *) {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px
}

.px-group-data-\[state\=open\]\:rotate-180:is(:where(.px-group)[data-state=open] *) {
    rotate: 180deg
}

.px-group-data-status-active-scale-x-100:is(:where(.px-group)[data-status=active] *) {
    --tw-scale-x: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.px-group-data-\[variant\=floating\]\:rounded-lg:is(:where(.px-group)[data-variant=floating] *) {
    border-radius: var(--radius)
}

.px-group-data-\[variant\=floating\]\:border:is(:where(.px-group)[data-variant=floating] *) {
    border-style: var(--tw-border-style);
    border-width: 1px
}

.px-group-data-\[variant\=floating\]\:shadow:is(:where(.px-group)[data-variant=floating] *) {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.px-group-\[\.toast\]\:bg-muted:is(:where(.px-group).toast *) {
    background-color: var(--muted)
}

.px-group-\[\.toast\]\:bg-primary:is(:where(.px-group).toast *) {
    background-color: var(--primary)
}

.px-group-\[\.toast\]\:text-muted-foreground:is(:where(.px-group).toast *) {
    color: var(--muted-foreground)
}

.px-group-\[\.toast\]\:text-primary-foreground:is(:where(.px-group).toast *) {
    color: var(--primary-foreground)
}

.px-group-\[\.toaster\]\:border-border:is(:where(.px-group).toaster *) {
    border-color: var(--border)
}

.px-group-\[\.toaster\]\:bg-background:is(:where(.px-group).toaster *) {
    background-color: var(--background)
}

.px-group-\[\.toaster\]\:text-foreground:is(:where(.px-group).toaster *) {
    color: var(--foreground)
}

.px-group-\[\.toaster\]\:shadow-lg:is(:where(.px-group).toaster *) {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.px-placeholder-text-ink-muted::placeholder {
    color: var(--ink-muted)
}

.px-placeholder-text-muted-foreground::placeholder {
    color: var(--muted-foreground)
}

.px-group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.px-group)[data-collapsible=offcanvas] *):after {
    content: var(--tw-content);
    left: 100%
}

@media (hover:hover) {
    .px-hover-translate-y-0p5:hover {
        --tw-translate-y: calc(var(--spacing) * -.5);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }
}

@media (hover:hover) {
    .px-hover-translate-y-0:hover {
        --tw-translate-y: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }
}

@media (hover:hover) {
    .px-hover-scale-105:hover {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }
}

@media (hover:hover) {
    .px-hover-border-primary:hover {
        border-color: var(--primary)
    }
}

@media (hover:hover) {
    .px-hover-border-white-over-40:hover {
        border-color: #fff6
    }
}

@media (hover:hover) {
    @supports (color:color-mix(in lab, red, red)) {
        .px-hover-border-white-over-40:hover {
            border-color: color-mix(in oklab, var(--color-white) 40%, transparent)
        }
    }
}

@media (hover:hover) {

    .px-hover-bg-muted:hover,
    .px-hover-bg-muted\/50:hover {
        background-color: var(--muted)
    }
}

@media (hover:hover) {
    .px-hover-bg-white-over-20:hover {
        background-color: #fff3
    }
}

@media (hover:hover) {
    @supports (color:color-mix(in lab, red, red)) {
        .px-hover-bg-white-over-20:hover {
            background-color: color-mix(in oklab, var(--color-white) 20%, transparent)
        }
    }
}

@media (hover:hover) {
    .px-hover-text-foreground:hover {
        color: var(--foreground)
    }
}

@media (hover:hover) {
    .px-hover-text-ink-foreground:hover {
        color: var(--ink-foreground)
    }
}

@media (hover:hover) {
    .px-hover-text-primary:hover {
        color: var(--primary)
    }
}

@media (hover:hover) {
    .px-hover-underline:hover {
        text-decoration-line: underline
    }
}

@media (hover:hover) {
    .px-hover-shadow-var-shadow-lift:hover {
        --tw-shadow: var(--shadow-lift);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
}

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

.px-focus-ring-4:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + 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)
}

.px-focus-ring-color-mix-in_oklab-var-primary-_15-transparent:focus {
    --tw-ring-color: var(--primary)
}

@supports (color:color-mix(in lab, red, red)) {
    .px-focus-ring-color-mix-in_oklab-var-primary-_15-transparent:focus {
        --tw-ring-color: color-mix(in oklab, var(--primary) 15%, transparent)
    }
}

.px-focus-outline-none:focus {
    --tw-outline-style: none;
    outline-style: none
}

.px-disabled-opacity-70:disabled {
    opacity: .7
}

.px-data-state-closed-animate-accordion-up[data-state=closed] {
    animation: accordion-up var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
}

.px-data-state-open-animate-accordion-down[data-state=open] {
    animation: accordion-down var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
}

.project-card {
    height: 100%;
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
}

.project-card .project-actions {
    opacity: 0;
    transform: translateY(45px);
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    transition: opacity 0.35s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
}

.project-card:hover .project-actions {
    opacity: 1;
    transform: translateY(0);
    max-height: 70px;
    margin-top: 1rem !important;
}

.project-action-btn {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.3s ease;
    margin-top: 5px;
}

.project-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.project-action-btn:active {
    transform: translateY(-1px);
}

.project-action-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.30), transparent);
    transition: left 0.65s ease;
}

.project-action-btn:hover::before {
    left: 130%;
}

.project-action-btn i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.project-view-site-btn {
    background-color: #111533;
    border-color: #111533;
    color: #fff;
}

.project-view-site-btn:hover {
    background-color: #111533;
    border-color: #111533;
    color: #fff;
}

.project-description-btn {
    border: 1px solid #111533;
    color: #111533;
    background-color: transparent;
}

.project-description-modal .modal-dialog {
    max-width: 850px;
    margin: 1.75rem auto;
    transform: translateY(-30px) scale(0.97);
    transition: transform 0.3s ease-out;
}

.project-description-modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.project-description-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.project-description-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eeeeee;
}

.project-description-modal .modal-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.project-description-modal .modal-body {
    padding: 24px;
}

.project-description-modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #eeeeee;
}

.project-modal-image {
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
}

.project-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-modal-description {
    margin-top: 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.8;
}

@media (max-width: 576px) {
    .project-description-modal .modal-dialog {
        margin: 10px;
    }

    .project-description-modal .modal-body {
        padding: 18px;
    }

    .project-modal-image {
        height: 220px;
    }
}


.px-data-status-active-text-primary[data-status=active] {
    color: var(--primary)
}

@media not all and (width>=40rem) {
    .px-max-sm-scale-0p62 {
        scale: .62
    }
}

@media (width>=40rem) {
    .px-sm-inline-block {
        display: inline-block
    }
}

@media (width>=40rem) {
    .px-sm-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width>=40rem) {
    .px-sm-flex-row {
        flex-direction: row
    }
}

@media (width>=40rem) {
    .px-sm-items-center {
        align-items: center
    }
}

@media (width>=40rem) {
    .px-sm-justify-between {
        justify-content: space-between
    }
}

@media (width>=40rem) {
    .px-sm-p-8 {
        padding: calc(var(--spacing) * 8)
    }
}

@media (width>=40rem) {
    .px-sm-px-10 {
        padding-inline: calc(var(--spacing) * 10)
    }
}

@media (width>=40rem) {
    .px-sm-text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }
}

@media (width>=40rem) {
    .px-sm-text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }
}

@media (width>=40rem) {
    .px-sm-text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height))
    }
}

@media (width>=40rem) {
    .px-sm-text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }
}

@media (width>=40rem) {
    .px-sm-text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
}

@media (width>=40rem) {
    .px-sm-text-1p7rem {
        font-size: 1.7rem
    }
}

@media (width>=48rem) {
    .px-md-block {
        display: block
    }
}

@media (width>=48rem) {
    .px-md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width>=48rem) {
    .px-md-grid-cols-1fr_auto {
        grid-template-columns: 1fr auto
    }
}

@media (width>=48rem) {
    .px-md-grid-cols-minmax-0-0p85fr-_minmax-0-1fr {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1fr)
    }
}

@media (width>=48rem) {
    .px-md-items-center {
        align-items: center
    }
}

@media (width>=48rem) {
    .px-md-text-2p75rem {
        font-size: 2.75rem
    }
}

@media (width>=64rem) {
    .px-lg-flex {
        display: flex
    }
}

@media (width>=64rem) {
    .px-lg-hidden {
        display: none
    }
}

@media (width>=64rem) {
    .px-lg-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width>=64rem) {
    .px-lg-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (width>=64rem) {
    .px-lg-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media (width>=64rem) {
    .px-lg-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}

@media (width>=64rem) {
    .px-lg-grid-cols-0p9fr_1p1fr {
        grid-template-columns: .9fr 1.1fr
    }
}

@media (width>=64rem) {
    .px-lg-grid-cols-0p85fr_1p15fr {
        grid-template-columns: .85fr 1.15fr
    }
}

@media (width>=64rem) {
    .px-lg-grid-cols-auto_1fr_auto {
        grid-template-columns: auto 1fr auto
    }
}

@media (width>=64rem) {
    .px-lg-p-9 {
        padding: calc(var(--spacing) * 9)
    }
}

@media (width>=64rem) {
    .px-lg-px-14 {
        padding-inline: calc(var(--spacing) * 14)
    }
}

@media (max-width: 768px) {
    .footer-link {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
        row-gap: 12px;
        margin: 0;
        font-size: 12px;
    }

    .footer-link {
        margin: 0;
    }
}