@font-face {
    font-family: Vazir;
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/vazir/Vazir-Thin.woff) format("truetype");
}
@font-face {
    font-family: Vazir;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/vazir/Vazir-Light.woff) format("truetype");
}
@font-face {
    font-family: Vazir;
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/vazir/Vazir-Medium.woff) format("truetype");
}
@font-face {
    font-family: Vazir;
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/vazir/Vazir-Medium.woff) format("truetype");
}

@font-face {
    font-family: Vazir;
    font-display: swap;
    font-weight: 700;
    src: url(../fonts/vazir/Vazir-Bold.woff) format("truetype");
}

@font-face {
    font-family: Vazir;
    font-display: swap;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/vazir/Vazir-Bold.woff) format("truetype");
}

@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/vazir/Vazir-Bold.woff) format("truetype");
}

/* ---------- */
@font-face {
    font-family: Iransans;
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/iransans/IRANSansWeb_UltraLight.woff) format("truetype");
}
@font-face {
    font-family: Iransans;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/iransans/IRANSansWeb_Light.woff) format("truetype");
}
@font-face {
    font-family: Iransans;
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/iransans/IRANSansWeb_Medium.woff) format("truetype");
}
@font-face {
    font-family: Iransans;
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/iransans/IRANSansWeb_Medium.woff) format("truetype");
}

@font-face {
    font-family: Iransans;
    font-display: swap;
    font-weight: 700;
    src: url(../fonts/iransans/IRANSansWeb_Bold.woff) format("truetype");
}

@font-face {
    font-family: Iransans;
    font-display: swap;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/iransans/IRANSansWeb_Bold.woff) format("truetype");
}

@font-face {
    font-family: Iransans;
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/iransans/IRANSansWeb_Bold.woff) format("truetype");
}

@font-face {
    font-family: Kalameh;
    font-display: swap;
    src:
        url(../fonts/KalamehWebFaNum-Regular.woff2) format("woff2"),
        url(../fonts/KalamehWebFaNum-Regular.woff) format("woff");
}

@font-face {
    font-family: Kalameh Medium;
    font-display: swap;
    src:
        url(../fonts/KalamehWebFaNum-Medium.woff2) format("woff2"),
        url(../fonts/KalamehWebFaNum-Medium.woff) format("woff");
}

@font-face {
    font-family: Kalameh SemiBold;
    font-display: swap;
    src:
        url(../fonts/KalamehWebFaNum-SemiBold.woff2) format("woff2"),
        url(../fonts/KalamehWebFaNum-SemiBold.woff) format("woff");
}

@font-face {
    font-family: Nunito;
    font-display: swap;
    src: url(../fonts/Nunito/woff2/Nunito-Regular.woff2) format("woff2");
}

@font-face {
    font-family: Iranyekan;
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/yekan/iranyekanwebthinfanum.ttf) format("truetype");
}
@font-face {
    font-family: Iranyekan;
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/yekan/iranyekanweblightfanum.ttf) format("truetype");
}
@font-face {
    font-family: Iranyekan;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/yekan/iranyekanwebregularfanum.ttf) format("truetype");
}
@font-face {
    font-family: Iranyekan;
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/yekan/iranyekanwebmediumfanum.ttf) format("truetype");
}
@font-face {
    font-family: Iranyekan;
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/yekan/iranyekanwebboldfanum.ttf) format("truetype");
}
@font-face {
    font-family: Iranyekan;
    font-display: swap;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/yekan/iranyekanwebextraboldfanum.ttf) format("truetype");
}
@font-face {
    font-family: Iranyekan;
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/yekan/iranyekanwebblackfanum.ttf) format("truetype");
}

@font-face {
    font-family: IransansDgit;
    font-display: swap;
    src: url(../fonts/iransans/IRANSans-FaNumb.ttf) format("truetype");
    unicode-range: U+0030-0039, U+0660-0669, U+06F0-06F9;
}

html,
body {
    direction: rtl;
    font-family: "Vazir", sans-serif;
    background-color: #f3f3f3;
}

.tns-outer {
    padding: 0 !important;
}

.tns-outer [hidden] {
    display: none !important;
}

.tns-outer [aria-controls],
.tns-outer [data-action] {
    cursor: pointer;
}

.tns-slider {
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
}

.tns-slider > .tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tns-horizontal.tns-subpixel {
    white-space: nowrap;
}

.tns-horizontal.tns-subpixel > .tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

.tns-horizontal.tns-no-subpixel:after {
    content: "";
    display: table;
    clear: both;
}

.tns-horizontal.tns-no-subpixel > .tns-item {
    float: left;
}

.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
    margin-right: -100%;
}

.tns-no-calc {
    position: relative;
    left: 0;
}

.tns-gallery {
    position: relative;
    left: 0;
    min-height: 1px;
}

.tns-gallery > .tns-item {
    position: absolute;
    left: -100%;
    -webkit-transition:
        transform 0s,
        opacity 0s;
    -moz-transition:
        transform 0s,
        opacity 0s;
    transition:
        transform 0s,
        opacity 0s;
}

.tns-gallery > .tns-slide-active {
    position: relative;
    left: auto !important;
}

.tns-gallery > .tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}

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

.tns-lazy-img {
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    opacity: 0.6;
}

.tns-lazy-img.tns-complete {
    opacity: 1;
}

.tns-ah {
    -webkit-transition: height 0s;
    -moz-transition: height 0s;
    transition: height 0s;
}

.tns-ovh {
    overflow: hidden;
}

.tns-visually-hidden {
    position: absolute;
    left: -10000em;
}

.tns-transparent {
    opacity: 0;
    visibility: hidden;
}

.tns-fadeIn {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 0;
}

.tns-normal,
.tns-fadeOut {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1;
}

.tns-vpfix {
    white-space: nowrap;
}

.tns-vpfix > div,
.tns-vpfix > li {
    display: inline-block;
}

.tns-t-subp2 {
    margin: 0 auto;
    width: 310px;
    position: relative;
    height: 10px;
    overflow: hidden;
}

.tns-t-ct {
    width: 2333.3333333%;
    width: -webkit-calc(100% * 70 / 3);
    width: -moz-calc(100% * 70 / 3);
    width: calc(100% * 70 / 3);
    position: absolute;
    right: 0;
}

.tns-t-ct:after {
    content: "";
    display: table;
    clear: both;
}

.tns-t-ct > div {
    width: 1.4285714%;
    width: -webkit-calc(100% / 70);
    width: -moz-calc(100% / 70);
    width: calc(100% / 70);
    height: 10px;
    float: left;
}

/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/animate.css ***!
  \*****************************************************************************************************************/
/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

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

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

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

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

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

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

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

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

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

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

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

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

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

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

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

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

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

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

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

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}

/*!*******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/style.css (1) ***!
  \*******************************************************************************************************************/
/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;

@layer theme {
    :root {
        --font-heading: Vazir, sans-serif;
        --font-body: Vazir, sans-serif;
        --font-num: Vazir;
    }
    :host {
        --color-slate-300: oklch(0.869 0.022 252.894);
        --color-gray-200: oklch(0.928 0.006 264.531);
        --color-black: #000;
        --color-white: #ffffff;
        --spacing: 0.25rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --font-weight-light: 300;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        --leading-tight: 1.25;
        --leading-large: 1.5;
        --radius-xs: 0.125rem;
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 1rem;
        --blur-sm: 8px;
        --font-heading: Vazir, sans-serif;
        --font-body: Vazir, sans-serif;
        --font-num: Vazir;
        --default-transition-duration: 150ms;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-font-num: var(--font-num);
        --default-font-feature-settings: var(
            --font-sans--font-feature-settings
        );
        --default-font-variation-settings: var(
            --font-sans--font-variation-settings
        );
        --default-mono-font-family: var(--font-mono);
        --default-mono-font-feature-settings: var(
            --font-mono--font-feature-settings
        );
        --default-mono-font-variation-settings: var(
            --font-mono--font-variation-settings
        );
        --color-primary: #1a315b;
        --color-dark-text: #79808a;
        --color-dark: #111722;
        --color-stroke: #e5e7eb;
        --background-image-noise-pattern: url(src/images/NoisePattern.svg);
        --drop-shadow-light: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.1));
    }
}

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }

    html,
    :host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: var(
            --default-font-family,
            ui-sans-serif,
            system-ui,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji"
        );
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }

    body {
        line-height: inherit;
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }

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

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

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

    b,
    strong {
        font-weight: bolder;
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(
            --default-mono-font-family,
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace
        );
        font-feature-settings: var(
            --default-mono-font-feature-settings,
            normal
        );
        font-variation-settings: var(
            --default-mono-font-variation-settings,
            normal
        );
        font-size: 1em;
    }

    small {
        font-size: 80%;
    }

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

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

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

    :-moz-focusring {
        outline: auto;
    }

    progress {
        vertical-align: baseline;
    }

    summary {
        display: list-item;
    }

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

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

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

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

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

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

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

    ::placeholder {
        opacity: 1;
        color: color-mix(in oklab, currentColor 50%, transparent);
    }

    textarea {
        resize: vertical;
    }

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

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

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

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

    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-year-field,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute-field,
    ::-webkit-datetime-edit-second-field,
    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }

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

    button,
    input:where([type="button"], [type="reset"], [type="submit"]),
    ::file-selector-button {
        appearance: button;
    }

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

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

@layer utilities {
    .title {
        background: linear-gradient(
            180deg,
            rgba(74, 108, 247, 0.4) 0%,
            rgba(74, 108, 247, 0) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        opacity: 0.2;
        position: absolute;
        top: calc(var(--spacing) * 0);
        left: calc(1 / 2 * 100%);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        font-size: 40px;
        --tw-leading: 1;
        line-height: 1 !important;
        --tw-font-weight: var(--font-weight-extrabold);
        font-weight: var(--font-weight-extrabold);
    }

    @media (min-width: 540px) {
        .title {
            font-size: 60px;
        }
    }

    @media (min-width: 992px) {
        .title {
            font-size: 95px;
            background-color: #1a315b6f;
        }
    }

    .sticky {
        position: fixed !important;
        z-index: 9999 !important;
        background-color: var(--color-white) !important;
        padding-block: calc(var(--spacing) * 2) !important;
        --tw-backdrop-blur: blur(5px);
        -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) !important;
        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) !important;
        transition-property:
            color,
            background-color,
            border-color,
            outline-color,
            text-decoration-color,
            fill,
            stroke,
            --tw-gradient-from,
            --tw-gradient-via,
            --tw-gradient-to,
            opacity,
            box-shadow,
            transform,
            translate,
            scale,
            rotate,
            filter,
            -webkit-backdrop-filter,
            backdrop-filter !important;
        transition-timing-function: var(
            --tw-ease,
            var(--default-transition-timing-function)
        ) !important;
        transition-duration: var(
            --tw-duration,
            var(--default-transition-duration)
        ) !important;
        box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
    }

    .sticky:is(.dark *) {
        background-color: var(--color-dark) !important;
    }

    @media (min-width: 992px) {
        .sticky .navbar > li > a {
            padding-block: calc(var(--spacing) * 5);
        }
    }

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

    .absolute {
        position: absolute;
    }

    .fixed {
        position: fixed;
    }

    .relative {
        position: relative;
    }

    .static {
        position: static;
    }

    .sticky {
        position: sticky;
    }

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

    .-top-6 {
        top: calc(var(--spacing) * -6);
    }

    .top-0 {
        top: calc(var(--spacing) * 0);
    }

    .top-1\/2 {
        top: calc(1 / 2 * 100%);
    }

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

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

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

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

    .-right-6 {
        right: calc(var(--spacing) * -6);
    }

    .right-0 {
        right: calc(var(--spacing) * 0);
    }

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

    .right-8 {
        right: calc(var(--spacing) * 8);
    }

    .bottom-0 {
        bottom: calc(var(--spacing) * 0);
    }

    .bottom-6 {
        bottom: calc(var(--spacing) * 6);
    }

    .bottom-8 {
        bottom: calc(var(--spacing) * 8);
    }

    .bottom-20 {
        bottom: calc(var(--spacing) * 20);
    }

    .-left-5 {
        left: calc(var(--spacing) * -5);
    }

    .left-0 {
        left: calc(var(--spacing) * 0);
    }

    .left-0\! {
        left: calc(var(--spacing) * 0) !important;
    }

    .left-1\/2 {
        left: calc(1 / 2 * 100%);
    }

    .left-5 {
        left: calc(var(--spacing) * 5);
    }

    .left-auto {
        left: auto;
    }

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

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

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

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

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

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

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

    .order-last {
        order: 9999;
    }

    .container {
        width: 100%;
    }

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

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

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

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

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

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

    .container {
        margin-inline: auto;
        padding-inline: 1rem;
    }

    .-mx-1 {
        margin-inline: calc(var(--spacing) * -1);
    }

    .-mx-4 {
        margin-inline: calc(var(--spacing) * -4);
    }

    .-mx-5 {
        margin-inline: calc(var(--spacing) * -5);
    }

    .mx-2 {
        margin-inline: calc(var(--spacing) * 2);
    }

    .mx-4 {
        margin-inline: calc(var(--spacing) * 4);
    }

    .mx-auto {
        margin-inline: auto;
    }

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

    .mt-\[6px\] {
        margin-top: 6px;
    }

    .mr-2 {
        margin-right: calc(var(--spacing) * 2);
    }

    .mr-4 {
        margin-right: calc(var(--spacing) * 4);
    }

    .mr-10 {
        margin-right: calc(var(--spacing) * 10);
    }

    .ml-10 {
        margin-left: calc(var(--spacing) * 10);
    }

    .-mb-2 {
        margin-bottom: calc(var(--spacing) * -2);
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing) * 1);
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2);
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3);
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing) * 5);
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6);
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8);
    }

    .mb-9 {
        margin-bottom: calc(var(--spacing) * 9);
    }

    .mb-10 {
        margin-bottom: calc(var(--spacing) * 10);
    }

    .mb-12 {
        margin-bottom: calc(var(--spacing) * 12);
    }

    .mb-14 {
        margin-bottom: calc(var(--spacing) * 14);
    }

    .mb-16 {
        margin-bottom: calc(var(--spacing) * 16);
    }

    .mb-20 {
        margin-bottom: calc(var(--spacing) * 20);
    }

    .ml-4 {
        margin-left: calc(var(--spacing) * 4);
    }

    .menu-wrapper {
        display: none;
    }

    .menu-wrapper.show {
        display: flex;
    }

    .block {
        display: block;
    }

    .flex {
        display: flex;
    }

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

    .hidden {
        display: none;
    }

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

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

    .show.menu-wrapper {
        display: flex;
    }

    .h-1 {
        height: calc(var(--spacing) * 1);
    }

    .h-2 {
        height: calc(var(--spacing) * 2);
    }

    .h-3 {
        height: calc(var(--spacing) * 3);
    }

    .h-5 {
        height: calc(var(--spacing) * 5);
    }

    .h-9 {
        height: calc(var(--spacing) * 9);
    }

    .h-10 {
        height: calc(var(--spacing) * 10);
    }

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

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

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

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

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

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

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

    .h-full {
        height: 100%;
    }

    .h-screen {
        height: 100vh;
    }

    .grid-sizer {
        width: 100%;
    }

    @media (min-width: 768px) {
        .grid-sizer {
            width: calc(1 / 2 * 100%);
        }
    }

    @media (min-width: 992px) {
        .grid-sizer {
            width: calc(1 / 3 * 100%);
        }
    }

    .w-1\/2 {
        width: calc(1 / 2 * 100%);
    }

    .w-2 {
        width: calc(var(--spacing) * 2);
    }

    .w-3 {
        width: calc(var(--spacing) * 3);
    }

    .w-5 {
        width: calc(var(--spacing) * 5);
    }

    .w-9 {
        width: calc(var(--spacing) * 9);
    }

    .w-10 {
        width: calc(var(--spacing) * 10);
    }

    .w-12 {
        width: calc(var(--spacing) * 12);
    }

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

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

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

    .w-full {
        width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .translate-x-0\! {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y) !important;
    }

    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }

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

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

    .active.menu-scroll {
        color: var(--color-primary);
    }

    .submenu-item .activea {
        color: var(--color-primary);
    }

    .submenu-item .activea:is(.dark *) {
        color: var(--color-white);
    }

    .submenu-item .activea span svg {
        rotate: 180deg;
    }

    .portfolio-btn-wrapper .activebutton {
        text-decoration-line: underline;
    }

    .submenu-item a.active {
        color: var(--color-primary);
    }

    .submenu-item a.active:is(.dark *) {
        color: var(--color-white);
    }

    .submenu-item a.active span svg {
        rotate: 180deg;
    }

    .bg-slider-gr {
        background: linear-gradient(315deg, #51609b, #56608954);
    }

    .dark .bg-slider-gr {
        background: linear-gradient(315deg, #111722, #0000004f) !important;
    }

    .transform {
        transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
            var(--tw-skew-x) var(--tw-skew-y);
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .resize-none {
        resize: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .overflow-hidden {
        overflow: hidden;
    }

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

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

    .rounded-full {
        border-radius: calc(infinity * 1px);
    }

    .rounded-md {
        border-radius: var(--radius-md);
    }

    .rounded-md {
        border-radius: var(--radius-sm);
    }

    .rounded-xs {
        border-radius: var(--radius-xs);
    }

    .rounded-lg {
        border-radius: var(--radius-lg);
    }

    .rounded-xl {
        border-radius: var(--radius-xl);
    }

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

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

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

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

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

    .border-\[\#e9e9e9\]\/30 {
        border-color: color-mix(in oklab, #e9e9e9 30%, transparent);
    }

    .border-primary {
        border-color: var(--color-primary);
    }

    .border-primary\/10 {
        border-color: color-mix(
            in oklab,
            var(--color-primary) 10%,
            transparent
        );
    }

    .border-white {
        border-color: var(--color-white);
    }

    .border-white\/10 {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }

    .bg-\[\#2C3443\] {
        background-color: #2c3443;
    }

    .bg-\[\#222C40\] {
        background-color: #222c40;
    }

    .bg-\[\#EEF1FDEB\] {
        background-color: #eef1fdeb;
    }

    .bg-\[\#f8f8f8\]\/15 {
        background-color: color-mix(in oklab, #f8f8f8 15%, transparent);
    }

    .bg-black\/30 {
        background-color: color-mix(
            in oklab,
            var(--color-black) 30%,
            transparent
        );
    }

    .bg-dark {
        background-color: var(--color-dark) !important;
    }

    .bg-mode {
        background-color: #fff !important;
    }

    .dark .bg-mode {
        background-color: var(--color-dark) !important;
    }

    .fill-invert {
        fill: var(--color-dark) !important;
    }

    .dark .fill-invert {
        fill: #fff !important;
    }

    .text-invert {
        background-color: var(--color-dark) !important;
    }

    .dark .text-invert {
        background-color: #fff !important;
    }

    .bg-dark-text {
        background-color: var(--color-dark-text);
    }

    .bg-primary {
        background-color: var(--color-primary);
    }

    .bg-primary\/5 {
        background-color: color-mix(
            in oklab,
            var(--color-primary) 5%,
            transparent
        );
    }

    .bg-slate-300 {
        background-color: var(--color-slate-300);
    }

    .bg-transparent {
        background-color: transparent;
    }

    .bg-noise-pattern {
        background-image: var(--background-image-noise-pattern);
    }

    .bg-cover {
        background-size: cover;
    }

    .bg-center {
        background-position: center;
    }

    .bg-no-repeat {
        background-repeat: no-repeat;
    }

    .fill-current {
        fill: currentColor;
    }

    .stroke-current {
        stroke: currentColor;
    }

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

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

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

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

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

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

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

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

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

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

    @media (min-width: 992px) {
        .navbar > li > a {
            padding-block: calc(var(--spacing) * 7);
        }
    }

    @media (min-width: 992px) {
        .sticky .navbar > li > a {
            padding-block: calc(var(--spacing) * 5);
        }
    }

    .header {
        padding-block: calc(var(--spacing) * 5);
    }

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

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

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

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

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

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

    .py-\[6px\] {
        padding-block: 6px;
    }

    .py-\[10px\] {
        padding-block: 10px;
    }

    .py-\[14px\] {
        padding-block: 14px;
    }

    .py-\[60px\] {
        padding-block: 60px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .pr-2 {
        padding-right: calc(var(--spacing) * 2);
    }

    .pr-3 {
        padding-right: calc(var(--spacing) * 3);
    }

    .pr-4 {
        padding-right: calc(var(--spacing) * 4);
    }

    .pr-5 {
        padding-right: calc(var(--spacing) * 5);
    }

    .pr-12 {
        padding-right: calc(var(--spacing) * 12);
    }

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

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

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

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

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

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

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

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

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

    .pb-\[60px\] {
        padding-bottom: 60px;
    }

    .pl-3 {
        padding-left: calc(var(--spacing) * 3);
    }

    .pl-4 {
        padding-left: calc(var(--spacing) * 4);
    }

    .pl-5 {
        padding-left: calc(var(--spacing) * 5);
    }

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

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

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

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

    .font-heading {
        font-family: var(--font-heading);
    }

    .font-num {
        font-family: var(--font-num);
    }

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

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

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

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

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

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

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

    .text-\[38px\] {
        font-size: 38px;
    }

    .text-\[55px\] {
        font-size: 55px;
    }

    .text-\[100px\] {
        font-size: 100px;
    }

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

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

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

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

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

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

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

    .whitespace-nowrap {
        white-space: nowrap;
    }

    .menu-scroll.active {
        color: var(--color-primary);
    }

    .text-\[\#00CB99\] {
        color: #00cb99;
    }

    .text-\[\#d9d9d9\] {
        color: #d9d9d9;
    }

    .text-black {
        color: var(--color-black);
    }

    .text-dark {
        color: var(--color-dark);
    }

    .text-dark-text {
        color: var(--color-dark-text);
    }

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

    .text-white {
        color: var(--color-white);
    }

    .portfolio-btn-wrapper button.active {
        text-decoration-line: underline;
    }

    .underline {
        text-decoration-line: underline;
    }

    .placeholder-dark-text::placeholder {
        color: var(--color-dark-text);
    }

    .opacity-0 {
        opacity: 0%;
    }

    .opacity-10 {
        opacity: 10%;
    }

    .opacity-20 {
        opacity: 20%;
    }

    .opacity-80 {
        opacity: 80%;
    }

    .mix-blend-overlay {
        mix-blend-mode: overlay;
    }

    .shadow-md {
        --tw-shadow:
            0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
            0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow:
            var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }

    .outline-hidden {
        outline-style: none;
    }

    @media (forced-colors: active) {
        .outline-hidden {
            outline: 2px solid transparent;
            outline-offset: 2px;
        }
    }

    .drop-shadow-light {
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-light));
        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-\[6px\] {
        --tw-backdrop-blur: blur(6px);
        -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-\[30px\] {
        --tw-backdrop-blur: blur(30px);
        -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(var(--blur-sm));
        -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,
            outline-color,
            text-decoration-color,
            fill,
            stroke,
            --tw-gradient-from,
            --tw-gradient-via,
            --tw-gradient-to,
            opacity,
            box-shadow,
            transform,
            translate,
            scale,
            rotate,
            filter,
            -webkit-backdrop-filter,
            backdrop-filter;
        transition-timing-function: var(
            --tw-ease,
            var(--default-transition-timing-function)
        );
        transition-duration: var(
            --tw-duration,
            var(--default-transition-duration)
        );
    }

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

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

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

    @media (hover: hover) {
        .group-hover\:bg-primary:is(:where(.group):hover *) {
            background-color: var(--color-primary);
        }
    }

    @media (hover: hover) {
        .group-hover\:text-white:is(:where(.group):hover *) {
            color: var(--color-white);
        }
    }

    @media (hover: hover) {
        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 100%;
        }
    }

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

    @media (hover: hover) {
        .hover\:border-transparent:hover {
            border-color: transparent;
        }
    }

    @media (hover: hover) {
        .hover\:bg-\[\#222C40\]\/90:hover {
            background-color: color-mix(in oklab, #222c40 90%, transparent);
        }
    }

    @media (hover: hover) {
        .hover\:bg-primary:hover {
            background-color: var(--color-primary);
        }
    }

    @media (hover: hover) {
        .hover\:bg-primary\/90:hover {
            background-color: color-mix(
                in oklab,
                var(--color-primary) 90%,
                transparent
            );
        }
    }

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

    @media (hover: hover) {
        .hover\:opacity-100:hover {
            opacity: 100%;
        }
    }

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

    @media (min-width: 500px) {
        .xs\:max-w-\[370px\] {
            max-width: 370px;
        }
    }

    @media (min-width: 540px) {
        .sm\:left-8 {
            left: calc(var(--spacing) * 8);
        }
    }

    @media (min-width: 540px) {
        .sm\:-mx-\[6px\] {
            margin-inline: calc(6px * -1);
        }
    }

    @media (min-width: 540px) {
        .sm\:block {
            display: block;
        }
    }

    @media (min-width: 540px) {
        .sm\:inline-flex {
            display: inline-flex;
        }
    }

    @media (min-width: 540px) {
        .sm\:h-10 {
            height: calc(var(--spacing) * 10);
        }
    }

    @media (min-width: 540px) {
        .sm\:w-1\/2 {
            width: calc(1 / 2 * 100%);
        }
    }

    @media (min-width: 540px) {
        .sm\:w-1\/3 {
            width: calc(1 / 3 * 100%);
        }
    }

    @media (min-width: 540px) {
        .sm\:w-auto {
            width: auto;
        }
    }

    @media (min-width: 540px) {
        .sm\:border-l {
            border-left-style: var(--tw-border-style);
            border-left-width: 1px;
        }
    }

    @media (min-width: 540px) {
        .sm\:p-\[70px\] {
            padding: 70px;
        }
    }

    @media (min-width: 540px) {
        .sm\:px-4 {
            padding-inline: calc(var(--spacing) * 4);
        }
    }

    @media (min-width: 540px) {
        .sm\:px-6 {
            padding-inline: calc(var(--spacing) * 6);
        }
    }

    @media (min-width: 540px) {
        .sm\:px-7 {
            padding-inline: calc(var(--spacing) * 7);
        }
    }

    @media (min-width: 540px) {
        .sm\:px-10 {
            padding-inline: calc(var(--spacing) * 10);
        }
    }

    @media (min-width: 540px) {
        .sm\:px-14 {
            padding-inline: calc(var(--spacing) * 14);
        }
    }

    @media (min-width: 540px) {
        .sm\:px-\[6px\] {
            padding-inline: 6px;
        }
    }

    @media (min-width: 540px) {
        .sm\:px-\[70px\] {
            padding-inline: 70px;
        }
    }

    @media (min-width: 540px) {
        .sm\:pt-20 {
            padding-top: calc(var(--spacing) * 20);
        }
    }

    @media (min-width: 540px) {
        .sm\:pt-36 {
            padding-top: calc(var(--spacing) * 36);
        }
    }

    @media (min-width: 540px) {
        .sm\:pr-3 {
            padding-right: calc(var(--spacing) * 3);
        }
    }

    @media (min-width: 540px) {
        .sm\:pr-5 {
            padding-right: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 540px) {
        .sm\:pl-5 {
            padding-left: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 540px) {
        .sm\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }

    @media (min-width: 540px) {
        .sm\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height));
        }
    }

    @media (min-width: 540px) {
        .sm\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading, var(--text-4xl--line-height));
        }
    }

    @media (min-width: 540px) {
        .sm\:text-base {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height));
        }
    }

    @media (min-width: 540px) {
        .sm\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
        }
    }

    @media (min-width: 540px) {
        .sm\:text-\[38px\] {
            font-size: 38px;
        }
    }

    @media (min-width: 540px) {
        .sm\:text-\[40px\] {
            font-size: 40px;
        }
    }

    @media (min-width: 540px) {
        .sm\:leading-\[50px\] {
            --tw-leading: 50px;
            line-height: 50px;
        }
    }

    @media (min-width: 768px) {
        .md\:mb-0 {
            margin-bottom: calc(var(--spacing) * 0);
        }
    }

    @media (min-width: 768px) {
        .md\:mb-5 {
            margin-bottom: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 768px) {
        .md\:mb-9 {
            margin-bottom: calc(var(--spacing) * 9);
        }
    }

    @media (min-width: 768px) {
        .md\:mb-14 {
            margin-bottom: calc(var(--spacing) * 14);
        }
    }

    @media (min-width: 768px) {
        .md\:mb-16 {
            margin-bottom: calc(var(--spacing) * 16);
        }
    }

    @media (min-width: 768px) {
        .md\:mb-20 {
            margin-bottom: calc(var(--spacing) * 20);
        }
    }

    @media (min-width: 768px) {
        .md\:h-6 {
            height: calc(var(--spacing) * 6);
        }
    }

    @media (min-width: 768px) {
        .md\:h-14 {
            height: calc(var(--spacing) * 14);
        }
    }

    @media (min-width: 768px) {
        .md\:h-\[90px\] {
            height: 90px;
        }
    }

    @media (min-width: 768px) {
        .md\:w-1\/2 {
            width: calc(1 / 2 * 100%);
        }
    }

    @media (min-width: 768px) {
        .md\:w-3\/12 {
            width: calc(3 / 12 * 100%);
        }
    }

    @media (min-width: 768px) {
        .md\:w-5\/12 {
            width: calc(5 / 12 * 100%);
        }
    }

    @media (min-width: 768px) {
        .md\:w-6 {
            width: calc(var(--spacing) * 6);
        }
    }

    @media (min-width: 768px) {
        .md\:w-14 {
            width: calc(var(--spacing) * 14);
        }
    }

    @media (min-width: 768px) {
        .md\:w-\[90px\] {
            width: 90px;
        }
    }

    @media (min-width: 768px) {
        .md\:justify-start {
            justify-content: flex-start;
        }
    }

    @media (min-width: 768px) {
        .md\:border-0 {
            border-style: var(--tw-border-style);
            border-width: 0px;
        }
    }

    @media (min-width: 768px) {
        .md\:border-t {
            border-top-style: var(--tw-border-style);
            border-top-width: 1px;
        }
    }

    @media (min-width: 768px) {
        .md\:p-\[70px\] {
            padding: 70px;
        }
    }

    @media (min-width: 768px) {
        .md\:px-8 {
            padding-inline: calc(var(--spacing) * 8);
        }
    }

    @media (min-width: 768px) {
        .md\:px-\[70px\] {
            padding-inline: 70px;
        }
    }

    @media (min-width: 768px) {
        .md\:py-7 {
            padding-block: calc(var(--spacing) * 7);
        }
    }

    @media (min-width: 768px) {
        .md\:py-\[14px\] {
            padding-block: 14px;
        }
    }

    @media (min-width: 768px) {
        .md\:pt-8 {
            padding-top: calc(var(--spacing) * 8);
        }
    }

    @media (min-width: 768px) {
        .md\:pb-0 {
            padding-bottom: calc(var(--spacing) * 0);
        }
    }

    @media (min-width: 768px) {
        .md\:pb-28 {
            padding-bottom: calc(var(--spacing) * 28);
        }
    }

    @media (min-width: 768px) {
        .md\:pb-\[70px\] {
            padding-bottom: 70px;
        }
    }

    @media (min-width: 768px) {
        .md\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }

    @media (min-width: 768px) {
        .md\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height));
        }
    }

    @media (min-width: 768px) {
        .md\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading, var(--text-4xl--line-height));
        }
    }

    @media (min-width: 768px) {
        .md\:text-\[40px\] {
            font-size: 40px;
        }
    }

    @media (min-width: 768px) {
        .md\:text-\[44px\] {
            font-size: 44px;
        }
    }

    @media (min-width: 768px) {
        .md\:text-\[50px\] {
            font-size: 50px;
        }
    }

    @media (min-width: 768px) {
        .md\:text-\[170px\] {
            font-size: 170px;
        }
    }

    @media (min-width: 768px) {
        .md\:leading-\[60px\] {
            --tw-leading: 60px;
            line-height: 60px;
        }
    }

    @media (min-width: 768px) {
        .md\:leading-none {
            --tw-leading: 1;
            line-height: 1;
        }
    }

    @media (min-width: 768px) {
        .md\:leading-tight {
            --tw-leading: var(--leading-tight);
            line-height: var(--leading-tight);
        }
    }

    @media (min-width: 992px) {
        .lg\:invisible {
            visibility: hidden;
        }
    }

    @media (min-width: 992px) {
        .lg\:visible {
            visibility: visible;
        }
    }

    @media (min-width: 992px) {
        .lg\:absolute {
            position: absolute;
        }
    }

    @media (min-width: 992px) {
        .lg\:static {
            position: static;
        }
    }

    @media (min-width: 992px) {
        .lg\:top-\[120\%\] {
            top: 120%;
        }
    }

    @media (min-width: 992px) {
        .lg\:left-5 {
            left: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 992px) {
        .lg\:order-first {
            order: -9999;
        }
    }

    @media (min-width: 992px) {
        .lg\:mr-0 {
            margin-right: calc(var(--spacing) * 0);
        }
    }

    @media (min-width: 992px) {
        .lg\:mb-0 {
            margin-bottom: calc(var(--spacing) * 0);
        }
    }

    @media (min-width: 992px) {
        .lg\:mb-20 {
            margin-bottom: calc(var(--spacing) * 20);
        }
    }

    @media (min-width: 992px) {
        .lg\:ml-0 {
            margin-left: calc(var(--spacing) * 0);
        }
    }

    @media (min-width: 992px) {
        .lg\:ml-auto {
            margin-left: auto;
        }
    }

    @media (min-width: 992px) {
        .lg\:block {
            display: block;
        }
    }

    @media (min-width: 992px) {
        .lg\:flex {
            display: flex;
        }
    }

    @media (min-width: 992px) {
        .lg\:hidden {
            display: none;
        }
    }

    @media (min-width: 992px) {
        .lg\:h-auto {
            height: auto;
        }
    }

    @media (min-width: 992px) {
        .lg\:w-1\/2 {
            width: calc(1 / 2 * 100%);
        }
    }

    @media (min-width: 992px) {
        .lg\:w-1\/3 {
            width: calc(1 / 3 * 100%);
        }
    }

    @media (min-width: 992px) {
        .lg\:w-1\/4 {
            width: calc(1 / 4 * 100%);
        }
    }

    @media (min-width: 992px) {
        .lg\:w-2\/3 {
            width: calc(2 / 3 * 100%);
        }
    }

    @media (min-width: 992px) {
        .lg\:w-3\/12 {
            width: calc(3 / 12 * 100%);
        }
    }

    @media (min-width: 992px) {
        .lg\:w-5\/12 {
            width: calc(5 / 12 * 100%);
        }
    }

    @media (min-width: 992px) {
        .lg\:w-11\/12 {
            width: calc(11 / 12 * 100%);
        }
    }

    @media (min-width: 992px) {
        .lg\:w-\[350px\] {
            width: 350px;
        }
    }

    @media (min-width: 992px) {
        .lg\:w-auto {
            width: auto;
        }
    }

    @media (min-width: 992px) {
        .lg\:w-full {
            width: 100%;
        }
    }

    @media (min-width: 992px) {
        .lg\:translate-y-0 {
            --tw-translate-y: calc(var(--spacing) * 0);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }

    @media (min-width: 992px) {
        .lg\:flex-row {
            flex-direction: row;
        }
    }

    @media (min-width: 992px) {
        .lg\:flex-nowrap {
            flex-wrap: nowrap;
        }
    }

    @media (min-width: 992px) {
        .lg\:items-center {
            align-items: center;
        }
    }

    @media (min-width: 992px) {
        .lg\:justify-end {
            justify-content: flex-end;
        }
    }

    @media (min-width: 992px) {
        .lg\:justify-start {
            justify-content: flex-start;
        }
    }

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

    @media (min-width: 992px) {
        :where(.lg\:space-x-10 > :not(:last-child)) {
            --tw-space-x-reverse: 0;
            margin-inline-start: calc(
                calc(var(--spacing) * 10) * var(--tw-space-x-reverse)
            );
            margin-inline-end: calc(
                calc(var(--spacing) * 10) * calc(1 - var(--tw-space-x-reverse))
            );
        }
    }

    @media (min-width: 992px) {
        .lg\:self-center {
            align-self: center;
        }
    }

    @media (min-width: 992px) {
        .lg\:overflow-y-auto {
            overflow-y: auto;
        }
    }

    @media (min-width: 992px) {
        .lg\:rounded-md {
            border-radius: var(--radius-sm);
        }
    }

    @media (min-width: 992px) {
        .lg\:border {
            border-style: var(--tw-border-style);
            border-width: 1px;
        }
    }

    @media (min-width: 992px) {
        .lg\:border-x {
            border-inline-style: var(--tw-border-style);
            border-inline-width: 1px;
        }
    }

    @media (min-width: 992px) {
        .lg\:bg-transparent {
            background-color: transparent;
        }
    }

    @media (min-width: 992px) {
        .lg\:bg-white {
            background-color: var(--color-white);
        }
    }

    @media (min-width: 992px) {
        .lg\:p-0 {
            padding: calc(var(--spacing) * 0);
        }
    }

    @media (min-width: 992px) {
        .lg\:px-15 {
            padding-right: 10%;
            padding-left: 10%;
        }
    }

    @media (min-width: 992px) {
        .lg\:px-4 {
            padding-inline: calc(var(--spacing) * 4);
        }
    }

    @media (min-width: 992px) {
        .lg\:px-5 {
            padding-inline: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 992px) {
        .lg\:px-8 {
            padding-inline: calc(var(--spacing) * 8);
        }
    }

    @media (min-width: 992px) {
        .lg\:px-10 {
            padding-inline: calc(var(--spacing) * 10);
        }
    }

    @media (min-width: 992px) {
        .lg\:px-\[60px\] {
            padding-inline: 60px;
        }
    }

    @media (min-width: 992px) {
        .lg\:py-\[120px\] {
            padding-block: 120px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pt-9 {
            padding-top: calc(var(--spacing) * 9);
        }
    }

    @media (min-width: 992px) {
        .lg\:pt-16 {
            padding-top: calc(var(--spacing) * 16);
        }
    }

    @media (min-width: 992px) {
        .lg\:pt-24 {
            padding-top: calc(var(--spacing) * 24);
        }
    }

    @media (min-width: 992px) {
        .lg\:pt-\[130px\] {
            padding-top: 130px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pt-\[170px\] {
            padding-top: 170px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pt-\[240px\] {
            padding-top: 240px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pr-4 {
            padding-right: calc(var(--spacing) * 4);
        }
    }

    @media (min-width: 992px) {
        .lg\:pb-0 {
            padding-bottom: calc(var(--spacing) * 0);
        }
    }

    @media (min-width: 992px) {
        .lg\:pb-5 {
            padding-bottom: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 992px) {
        .lg\:pb-7 {
            padding-bottom: calc(var(--spacing) * 7);
        }
    }

    @media (min-width: 992px) {
        .lg\:pb-\[60px\] {
            padding-bottom: 60px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pb-\[70px\] {
            padding-bottom: 70px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pb-\[120px\] {
            padding-bottom: 120px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pb-\[130px\] {
            padding-bottom: 130px;
        }
    }

    @media (min-width: 992px) {
        .lg\:pl-4 {
            padding-left: calc(var(--spacing) * 4);
        }
    }

    @media (min-width: 992px) {
        .lg\:text-left {
            text-align: left;
        }
    }

    @media (min-width: 992px) {
        .lg\:text-right {
            text-align: right;
        }
    }

    @media (min-width: 992px) {
        .lg\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }

    @media (min-width: 992px) {
        .lg\:text-base {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height));
        }
    }

    @media (min-width: 992px) {
        .lg\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height));
        }
    }

    @media (min-width: 992px) {
        .lg\:text-sm {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
        }
    }

    @media (min-width: 992px) {
        .lg\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
        }
    }

    @media (min-width: 992px) {
        .lg\:opacity-0 {
            opacity: 0%;
        }
    }

    @media (min-width: 992px) {
        .lg\:opacity-100 {
            opacity: 100%;
        }
    }

    @media (min-width: 992px) and (hover: hover) {
        .lg\:group-hover\:visible:is(:where(.group):hover *) {
            visibility: visible;
        }
    }

    @media (min-width: 992px) and (hover: hover) {
        .lg\:group-hover\:top-full:is(:where(.group):hover *) {
            top: 100%;
        }
    }

    @media (min-width: 992px) and (hover: hover) {
        .lg\:group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 100%;
        }
    }

    @media (min-width: 1140px) {
        .xl\:container {
            width: 100%;
        }
    }

    @media (min-width: 1140px) and (min-width: 500px) {
        .xl\:container {
            max-width: 500px;
        }
    }

    @media (min-width: 1140px) and (min-width: 540px) {
        .xl\:container {
            max-width: 540px;
        }
    }

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

    @media (min-width: 1140px) and (min-width: 992px) {
        .xl\:container {
            max-width: 992px;
        }
    }

    @media (min-width: 1140px) and (min-width: 1140px) {
        .xl\:container {
            max-width: 1140px;
        }
    }

    @media (min-width: 1140px) and (min-width: 1320px) {
        .xl\:container {
            max-width: 1320px;
        }
    }

    @media (min-width: 1140px) {
        .xl\:container {
            margin-inline: auto;
            padding-inline: 1rem;
        }
    }

    @media (min-width: 1140px) {
        .xl\:w-2\/12 {
            width: calc(2 / 12 * 100%);
        }
    }

    @media (min-width: 1140px) {
        .xl\:w-3\/12 {
            width: calc(3 / 12 * 100%);
        }
    }

    @media (min-width: 1140px) {
        .xl\:w-10\/12 {
            width: calc(10 / 12 * 100%);
        }
    }

    @media (min-width: 1140px) {
        .xl\:max-w-\[350px\] {
            max-width: 350px;
        }
    }

    @media (min-width: 1140px) {
        .xl\:px-6 {
            padding-inline: calc(var(--spacing) * 6);
        }
    }

    @media (min-width: 1140px) {
        .xl\:px-10 {
            padding-inline: calc(var(--spacing) * 10);
        }
    }

    @media (min-width: 1140px) {
        .xl\:px-20 {
            padding-inline: calc(var(--spacing) * 20);
        }
    }

    @media (min-width: 1140px) {
        .xl\:px-\[70px\] {
            padding-inline: 70px;
        }
    }

    @media (min-width: 1140px) {
        .xl\:pr-5 {
            padding-right: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 1140px) {
        .xl\:pb-\[70px\] {
            padding-bottom: 70px;
        }
    }

    @media (min-width: 1140px) {
        .xl\:pl-5 {
            padding-left: calc(var(--spacing) * 5);
        }
    }

    @media (min-width: 1140px) {
        .xl\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height));
        }
    }

    @media (min-width: 1140px) {
        .xl\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height));
        }
    }

    @media (min-width: 1140px) {
        .xl\:text-base {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height));
        }
    }

    @media (min-width: 1140px) {
        .xl\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height));
        }
    }

    @media (min-width: 1140px) {
        .xl\:text-\[40px\] {
            font-size: 40px;
        }
    }

    @media (min-width: 1140px) {
        .xl\:leading-tight {
            --tw-leading: var(--leading-tight);
            line-height: var(--leading-tight);
        }
    }

    @media (min-width: 1320px) {
        .\32 xl\:left-8 {
            left: calc(var(--spacing) * 8);
        }
    }

    @media (min-width: 1320px) {
        .\32 xl\:w-\[180px\] {
            width: 180px;
        }
    }

    @media (min-width: 1320px) {
        .\32 xl\:px-20 {
            padding-inline: calc(var(--spacing) * 20);
        }
    }

    .dark\:block:is(.dark *) {
        display: block;
    }

    .dark\:hidden:is(.dark *) {
        display: none;
    }

    .dark\:border-\[\#1F2633\]:is(.dark *) {
        border-color: #1f2633;
    }

    .dark\:border-\[\#2C3443\]:is(.dark *) {
        border-color: #2c3443;
    }

    .dark\:border-\[\#2E333D\]:is(.dark *) {
        border-color: #2e333d;
    }

    .dark\:border-\[\#4B4E56\]:is(.dark *) {
        border-color: #4b4e56;
    }

    .dark\:border-\[\#414652\]:is(.dark *) {
        border-color: #414652;
    }

    .dark\:border-primary:is(.dark *) {
        border-color: var(--color-primary);
    }

    .dark\:border-transparent:is(.dark *) {
        border-color: transparent;
    }

    .dark\:border-white\/10:is(.dark *) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }

    .dark\:bg-\[\#1D232DD9\]:is(.dark *) {
        background-color: #1d232dd9;
    }

    .dark\:bg-\[\#1D232D\]:is(.dark *) {
        background-color: #1d232d;
    }

    .dark\:bg-\[\#2C3443\]:is(.dark *) {
        background-color: #2c3443;
    }

    .dark\:bg-\[\#2E333D\]:is(.dark *) {
        background-color: #2e333d;
    }

    .dark\:bg-\[\#222C40\]\/90:is(.dark *) {
        background-color: color-mix(in oklab, #222c40 90%, transparent);
    }

    .dark\:bg-dark:is(.dark *) {
        background-color: var(--color-dark);
    }

    .dark\:bg-transparent:is(.dark *) {
        background-color: transparent;
    }

    .dark\:bg-white:is(.dark *) {
        background-color: var(--color-white);
    }

    .dark\:bg-white\/5:is(.dark *) {
        background-color: color-mix(
            in oklab,
            var(--color-white) 5%,
            transparent
        );
    }

    .dark\:bg-white\/10:is(.dark *) {
        background-color: color-mix(
            in oklab,
            var(--color-white) 10%,
            transparent
        );
    }

    .dark\:text-white:is(.dark *) {
        color: var(--color-white);
    }

    .dark\:opacity-40:is(.dark *) {
        opacity: 40%;
    }

    .dark\:drop-shadow-none:is(.dark *) {
        --tw-drop-shadow: ;
        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);
    }

    @media (hover: hover) {
        .dark\:group-hover\:bg-primary:is(.dark *):is(:where(.group):hover *) {
            background-color: var(--color-primary);
        }
    }

    @media (hover: hover) {
        .dark\:group-hover\:opacity-100:is(.dark *):is(:where(.group):hover *) {
            opacity: 100%;
        }
    }

    @media (hover: hover) {
        .dark\:hover\:border-primary:is(.dark *):hover {
            border-color: var(--color-primary);
        }
    }

    @media (hover: hover) {
        .dark\:hover\:bg-primary:is(.dark *):hover {
            background-color: var(--color-primary);
        }
    }

    @media (hover: hover) {
        .hover\:dark\:bg-\[\#222C40\]\/90:hover:is(.dark *) {
            background-color: color-mix(in oklab, #222c40 90%, transparent);
        }
    }

    @media (hover: hover) {
        .dark\:hover\:text-primary:is(.dark *):hover {
            color: var(--color-primary);
        }
    }

    @media (hover: hover) {
        .dark\:hover\:text-white:is(.dark *):hover {
            color: var(--color-white);
        }
    }

    @media (hover: hover) {
        .dark\:hover\:opacity-100:is(.dark *):hover {
            opacity: 100%;
        }
    }

    .dark\:focus\:border-white:is(.dark *):focus {
        border-color: var(--color-white);
    }

    @media (min-width: 992px) {
        .dark\:lg\:border-transparent:is(.dark *) {
            border-color: transparent;
        }
    }

    @media (min-width: 992px) {
        .dark\:lg\:bg-\[\#2C3443\]:is(.dark *) {
            background-color: #2c3443;
        }
    }

    @media (min-width: 992px) {
        .dark\:lg\:bg-transparent:is(.dark *) {
            background-color: transparent;
        }
    }
}

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }

    button:not(:disabled),
    [role="button"]:not(:disabled) {
        cursor: pointer;
    }
}

.tns-controls {
    position: absolute;
    bottom: calc(var(--spacing) * 14);
    left: calc(1 / 2 * 100%);
    z-index: 30;
    display: flex;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

:where(.tns-controls > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(
        calc(var(--spacing) * 5) * var(--tw-space-x-reverse)
    );
    margin-inline-end: calc(
        calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse))
    );
}

@media (min-width: 992px) {
    .tns-controls {
        left: calc(50% - 50px);
    }
}

@media (min-width: 992px) {
    .tns-controls {
        --tw-translate-x: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
    }
}

.tns-controls button {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(
        in oklab,
        var(--color-primary) 10%,
        transparent
    );
    margin: 0 5px;
}

@media (hover: hover) {
    .tns-controls button:hover {
        background-color: var(--color-primary);
    }
}

@media (hover: hover) {
    .tns-controls button:hover {
        color: var(--color-white);
    }
}

@media (hover: hover) {
    .tns-controls button:hover {
        opacity: 100%;
    }
}

.tns-controls button:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

.tns-controls button:is(.dark *) {
    color: var(--color-white);
}

@media (hover: hover) {
    .tns-controls button:is(.dark *):hover {
        background-color: var(--color-primary);
    }
}

@media (hover: hover) {
    .tns-controls button:is(.dark *):hover {
        color: var(--color-white);
    }
}

@media (hover: hover) {
    .tns-controls button:is(.dark *):hover {
        opacity: 100%;
    }
}

@layer base {
    *,
    ::before,
    ::after {
        border-color: var(--color-stroke);
    }

    body {
        font-family: var(--font-body);
    }
}

@layer components {
    html {
        scroll-behavior: smooth;
    }
}

#supportCheckbox:checked ~ div span {
    opacity: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
    initial-value: rotateX(0);
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
    initial-value: rotateY(0);
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
    initial-value: rotateZ(0);
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false;
    initial-value: skewX(0);
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false;
    initial-value: skewY(0);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-limit {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-limit-1 {
    -webkit-line-clamp: 1;
}

.text-limit-2 {
    -webkit-line-clamp: 2;
}

.text-limit-3 {
    -webkit-line-clamp: 3;
}

.text-limit-4 {
    -webkit-line-clamp: 4;
}

.text-limit-5 {
    -webkit-line-clamp: 5;
}

html[dir="rtl"] .rtl-margin-left-zero {
    margin-left: 0px !important;
}

html[dir="rtl"] .rtl-newsletter-btn {
    left: 0px !important;
}

html[dir="rtl"] .newsletter-input {
    padding-left: 60px !important;
}

html[dir="rtl"] .lang-dropdown {
    left: 0px !important;
}

@media (max-width: 575.98px) {
    html[dir="rtl"] .navbar {
        padding-right: 0px !important;
    }

    html[dir="rtl"] .menu-scroll {
        margin-bottom: 0px !important;
    }
}

@media (min-width: 1024px) {
    html[dir="rtl"] .report-content-container {
        padding-left: 40px !important;
    }
}

.logo-name-desc {
    font-size: 13px;
    font-weight: 700;
    margin-top: 3px !important;
}

.html[dir="rtl"] .menu-wrapper-container {
    right: 0 !important;
}

html[dir="rtl"] .hero-section-container {
    background: linear-gradient(
        to left,
        /* rgba(26, 49, 91, 0.4), */ rgba(0, 0, 0, 0.8),
        rgba(255, 255, 255, 0)
    );
}

.hero-section-background-container {
    background-image: url("../img/hero-section-pic.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.tns-controls {
    transform: translateY(135px) !important;
}

html[dir="rtl"] .menu-scroll.item-menu::after {
    left: 0;
}

.menu-scroll.item-menu:first-child {
    padding-top: 7px;
}
.menu-scroll.item-menu:last-child {
    padding-bottom: 7px;
}

@media (max-width: 540px) {
    .menu-sub-title a {
        font-size: 14px;
        font-weight: 500;
        color: black;
    }
}

.menu-sub-title a::after {
    content: "" !important;
}

@media (min-width: 992px) {
    .menu-scroll.item-menu::after {
        content: "" !important;
    }
}

.main-frame-error::after {
    content: "";
    width: 100% !important;
    height: 100% !important;
    background-color: var(--color-primary) !important;
}

/* Custom Styles for TinyMCE Content */
.post-body {
    font-family: "Vazir", "Tahoma", sans-serif;
    line-height: 1.8;
    color: #1f2937;
}

/* Dark mode support */
.dark .post-body {
    color: #f3f4f6;
}

/* Headings */
.post-body h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #1a315b;
    padding-bottom: 0.5rem;
}

.post-body h2 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    border-right: 4px solid #1a315b;
    padding-right: 1rem;
}

.post-body h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    border-right: 3px solid #1a315b;
    padding-right: 0.75rem;
}

.post-body h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    border-right: 2px solid #1a315b;
    padding-right: 0.5rem;
}

.post-body h5 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.post-body h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* Paragraphs */
.post-body p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word;
}

.post-body p:last-child {
    margin-bottom: 0;
}

/* Lists */
.post-body ul,
.post-body ol {
    margin: 1rem 0;
    padding-right: 1.5rem;
    line-height: 1.8;
}

.post-body ul {
    list-style-type: disc;
}

.post-body ol {
    list-style-type: decimal;
}

.post-body ul ul,
.post-body ol ol {
    margin: 0.5rem 0;
    padding-right: 1rem;
}

.post-body ul ul {
    list-style-type: circle;
}

.post-body ol ol {
    list-style-type: lower-alpha;
}

.post-body li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.post-body li:last-child {
    margin-bottom: 0;
}

/* Links */
.post-body a {
    color: #1a315b;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.post-body a:hover {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.post-body a:visited {
    color: #7c3aed;
}

/* Images */
.post-body img {
    max-width: 100%;
    height: max-content;
    border-radius: 0.5rem;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin: 1.5rem 0;
    display: block;
}

.post-body img:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Blockquotes */
.post-body blockquote {
    border-right: 4px solid #1a315b;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    font-style: italic;
    position: relative;
}

.post-body blockquote::before {
    content: '"';
    font-size: 3rem;
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    line-height: 1;
}

/* Code blocks */
.post-body pre {
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-family: "Fira Code", "Monaco", "Consolas", monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

.post-body code {
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: "Fira Code", "Monaco", "Consolas", monospace;
    font-size: 0.875rem;
}

.dark .post-body code {
    background-color: #374151;
    color: #fbbf24;
}

/* Tables */
.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.post-body th,
.post-body td {
    padding: 0.75rem;
    text-align: right;
    border-bottom: 1px solid #e5e7eb;
}

.post-body th {
    background-color: #1a315b;
    font-weight: 600;
}

.post-body tr:nth-child(even) {
    background-color: #f9fafb;
}

.post-body tr:hover {
    background-color: #f3f4f6;
}

.dark .post-body th,
.dark .post-body td {
    border-bottom-color: #374151;
}

.dark .post-body tr:nth-child(even) {
    background-color: #1f2937;
}

.dark .post-body tr:hover {
    background-color: #374151;
}

/* Horizontal rules */
.post-body hr {
    border: none;
    height: 2px;
    background: linear-gradient(to left, #1a315b, #3b82f6);
    margin: 2rem 0;
    border-radius: 1px;
}

/* Emphasis and strong text */
.post-body strong,
.post-body b {
    font-weight: 700;
}

.post-body em,
.post-body i {
    font-style: italic;
}

.dark .post-body em,
.dark .post-body i {
    color: #9ca3af;
}

/* Highlighted text */
.post-body mark {
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

/* Subscript and superscript */
.post-body sub,
.post-body sup {
    font-size: 0.75em;
    line-height: 0;
}

.post-body sub {
    vertical-align: sub;
}

.post-body sup {
    vertical-align: super;
}

/* Definition lists */
.post-body dl {
    margin: 1.5rem 0;
}

.post-body dt {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.post-body dd {
    margin-right: 1rem;
    margin-bottom: 1rem;
    padding-right: 1rem;
    border-right: 2px solid #e5e7eb;
}

.dark .post-body dd {
    border-right-color: #374151;
}

/* Address */
.post-body address {
    font-style: normal;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 0.5rem;
    border-right: 3px solid #1a315b;
}

/* Small text */
.post-body small {
    font-size: 0.875rem;
}

/* Abbreviations */
.post-body abbr {
    border-bottom: 1px dotted #6b7280;
    cursor: help;
}

.dark .post-body abbr {
    border-bottom-color: #9ca3af;
}

/* Citations */
.post-body cite {
    font-style: italic;
}

/* Responsive design */
@media (max-width: 768px) {
    .post-body h1 {
        font-size: 1.875rem;
    }

    .post-body h2 {
        font-size: 1.5rem;
    }

    .post-body h3 {
        font-size: 1.25rem;
    }

    .post-body h4 {
        font-size: 1.125rem;
    }

    .post-body {
        font-size: 0.95rem;
    }

    .post-body ul,
    .post-body ol {
        padding-right: 1rem;
    }

    .post-body blockquote {
        padding: 0.75rem 1rem;
    }

    .post-body table {
        font-size: 0.875rem;
    }

    .post-body th,
    .post-body td {
        padding: 0.5rem;
    }
}

/* Print styles */
@media print {
    .post-body {
        color: #000;
        background: #fff;
    }

    .post-body a {
        color: #000;
        text-decoration: underline;
    }

    .post-body img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .post-body h1,
    .post-body h2,
    .post-body h3,
    .post-body h4,
    .post-body h5,
    .post-body h6 {
        page-break-after: avoid;
    }

    .post-body blockquote {
        page-break-inside: avoid;
    }

    .post-body table {
        page-break-inside: avoid;
    }
}

.wpb_text_column.wpb_content_element {
    background-color: transparent !important;
}

html[dir="rtl"] .navbarLogo {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .navbarLogoRtl {
    display: flex;
    justify-content: start;
    align-items: center;
}

html[dir="rtl"] .footerLogoRtl {
    display: flex;
    justify-content: start;
    align-items: center;
}

html[dir="rtl"] .absoulte-btn {
    left: 15px;
}

.service-pagination .swiper-pagination-bullet {
    background-color: #1a315b !important;
}
.resources-pagination .swiper-pagination-bullet {
    background-color: #ffffff !important;
}

html[dir="rtl"] .text-number-box > span {
    float: right;
    margin-left: 8px;
    font-family: "IransansDgit", sans-serif;
}

.card-hover-bottom {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* bottom line */
.card-hover-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: #0ea5e9;

    opacity: 0;
    transform: translateY(4px); /* slight offset for smooth feel */
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* hover */
.card-hover-bottom:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.card-hover-bottom:hover::after {
    opacity: 1;
    transform: translateY(0);
}

html[dir="rtl"] .card-hover-line {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* the animated line on the RIGHT (correct for RTL) */
html[dir="rtl"] .card-hover-line::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 0;
    background-color: #0ea5e9;
    transition: height 0.35s ease;
}

/* hover */
html[dir="rtl"] .card-hover-line:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

html[dir="rtl"] .card-hover-line:hover::after {
    height: 100%;
}

.card-hover-top {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* top line */
.card-hover-top::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: #0ea5e9;

    opacity: 0;
    transform: translateY(4px); /* slight offset for smooth feel */
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* hover */
.card-hover-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.card-hover-top:hover::after {
    opacity: 1;
    transform: translateY(0);
}