body {
        font-family: Playpen Sans, 'sans serif'
    }

    :root {
        --primary: #68e1fd;
        --gray: #838383;
    }

    /*
! tailwindcss v3.4.0 | 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: Playpen Sans, serif;
        /* 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 */
        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,
    [type='button'],
    [type='reset'],
    [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] {
        display: none;
    }

    *,
    ::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: ;
    }

    ::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: ;
    }

    .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;
        }
    }

    .fixed {
        position: fixed;
    }

    .absolute {
        position: absolute;
    }

    .relative {
        position: relative;
    }

    .inset-0 {
        inset: 0px;
    }

    .inset-4 {
        inset: 1rem;
    }

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

    .inset-y-0 {
        top: 0px;
        bottom: 0px;
    }

    .-left-9 {
        left: -2.25rem;
    }

    .bottom-2 {
        bottom: 0.5rem;
    }

    .bottom-4 {
        bottom: 1rem;
    }

    .end-auto {
        inset-inline-end: auto;
    }

    .left-0 {
        left: 0px;
    }

    .left-1\/2 {
        left: 50%;
    }

    .left-2 {
        left: 0.5rem;
    }

    .left-auto {
        left: auto;
    }

    .right-0 {
        right: 0px;
    }

    .right-2 {
        right: 0.5rem;
    }

    .right-4 {
        right: 1rem;
    }

    .right-auto {
        right: auto;
    }

    .start-0 {
        inset-inline-start: 0px;
    }

    .top-0 {
        top: 0px;
    }

    .top-2 {
        top: 0.5rem;
    }

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

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

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

    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

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

    .-mr-0 {
        margin-right: -0px;
    }

    .-mr-0\.5 {
        margin-right: -0.125rem;
    }

    .mb-0 {
        margin-bottom: 0px;
    }

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

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

    .mb-20 {
        margin-bottom: 5rem;
    }

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

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

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

    .ml-12 {
        margin-left: 3rem;
    }

    .ml-8 {
        margin-left: 2rem;
    }

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

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

    .mt-1\.5 {
        margin-top: 0.375rem;
    }

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

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

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

    .block {
        display: block;
    }

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

    .flex {
        display: flex;
    }

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

    .grid {
        display: grid;
    }

    .hidden {
        display: none;
    }

    .h-10 {
        height: 2.5rem;
    }

    .h-12 {
        height: 3rem;
    }

    .h-16 {
        height: 4rem;
    }

    .h-20 {
        height: 5rem;
    }

    .h-28 {
        height: 7rem;
    }

    .h-6 {
        height: 1.5rem;
    }

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

    .h-auto {
        height: auto;
    }

    .h-full {
        height: 100%;
    }

    .w-0 {
        width: 0px;
    }

    .w-1\/2 {
        width: 50%;
    }

    .w-1\/6 {
        width: 16.666667%;
    }

    .w-10 {
        width: 2.5rem;
    }

    .w-10\/12 {
        width: 83.333333%;
    }

    .w-12 {
        width: 3rem;
    }

    .w-16 {
        width: 4rem;
    }

    .w-20 {
        width: 5rem;
    }

    .w-28 {
        width: 7rem;
    }

    .w-40 {
        width: 10rem;
    }

    .w-6 {
        width: 1.5rem;
    }

    .w-60 {
        width: 15rem;
    }

    .w-\[100vw\] {
        width: 100vw;
    }

    .w-\[94rem\] {
        width: 94rem;
    }

    .w-full {
        width: 100%;
    }

    .max-w-full {
        max-width: 100%;
    }

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

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

    .\!translate-y-0 {
        --tw-translate-y: 0px !important;
        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)) !important;
    }

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

    .translate-y-8 {
        --tw-translate-y: 2rem;
        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-\[120\%\] {
        --tw-translate-y: 120%;
        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));
    }

    .\!scale-100 {
        --tw-scale-x: 1 !important;
        --tw-scale-y: 1 !important;
        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)) !important;
    }

    .scale-75 {
        --tw-scale-x: .75;
        --tw-scale-y: .75;
        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));
    }

    .list-disc {
        list-style-type: disc;
    }

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

    .flex-row {
        flex-direction: row;
    }

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

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

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

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

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

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

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

    .gap-16 {
        gap: 4rem;
    }

    .gap-2 {
        gap: 0.5rem;
    }

    .gap-4 {
        gap: 1rem;
    }

    .gap-6 {
        gap: 1.5rem;
    }

    .gap-8 {
        gap: 2rem;
    }

    .gap-x-2 {
        -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
    }

    .gap-x-4 {
        -moz-column-gap: 1rem;
        column-gap: 1rem;
    }

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

    .overflow-auto {
        overflow: auto;
    }

    .overflow-hidden {
        overflow: hidden;
    }

    .rounded {
        border-radius: 0.25rem;
    }

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

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

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

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

    .rounded-l {
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .rounded-r {
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }

    .border {
        border-width: 1px;
    }

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

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

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

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

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

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

    .bg-\[\#00a6a2\] {
        --tw-bg-opacity: 1;
        background-color: rgb(0 166 162 / var(--tw-bg-opacity));
    }

    .bg-\[\#00c4d7\] {
        --tw-bg-opacity: 1;
        background-color: rgb(0 196 215 / var(--tw-bg-opacity));
    }

    .bg-\[\#02d1c3\] {
        --tw-bg-opacity: 1;
        background-color: rgb(2 209 195 / var(--tw-bg-opacity));
    }

    .bg-\[\#0aa5b3\] {
        --tw-bg-opacity: 1;
        background-color: rgb(10 165 179 / var(--tw-bg-opacity));
    }

    .bg-\[\#2196f3\] {
        --tw-bg-opacity: 1;
        background-color: rgb(33 150 243 / var(--tw-bg-opacity));
    }

    .bg-\[\#f0b343\] {
        --tw-bg-opacity: 1;
        background-color: rgb(240 179 67 / var(--tw-bg-opacity));
    }

    .bg-\[\#f12a80\] {
        --tw-bg-opacity: 1;
        background-color: rgb(241 42 128 / var(--tw-bg-opacity));
    }

    .bg-\[\#f32b81\] {
        --tw-bg-opacity: 1;
        background-color: rgb(243 43 129 / var(--tw-bg-opacity));
    }

    .bg-\[\#fec494\] {
        --tw-bg-opacity: 1;
        background-color: rgb(254 196 148 / var(--tw-bg-opacity));
    }

    .bg-\[\#ff899e\] {
        --tw-bg-opacity: 1;
        background-color: rgb(255 137 158 / var(--tw-bg-opacity));
    }

    .bg-\[\#ff91e3\] {
        --tw-bg-opacity: 1;
        background-color: rgb(255 145 227 / var(--tw-bg-opacity));
    }

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

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

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

    .bg-lime-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(190 242 100 / var(--tw-bg-opacity));
    }

    .bg-neutral-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(245 245 245 / var(--tw-bg-opacity));
    }

    .bg-neutral-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(212 212 212 / var(--tw-bg-opacity));
    }

    .bg-purple-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(216 180 254 / var(--tw-bg-opacity));
    }

    .bg-red-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(252 165 165 / var(--tw-bg-opacity));
    }

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

    .bg-yellow-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(253 224 71 / var(--tw-bg-opacity));
    }

    .p-6 {
        padding: 1.5rem;
    }

    .p-8 {
        padding: 2rem;
    }

    .px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .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-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .pb-16 {
        padding-bottom: 4rem;
    }

    .pb-4 {
        padding-bottom: 1rem;
    }

    .pb-8 {
        padding-bottom: 2rem;
    }

    .ps-8 {
        padding-inline-start: 2rem;
    }

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

    .pt-4 {
        padding-top: 1rem;
    }

    .pt-6 {
        padding-top: 1.5rem;
    }

    .pt-\[96px\] {
        padding-top: 96px;
    }

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

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

    .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-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;
    }

    .font-bold {
        font-weight: 700;
    }

    .font-extrabold {
        font-weight: 800;
    }

    .font-light {
        font-weight: 300;
    }

    .font-semibold {
        font-weight: 600;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .leading-normal {
        line-height: 1.5;
    }

    .leading-relaxed {
        line-height: 1.625;
    }

    .leading-tight {
        line-height: 1.25;
    }

    .tracking-\[\.00714em\] {
        letter-spacing: .00714em;
    }

    .tracking-wide {
        letter-spacing: 0.025em;
    }

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

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

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

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

    .text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }

    .text-yellow-300 {
        --tw-text-opacity: 1;
        color: rgb(253 224 71 / var(--tw-text-opacity));
    }

    .\!opacity-100 {
        opacity: 1 !important;
    }

    .opacity-0 {
        opacity: 0;
    }

    .opacity-80 {
        opacity: 0.8;
    }

    .opacity-90 {
        opacity: 0.9;
    }

    .shadow-\[2px_2px_0_0_\#000000\] {
        --tw-shadow: 2px 2px 0 0 #000000;
        --tw-shadow-colored: 2px 2px 0 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-\[4px_4px_0_0_\#000000\] {
        --tw-shadow: 4px 4px 0 0 #000000;
        --tw-shadow-colored: 4px 4px 0 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-\[6px_6px_0_0_\#000000\] {
        --tw-shadow: 6px 6px 0 0 #000000;
        --tw-shadow-colored: 6px 6px 0 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);
    }

    .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;
    }

    .delay-100 {
        transition-delay: 100ms;
    }

    .delay-200 {
        transition-delay: 200ms;
    }

    .delay-500 {
        transition-delay: 500ms;
    }

    .duration-1000 {
        transition-duration: 1000ms;
    }

    .duration-200 {
        transition-duration: 200ms;
    }

    .duration-300 {
        transition-duration: 300ms;
    }

    .duration-700 {
        transition-duration: 700ms;
    }

    .duration-\[2000ms\] {
        transition-duration: 2000ms;
    }

    .ease-linear {
        transition-timing-function: linear;
    }

    /*! purgecss start ignore */

    .marquee {
        white-space: nowrap;
        overflow: hidden;
        animation: marquee 20s linear infinite;
    }

    .marquee:hover {
        animation-play-state: paused;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .navbar>li:hover>a:before {
        background-color: var(--primary);
    }

    /* navslider hover */
    .navslider-hover .splide__arrow {
        display: none;
    }

    .navslider-hover:hover .splide__arrow {
        display: flex;
    }

    .stroke-primary {
        stroke: var(--primary);
    }

    .grayscale {
        filter: grayscale(100%);
    }

    .hover-grayscale-0:hover .grayscale {
        filter: grayscale(0%);
    }

    /*hover img*/
    .hover-img:hover img {
        filter: brightness(103%) contrast(103%);
        opacity: .99;
    }

    /*splide*/
    .splide__slide img {
        height: auto;
    }

    /*preloader*/
    .loaded-success .preloader {
        visibility: hidden !important;
        transition: all 1s ease-in-out;
    }

    /*animated css for Wow js*/
    .animated {
        animation-duration: 1s;
        animation-duration: var(--animate-duration);
        animation-fill-mode: both
    }

    /*add custom animated css in here*/

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 100px, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .fadeInUp {
        animation-name: fadeInUp;
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translate3d(0, -100px, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .fadeInDown {
        animation-name: fadeInDown;
    }

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translate3d(-100px, 0, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .fadeInLeft {
        animation-name: fadeInLeft;
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translate3d(100px, 0, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .fadeInRight {
        animation-name: fadeInRight;
    }

    @keyframes flipInX {
        from {
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            animation-timing-function: ease-in;
            opacity: 0;
        }

        40% {
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            animation-timing-function: ease-in;
        }

        60% {
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            opacity: 1;
        }

        80% {
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        }

        to {
            transform: perspective(400px);
        }
    }

    .flipInX {
        backface-visibility: visible !important;
        animation-name: flipInX;
    }

    /* // splidejs */
    .splide__container {
        box-sizing: border-box;
        position: relative
    }

    .splide__list {
        backface-visibility: hidden;
        display: flex;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important
    }

    .splide.is-initialized:not(.is-active) .splide__list {
        display: block
    }

    .splide__pagination {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        pointer-events: none
    }

    .splide__pagination li {
        display: inline-block;
        line-height: 1;
        list-style-type: none;
        margin: 0;
        pointer-events: auto
    }

    .splide__progress__bar {
        width: 0
    }

    .splide {
        position: relative;
        visibility: hidden
    }

    .splide.is-initialized,
    .splide.is-rendered {
        visibility: visible
    }

    .splide__slide {
        backface-visibility: hidden;
        box-sizing: border-box;
        flex-shrink: 0;
        list-style-type: none !important;
        margin: 0;
        position: relative
    }

    .splide__slide img {
        vertical-align: bottom
    }

    .splide__spinner {
        animation: splide-loading 1s linear infinite;
        border: 2px solid #999;
        border-left-color: transparent;
        border-radius: 50%;
        bottom: 0;
        contain: strict;
        display: inline-block;
        height: 20px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px
    }

    .splide__sr {
        clip: rect(0 0 0 0);
        border: 0;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px
    }

    .splide__toggle.is-active .splide__toggle__play,
    .splide__toggle__pause {
        display: none
    }

    .splide__toggle.is-active .splide__toggle__pause {
        display: inline
    }

    .splide__track {
        overflow: hidden;
        position: relative;
        z-index: 0
    }

    @keyframes splide-loading {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(1turn)
        }
    }

    .splide__track--draggable {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .splide__track--fade>.splide__list {
        display: block
    }

    .splide__track--fade>.splide__list>.splide__slide {
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        z-index: 0
    }

    .splide__track--fade>.splide__list>.splide__slide.is-active {
        opacity: 1;
        position: relative;
        z-index: 1
    }

    .splide--rtl {
        direction: rtl
    }

    .splide__track--ttb>.splide__list {
        display: block
    }

    .splide__arrow {
        align-items: center;
        background: #ccc;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        height: 2em;
        justify-content: center;
        opacity: .7;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 2em;
        z-index: 1
    }

    .splide__arrow svg {
        fill: #000;
        height: 1.2em;
        width: 1.2em
    }

    .splide__arrow:hover:not(:disabled) {
        opacity: .9
    }

    .splide__arrow:disabled {
        opacity: .3
    }

    .splide__arrow:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px
    }

    .splide__arrow--prev {
        left: 1em
    }

    .splide__arrow--prev svg {
        transform: scaleX(-1)
    }

    .splide__arrow--next {
        right: 1em
    }

    .splide.is-focus-in .splide__arrow:focus {
        outline: 3px solid var(--primary);
        outline-offset: 3px
    }

    .splide__pagination {
        bottom: .5em;
        left: 0;
        padding: 0 1em;
        position: absolute;
        right: 0;
        z-index: 1
    }

    .splide__pagination__page {
        background: var(--gray);
        border: 0;
        border-radius: 50%;
        display: inline-block;
        height: 8px;
        margin: 3px;
        opacity: .7;
        padding: 0;
        position: relative;
        transition: transform .2s linear;
        width: 8px
    }

    .splide__pagination__page.is-active {
        background: #000;
        transform: scale(1.4);
        z-index: 1
    }

    .splide__pagination__page:hover {
        cursor: pointer;
        opacity: .9
    }

    .splide__pagination__page:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px
    }

    .splide.is-focus-in .splide__pagination__page:focus {
        outline: 3px solid var(--primary);
        outline-offset: 3px
    }

    .splide__progress__bar {
        background: var(--gray);
        height: 3px
    }

    .splide__slide {
        -webkit-tap-highlight-color: transparent
    }

    .splide__slide:focus {
        outline: 0
    }

    @supports(outline-offset:-3px) {
        .splide__slide:focus-visible {
            outline: 3px solid var(--primary);
            outline-offset: -3px
        }
    }

    @media screen and (-ms-high-contrast:none) {
        .splide__slide:focus-visible {
            border: 3px solid var(--primary);
        }
    }

    @supports(outline-offset:-3px) {
        .splide.is-focus-in .splide__slide:focus {
            outline: 3px solid var(--primary);
            outline-offset: -3px
        }
    }

    @media screen and (-ms-high-contrast:none) {
        .splide.is-focus-in .splide__slide:focus {
            border: 3px solid var(--primary);
        }

        .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
            border-color: var(--primary);
        }
    }

    .splide__toggle {
        cursor: pointer
    }

    .splide__toggle:focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 3px
    }

    .splide.is-focus-in .splide__toggle:focus {
        outline: 3px solid var(--primary);
        outline-offset: 3px
    }

    .splide__track--nav>.splide__list>.splide__slide {
        border: 3px solid transparent;
        cursor: pointer
    }

    .splide__track--nav>.splide__list>.splide__slide.is-active img {
        border: 3px solid #ffffff
    }

    .splide__arrows--rtl .splide__arrow--prev {
        left: auto;
        right: 1em
    }

    .splide__arrows--rtl .splide__arrow--prev svg {
        transform: scaleX(1)
    }

    .splide__arrows--rtl .splide__arrow--next {
        left: 1em;
        right: auto
    }

    .splide__arrows--rtl .splide__arrow--next svg {
        transform: scaleX(-1)
    }

    .splide__arrows--ttb .splide__arrow {
        left: 50%;
        transform: translate(-50%)
    }

    .splide__arrows--ttb .splide__arrow--prev {
        top: 1em
    }

    .splide__arrows--ttb .splide__arrow--prev svg {
        transform: rotate(-90deg)
    }

    .splide__arrows--ttb .splide__arrow--next {
        bottom: 1em;
        top: auto
    }

    .splide__arrows--ttb .splide__arrow--next svg {
        transform: rotate(90deg)
    }

    .splide__pagination--ttb {
        bottom: 0;
        display: flex;
        flex-direction: column;
        left: auto;
        padding: 1em 0;
        right: .5em;
        top: 0
    }

    .gal-cover {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* glightbox */
    .glightbox-container {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999 !important;
        touch-action: none;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        backface-visibility: hidden;
        outline: 0;
        overflow: hidden;
    }

    .glightbox-container.inactive {
        display: none;
    }

    .glightbox-container .gcontainer {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 9999;
        overflow: hidden;
    }

    .glightbox-container .gslider {
        transition: transform 0.4s ease;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex !important;
        justify-content: center;
        align-items: center;
        transform: translate3d(0, 0, 0);
    }

    .glightbox-container .gslide {
        width: 100%;
        position: absolute;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
    }

    .glightbox-container .gslide.current {
        opacity: 1;
        z-index: 99999;
        position: relative;
    }

    .glightbox-container .gslide.prev {
        opacity: 1;
        z-index: 9999;
    }

    .glightbox-container .gslide-inner-content {
        width: 100%;
    }

    .glightbox-container .ginner-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: 100%;
        margin: auto;
        height: 100vh;
    }

    .glightbox-container .ginner-container.gvideo-container {
        width: 100%;
    }

    .glightbox-container .ginner-container.desc-bottom,
    .glightbox-container .ginner-container.desc-top {
        flex-direction: column;
    }

    .glightbox-container .ginner-container.desc-left,
    .glightbox-container .ginner-container.desc-right {
        max-width: 100% !important;
    }

    .gslide iframe,
    .gslide video {
        outline: 0 !important;
        border: none;
        min-height: 165px;
        -webkit-overflow-scrolling: touch;
        touch-action: auto;
    }

    .gslide:not(.current) {
        pointer-events: none;
    }

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

    .gslide-image img {
        max-height: 100vh;
        display: block;
        padding: 0;
        float: none;
        outline: 0;
        border: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        max-width: 100vw;
        width: auto;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        touch-action: none;
        margin: auto;
        min-width: 200px;
    }

    .desc-bottom .gslide-image img,
    .desc-top .gslide-image img {
        width: auto;
    }

    .desc-left .gslide-image img,
    .desc-right .gslide-image img {
        width: auto;
        max-width: 100%;
    }

    .gslide-image img.zoomable {
        position: relative;
    }

    .gslide-image img.dragging {
        cursor: grabbing !important;
        transition: none;
    }

    .gslide-video {
        position: relative;
        max-width: 100vh;
        width: 100% !important;
    }

    .gslide-video .gvideo-wrapper {
        width: 100%;
        margin: auto;
    }

    .gslide-video::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 0, 0, 0.34);
        display: none;
    }

    .gslide-video.playing::before {
        display: none;
    }

    .gslide-video.fullscreen {
        max-width: 100% !important;
        min-width: 100%;
        height: 75vh;
    }

    .gslide-video.fullscreen video {
        max-width: 100% !important;
        width: 100% !important;
    }

    .gslide-inline {
        background: #fff;
        text-align: left;
        max-height: calc(100vh - 40px);
        overflow: auto;
        max-width: 100%;
    }

    .gslide-inline .ginlined-content {
        padding: 20px;
        width: 100%;
    }

    .gslide-inline .dragging {
        cursor: grabbing !important;
        transition: none;
    }

    .ginlined-content {
        overflow: auto;
        display: block !important;
        opacity: 1;
    }

    .gslide-external {
        display: flex;
        width: 100%;
        min-width: 100%;
        background: #fff;
        padding: 0;
        overflow: auto;
        max-height: 75vh;
        height: 100%;
    }

    .gslide-media {
        display: flex;
        width: auto;
    }

    .zoomed .gslide-media {
        box-shadow: none !important;
    }

    .desc-bottom .gslide-media,
    .desc-top .gslide-media {
        margin: 0 auto;
        flex-direction: column;
    }

    .gslide-description {
        position: relative;
        flex: 1 0 100%;
    }

    .gslide-description.description-left,
    .gslide-description.description-right {
        max-width: 100%;
    }

    .gslide-description.description-bottom,
    .gslide-description.description-top {
        margin: 0 auto;
        width: 100%;
    }

    .gslide-description p {
        margin-bottom: 12px;
    }

    .gslide-description p:last-child {
        margin-bottom: 0;
    }

    .zoomed .gslide-description {
        display: none;
    }

    .glightbox-button-hidden {
        display: none;
    }

    .glightbox-mobile .glightbox-container .gslide-description {
        height: auto !important;
        width: 100%;
        background: 0 0;
        position: absolute;
        bottom: 0;
        padding: 19px 11px;
        max-width: 100vw !important;
        order: 2 !important;
        max-height: 78vh;
        overflow: auto !important;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0,
                rgba(0, 0, 0, 0.75) 100%);
        transition: opacity 0.3s linear;
        padding-bottom: 50px;
    }

    .glightbox-mobile .glightbox-container .gslide-title {
        color: #fff;
        font-size: 1em;
    }

    .glightbox-mobile .glightbox-container .gslide-desc {
        color: #a1a1a1;
    }

    .glightbox-mobile .glightbox-container .gslide-desc a {
        color: #fff;
        font-weight: 700;
    }

    .glightbox-mobile .glightbox-container .gslide-desc * {
        color: inherit;
    }

    .glightbox-mobile .glightbox-container .gslide-desc string {
        color: #fff;
    }

    .glightbox-mobile .glightbox-container .gslide-desc .desc-more {
        color: #fff;
        opacity: 0.4;
    }

    .gdesc-open .gslide-media {
        transition: opacity 0.5s ease;
        opacity: 0.4;
    }

    .gdesc-open .gdesc-inner {
        padding-bottom: 30px;
    }

    .gdesc-closed .gslide-media {
        transition: opacity 0.5s ease;
        opacity: 1;
    }

    .greset {
        transition: all 0.3s ease;
    }

    .gabsolute {
        position: absolute;
    }

    .grelative {
        position: relative;
    }

    .glightbox-desc {
        display: none !important;
    }

    .glightbox-open {
        overflow: hidden;
    }

    .gloader {
        height: 25px;
        width: 25px;
        animation: lightboxLoader 0.8s infinite linear;
        border: 2px solid #fff;
        border-right-color: transparent;
        border-radius: 50%;
        position: absolute;
        display: block;
        z-index: 9999;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 47%;
    }

    .goverlay {
        width: 100%;
        height: calc(100vh + 1px);
        position: fixed;
        top: -1px;
        left: 0;
        background: #000;
        will-change: opacity;
    }

    .glightbox-mobile .goverlay {
        background: #000;
    }

    .gclose,
    .gnext,
    .gprev {
        z-index: 99999;
        cursor: pointer;
        width: 26px;
        height: 44px;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .gclose svg,
    .gnext svg,
    .gprev svg {
        display: block;
        width: 25px;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .gclose.disabled,
    .gnext.disabled,
    .gprev.disabled {
        opacity: 0.1;
    }

    .gclose .garrow,
    .gnext .garrow,
    .gprev .garrow {
        stroke: #fff;
    }

    .gbtn.focused {
        outline: 2px solid #0f3d81;
    }

    iframe.wait-autoplay {
        opacity: 0;
    }

    .glightbox-closing .gclose,
    .glightbox-closing .gnext,
    .glightbox-closing .gprev {
        opacity: 0 !important;
    }

    .glightbox-clean .gslide-description {
        background: #fff;
    }

    .glightbox-clean .gdesc-inner {
        padding: 22px 20px;
    }

    .glightbox-clean .gslide-title {
        font-size: 1em;
        font-weight: 400;
        font-family: arial;
        color: #000;
        margin-bottom: 19px;
        line-height: 1.4em;
    }

    .glightbox-clean .gslide-desc {
        font-size: 0.86em;
        margin-bottom: 0;
        font-family: arial;
        line-height: 1.4em;
    }

    .glightbox-clean .gslide-video {
        background: #000;
    }

    .glightbox-clean .gclose,
    .glightbox-clean .gnext,
    .glightbox-clean .gprev {
        background-color: rgba(0, 0, 0, 0.75);
        border-radius: 4px;
    }

    .glightbox-clean .gclose path,
    .glightbox-clean .gnext path,
    .glightbox-clean .gprev path {
        fill: #fff;
    }

    .glightbox-clean .gprev {
        position: absolute;
        top: -100%;
        left: 30px;
        width: 40px;
        height: 50px;
    }

    .glightbox-clean .gnext {
        position: absolute;
        top: -100%;
        right: 30px;
        width: 40px;
        height: 50px;
    }

    .glightbox-clean .gclose {
        width: 35px;
        height: 35px;
        top: 15px;
        right: 10px;
        position: absolute;
    }

    .glightbox-clean .gclose svg {
        width: 18px;
        height: auto;
    }

    .glightbox-clean .gclose:hover {
        opacity: 1;
    }

    .gfadeIn {
        animation: gfadeIn 0.5s ease;
    }

    .gfadeOut {
        animation: gfadeOut 0.5s ease;
    }

    .gslideOutLeft {
        animation: gslideOutLeft 0.3s ease;
    }

    .gslideInLeft {
        animation: gslideInLeft 0.3s ease;
    }

    .gslideOutRight {
        animation: gslideOutRight 0.3s ease;
    }

    .gslideInRight {
        animation: gslideInRight 0.3s ease;
    }

    .gzoomIn {
        animation: gzoomIn 0.5s ease;
    }

    .gzoomOut {
        animation: gzoomOut 0.5s ease;
    }

    @keyframes lightboxLoader {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes gfadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes gfadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes gslideInLeft {
        from {
            opacity: 0;
            transform: translate3d(-60%, 0, 0);
        }

        to {
            visibility: visible;
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }

    @keyframes gslideOutLeft {
        from {
            opacity: 1;
            visibility: visible;
            transform: translate3d(0, 0, 0);
        }

        to {
            transform: translate3d(-60%, 0, 0);
            opacity: 0;
            visibility: hidden;
        }
    }

    @keyframes gslideInRight {
        from {
            opacity: 0;
            visibility: visible;
            transform: translate3d(60%, 0, 0);
        }

        to {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }

    @keyframes gslideOutRight {
        from {
            opacity: 1;
            visibility: visible;
            transform: translate3d(0, 0, 0);
        }

        to {
            transform: translate3d(60%, 0, 0);
            opacity: 0;
        }
    }

    @keyframes gzoomIn {
        from {
            opacity: 0;
            transform: scale3d(0.3, 0.3, 0.3);
        }

        to {
            opacity: 1;
        }
    }

    @keyframes gzoomOut {
        from {
            opacity: 1;
        }

        50% {
            opacity: 0;
            transform: scale3d(0.3, 0.3, 0.3);
        }

        to {
            opacity: 0;
        }
    }

    @media (min-width: 769px) {
        .glightbox-container .ginner-container {
            width: auto;
            height: auto;
            flex-direction: row;
        }

        .glightbox-container .ginner-container.desc-top .gslide-description {
            order: 0;
        }

        .glightbox-container .ginner-container.desc-top .gslide-image,
        .glightbox-container .ginner-container.desc-top .gslide-image img {
            order: 1;
        }

        .glightbox-container .ginner-container.desc-left .gslide-description {
            order: 0;
        }

        .glightbox-container .ginner-container.desc-left .gslide-image {
            order: 1;
        }

        .gslide-image img {
            max-height: 97vh;
            max-width: 100%;
        }

        .gslide-image img.zoomable {
            cursor: zoom-in;
        }

        .zoomed .gslide-image img.zoomable {
            cursor: grab;
        }

        .gslide-inline {
            max-height: 95vh;
        }

        .gslide-external {
            max-height: 100vh;
        }

        .gslide-description.description-left,
        .gslide-description.description-right {
            max-width: 275px;
        }

        .glightbox-open {
            height: auto;
        }

        .goverlay {
            background: rgba(0, 0, 0, 0.92);
        }

        .glightbox-clean .gslide-media {
            box-shadow: 1px 2px 9px 0 rgba(0, 0, 0, 0.65);
        }

        .glightbox-clean .description-left .gdesc-inner,
        .glightbox-clean .description-right .gdesc-inner {
            position: absolute;
            height: 100%;
            overflow-y: auto;
        }

        .glightbox-clean .gclose,
        .glightbox-clean .gnext,
        .glightbox-clean .gprev {
            background-color: rgba(0, 0, 0, 0.32);
        }

        .glightbox-clean .gclose:hover,
        .glightbox-clean .gnext:hover,
        .glightbox-clean .gprev:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .glightbox-clean .gprev {
            top: 45%;
        }

        .glightbox-clean .gnext {
            top: 45%;
        }
    }

    @media (min-width: 992px) {
        .glightbox-clean .gclose {
            opacity: 0.7;
            right: 20px;
        }
    }

    @media screen and (max-height: 420px) {
        .goverlay {
            background: #000;
        }
    }

    /*! purgecss end ignore */

    .hover\:-translate-y-0:hover {
        --tw-translate-y: -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));
    }

    .hover\:-translate-y-0\.5:hover {
        --tw-translate-y: -0.125rem;
        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\:bg-black:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
    }

    .hover\:bg-yellow-300:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(253 224 71 / var(--tw-bg-opacity));
    }

    .hover\:text-\[\#00a6a2\]:hover {
        --tw-text-opacity: 1;
        color: rgb(0 166 162 / var(--tw-text-opacity));
    }

    .hover\:opacity-100:hover {
        opacity: 1;
    }

    .hover\:opacity-20:hover {
        opacity: 0.2;
    }

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

    .focus\:-translate-x-0\.5:focus {
        --tw-translate-x: -0.125rem;
        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));
    }

    .focus\:-translate-y-0:focus {
        --tw-translate-y: -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));
    }

    .focus\:-translate-y-0\.5:focus {
        --tw-translate-y: -0.125rem;
        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));
    }

    .focus\:shadow-\[4px_4px_0_0_\#000000\]:focus {
        --tw-shadow: 4px 4px 0 0 #000000;
        --tw-shadow-colored: 4px 4px 0 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);
    }

    .focus\:outline-none:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    .focus\:ring-0: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(0px + 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);
    }

    @media not all and (min-width: 1024px) {

        .max-lg\:fixed {
            position: fixed;
        }

        .max-lg\:inset-y-0 {
            top: 0px;
            bottom: 0px;
        }

        .max-lg\:left-0 {
            left: 0px;
        }

        .max-lg\:z-50 {
            z-index: 50;
        }

        .max-lg\:flex {
            display: flex;
        }

        .max-lg\:h-full {
            height: 100%;
        }

        .max-lg\:w-72 {
            width: 18rem;
        }

        .max-lg\:-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));
        }

        .max-lg\:flex-col {
            flex-direction: column;
        }

        .max-lg\:gap-10 {
            gap: 2.5rem;
        }

        .max-lg\:overflow-auto {
            overflow: auto;
        }

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

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

        .max-lg\:border-black {
            --tw-border-opacity: 1;
            border-color: rgb(0 0 0 / var(--tw-border-opacity));
        }

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

        .max-lg\:bg-white {
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        }

        .max-lg\:px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .max-lg\:py-3 {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        .max-lg\:opacity-0 {
            opacity: 0;
        }
    }

    @media not all and (min-width: 768px) {

        .max-md\:order-2 {
            order: 2;
        }

        .max-md\:mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .max-md\:hidden {
            display: none;
        }

        .max-md\:justify-center {
            justify-content: center;
        }

        .max-md\:py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .max-md\:text-center {
            text-align: center;
        }
    }

    @media not all and (min-width: 640px) {

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

        .max-sm\:py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .max-sm\:text-center {
            text-align: center;
        }
    }

    @media (min-width: 640px) {

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

        .sm\:flex-row {
            flex-direction: row;
        }

        .sm\:gap-8 {
            gap: 2rem;
        }
    }

    @media (min-width: 768px) {

        .md\:mb-16 {
            margin-bottom: 4rem;
        }

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

        .md\:block {
            display: block;
        }

        .md\:w-1\/2 {
            width: 50%;
        }

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

        .md\:flex-row {
            flex-direction: row;
        }

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

        .md\:gap-8 {
            gap: 2rem;
        }

        .md\:pb-0 {
            padding-bottom: 0px;
        }

        .md\:pe-20 {
            padding-inline-end: 5rem;
        }

        .md\:ps-0 {
            padding-inline-start: 0px;
        }
    }

    @media (min-width: 1024px) {

        .lg\:mr-8 {
            margin-right: 2rem;
        }

        .lg\:mt-0 {
            margin-top: 0px;
        }

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

        .lg\:hidden {
            display: none;
        }

        .lg\:w-5\/12 {
            width: 41.666667%;
        }

        .lg\:w-7\/12 {
            width: 58.333333%;
        }

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

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

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

        .lg\:gap-8 {
            gap: 2rem;
        }

        .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\:px-12 {
            padding-left: 3rem;
            padding-right: 3rem;
        }

        .lg\:px-8 {
            padding-left: 2rem;
            padding-right: 2rem;
        }

        .lg\:py-12 {
            padding-top: 3rem;
            padding-bottom: 3rem;
        }

        .lg\:py-16 {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }

        .lg\:py-6 {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .lg\:pl-0 {
            padding-left: 0px;
        }

        .lg\:pl-12 {
            padding-left: 3rem;
        }

        .lg\:pr-12 {
            padding-right: 3rem;
        }

        .lg\:text-5xl {
            font-size: 3rem;
            line-height: 1;
        }
    }

    @media (min-width: 1280px) {

        .xl\:py-16 {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }

        .xl\:pr-12 {
            padding-right: 3rem;
        }
    }

    .\[\&\.active\]\:bg-yellow-300.active {
        --tw-bg-opacity: 1;
        background-color: rgb(253 224 71 / var(--tw-bg-opacity));
    }

    .\[\&\.active\]\:text-\[\#00a6a2\].active {
        --tw-text-opacity: 1;
        color: rgb(0 166 162 / var(--tw-text-opacity));
    }

    .\[\&\.active\]\:text-black.active {
        --tw-text-opacity: 1;
        color: rgb(0 0 0 / var(--tw-text-opacity));
    }

    .\[\&\.show\]\:\!flex.show {
        display: flex !important;
    }

    .\[\&\.show\]\:\!hidden.show {
        display: none !important;
    }

    .\[\&\.show\]\:\!translate-y-0.show {
        --tw-translate-y: 0px !important;
        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)) !important;
    }

    .\[\&\.show\]\:\!opacity-100.show {
        opacity: 1 !important;
    }

    @media not all and (min-width: 1024px) {

        .max-lg\:\[\&\.show\]\:inset-0.show {
            inset: 0px;
        }

        .max-lg\:\[\&\.show\]\:translate-x-0.show {
            --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));
        }

        .max-lg\:\[\&\.show\]\:opacity-70.show {
            opacity: 0.7;
        }
    }

    .\[\&\.show_\.btn-close\]\:\!block.show .btn-close {
        display: block !important;
    }

    .\[\&\.show_\.btn-open\]\:\!hidden.show .btn-open {
        display: none !important;
    }