*,
 ::before,
 ::after {
    --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: rgb(59 130 246 / 0.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: rgb(59 130 246 / 0.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.17 | MIT License | https://tailwindcss.com
*/


/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: #e5e7eb;
    /* 2 */
}

::before,
::after {
    --tw-content: '';
}


/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* 4 */
    font-feature-settings: normal;
    /* 5 */
    font-variation-settings: normal;
    /* 6 */
    -webkit-tap-highlight-color: transparent;
    /* 7 */
}


/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    margin: 0;
    /* 1 */
    line-height: inherit;
    /* 2 */
}


/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
    border-top-width: 1px;
    /* 3 */
}


/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}


/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}


/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
}


/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}


/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-feature-settings: normal;
    /* 2 */
    font-variation-settings: normal;
    /* 3 */
    font-size: 1em;
    /* 4 */
}


/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}


/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}


/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
    border-collapse: collapse;
    /* 3 */
}


/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-feature-settings: inherit;
    /* 1 */
    font-variation-settings: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    letter-spacing: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
}


/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}


/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button;
    /* 1 */
    background-color: transparent;
    /* 2 */
    background-image: none;
    /* 2 */
}


/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}


/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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


/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}


/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}


/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}


/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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


/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}


/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}


/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}


/*
Reset default styling for dialogs.
*/

dialog {
    padding: 0;
}


/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}


/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}


/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
    cursor: pointer;
}


/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
    cursor: default;
}


/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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


/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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


/* Make elements with the HTML hidden attribute stay hidden by default */

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

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

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

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

.visible {
    visibility: visible;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    inset: 0px;
}

.inset-x-0 {
    left: 0px;
    right: 0px;
}

.-right-6 {
    right: -1.5rem;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-4 {
    bottom: 1rem;
}

.left-0 {
    left: 0px;
}

.left-1 {
    left: 0.25rem;
}

.left-4 {
    left: 1rem;
}

.right-0 {
    right: 0px;
}

.right-3 {
    right: 0.75rem;
}

.right-4 {
    right: 1rem;
}

.top-1 {
    top: 0.25rem;
}

.top-2 {
    top: 0.5rem;
}

.top-3 {
    top: 0.75rem;
}

.top-4 {
    top: 1rem;
}

.top-\[256px\] {
    top: 256px;
}

.top-\[290px\] {
    top: 290px;
}

.z-0 {
    z-index: 0;
}

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

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

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

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

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-1\.5 {
    margin-bottom: 0.375rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.ml-auto {
    margin-left: auto;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-12 {
    margin-top: 3rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.block {
    display: block;
}

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

.flex {
    display: flex;
}

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

.table {
    display: table;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

.hidden {
    display: none;
}

.aspect-\[2\/3\] {
    aspect-ratio: 2/3;
}

.h-0 {
    height: 0px;
}

.h-0\.5 {
    height: 0.125rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-14 {
    height: 3.5rem;
}

.h-16 {
    height: 4rem;
}

.h-2\/5 {
    height: 40%;
}

.h-3 {
    height: 0.75rem;
}

.h-32 {
    height: 8rem;
}

.h-5 {
    height: 1.25rem;
}

.h-52 {
    height: 13rem;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-9 {
    height: 2.25rem;
}

.h-\[150px\] {
    height: 150px;
}

.h-\[360px\] {
    height: 360px;
}

.h-\[36px\] {
    height: 36px;
}

.h-\[448px\] {
    height: 448px;
}

.h-\[700px\] {
    height: 700px;
}

.h-\[800px\] {
    height: 800px;
}

.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.h-64 {
    height: 16rem;
}

.min-h-\[500px\] {
    min-height: 500px;
}

.min-h-\[600px\] {
    min-height: 600px;
}

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

.w-10 {
    width: 2.5rem;
}

.w-16 {
    width: 4rem;
}

.w-3 {
    width: 0.75rem;
}

.w-32 {
    width: 8rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-9 {
    width: 2.25rem;
}

.w-\[72px\] {
    width: 72px;
}

.w-auto {
    width: auto;
}

.w-full {
    width: 100%;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.flex-1 {
    flex: 1 1 0%;
}

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

.flex-grow {
    flex-grow: 1;
}

.origin-center {
    transform-origin: center;
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    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));
}

.-translate-y-full {
    --tw-translate-y: -100%;
    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));
}

.-rotate-45 {
    --tw-rotate: -45deg;
    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));
}

.rotate-45 {
    --tw-rotate: 45deg;
    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));
}

.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%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.cursor-pointer {
    cursor: pointer;
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

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

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

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

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

.flex-wrap {
    flex-wrap: wrap;
}

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

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

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

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

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

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

.gap-12 {
    gap: 3rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.space-x-1> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-b-xl {
    border-bottom-right-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}

.rounded-t-xl {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.border {
    border-width: 1px;
}

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

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

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-l-2 {
    border-left-width: 2px;
}

.border-r-2 {
    border-right-width: 2px;
}

.border-t {
    border-top-width: 1px;
}

.border-blue-400 {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-green-400 {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-pink-600 {
    --tw-border-opacity: 1;
    border-color: rgb(219 39 119 / var(--tw-border-opacity, 1));
}

.border-purple-400 {
    --tw-border-opacity: 1;
    border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.border-rose-600 {
    --tw-border-opacity: 1;
    border-color: rgb(225 29 72 / var(--tw-border-opacity, 1));
}

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

.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-opacity-20 {
    --tw-border-opacity: 0.2;
}

.border-opacity-30 {
    --tw-border-opacity: 0.3;
}

.bg-\[\#2a2a2a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(42 42 42 / var(--tw-bg-opacity, 1));
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/70 {
    background-color: rgb(0 0 0 / 0.7);
}

.bg-blue-400\/10 {
    background-color: rgb(96 165 250 / 0.1);
}

.bg-current {
    background-color: currentColor;
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-green-400\/10 {
    background-color: rgb(74 222 128 / 0.1);
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-purple-400\/10 {
    background-color: rgb(192 132 252 / 0.1);
}

.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-red-600\/90 {
    background-color: rgb(220 38 38 / 0.9);
}

.bg-rose-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}

.bg-rose-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(159 18 57 / var(--tw-bg-opacity, 1));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255, 145, 145);
}

.bg-white\/30 {
    background-color: rgb(255 255 255 / 0.3);
}

.bg-yellow-400\/10 {
    background-color: rgb(250 204 21 / 0.1);
}

.bg-blue-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}

.bg-neutral-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}

.bg-opacity-20 {
    --tw-bg-opacity: 0.2;
}

.bg-opacity-30 {
    --tw-bg-opacity: 0.3;
}

.bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}

.bg-opacity-60 {
    --tw-bg-opacity: 0.6;
}

.bg-opacity-70 {
    --tw-bg-opacity: 0.7;
}

.bg-opacity-90 {
    --tw-bg-opacity: 0.9;
}

.bg-\[url\(\'\/uploads\/gb2\.jpg\'\)\] {
 background-image: url('../uploads/gb2.jpg');

}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black\/80 {
    --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 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: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-800 {
    --tw-gradient-from: #991b1b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(153 27 27 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-600 {
    --tw-gradient-from: #e11d48 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-800 {
    --tw-gradient-from: #9f1239 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(159 18 57 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-900 {
    --tw-gradient-from: #111827 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/50 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-red-900 {
    --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #7f1d1d var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-black {
    --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.to-neutral-900 {
    --tw-gradient-to: #171717 var(--tw-gradient-to-position);
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-yellow-400 {
    --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}
.to-yellow-600 {
    --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
}
.to-gray-800 {
    --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
}
.bg-cover {
    background-size: cover;
}
.bg-center {
    background-position: center;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}
.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}
.p-1 {
    padding: 0.25rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-8 {
    padding-bottom: 2rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pt-8 {
    padding-top: 2rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pt-0 {
    padding-top: 0px;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.font-poppins {
    font-family: Poppins, sans-serif;
}
.font-sans {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-\[10px\] {
    font-size: 10px;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.italic {
    font-style: italic;
}
.leading-relaxed {
    line-height: 1.625;
}
.leading-tight {
    line-height: 1.25;
}
.tracking-tight {
    letter-spacing: -0.025em;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-100 {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / 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-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-100 {
    --tw-text-opacity: 1;
    color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-purple-100 {
    --tw-text-opacity: 1;
    color: rgb(243 232 255 / 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-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
    --tw-text-opacity: 1;
    color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-100 {
    --tw-text-opacity: 1;
    color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.text-yellow-200 {
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-50 {
    --tw-text-opacity: 1;
    color: rgb(254 252 232 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-blue-200 {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.underline {
    text-decoration-line: underline;
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.placeholder-gray-300::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(209 213 219 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-300::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(209 213 219 / var(--tw-placeholder-opacity, 1));
}
.placeholder-white::-moz-placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(255 255 255 / var(--tw-placeholder-opacity, 1));
}
.placeholder-white::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgb(255 255 255 / var(--tw-placeholder-opacity, 1));
}
.opacity-0 {
    opacity: 0;
}
.opacity-100 {
    opacity: 1;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-90 {
    opacity: 0.9;
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 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);
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
    outline-style: solid;
}
.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    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);
}
.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
    --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    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);
}
.grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);	
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-lg {
    --tw-backdrop-blur: blur(16px);
    -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);
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -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);
}
.backdrop-filter {
    -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, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.delay-200 {
    transition-delay: 200ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    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\: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\:scale-\[1\.01\]:hover {
    --tw-scale-x: 1.01;
    --tw-scale-y: 1.01;
    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\:bg-blue-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-400\/20:hover {
    background-color: rgb(96 165 250 / 0.2);
}
.hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-400\/20:hover {
    background-color: rgb(74 222 128 / 0.2);
}
.hover\:bg-purple-400\/20:hover {
    background-color: rgb(192 132 252 / 0.2);
}
.hover\:bg-red-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-400\/20:hover {
    background-color: rgb(250 204 21 / 0.2);
}
.hover\:bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.hover\:bg-opacity-20:hover {
    --tw-bg-opacity: 0.2;
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-300:hover {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-2xl:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-inset:focus {
    --tw-ring-inset: inset;
}
.focus\:ring-red-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-white:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-600:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}
.focus\:ring-opacity-50:focus {
    --tw-ring-opacity: 0.5;
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}
.focus\:ring-offset-black:focus {
    --tw-ring-offset-color: #000;
}
.group:hover .group-hover\:h-full {
    height: 100%;
}
.group:hover .group-hover\:scale-110 {
    --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));
}
.group:hover .group-hover\:text-yellow-200 {
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-0 {
    opacity: 0;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}
@media (min-width: 640px) {
    .sm\:mt-8 {
        margin-top: 2rem;
    }
    
    .sm\:mb-16 {
        margin-bottom: 4rem;
    }
    
    .sm\:block {
        display: block;
    }
    
    .sm\:inline {
        display: inline;
    }
    
    .sm\:h-96 {
        height: 24rem;
    }
    
    .sm\:h-\[400px\] {
        height: 400px;
    }
    
    .sm\:h-\[448px\] {
        height: 448px;
    }
    
    .sm\:w-auto {
        width: auto;
    }
    
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .sm\:flex-row {
        flex-direction: row;
    }
    
    .sm\:gap-8 {
        gap: 2rem;
    }
    
    .sm\:space-x-6> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1.5rem * var(--tw-space-x-reverse));
        margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
    }
    
    .sm\:space-y-0> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse));
    }
    
    .sm\:p-4 {
        padding: 1rem;
    }
    
    .sm\:p-8 {
        padding: 2rem;
    }
    
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    
    .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}
@media (min-width: 768px) {
    .md\:right-4 {
        right: 1rem;
    }
    
    .md\:right-8 {
        right: 2rem;
    }
    
    .md\:top-4 {
        top: 1rem;
    }
    
    .md\:top-8 {
        top: 2rem;
    }
    
    .md\:order-1 {
        order: 1;
    }
    
    .md\:order-2 {
        order: 2;
    }
    
    .md\:mr-\[-60px\] {
        margin-right: -60px;
    }
    
    .md\:mt-0 {
        margin-top: 0px;
    }
    
    .md\:h-4 {
        height: 1rem;
    }
    
    .md\:h-8 {
        height: 2rem;
    }
    
    .md\:h-\[440px\] {
        height: 440px;
    }
    
    .md\:min-h-\[600px\] {
        min-height: 600px;
    }
    
    .md\:w-1\/2 {
        width: 50%;
    }
    
    .md\:w-1\/4 {
        width: 25%;
    }
    
    .md\:w-3\/4 {
        width: 75%;
    }
    
    .md\:w-4 {
        width: 1rem;
    }
    
    .md\:w-8 {
        width: 2rem;
    }
    
    .md\:max-w-md {
        max-width: 28rem;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .md\:flex-row {
        flex-direction: row;
    }
    
    .md\:items-start {
        align-items: flex-start;
    }
    
    .md\:justify-between {
        justify-content: space-between;
    }
    
    .md\:justify-around {
        justify-content: space-around;
    }
    
    .md\:gap-6 {
        gap: 1.5rem;
    }
    
    .md\:p-12 {
        padding: 3rem;
    }
    
    .md\:p-4 {
        padding: 1rem;
    }
    
    .md\:p-8 {
        padding: 2rem;
    }
    
    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .md\:py-14 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    
    .md\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .md\:py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    .md\:pb-16 {
        padding-bottom: 4rem;
    }
    
    .md\:text-left {
        text-align: left;
    }
    
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    
    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}
@media (min-width: 1024px) {
    .lg\:mx-0 {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .lg\:mb-0 {
        margin-bottom: 0px;
    }
    
    .lg\:ml-auto {
        margin-left: auto;
    }
    
    .lg\:mr-\[-100px\] {
        margin-right: -100px;
    }
    
    .lg\:block {
        display: block;
    }
    
    .lg\:hidden {
        display: none;
    }
    
    .lg\:h-\[440px\] {
        height: 440px;
    }
    
    .lg\:min-h-\[600px\] {
        min-height: 600px;
    }
    
    .lg\:w-1\/2 {
        width: 50%;
    }
    
    .lg\:w-2\/5 {
        width: 40%;
    }
    
    .lg\:w-3\/5 {
        width: 60%;
    }
    
    .lg\:w-auto {
        width: auto;
    }
    
    .lg\:max-w-lg {
        max-width: 32rem;
    }
    
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .lg\:flex-row {
        flex-direction: row;
    }
    
    .lg\:items-center {
        align-items: center;
    }
    
    .lg\:items-stretch {
        align-items: stretch;
    }
    
    .lg\:justify-center {
        justify-content: center;
    }
    
    .lg\:justify-between {
        justify-content: space-between;
    }
    
    .lg\:space-x-4> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }
    
    .lg\:p-16 {
        padding: 4rem;
    }
    
    .lg\:p-8 {
        padding: 2rem;
    }
    
    .lg\:px-20 {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .lg\:py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    .lg\:pb-0 {
        padding-bottom: 0px;
    }
    
    .lg\:text-left {
        text-align: left;
    }
    
    .lg\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
}

/* --- Tailwind Typography (Prose) Overrides for Dark Theme (ENHANCED) --- */
.prose {
    /* Set overall font and line height if not already globally set */
    
    font-family: sans-serif;
    /* Adjust to your preferred font */
    
    line-height: 1.6;
    color: theme('colors.gray.300');
    /* Default text color */
}
.prose.prose-invert :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.white');
    font-size: 2.25rem;
    /* ~36px, Tailwind's text-4xl */
    
    line-height: 1.2;
    margin-bottom: 0.8em;
}
.prose.prose-invert :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.white');
    font-size: 1.75rem;
    /* ~28px, Tailwind's text-3xl */
    
    line-height: 1.3;
    margin-bottom: 0.7em;
}
.prose.prose-invert :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.white');
    font-size: 1.5rem;
    /* ~24px, Tailwind's text-2xl */
    
    line-height: 1.4;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
.prose.prose-invert :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose.prose-invert :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose.prose-invert :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.white');
    font-size: 1.25rem;
    /* ~20px, Tailwind's text-xl */
    
    line-height: 1.5;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.prose.prose-invert :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.gray.300');
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}
.prose.prose-invert :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose.prose-invert :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.gray.300');
    padding-left: 1.5em;
    /* Indent lists */
    
    margin-top: 1em;
    margin-bottom: 1em;
}
.prose.prose-invert :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.gray.300');
    margin-bottom: 0.5em;
}
.prose.prose-invert :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.rose.400');
    text-decoration: underline;
    /* Make links clearly visible */
    
    font-weight: 500;
}
.prose.prose-invert :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.white');
    font-weight: 700;
}
.prose.prose-invert :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 100%;
    height: auto;
    display: block;
    /* Ensures images behave well in the flow */
    
    margin-left: auto;
    /* Center images */
    
    margin-right: auto;
    /* Center images */
}
.prose.prose-invert :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: theme('colors.gray.400');
    border-left: 4px solid theme('colors.rose.600');
    /* Stronger left border */
    
    padding-left: 1em;
    margin-left: 0;
}
.prose.prose-invert :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.prose.prose-invert :where(th):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose.prose-invert :where(td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding: 0.75em;
    border: 1px solid theme('colors.gray.600');
    text-align: left;
}
.prose.prose-invert :where(th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    background-color: theme('colors.gray.700');
    color: theme('colors.white');
}
.prose.prose-invert :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    background-color: theme('colors.gray.700');
    color: theme('colors.rose.300');
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
    font-family: monospace;
}
.prose.prose-invert :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    background-color: theme('colors.gray.900');
    color: theme('colors.gray.100');
    padding: 1em;
    border-radius: 0.5em;
    overflow-x: auto;
    font-family: monospace;
}
.heart-icon {
    color: white;
    /* Default stroke color */
    
    fill: none;
    /* Default fill color */
    
    transition: fill 0.2s ease-in-out, color 0.2s ease-in-out;
    /* Smooth transition */
}
.heart-icon.liked {
    fill: #EF4444;
    /* Tailwind red-500 fill */
    
    color: #EF4444;
    /* Tailwind red-500 stroke */
}

/* Custom Font Fallback/Definition if Dubai-Light isn't loaded via Google Fonts or for broader compatibility */
@font-face {
    font-family: 'Dubai-Light';
    src: url('http://cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-light.woff2') format('woff2'), url('http://cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

/* You can keep custom CSS for keyframes since Tailwind doesn't directly support complex keyframe animations within classes */
@keyframes testim-scale {
    0% {
        box-shadow: 0px 0px 0px 0px #eee;
    }
    
    35% {
        box-shadow: 0px 0px 10px 5px #eee;
    }
    
    70% {
        box-shadow: 0px 0px 10px 5px #ea830e;
    }
    
    100% {
        box-shadow: 0px 0px 0px 0px #ea830e;
    }
}
@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}
@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);
    }
    
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* Apply these animations using JavaScript or custom Tailwind plugins if needed */
.testim .cont div.active .img img {
    animation: testim-show .5s ease-in-out forwards;
}
.testim .cont div.active h2 {
    animation: testim-content-in .4s ease-in-out forwards;
}
.testim .cont div.active p {
    animation: testim-content-in .5s ease-in-out forwards;
}
.testim .cont div.inactive .img img {
    animation: testim-hide .5s ease-in-out forwards;
}
.testim .cont div.inactive h2 {
    animation: testim-content-out .4s ease-in-out forwards;
}
.testim .cont div.inactive p {
    animation: testim-content-out .5s ease-in-out forwards;
}
.testim .dots .dot.active {
    animation: testim-scale .5s ease-in-out forwards;
}

/* --- Lightbox Image Sizing Fixes --- */

/* Ensure the overlay covers everything and is a flex container */
#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Darker overlay for better contrast */
    
    display: flex;
    /* Use flexbox to center content */
    
    align-items: center;
    /* Center vertically */
    
    justify-content: center;
    /* Center horizontally */
    
    z-index: 50;
    /* Ensure it's on top */
    /* If you have 'hidden' class on this, ensure your JS removes it on open */
}

/* Container for the image inside the lightbox */
.lightbox-content {
    position: relative;
    max-width: 10vw;
    /* Maximum width 90% of viewport width */
    
    max-height: 90vh;
    /* Maximum height 90% of viewport height */
    
    width: auto;
    /* Allow width to be determined by content up to max-width */
    
    height: auto;
    /* Allow height to be determined by content up to max-height */
    
    display: flex;
    /* Use flexbox to center the image */
    
    align-items: center;
    /* Center image vertically */
    
    justify-content: center;
    /* Center image horizontally */
}

/* The actual image within the lightbox */
#lightbox-image {
    display: block;
    /* Remove extra space below image */
    
    width: 400px;
    height: 600px;
    object-fit: contain;
    /* Scales image down to fit, maintaining aspect ratio, without cropping */
    
    margin: auto;
    /* Centers the image if it's smaller than the container */
}

/* Optional: Close button and navigation button styling */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 51;
    background: none;
    border: none;
    padding: 0;
}
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 60px;
    cursor: pointer;
    z-index: 51;
    background: none;
    border: none;
    padding: 0 15px;
}
.lightbox-prev {
    left: 10px;
}
.lightbox-next {
    right: 10px;
}

/* ============================================
   DYNAMIC THEME COLOR SYSTEM
   These classes use CSS custom properties set in the header
   Change theme in Admin Settings to update all colors
   ============================================ */

/* Theme Background Classes */
.theme-bg-50 { background-color: var(--theme-50); }
.theme-bg-100 { background-color: var(--theme-100); }
.theme-bg-200 { background-color: var(--theme-200); }
.theme-bg-300 { background-color: var(--theme-300); }
.theme-bg-400 { background-color: var(--theme-400); }
.theme-bg-500 { background-color: var(--theme-500); }
.theme-bg-600 { background-color: var(--theme-600); }
.theme-bg-700 { background-color: var(--theme-700); }
.theme-bg-800 { background-color: var(--theme-800); }
.theme-bg-900 { background-color: var(--theme-900); }
.theme-bg-950 { background-color: var(--theme-950); }

/* Theme Text Classes */
.theme-text-50 { color: var(--theme-50); }
.theme-text-100 { color: var(--theme-100); }
.theme-text-200 { color: var(--theme-200); }
.theme-text-300 { color: var(--theme-300); }
.theme-text-400 { color: var(--theme-400); }
.theme-text-500 { color: var(--theme-500); }
.theme-text-600 { color: var(--theme-600); }
.theme-text-700 { color: var(--theme-700); }
.theme-text-800 { color: var(--theme-800); }
.theme-text-900 { color: var(--theme-900); }
.theme-text-950 { color: var(--theme-950); }

/* Theme Border Classes */
.theme-border-50 { border-color: var(--theme-50); }
.theme-border-100 { border-color: var(--theme-100); }
.theme-border-200 { border-color: var(--theme-200); }
.theme-border-300 { border-color: var(--theme-300); }
.theme-border-400 { border-color: var(--theme-400); }
.theme-border-500 { border-color: var(--theme-500); }
.theme-border-600 { border-color: var(--theme-600); }
.theme-border-700 { border-color: var(--theme-700); }
.theme-border-800 { border-color: var(--theme-800); }
.theme-border-900 { border-color: var(--theme-900); }
.theme-border-950 { border-color: var(--theme-950); }

/* Theme Hover Background Classes */
.hover\:theme-bg-50:hover { background-color: var(--theme-50); }
.hover\:theme-bg-100:hover { background-color: var(--theme-100); }
.hover\:theme-bg-200:hover { background-color: var(--theme-200); }
.hover\:theme-bg-300:hover { background-color: var(--theme-300); }
.hover\:theme-bg-400:hover { background-color: var(--theme-400); }
.hover\:theme-bg-500:hover { background-color: var(--theme-500); }
.hover\:theme-bg-600:hover { background-color: var(--theme-600); }
.hover\:theme-bg-700:hover { background-color: var(--theme-700); }
.hover\:theme-bg-800:hover { background-color: var(--theme-800); }
.hover\:theme-bg-900:hover { background-color: var(--theme-900); }
.hover\:theme-bg-950:hover { background-color: var(--theme-950); }

/* Theme Hover Text Classes */
.hover\:theme-text-50:hover { color: var(--theme-50); }
.hover\:theme-text-100:hover { color: var(--theme-100); }
.hover\:theme-text-200:hover { color: var(--theme-200); }
.hover\:theme-text-300:hover { color: var(--theme-300); }
.hover\:theme-text-400:hover { color: var(--theme-400); }
.hover\:theme-text-500:hover { color: var(--theme-500); }
.hover\:theme-text-600:hover { color: var(--theme-600); }
.hover\:theme-text-700:hover { color: var(--theme-700); }
.hover\:theme-text-800:hover { color: var(--theme-800); }
.hover\:theme-text-900:hover { color: var(--theme-900); }
.hover\:theme-text-950:hover { color: var(--theme-950); }

/* Theme Ring/Focus Classes */
.theme-ring-500 { --tw-ring-color: var(--theme-500); }
.focus\:theme-ring-500:focus { --tw-ring-color: var(--theme-500); }
.focus\:theme-ring-400:focus { --tw-ring-color: var(--theme-400); }
.focus\:theme-ring-600:focus { --tw-ring-color: var(--theme-600); }

/* Theme Gradient Classes */
.theme-gradient-to-r {
    background-image: linear-gradient(to right, var(--theme-600), var(--theme-400));
}
.theme-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--theme-600), var(--theme-900));
}
.theme-gradient-card {
    background: linear-gradient(180deg, var(--theme-950) 0%, rgba(0,0,0,0.8) 100%);
}

/* Theme Button Styles */
.theme-btn {
    background-color: var(--theme-600);
    color: #ffffff;
    transition: background-color 0.2s ease;
}
.theme-btn:hover {
    background-color: var(--theme-700);
}
.theme-btn-outline {
    background-color: transparent;
    border: 2px solid var(--theme-600);
    color: var(--theme-600);
    transition: all 0.2s ease;
}
.theme-btn-outline:hover {
    background-color: var(--theme-600);
    color: #ffffff;
}
.theme-btn-light {
    background-color: var(--theme-100);
    color: var(--theme-800);
    transition: background-color 0.2s ease;
}
.theme-btn-light:hover {
    background-color: var(--theme-200);
}

/* Theme Badge Styles */
.theme-badge {
    background-color: var(--theme-600);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.theme-badge-light {
    background-color: var(--theme-100);
    color: var(--theme-800);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.theme-badge-dark {
    background-color: var(--theme-900);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Theme Card Styles */
.theme-card {
    background-color: var(--theme-950);
    border: 1px solid var(--theme-900);
    border-radius: 1rem;
}
.theme-card-light {
    background-color: var(--theme-50);
    border: 1px solid var(--theme-200);
    border-radius: 1rem;
}

/* Theme Link Styles */
.theme-link {
    color: var(--theme-500);
    transition: color 0.2s ease;
}
.theme-link:hover {
    color: var(--theme-400);
}

/* Theme Icon Color */
.theme-icon {
    color: var(--theme-500);
}
.theme-icon-light {
    color: var(--theme-300);
}

/* Dark Mode Adjustments */
.dark .theme-bg-light { background-color: var(--theme-900); }
.dark .theme-text-light { color: var(--theme-300); }
.dark .theme-card-light {
    background-color: var(--theme-950);
    border-color: var(--theme-800);
}

/* ============================================
   END DYNAMIC THEME COLOR SYSTEM
   ============================================ */

/* ============================================
   DARK MODE SUPPORT SYSTEM
   ============================================ */

/* Dark mode background and text colors */
.dark {
    color-scheme: dark;
}

.dark .bg-gray-100 { background-color: #111827; }
.dark .bg-gray-50 { background-color: #1f2937; }
.dark .bg-white { background-color: #1f2937; }
.dark .text-gray-900 { color: #f3f4f6; }
.dark .text-gray-800 { color: #e5e7eb; }
.dark .text-gray-700 { color: #d1d5db; }
.dark .text-gray-600 { color: #9ca3af; }
.dark .border-gray-200 { border-color: #374151; }
.dark .border-gray-300 { border-color: #4b5563; }

/* Dark mode cards and containers */
.dark .bg-\[\#1a1a1a\] { background-color: #0f0f0f; }

/* Transition for smooth mode switching */
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* ============================================
   NEW HEADER STYLES
   ============================================ */

/* Smooth scrolling */
.scroll-smooth {
    scroll-behavior: smooth;
}

/* z-index utilities */
.z-\[60\] { z-index: 60; }
.z-\[9999\] { z-index: 9999; }

/* Backdrop blur */
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
}

/* Translate utilities for slide-in menu */
.translate-x-full {
    --tw-translate-x: 100%;
    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));
}

.translate-x-0 {
    --tw-translate-x: 0px;
    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));
}

/* Min height utilities */
.min-h-\[600px\] { min-height: 600px; }

@media (min-width: 1024px) {
    .lg\:min-h-\[700px\] { min-height: 700px; }
}

/* Height utilities */
.h-16 { height: 4rem; }

@media (min-width: 1024px) {
    .lg\:h-20 { height: 5rem; }
}

/* Opacity with alpha channels */
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
    background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/20:hover {
    background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}

.bg-black\/60 {
    background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/20 {
    background-color: rgb(0 0 0 / 0.2);
}

.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}

/* Border with alpha */
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}

/* Gradient background utilities */
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-gray-900 {
    --tw-gradient-from: #111827 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-gray-950 {
    --tw-gradient-to: #030712 var(--tw-gradient-to-position);
}
.from-black\/60 {
    --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/20 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade in up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Animation delays */
.animation-delay-200 {
    animation-delay: 0.2s;
    opacity: 0;
}
.animation-delay-400 {
    animation-delay: 0.4s;
    opacity: 0;
}

/* Bounce animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%) translateX(-50%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0) translateX(-50%);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Hover scale */
.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    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\: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));
}

/* Group hover rotate */
.group:hover .group-hover\:rotate-12 {
    --tw-rotate: 12deg;
    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));
}

.group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    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));
}

.group:hover .group-hover\:scale-110 {
    --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));
}

/* Shadow utilities */
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-green-500\/50:hover {
    --tw-shadow-color: rgb(34 197 94 / 0.5);
    --tw-shadow: var(--tw-shadow-colored);
}

/* Dark mode visibility toggles */
.dark\:block {
    display: none;
}
.dark .dark\:block {
    display: block;
}
.dark\:hidden {
    display: block;
}
.dark .dark\:hidden {
    display: none;
}

/* Dark mode background colors */
.dark\:bg-gray-900 {
    background-color: transparent;
}
.dark .dark\:bg-gray-900 {
    background-color: #111827;
}

.dark\:bg-green-500 {
    background-color: transparent;
}
.dark .dark\:bg-green-500 {
    background-color: #22c55e;
}

/* Dark mode text colors */
.dark\:text-gray-100 {
    color: inherit;
}
.dark .dark\:text-gray-100 {
    color: #f3f4f6;
}

/* Dark mode translate */
.dark\:translate-x-6 {
    transform: none;
}
.dark .dark\:translate-x-6 {
    --tw-translate-x: 1.5rem;
    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));
}

/* Max width utility */
.max-w-sm {
    max-width: 24rem;
}

/* Border left utilities */
.border-l-4 {
    border-left-width: 4px;
}

/* Leading utilities */
.leading-tight {
    line-height: 1.25;
}
.leading-relaxed {
    line-height: 1.625;
}

/* Gap utilities */
.gap-4 {
    gap: 1rem;
}

/* Font sizes for responsive */
@media (min-width: 640px) {
    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .sm\:flex {
        display: flex;
    }
}

@media (min-width: 768px) {
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

@media (min-width: 1024px) {
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:pt-32 {
        padding-top: 8rem;
    }
}

/* Pointer events */
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}

/* ============================================
   FIRST CONTENT SECTION UTILITIES
   ============================================ */

/* Space utilities */
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

/* Space X utility */
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Additional leading */
.leading-snug {
    line-height: 1.375;
}

/* Max-width utility */
.max-w-6xl {
    max-width: 72rem;
}

/* Margin top utilities */
.mt-0\.5 {
    margin-top: 0.125rem;
}

/* Gradient directions */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

/* Gradient color stops */
.from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-50 {
    --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-gray-100 {
    --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
}

/* Dark mode gradient stops */
.dark .dark\:from-gray-800 {
    --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .dark\:to-gray-900 {
    --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}

/* Additional dark mode utilities */
.dark .dark\:bg-gray-800 {
    background-color: #1f2937;
}
.dark .dark\:text-gray-300 {
    color: #d1d5db;
}
.dark .dark\:text-gray-400 {
    color: #9ca3af;
}
.dark .dark\:border-gray-700 {
    border-color: #374151;
}

/* Large screen utilities */
@media (min-width: 1024px) {
    .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .lg\:mb-16 {
        margin-bottom: 4rem;
    }
    .lg\:mt-16 {
        margin-top: 4rem;
    }
    .lg\:gap-16 {
        gap: 4rem;
    }
    .lg\:top-24 {
        top: 6rem;
    }
    .lg\:sticky {
        position: sticky;
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* Medium screen utilities */
@media (min-width: 768px) {
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:p-8 {
        padding: 2rem;
    }
}

/* Small screen utilities */
@media (min-width: 640px) {
    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .sm\:gap-6 {
        gap: 1.5rem;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:flex-row {
        flex-direction: row;
    }
}

/* ============================================
   HOW OUR SERVICE WORKS SECTION UTILITIES
   ============================================ */

/* Blur utilities */
.blur-3xl {
    --tw-blur: blur(64px);
    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);
}

/* Ring utilities */
.ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-transparent {
    --tw-ring-color: transparent;
}
.ring-gray-50 {
    --tw-ring-color: #f9fafb;
}
.dark .dark\:ring-gray-900 {
    --tw-ring-color: #111827;
}

/* Size utilities */
.w-96 {
    width: 24rem;
}
.h-96 {
    height: 24rem;
}
.w-12 {
    width: 3rem;
}
.h-12 {
    height: 3rem;
}
.h-0\.5 {
    height: 0.125rem;
}

/* Positioning utilities */
.-top-4 {
    top: -1rem;
}
.-right-4 {
    right: -1rem;
}
.top-20 {
    top: 5rem;
}
.top-24 {
    top: 6rem;
}
.left-1\/4 {
    left: 25%;
}
.right-1\/4 {
    right: 25%;
}
.left-1\/2 {
    left: 50%;
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    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));
}
.-translate-y-2 {
    --tw-translate-y: -0.5rem;
    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\:-translate-y-2:hover {
    --tw-translate-y: -0.5rem;
    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));
}

/* Gap utility */
.gap-6 {
    gap: 1.5rem;
}

/* Border utilities */
.border-gray-100 {
    border-color: #f3f4f6;
}

/* Background utilities */
.bg-gray-50 {
    background-color: #FE0000;
}
.dark .dark\:bg-gray-50 {
    background-color: #f9fafb;
}

/* Max width */
.max-w-2xl {
    max-width: 42rem;
}

/* Text size */
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Responsive hiding */
.hidden {
    display: none;
}
@media (min-width: 1024px) {
    .lg\:block {
        display: block;
    }
    .lg\:flex {
        display: flex;
    }
}

/* Opacity */
.opacity-10 {
    opacity: 0.1;
}
.opacity-20 {
    opacity: 0.2;
}
.opacity-40 {
    opacity: 0.4;
}

/* Margin bottom */
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}

/* Margin top */
.mt-2 {
    margin-top: 0.5rem;
}

/* Rounded utilities */
.rounded-2xl {
    border-radius: 1rem;
}

/* Transition transform */
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* ============================================
   FEATURED ESCORTS SECTION UTILITIES
   ============================================ */

/* Aspect ratio */
.aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
}

/* Max width */
.max-w-7xl {
    max-width: 80rem;
}
.max-w-\[90\%\] {
    max-width: 90%;
}

/* Backdrop blur */
.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -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);
}

/* Line clamp */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Truncate */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Additional padding */
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.p-4 {
    padding: 1rem;
}

/* Top positioning */
.top-3 {
    top: 0.75rem;
}
.top-16 {
    top: 4rem;
}

/* Left/Right positioning */
.left-3 {
    left: 0.75rem;
}
.right-3 {
    right: 0.75rem;
}

/* Space utilities */
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Margin utilities */
.mr-1 {
    margin-right: 0.25rem;
}
.mb-1 {
    margin-bottom: 0.25rem;
}

/* Flex shrink */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Transition durations */
.duration-500 {
    transition-duration: 500ms;
}
.duration-700 {
    transition-duration: 700ms;
}

/* Background colors */
.bg-gray-950 {
    background-color: #030712;
}
.dark .dark\:bg-gray-950 {
    background-color: #030712;
}

/* Background with opacity */
.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/30 {
    background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/40 {
    background-color: rgb(255 255 255 / 0.4);
}
.dark .dark\:bg-black\/30 {
    background-color: rgb(0 0 0 / 0.3);
}
.dark .dark\:bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
}
.hover\:bg-white\/30:hover {
    background-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-white\/40:hover {
    background-color: rgb(255 255 255 / 0.4);
}
.dark .dark\:hover\:bg-black\/50:hover {
    background-color: rgb(0 0 0 / 0.5);
}
.bg-green-500\/80 {
    background-color: rgb(34 197 94 / 0.8);
}
.bg-green-500\/90 {
    background-color: rgb(34 197 94 / 0.9);
}

/* Text with opacity */
.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
    color: rgb(255 255 255 / 0.9);
}

/* Gradient backgrounds */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black\/80 {
    --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/90 {
    --tw-gradient-from: rgb(0 0 0 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/20 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/70 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-black\/50 {
    --tw-gradient-to: rgb(0 0 0 / 0.5) var(--tw-gradient-to-position);
}

/* Shadow utilities */
.hover\:shadow-2xl:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Size utilities */
.w-2 {
    width: 0.5rem;
}
.h-2 {
    height: 0.5rem;
}
.w-4 {
    width: 1rem;
}
.h-4 {
    height: 1rem;
}
.w-5 {
    width: 1.25rem;
}
.h-5 {
    height: 1.25rem;
}
.w-10 {
    width: 2.5rem;
}
.h-10 {
    height: 2.5rem;
}

/* Border width */
.border-2 {
    border-width: 2px;
}

/* Dark mode border */
.dark .dark\:border-gray-800 {
    border-color: #1f2937;
}

/* Col span */
.col-span-full {
    grid-column: 1 / -1;
}

/* Animate pulse */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* Group hover for nested elements */
.group\/heart:hover .group-hover\/heart\:theme-text {
    color: var(--theme-500);
}

/* Text transform */
.capitalize {
    text-transform: capitalize;
}
.uppercase {
    text-transform: uppercase;
}

/* ============================================
   HIGH CLASS & NEWEST SECTIONS UTILITIES
   ============================================ */

/* Width utilities */
.w-64 {
    width: 16rem;
}
.w-72 {
    width: 18rem;
}
.w-80 {
    width: 20rem;
}
.w-1\.5 {
    width: 0.375rem;
}
.h-1\.5 {
    height: 0.375rem;
}

/* Height utilities */
.h-64 {
    height: 16rem;
}
.h-72 {
    height: 18rem;
}
.h-80 {
    height: 20rem;
}
.h-\[320px\] {
    height: 320px;
}
.h-\[380px\] {
    height: 380px;
}

/* Min height */
.min-h-\[400px\] {
    min-height: 400px;
}

/* Flex utilities */
.flex-none {
    flex: none;
}

/* Scroll utilities */
.scroll-smooth {
    scroll-behavior: smooth;
}
.overflow-x-auto {
    overflow-x: auto;
}

/* Padding utilities */
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-8 {
    padding: 2rem;
}

/* Position utilities */
.bottom-4 {
    bottom: 1rem;
}
.right-4 {
    right: 1rem;
}
.left-4 {
    left: 1rem;
}
.top-4 {
    top: 1rem;
}
.-bottom-2 {
    bottom: -0.5rem;
}
.-right-2 {
    right: -0.5rem;
}
.-top-24 {
    top: -6rem;
}
.-right-24 {
    right: -6rem;
}
.-bottom-24 {
    bottom: -6rem;
}
.-left-24 {
    left: -6rem;
}
.top-1\/4 {
    top: 25%;
}
.bottom-1\/4 {
    bottom: 25%;
}
.right-1\/3 {
    right: 33.333333%;
}
.w-1\/3 {
    width: 33.333333%;
}

/* Margin utilities */
.mr-1\.5 {
    margin-right: 0.375rem;
}
.mb-10 {
    margin-bottom: 2.5rem;
}

/* Border utilities */
.border-dashed {
    border-style: dashed;
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
}
.border-gray-200 {
    border-color: #e5e7eb;
}

/* Background opacity utilities */
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}

/* Gradient utilities */
.from-green-400 {
    --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-green-500 {
    --tw-gradient-to: #22c55e var(--tw-gradient-to-position);
}

/* Width for slider cards */
.w-\[280px\] {
    width: 280px;
}
.w-\[320px\] {
    width: 320px;
}

/* Responsive width */
@media (min-width: 640px) {
    .sm\:w-72 {
        width: 18rem;
    }
    .sm\:h-72 {
        height: 18rem;
    }
    .sm\:w-80 {
        width: 20rem;
    }
    .sm\:h-80 {
        height: 20rem;
    }
    .sm\:w-\[320px\] {
        width: 320px;
    }
    .sm\:h-\[380px\] {
        height: 380px;
    }
    .sm\:h-\[384px\] {
        height: 384px;
    }
    .sm\:bottom-4 {
        bottom: 1rem;
    }
    .sm\:right-0 {
        right: 0;
    }
}

@media (min-width: 768px) {
    .md\:items-end {
        align-items: flex-end;
    }
    .md\:justify-between {
        justify-content: space-between;
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:mt-0 {
        margin-top: 0;
    }
    .md\:w-80 {
        width: 20rem;
    }
    .md\:h-80 {
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:text-left {
        text-align: left;
    }
    .lg\:justify-start {
        justify-content: flex-start;
    }
    .lg\:justify-end {
        justify-content: flex-end;
    }
    .lg\:mb-14 {
        margin-bottom: 3.5rem;
    }
    .lg\:mx-0 {
        margin-left: 0;
        margin-right: 0;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* Rounded utilities */
.rounded-3xl {
    border-radius: 1.5rem;
}

/* W-6 H-6 */
.w-6 {
    width: 1.5rem;
}
.h-6 {
    height: 1.5rem;
}

/* ============================================
   ALL PROFILES SECTION UTILITIES
   ============================================ */

/* Small sizes */
.w-3 {
    width: 0.75rem;
}
.h-3 {
    height: 0.75rem;
}
.w-3\.5 {
    width: 0.875rem;
}
.h-3\.5 {
    height: 0.875rem;
}
.w-20 {
    width: 5rem;
}
.h-20 {
    height: 5rem;
}

/* Padding utilities */
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}

/* Margin utilities */
.mt-0\.5 {
    margin-top: 0.125rem;
}

/* Space utilities */
.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.125rem * var(--tw-space-x-reverse));
    margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Shadow utilities */
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Gap utilities */
.gap-3 {
    gap: 0.75rem;
}
.gap-5 {
    gap: 1.25rem;
}

/* Background with opacity */
.bg-black\/60 {
    background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/90 {
    background-color: rgb(0 0 0 / 0.9);
}
.bg-white\/90 {
    background-color: rgb(255 255 255 / 0.9);
}
.dark .dark\:bg-gray-900\/90 {
    background-color: rgb(17 24 39 / 0.9);
}

/* Via gradient */
.via-black\/50 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* Text sizes */
.text-\[9px\] {
    font-size: 9px;
}
.text-\[10px\] {
    font-size: 10px;
}

/* Responsive utilities */
@media (min-width: 640px) {
    .sm\:gap-5 {
        gap: 1.25rem;
    }
    .sm\:p-3 {
        padding: 0.75rem;
    }
    .sm\:px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .sm\:pb-3 {
        padding-bottom: 0.75rem;
    }
    .sm\:py-2\.5 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:w-4 {
        width: 1rem;
    }
    .sm\:h-4 {
        height: 1rem;
    }
    .sm\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .sm\:left-3 {
        left: 0.75rem;
    }
    .sm\:right-3 {
        right: 0.75rem;
    }
    .sm\:left-2 {
        left: 0.5rem;
    }
    .sm\:right-2 {
        right: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .lg\:gap-6 {
        gap: 1.5rem;
    }
    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .lg\:mt-16 {
        margin-top: 4rem;
    }
}

/* Disabled state */
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}

/* Animate spin */
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   ALL PROFILES SECTION - Additional Utilities
   ============================================ */

/* Aspect Ratio */
.aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
}

/* Position utilities */
.top-12 {
    top: 3rem;
}
.top-14 {
    top: 3.5rem;
}

/* Text with opacity */
.text-white\/80 {
    color: rgb(255 255 255 / 0.8);
}

/* Hover translate */
.hover\:-translate-y-2:hover {
    --tw-translate-y: -0.5rem;
    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));
}

/* Theme border gradient */
.theme-border-gradient {
    background: linear-gradient(90deg, transparent 0%, var(--theme-500) 50%, transparent 100%);
}

/* Responsive top positioning */
@media (min-width: 640px) {
    .sm\:top-14 {
        top: 3.5rem;
    }
}

/* ============================================
   CATEGORIES & BEST ESCORTS - Additional Utilities
   ============================================ */

/* Space utilities */
.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.375rem * var(--tw-space-x-reverse));
    margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Padding utilities */
.p-1\.5 {
    padding: 0.375rem;
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.p-5 {
    padding: 1.25rem;
}

/* Width/Height */
.w-10 {
    width: 2.5rem;
}
.h-10 {
    height: 2.5rem;
}
.w-16 {
    width: 4rem;
}
.h-16 {
    height: 4rem;
}
.w-\[600px\] {
    width: 600px;
}
.h-\[600px\] {
    height: 600px;
}

/* Translate utilities */
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    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));
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    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));
}
.translate-y-2 {
    --tw-translate-y: 0.5rem;
    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));
}
.group:hover .group-hover\:translate-y-0 {
    --tw-translate-y: 0;
    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));
}
.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    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));
}

/* Background colors with opacity */
.bg-black\/70 {
    background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/20 {
    background-color: rgb(0 0 0 / 0.2);
}
.bg-red-500\/90 {
    background-color: rgb(239 68 68 / 0.9);
}
.bg-blue-500\/90 {
    background-color: rgb(59 130 246 / 0.9);
}

/* Via gradient with opacity */
.via-black\/40 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/20 {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* Gap utilities */
.gap-8 {
    gap: 2rem;
}

/* Shadow inner */
.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Responsive gap */
@media (min-width: 1024px) {
    .lg\:gap-8 {
        gap: 2rem;
    }
    .lg\:mb-12 {
        margin-bottom: 3rem;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 640px) {
    .sm\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .sm\:p-5 {
        padding: 1.25rem;
    }
}

/* ============================================
   APPOINTMENT, BOOKING & BLOG SECTION - Utilities
   ============================================ */

/* Width/Height utilities */
.w-48 {
    width: 12rem;
}
.h-48 {
    height: 12rem;
}
.w-64 {
    width: 16rem;
}
.h-64 {
    height: 16rem;
}
.w-72 {
    width: 18rem;
}
.h-72 {
    height: 18rem;
}
.w-96 {
    width: 24rem;
}
.h-96 {
    height: 24rem;
}
.w-14 {
    width: 3.5rem;
}
.h-14 {
    height: 3.5rem;
}
.w-7 {
    width: 1.75rem;
}
.h-7 {
    height: 1.75rem;
}
.w-32 {
    width: 8rem;
}
.h-32 {
    height: 8rem;
}

/* Padding utilities */
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.pl-12 {
    padding-left: 3rem;
}

/* Margin utilities */
.mt-auto {
    margin-top: auto;
}

/* Max width */
.max-w-md {
    max-width: 28rem;
}
.max-w-lg {
    max-width: 32rem;
}

/* Text opacity */
.text-white\/90 {
    color: rgb(255 255 255 / 0.9);
}
.text-white\/70 {
    color: rgb(255 255 255 / 0.7);
}
.text-white\/60 {
    color: rgb(255 255 255 / 0.6);
}

/* Background opacity variants */
.bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2);
}

/* Border opacity */
.border-white\/20 {
    border-color: rgb(255 255 255 / 0.2);
}
.border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
}

/* Dark mode backgrounds */
.dark .dark\:bg-green-900\/30 {
    background-color: rgb(20 83 45 / 0.3);
}
.dark .dark\:bg-blue-900\/30 {
    background-color: rgb(30 58 138 / 0.3);
}

/* Ring offset */
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}

/* Backdrop blur md */
.backdrop-blur-md {
    --tw-backdrop-blur: blur(12px);
    -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);
}

/* Translate utilities */
.translate-x-1\/2 {
    --tw-translate-x: 50%;
    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));
}
.translate-y-1\/2 {
    --tw-translate-y: 50%;
    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));
}

/* Position utilities */
.top-10 {
    top: 2.5rem;
}
.right-10 {
    right: 2.5rem;
}
.bottom-10 {
    bottom: 2.5rem;
}
.left-10 {
    left: 2.5rem;
}
.top-20 {
    top: 5rem;
}
.bottom-20 {
    bottom: 5rem;
}

/* Grid columns for large screens */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* FAQ Section utilities */
.translate-x-1\/3 {
    --tw-translate-x: 33.333333%;
    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));
}
.translate-y-1\/3 {
    --tw-translate-y: 33.333333%;
    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));
}
.pl-14 {
    padding-left: 3.5rem;
}

/* Ring offset for focus */
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}

/* Footer Section utilities */
.translate-y-1\/2 {
    --tw-translate-y: 50%;
    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));
}
.translate-x-1\/2 {
    --tw-translate-x: 50%;
    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));
}

/* Fill colors for SVG */
.fill-gray-50 {
    fill: #f9fafb;
}
.fill-gray-800 {
    fill: #1f2937;
}
.dark .dark\:fill-gray-800 {
    fill: #1f2937;
}

/* Grid column spans for footer */
.lg\:col-span-2 {
    grid-column: span 2 / span 2;
}
.lg\:col-span-4 {
    grid-column: span 4 / span 4;
}

/* Grid cols 12 */
.lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Gap 12 */
.lg\:gap-12 {
    gap: 3rem;
}

/* Height 0.5 for underline */
.h-0\.5 {
    height: 0.125rem;
}

/* Background black with opacity */
.bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8);
}

/* Scale 110 for hover */
.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));
}

/* Bottom 6 */
.bottom-6 {
    bottom: 1.5rem;
}
.right-6 {
    right: 1.5rem;
}

/* Red colors for 18+ badge */
.bg-red-100 {
    background-color: #fee2e2;
}
.dark .dark\:bg-red-900\/30 {
    background-color: rgb(127 29 29 / 0.3);
}
.text-red-500 {
    color: #ef4444;
}
.text-red-600 {
    color: #dc2626;
}
.dark .dark\:text-red-400 {
    color: #f87171;
}

/* Leading relaxed */
.leading-relaxed {
    line-height: 1.625;
}

/* Hover shadow xl */
.hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Gray 300 hover */
.hover\:bg-gray-300:hover {
    background-color: #d1d5db;
}
.dark .dark\:hover\:bg-gray-600:hover {
    background-color: #4b5563;
}

/* Footer Utilities */
.col-span-2 {
    grid-column: span 2 / span 2;
}
.md\:col-span-2 {
    grid-column: span 2 / span 2;
}
@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:text-left {
        text-align: left;
    }
}
.rounded-full {
    border-radius: 9999px;
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-2xl:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:-translate-y-0\.5:hover {
    transform: translateY(-0.125rem);
}
.hover\:scale-110:hover {
    transform: scale(1.1);
}
.bg-opacity-90 {
    --tw-bg-opacity: 0.9;
}
.hover\:bg-opacity-90:hover {
    --tw-bg-opacity: 0.9;
}
.h-16 {
    height: 4rem;
}
.w-10 {
    width: 2.5rem;
}
.h-10 {
    height: 2.5rem;
}
.border-b {
    border-bottom-width: 1px;
}

/* ============================================
   END ADDITIONAL UTILITIES
   ============================================ */
   
   
   
       <style>
        :root {
    --theme-50: #f5f3ff;
    --theme-rgb-50: 245, 243, 255;
    --theme-100: #ede9fe;
    --theme-rgb-100: 237, 233, 254;
    --theme-200: #ddd6fe;
    --theme-rgb-200: 221, 214, 254;
    --theme-300: #c4b5fd;
    --theme-rgb-300: 196, 181, 253;
    --theme-400: #a78bfa;
    --theme-rgb-400: 167, 139, 250;
    --theme-500: #8b5cf6;
    --theme-rgb-500: 139, 92, 246;
    --theme-600: #7c3aed;
    --theme-rgb-600: 124, 58, 237;
    --theme-700: #6d28d9;
    --theme-rgb-700: 109, 40, 217;
    --theme-800: #5b21b6;
    --theme-rgb-800: 91, 33, 182;
    --theme-900: #4c1d95;
    --theme-rgb-900: 76, 29, 149;
    --theme-950: #2e1065;
    --theme-rgb-950: 46, 16, 101;
    --theme-primary: #8b5cf6;
    --theme-primary-light: #ede9fe;
    --theme-primary-dark: #4c1d95;
    --theme-rgb-primary: 139, 92, 246;
    --theme-rgb-primary-light: 237, 233, 254;
    --theme-rgb-primary-dark: 76, 29, 149;
}

        /* Theme utilities */
        .theme-bg { background-color: var(--theme-600); }
        .theme-bg-dark { background-color: var(--theme-800); }
        .theme-bg-darker { background-color: var(--theme-900); }
        .theme-bg-hover:hover { background-color: var(--theme-700); }
        .theme-text { color: var(--theme-500); }
        .theme-text-light { color: var(--theme-400); }
        .theme-border { border-color: var(--theme-500); }
        .theme-border-light { border-color: var(--theme-400); }

        /* Header with theme gradient */
        .header-theme {
            background: linear-gradient(135deg, var(--theme-900) 0%, var(--theme-800) 50%, var(--theme-900) 100%);
        }

        /* Button glow effect */
        .btn-glow {
            box-shadow: 0 4px 20px rgba(var(--theme-rgb-500), 0.5);
            transition: all 0.3s ease;
        }
        .btn-glow:hover {
            box-shadow: 0 8px 30px rgba(var(--theme-rgb-500), 0.7);
            transform: translateY(-3px);
        }

        /* WhatsApp button glow */
        .btn-whatsapp-glow {
            box-shadow: 0 4px 20px rgba(34, 197, 94, 0.5);
        }
        .btn-whatsapp-glow:hover {
            box-shadow: 0 8px 30px rgba(34, 197, 94, 0.7);
            transform: translateY(-3px);
        }

        /* Hero overlay with theme */
        .hero-overlay {
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(var(--theme-rgb-900), 0.6) 50%,
                rgba(var(--theme-rgb-950), 0.9) 100%
            );
        }

        /* Decorative line */
        .theme-line {
            background: linear-gradient(90deg, transparent, var(--theme-500), transparent);
        }

        /* Text gradient */
        .text-gradient {
            background: linear-gradient(135deg, var(--theme-400) 0%, var(--theme-500) 50%, var(--theme-400) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animate hero elements */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }

        /* Pulse animation for CTA */
        @keyframes pulse-ring {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        .pulse-ring::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 9999px;
            border: 2px solid var(--theme-500);
            animation: pulse-ring 2s ease-out infinite;
        }

        /* Theme border gradient for decorative elements */
        .theme-border-gradient {
            background: linear-gradient(90deg, var(--theme-500), var(--theme-400));
        }

        /* Theme gradient backgrounds */
        .theme-gradient {
            background: linear-gradient(135deg, var(--theme-600) 0%, var(--theme-500) 100%);
        }
        .theme-gradient-dark {
            background: linear-gradient(135deg, var(--theme-900) 0%, var(--theme-800) 100%);
        }

        /* Theme ring for hover effects */
        .hover\:theme-ring:hover {
            --tw-ring-color: var(--theme-500);
            box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        }

        /* Theme gradient ring for circular images */
        .theme-gradient-ring {
            background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-400) 50%, var(--theme-600) 100%);
        }

        /* Theme subtle gradient for cards */
        .theme-gradient-subtle {
            background: linear-gradient(135deg, rgba(var(--theme-rgb-500), 0.05) 0%, rgba(var(--theme-rgb-500), 0.1) 100%);
        }
        .dark .theme-gradient-subtle {
            background: linear-gradient(135deg, rgba(var(--theme-rgb-500), 0.1) 0%, rgba(var(--theme-rgb-500), 0.15) 100%);
        }

        /* Theme background with opacity */
        .theme-bg\/10 {
            background-color: rgba(var(--theme-rgb-500), 0.1);
        }

        /* Slow spin animation for decorative rings */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 20s linear infinite;
        }

        /* Hide scrollbar but allow scrolling */
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        /* Snap scroll utilities */
        .snap-x {
            scroll-snap-type: x mandatory;
        }
        .snap-mandatory {
            scroll-snap-type: x mandatory;
        }
        .snap-start {
            scroll-snap-align: start;
        }

        /* Hover theme background */
        .hover\:theme-bg:hover {
            background-color: var(--theme-600);
        }

        /* Border transparent on hover */
        .hover\:border-transparent:hover {
            border-color: transparent;
        }

        /* Tab Button Styles for Best Escorts Section */
        .tab-button.active-tab {
            background-color: #f65c5c;
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .dark .tab-button.active-tab {
            background-color: var(--theme-600);
        }

        /* Line clamp utility */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Drop shadow utilities */
        .drop-shadow-lg {
            filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
        }

        /* Scale utilities for hover */
        .scale-90 {
            transform: scale(0.9);
        }
        .group-hover\:scale-100:hover,
        .group:hover .group-hover\:scale-100 {
            transform: scale(1);
        }

        /* Blur utilities */
        .blur-3xl {
            filter: blur(64px);
        }

        /* Aspect ratio 4/5 */
        .aspect-\[4\/5\] {
            aspect-ratio: 4 / 5;
        }

        /* Aspect ratio 16/10 for blog images */
        .aspect-\[16\/10\] {
            aspect-ratio: 16 / 10;
        }

        /* Line clamp 3 */
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Theme focus ring for form inputs */
        .theme-focus-ring:focus {
            --tw-ring-color: var(--theme-500);
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        }

        /* Group hover theme text */
        .group:hover .group-hover\:theme-text {
            color: var(--theme-500);
        }

        /* Blur 2xl */
        .blur-2xl {
            filter: blur(40px);
        }

        /* FAQ Section Styles */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .faq-item.active .faq-answer {
            max-height: 500px;
        }

        .faq-icon {
            transition: transform 0.3s ease;
        }

        .rotate-180 {
            transform: rotate(180deg);
        }

        /* FAQ Active state - add theme border */
        .faq-item.active > div {
            border-color: var(--theme-500);
        }

        /* FAQ Number badge glow on active */
        .faq-item.active .faq-question span:first-child {
            box-shadow: 0 4px 14px -2px rgba(var(--theme-rgb-500), 0.5);
        }

        /* Footer Theme Gradient */
        .theme-gradient-footer {
            background: linear-gradient(135deg, var(--theme-600) 0%, var(--theme-700) 50%, var(--theme-800) 100%);
        }

        /* Theme background with opacity for footer */
        .theme-bg\/20 {
            background-color: rgba(var(--theme-rgb-500), 0.2);
        }

        /* Width 2 for accent bar */
        .w-2 {
            width: 0.5rem;
        }

        /* Height 6 */
        .h-6 {
            height: 1.5rem;
        }

        /* Width/Height 12 for contact icons */
        .w-12 {
            width: 3rem;
        }
        .h-12 {
            height: 3rem;
        }

        /* Hover scale for contact icons */
        .group:hover .group-hover\:scale-110 {
            transform: scale(1.1);
        }

        /* Gray 950 for footer bottom */
        .bg-gray-950 {
            background-color: #030712;
        }
        .dark .dark\:bg-gray-950 {
            background-color: #030712;
        }

        /* Red 500 with opacity */
        .bg-red-500\/20 {
            background-color: rgba(239, 68, 68, 0.2);
        }

        /* Red border with opacity */
        .border-red-500\/30 {
            border-color: rgba(239, 68, 68, 0.3);
        }

        /* Text white with opacity */
        .text-white\/80 {
            color: rgba(255, 255, 255, 0.8);
        }

        /* Gap 10 */
        .gap-10 {
            gap: 2.5rem;
        }

        /* Footer Gradient Background - Theme Based */
        .footer-gradient {
            background: linear-gradient(180deg, #f30303 0%, var(--theme-800) 40%, #ea121c 100%);
        }

        /* Footer Contact Card */
        .footer-contact-card {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.625rem 0.75rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 0.625rem;
            transition: all 0.3s ease;
        }
        .footer-contact-card:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-1px);
        }

        /* Footer Icon Box */
        .footer-icon-box {
            width: 2rem;
            height: 2rem;
            border-radius: 0.375rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }
        .group:hover .footer-icon-box {
            transform: scale(1.05);
        }

        /* Theme text light for hover */
        .group-hover\:theme-text-light {
            transition: color 0.3s ease;
        }
        .group:hover .group-hover\:theme-text-light {
            color: rgba(var(--theme-rgb-300), 1);
        }

        /* White/opacity utilities for footer */
        .text-white\/90 {
            color: rgba(255, 255, 255, 0.9);
        }
        .text-white\/80 {
            color: rgba(255, 255, 255, 0.8);
        }
        .text-white\/70 {
            color: rgba(255, 255, 255, 0.7);
        }
        .text-white\/60 {
            color: rgba(255, 255, 255, 0.6);
        }
        .text-white\/50 {
            color: rgba(255, 255, 255, 0.5);
        }
        .text-white\/40 {
            color: rgba(255, 255, 255, 0.4);
        }

        /* Width 1 for accent bar */
        .w-1 {
            width: 0.25rem;
        }

        /* Truncate utility */
        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Min-width 0 */
        .min-w-0 {
            min-width: 0;
        }
        .border-white\/10 {
            border-color: rgba(255, 255, 255, 0.1);
        }
        .border-white\/20 {
            border-color: rgba(255, 255, 255, 0.2);
        }
        .bg-white\/10 {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .bg-white\/20 {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .hover\:bg-white\/20:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .bg-black\/30 {
            background-color: rgba(0, 0, 0, 0.3);
        }

        /* Red color utilities for 18+ badge */
        .text-red-400 {
            color: #f87171;
        }
        .bg-red-500\/20 {
            background-color: rgba(239, 68, 68, 0.2);
        }
        .border-red-500\/30 {
            border-color: rgba(239, 68, 68, 0.3);
        }

        /* Green utilities for WhatsApp */
        .bg-green-500 {
            background-color: #22c55e;
        }
        .hover\:bg-green-600:hover {
            background-color: #16a34a;
        }
        .group-hover\:text-green-400 {
            transition: color 0.3s ease;
        }
        .group:hover .group-hover\:text-green-400 {
            color: #4ade80;
        }

        /* Border bottom utility */
        .border-b-2 {
            border-bottom-width: 2px;
        }

        /* Aspect ratio utilities */
        .aspect-video {
            aspect-ratio: 16 / 9;
        }
        .aspect-\[21\/9\] {
            aspect-ratio: 21 / 9;
        }

        /* Transform utilities */
        .-translate-y-1\/2 {
            transform: translateY(-50%);
        }
        .translate-y-1\/2 {
            transform: translateY(50%);
        }
        .translate-x-1\/2 {
            transform: translateX(50%);
        }
        .-translate-x-1\/2 {
            transform: translateX(-50%);
        }
        .hover\:-translate-y-1:hover {
            transform: translateY(-0.25rem);
        }
        .group-hover\:translate-x-1:hover,
        .group:hover .group-hover\:translate-x-1 {
            transform: translateX(0.25rem);
        }

        /* Filter blur utilities */
        .blur-2xl {
            filter: blur(40px);
        }
        .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);
        }

        /* Resize utility */
        .resize-none {
            resize: none;
        }

        /* Focus ring offset */
        .focus\:ring-offset-0:focus {
            --tw-ring-offset-width: 0px;
        }
        .focus\:ring-offset-2:focus {
            --tw-ring-offset-width: 2px;
        }

        /* Theme background with opacity for contact page */
        .theme-bg\/10 {
            background-color: rgba(var(--theme-rgb-500), 0.1);
        }

        /* Backdrop blur */
        .backdrop-blur-sm {
            backdrop-filter: blur(4px);
        }

        /* Width 96 */
        .w-96 {
            width: 24rem;
        }

        /* Width 72 */
        .w-72 {
            width: 18rem;
        }

        /* Height 96 */
        .h-96 {
            height: 24rem;
        }

        /* Height 72 */
        .h-72 {
            height: 18rem;
        }

        /* Flex shrink 0 */
        .flex-shrink-0 {
            flex-shrink: 0;
        }

        /* Width 1.5 */
        .w-1\.5 {
            width: 0.375rem;
        }

        /* Height 1.5 */
        .h-1\.5 {
            height: 0.375rem;
        }

        /* Padding top utilities */
        .pt-20 {
            padding-top: 5rem;
        }
        .pt-24 {
            padding-top: 6rem;
        }
        .pt-28 {
            padding-top: 7rem;
        }

        /* Padding bottom utilities */
        .pb-4 {
            padding-bottom: 1rem;
        }
        .pb-6 {
            padding-bottom: 1.5rem;
        }

        /* Width 3 */
        .w-3 {
            width: 0.75rem;
        }

        /* Height 3 */
        .h-3 {
            height: 0.75rem;
        }

        /* Gap utilities */
        .gap-3 {
            gap: 0.75rem;
        }
        .gap-5 {
            gap: 1.25rem;
        }

        /* Max width utilities */
        .max-w-3xl {
            max-width: 48rem;
        }
        .max-w-4xl {
            max-width: 56rem;
        }
        .max-w-xs {
            max-width: 20rem;
        }
        .max-w-2xl {
            max-width: 42rem;
        }
        .max-w-sm {
            max-width: 24rem;
        }

        /* Column span */
        .lg\:col-span-2 {
            grid-column: span 2 / span 2;
        }
        .lg\:col-span-3 {
            grid-column: span 3 / span 3;
        }

        /* Grid columns 5 for lg */
        @media (min-width: 1024px) {
            .lg\:grid-cols-5 {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
        }

        /* Scale utilities */
        .scale-105 {
            transform: scale(1.05);
        }
        .group-hover\:scale-110:hover,
        .group:hover .group-hover\:scale-110 {
            transform: scale(1.1);
        }

        /* Line through */
        .line-through {
            text-decoration: line-through;
        }

        /* Width/Height 14 */
        .w-14 {
            width: 3.5rem;
        }
        .h-14 {
            height: 3.5rem;
        }

        /* Width/Height 16 */
        .w-16 {
            width: 4rem;
        }
        .h-16 {
            height: 4rem;
        }

        /* Height 0.5 */
        .h-0\.5 {
            height: 0.125rem;
        }

        /* Width 7 / Height 7 */
        .w-7 {
            width: 1.75rem;
        }
        .h-7 {
            height: 1.75rem;
        }

        /* Divide utilities */
        .divide-y > :not([hidden]) ~ :not([hidden]) {
            border-top-width: 1px;
        }
        .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
            border-color: #f3f4f6;
        }
        .dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
            border-color: #374151;
        }

        /* Background clip text for gradient text */
        .bg-clip-text {
            -webkit-background-clip: text;
            background-clip: text;
        }
        .text-transparent {
            color: transparent;
        }

        /* Gradient utilities */
        .from-yellow-400 {
            --tw-gradient-from: #facc15;
        }
        .from-yellow-500 {
            --tw-gradient-from: #eab308;
        }
        .to-orange-500 {
            --tw-gradient-to: #f97316;
        }
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
        }
        .bg-gradient-to-br {
            background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
        }

        /* Max width 5xl */
        .max-w-5xl {
            max-width: 64rem;
        }

        /* Text orange 500 */
        .text-orange-500 {
            color: #f97316;
        }

        /* Theme background 5% opacity */
        .theme-bg\/5 {
            background-color: rgba(var(--theme-rgb-500), 0.05);
        }

        /* Tracking wider/wide */
        .tracking-wide {
            letter-spacing: 0.025em;
        }
        .tracking-wider {
            letter-spacing: 0.05em;
        }

        /* Uppercase */
        .uppercase {
            text-transform: uppercase;
        }

        /* Green colors for dark mode */
        .dark .dark\:bg-green-900\/30 {
            background-color: rgba(20, 83, 45, 0.3);
        }
        .dark .dark\:text-green-400 {
            color: #4ade80;
        }
        .text-green-600 {
            color: #16a34a;
        }
        .bg-green-100 {
            background-color: #dcfce7;
        }

        /* Padding top 12 */
        .pt-12 {
            padding-top: 3rem;
        }

        /* Z-10 */
        .z-10 {
            z-index: 10;
        }

        /* Padding top 18 (4.5rem) */
        .pt-18 {
            padding-top: 4.5rem;
        }
        @media (min-width: 640px) {
            .sm\:pt-18 {
                padding-top: 4.5rem;
            }
        }

        /* Padding bottom 2 and 3 */
        .pb-2 {
            padding-bottom: 0.5rem;
        }
        .pb-3 {
            padding-bottom: 0.75rem;
        }
        @media (min-width: 640px) {
            .sm\:pb-3 {
                padding-bottom: 0.75rem;
            }
        }

        /* Padding y-2 */
        .py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        /* Aspect ratio 4/3 */
        .aspect-\[4\/3\] {
            aspect-ratio: 4 / 3;
        }

        /* Scale x utilities */
        .scale-x-0 {
            transform: scaleX(0);
        }
        .group-hover\:scale-x-100:hover,
        .group:hover .group-hover\:scale-x-100 {
            transform: scaleX(1);
        }

        /* Origin left */
        .origin-left {
            transform-origin: left;
        }

        /* Margin top 0.5 */
        .mt-0\.5 {
            margin-top: 0.125rem;
        }

        /* Aspect ratio 3/4 for category cards */
        .aspect-\[3\/4\] {
            aspect-ratio: 3 / 4;
        }

        /* Theme text light for hover states */
        .theme-text-light {
            color: var(--theme-300);
        }
        .group-hover\:theme-text-light {
            transition: color 0.3s ease;
        }
        .group:hover .group-hover\:theme-text-light {
            color: var(--theme-300);
        }

        /* Padding 2.5 */
        .px-2\.5 {
            padding-left: 0.625rem;
            padding-right: 0.625rem;
        }

        /* Width/Height 3.5 */
        .w-3\.5 {
            width: 0.875rem;
        }
        .h-3\.5 {
            height: 0.875rem;
        }
    </style>

    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-RDZH1KNWZG"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-RDZH1KNWZG');
    </script>