/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1
        }
    }
}

html,
body {
    overscroll-behavior-y: none
}

.gallery-modern {
    flex-direction: column;
    gap: clamp(24px, 3vw, 32px);
    display: flex;
    position: relative
}

.gallery-modern-view {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(18px, 2.6vw, 26px);
    display: grid;
    position: relative
}

@media (max-width:1200px) {
    .gallery-modern-view {
        grid-template-columns: minmax(0, 1fr)
    }
}

.gallery-modern-slide {
    grid-column: 1/-1;
    grid-template-columns: inherit;
    gap: inherit;
    opacity: 0;
    transition: opacity .35s, transform .35s;
    display: none;
    transform: translateY(10px)
}

.gallery-modern-slide.is-active {
    opacity: 1;
    display: grid;
    transform: translateY(0)
}

.gallery-media {
    background: radial-gradient(circle at 20% 20%, #3b82f62e, #0f172af2);
    border-radius: clamp(16px, 2.6vw, 22px);
    justify-content: center;
    align-items: center;
    min-height: clamp(320px, 42vw, 540px);
    display: flex;
    position: relative;
    overflow: hidden
}

.gallery-media img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.gallery-caption {
    background: linear-gradient(135deg, #f5f7ffe6, #e9efffd6);
    border: 1px solid #c7d2fe61;
    border-radius: clamp(16px, 2.6vw, 22px);
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
    padding: clamp(18px, 3vw, 26px);
    display: flex
}

.dark-mode .gallery-caption {
    background: linear-gradient(135deg, #0f172ae6, #0b1224f0);
    border-color: #6366f142
}

.gallery-meta {
    color: #475569b8;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    font-size: .88rem;
    display: flex
}

.dark-mode .gallery-meta {
    color: #cbd5e1b3
}

.gallery-counter {
    color: #2563ebd9;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #3b82f61f;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex
}

.dark-mode .gallery-counter {
    color: #bfdbfee6;
    background: #2563eb24
}

.gallery-description {
    font-size: .88rem
}

.gallery-title {
    color: #0f172a;
    letter-spacing: -.01em;
    margin: 0;
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 700
}

.dark-mode .gallery-title {
    color: #f8fafc
}

.gallery-content {
    color: #475569d1;
    font-size: .95rem;
    line-height: 1.7
}

.dark-mode .gallery-content {
    color: #e2e8f0cc
}

.gallery-controls {
    justify-content: center;
    gap: clamp(12px, 2.6vw, 20px);
    margin-top: clamp(20px, 3vw, 26px);
    display: flex
}

.gallery-nav {
    color: #2563ebe6;
    cursor: pointer;
    background: #3b82f61f;
    border: none;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    transition: transform .2s, background .2s, box-shadow .2s;
    display: inline-flex
}

.gallery-nav:hover {
    background: #2563eb2e;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px #2563eb38
}

.dark-mode .gallery-nav {
    color: #bfdbfef2;
    background: #2563eb2e
}

.dark-mode .gallery-nav:hover {
    background: #3b82f63d;
    box-shadow: 0 14px 28px #2563eb42
}

.gallery-toolbar {
    z-index: 3;
    gap: 8px;
    display: flex;
    position: absolute;
    top: clamp(14px, 2.4vw, 22px);
    right: clamp(14px, 2.4vw, 22px)
}

.gallery-fullscreen-btn {
    color: #f8fafc;
    cursor: pointer;
    background: #0f172a99;
    border: none;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    transition: transform .2s, background .2s;
    display: inline-flex
}

.gallery-fullscreen-btn:hover {
    background: #0f172ab8;
    transform: scale(1.04)
}

.gallery-fullscreen {
    z-index: 1600;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #030712eb;
    justify-content: center;
    align-items: center;
    padding: clamp(20px, 5vw, 48px);
    display: none;
    position: fixed;
    inset: 0
}

.gallery-fullscreen.is-visible {
    display: flex
}

.gallery-fullscreen .gallery-modern-view {
    background: #0f172a33;
    border: 1px solid #60a5fa3d;
    border-radius: clamp(18px, 3vw, 24px);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(18px, 2.6vw, 26px);
    width: min(1100px, 100%);
    padding: clamp(18px, 3vw, 26px)
}

.gallery-fullscreen-close {
    color: #f8fafc;
    cursor: pointer;
    background: #0f172abf;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    font-size: 1.5rem;
    display: flex;
    position: absolute;
    top: clamp(16px, 3vw, 24px);
    right: clamp(16px, 3vw, 24px)
}

.page-header-modern {
    flex-direction: column;
    gap: 18px;
    margin-bottom: clamp(24px, 4vw, 40px);
    display: flex
}

.tag-page-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: start;
    gap: clamp(24px, 4vw, 48px);
    display: grid
}

@media (max-width:992px) {
    .tag-page-grid {
        grid-template-columns: 1fr
    }

    .tag-sidebar {
        order: 2
    }
}

.tag-main {
    flex-direction: column;
    gap: clamp(24px, 4vw, 40px);
    min-width: 0;
    display: flex
}

.tag-post-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(18px, 3vw, 28px);
    display: grid
}

.tag-post-card {
    display: flex
}

.tag-pagination {
    justify-content: center;
    margin-top: 16px;
    display: flex
}

.tag-sidebar {
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
    display: flex
}

@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-blue-50: oklch(97% .014 254.604);
        --color-blue-200: oklch(88.2% .059 254.128);
        --color-blue-300: oklch(80.9% .105 251.813);
        --color-blue-400: oklch(70.7% .165 254.624);
        --color-blue-700: oklch(48.8% .243 264.376);
        --color-blue-800: oklch(42.4% .199 265.638);
        --color-blue-900: oklch(37.9% .146 265.522);
        --color-slate-50: oklch(98.4% .003 247.858);
        --color-slate-400: oklch(70.4% .04 256.788);
        --color-slate-600: oklch(44.6% .043 257.281);
        --color-slate-700: oklch(37.2% .044 257.287);
        --color-slate-900: oklch(20.8% .042 265.755);
        --color-gray-100: oklch(96.7% .003 264.542);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-300: oklch(87.2% .01 258.338);
        --color-gray-400: oklch(70.7% .022 261.325);
        --color-gray-500: oklch(55.1% .027 264.364);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-800: oklch(27.8% .033 256.848);
        --color-gray-900: oklch(21% .034 264.665);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-2xl: 42rem;
        --container-7xl: 80rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5/1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25/1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-wide: .025em;
        --leading-tight: 1.25;
        --leading-relaxed: 1.625;
        --radius-xs: .125rem;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --drop-shadow-md: 0 3px 3px #0000001f;
        --drop-shadow-lg: 0 4px 4px #00000026;
        --ease-in: cubic-bezier(.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --blur-sm: 8px;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-primary: #2b3990;
        --color-primary-light: #030725;
        --color-primary-dark: #1f2760
    }
}

@layer base {

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

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

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, 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
    }

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

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

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

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

    b,
    strong {
        font-weight: bolder
    }

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

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

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

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

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

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

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

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

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

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

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

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

    ::placeholder {
        opacity: 1
    }

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

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer components {

    .container,
    .container-fluid,
    .container-xl {
        width: 100%;
        margin-inline: auto
    }

    .container-xl {
        max-width: var(--container-7xl)
    }

    @media (min-width:768px) and (max-width:1023px) {

        .container-xl,
        .container-fluid {
            padding-left: 24px !important;
            padding-right: 24px !important
        }

        .container,
        .container-bn.container {
            padding-left: 20px !important;
            padding-right: 20px !important
        }
    }

    .row {
        gap: calc(var(--spacing)*4);
        grid-template-columns: repeat(12, minmax(0, 1fr));
        display: grid
    }

    @media (min-width:768px) and (max-width:1023px) {
        .row {
            gap: 20px !important
        }
    }

    .col-sm-12,
    .col-md-12,
    .col-lg-12,
    [class*=col-]:not([class*=col-span]):not([class*=col-sm]):not([class*=col-md]):not([class*=col-lg]) {
        grid-column: span 12/span 12 !important
    }

    @media (min-width:640px) {
        .col-sm-1 {
            grid-column: span 1/span 1 !important
        }

        .col-sm-2 {
            grid-column: span 2/span 2 !important
        }

        .col-sm-3 {
            grid-column: span 3/span 3 !important
        }

        .col-sm-4 {
            grid-column: span 4/span 4 !important
        }

        .col-sm-5 {
            grid-column: span 5/span 5 !important
        }

        .col-sm-6 {
            grid-column: span 6/span 6 !important
        }

        .col-sm-7 {
            grid-column: span 7/span 7 !important
        }

        .col-sm-8 {
            grid-column: span 8/span 8 !important
        }

        .col-sm-9 {
            grid-column: span 9/span 9 !important
        }

        .col-sm-10 {
            grid-column: span 10/span 10 !important
        }

        .col-sm-11 {
            grid-column: span 11/span 11 !important
        }

        .col-sm-12 {
            grid-column: span 12/span 12 !important
        }
    }

    @media (min-width:768px) {
        .col-md-1 {
            grid-column: span 1/span 1 !important
        }

        .col-md-2 {
            grid-column: span 2/span 2 !important
        }

        .col-md-3 {
            grid-column: span 3/span 3 !important
        }

        .col-md-4 {
            grid-column: span 4/span 4 !important
        }

        .col-md-5 {
            grid-column: span 5/span 5 !important
        }

        .col-md-6 {
            grid-column: span 6/span 6 !important
        }

        .col-md-7 {
            grid-column: span 7/span 7 !important
        }

        .col-md-8 {
            grid-column: span 8/span 8 !important
        }

        .col-md-9 {
            grid-column: span 9/span 9 !important
        }

        .col-md-10 {
            grid-column: span 10/span 10 !important
        }

        .col-md-11 {
            grid-column: span 11/span 11 !important
        }

        .col-md-12 {
            grid-column: span 12/span 12 !important
        }
    }

    @media (min-width:768px) and (max-width:1023px) {
        .col-md-3 {
            grid-column: span 4/span 4 !important
        }

        .col-md-6 {
            grid-column: span 6/span 6 !important
        }

        .col-md-4 {
            grid-column: span 4/span 4 !important
        }
    }

    @media (min-width:1024px) {
        .col-lg-1 {
            grid-column: span 1/span 1 !important
        }

        .col-lg-2 {
            grid-column: span 2/span 2 !important
        }

        .col-lg-3 {
            grid-column: span 3/span 3 !important
        }

        .col-lg-4 {
            grid-column: span 4/span 4 !important
        }

        .col-lg-5 {
            grid-column: span 5/span 5 !important
        }

        .col-lg-6 {
            grid-column: span 6/span 6 !important
        }

        .col-lg-7 {
            grid-column: span 7/span 7 !important
        }

        .col-lg-8 {
            grid-column: span 8/span 8 !important
        }

        .col-lg-9 {
            grid-column: span 9/span 9 !important
        }

        .col-lg-10 {
            grid-column: span 10/span 10 !important
        }

        .col-lg-11 {
            grid-column: span 11/span 11 !important
        }

        .col-lg-12 {
            grid-column: span 12/span 12 !important
        }
    }

    .d-flex {
        display: flex
    }

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

    .d-block {
        display: block
    }

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

    .d-none {
        display: none
    }

    .flex-row {
        flex-direction: row
    }

    .flex-column {
        flex-direction: column
    }

    .flex-wrap {
        flex-wrap: wrap
    }

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

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

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

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

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

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

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

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

    .align-items-baseline {
        align-items: baseline
    }

    .align-items-stretch {
        align-items: stretch
    }

    .m-0 {
        margin: calc(var(--spacing)*0)
    }

    .m-1 {
        margin: calc(var(--spacing)*1)
    }

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

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

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

    .m-auto {
        margin: auto
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-auto {
        margin-block: auto
    }

    .ms-auto {
        margin-left: auto
    }

    .me-auto {
        margin-right: auto
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .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-7 {
        margin-bottom: calc(var(--spacing)*7)
    }

    .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-11 {
        margin-bottom: calc(var(--spacing)*11)
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .navbar .btn-switch-mode {
        cursor: pointer;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        transition: all .2s;
        color: #ffffffe6 !important;
        background: 0 0 !important;
        border: none !important;
        padding: 8px !important;
        display: flex !important
    }

    .navbar .btn-switch-mode:hover {
        color: #fff !important;
        background: #ffffff1a !important
    }

    .navbar .btn-switch-mode svg {
        filter: drop-shadow(0 1px 2px #0003)
    }

    .navbar {
        align-items: center;
        width: 100%;
        min-height: 90px;
        display: flex;
        position: relative
    }

    #header {
        z-index: 1000 !important;
        background: 0 0 !important;
        position: sticky !important;
        top: 0 !important
    }

    nav.navbar.nav-main,
    .navbar.nav-main {
        will-change: background, box-shadow !important;
        background: linear-gradient(135deg, #2b3990, #030725) !important;
        transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
        box-shadow: 0 2px 8px #2b399026 !important
    }

    nav.navbar.nav-main.scrolled,
    .navbar.nav-main.scrolled {
        -webkit-backdrop-filter: blur(21px)saturate(180%) !important;
        backdrop-filter: blur(21px)saturate(180%) !important;
        background: linear-gradient(135deg, #2b3990b3 0%, #030725b3 100%) !important;
        box-shadow: 0 4px 20px #2b399040, inset 0 -1px #ffffff1a !important
    }

    #nav-top {
        background: linear-gradient(135deg, #2b3990, #030725) !important
    }

    .navbar>nav {
        justify-content: space-between;
        align-items: center;
        width: 100%;
        display: flex
    }

    .navbar-expand-md {
        align-items: center;
        width: 100%;
        display: flex
    }

    .navbar-brand {
        padding-block: calc(var(--spacing)*2);
        flex-shrink: 0;
        display: inline-block
    }

    .navbar-collapse {
        flex: 1;
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    @media (max-width:767px) {
        .navbar-collapse {
            display: none
        }
    }

    .navbar-nav {
        margin: calc(var(--spacing)*0);
        gap: calc(var(--spacing)*1);
        padding: calc(var(--spacing)*0);
        flex-direction: row;
        list-style-type: none;
        display: flex
    }

    .nav-item {
        position: relative
    }

    .nav-item:has(.dropdown-menu):after {
        content: "";
        pointer-events: auto;
        z-index: 59;
        background: 0 0;
        height: 40px;
        position: absolute;
        top: 100%;
        left: -20px;
        right: -20px
    }

    .nav-item-category:after {
        content: "";
        pointer-events: auto;
        z-index: 59;
        background: 0 0;
        height: 20px;
        position: absolute;
        top: 100%;
        left: -20px;
        right: -20px
    }

    .nav-item.show:has(.mega-menu):after {
        height: 60px;
        left: -40px;
        right: -40px
    }

    .nav-main .nav-link {
        padding-inline: calc(var(--spacing)*5);
        padding-block: calc(var(--spacing)*3);
        white-space: nowrap;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 500;
        text-decoration-line: none;
        transition: color .2s;
        display: block;
        position: relative;
        color: #ffffffbf !important
    }

    .nav-main .nav-link:hover,
    .nav-main .nav-item:hover>.nav-link {
        color: #fff !important
    }

    .nav-main .nav-link.active {
        color: #fff !important;
        font-weight: 600 !important
    }

    .navbar-left {
        flex: 1;
        align-items: center;
        display: flex
    }

    .navbar-right {
        align-items: center;
        gap: calc(var(--spacing)*3);
        margin-left: auto;
        display: flex;
        flex-wrap: nowrap !important
    }

    .navbar-right .nav-item {
        flex-shrink: 0
    }

    .navbar-right .nav-link {
        transition: all .3s;
        color: #ffffffd9 !important;
        cursor: pointer !important
    }

    .navbar-right .nav-link:hover {
        transform: scale(1.1);
        color: #fff !important
    }

    .navbar-right .search-icon {
        cursor: pointer
    }

    .display-flex {
        display: flex
    }

    .menu-backdrop {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 40;
        opacity: 0;
        pointer-events: none;
        background: #00000040;
        transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
        position: fixed;
        inset: 0
    }

    .menu-backdrop.block {
        pointer-events: auto
    }

    .navbar.nav-main {
        z-index: 50;
        position: relative
    }

    .dropdown {
        display: inline-block;
        position: relative
    }

    .dropdown-menu,
    .nav-dropdown-menu {
        left: calc(var(--spacing)*0);
        z-index: 60;
        min-width: 240px;
        padding-block: calc(var(--spacing)*3);
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        pointer-events: auto;
        -webkit-backdrop-filter: blur(16px)saturate(180%);
        backdrop-filter: blur(16px)saturate(180%);
        background: #ffffffd9;
        border: 1px solid #ffffff80;
        border-top: none;
        border-radius: 0 0 16px 16px;
        animation: .3s ease-out slideDown;
        display: none;
        position: absolute;
        box-shadow: 0 8px 32px #00000026, inset 0 0 0 1px #ffffff4d;
        margin-top: -2px !important;
        top: 100% !important
    }

    @keyframes slideDown {
        0% {
            opacity: 0;
            transform: translateY(-10px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .dropdown-item {
        margin-inline: calc(var(--spacing)*2);
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing)*5);
        padding-block: calc(var(--spacing)*3);
        white-space: nowrap;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        font-weight: 500;
        text-decoration-line: none;
        display: block;
        color: #1f2937 !important
    }

    .dropdown-item:hover {
        text-shadow: 0 1px 2px #0003;
        color: #fff !important;
        background: linear-gradient(135deg, #1e3a8a, #2563eb) !important
    }

    .dropdown:hover .dropdown-menu,
    .nav-item:hover .dropdown-menu,
    .nav-item:hover .nav-dropdown-menu {
        display: block !important
    }

    .breadcrumb {
        -webkit-backdrop-filter: blur(8px)saturate(120%);
        backdrop-filter: blur(8px)saturate(120%);
        border: 1px solid #0000000f;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        list-style: none;
        box-shadow: 0 1px 3px #0000000a;
        background: #f9fafb66 !important;
        border-radius: 12px !important;
        margin-bottom: 0 !important;
        padding: 10px 16px !important;
        display: flex !important
    }

    .breadcrumb-item {
        align-items: center;
        font-size: 14px;
        line-height: 1.5;
        display: flex
    }

    .breadcrumb-item+.breadcrumb-item:before {
        content: "";
        opacity: .6;
        background: #9ca3af;
        border-radius: 50%;
        width: 6px;
        height: 6px;
        margin: 0 12px;
        padding: 0;
        display: inline-block
    }

    .breadcrumb-item a {
        border-radius: 6px;
        padding: 3px 6px;
        font-weight: 500;
        text-decoration: none;
        transition: all .2s;
        color: #6b7280 !important
    }

    .breadcrumb-item a:hover {
        background: #2b39900f;
        color: #2b3990 !important
    }

    .breadcrumb-item.active {
        background: 0 0;
        border-radius: 6px;
        padding: 3px 6px;
        font-weight: 600;
        color: #374151 !important
    }

    .breadcrumb-item.active:before {
        display: none
    }

    .dark-mode {
        background-color: #070926 !important
    }

    .dark-mode .breadcrumb {
        border-color: #ffffff14;
        background: #07092699 !important
    }

    .dark-mode .breadcrumb-item a {
        color: #9ca3af !important
    }

    .dark-mode .breadcrumb-item a:hover {
        background: #60a5fa1a;
        color: #60a5fa !important
    }

    .dark-mode .breadcrumb-item.active {
        background: 0 0;
        color: #e5e7eb !important
    }

    .dark-mode .breadcrumb-item+.breadcrumb-item:before {
        background: #6b7280
    }

    @media (max-width:768px) {
        .breadcrumb {
            gap: 6px;
            font-size: 13px;
            padding: 10px 16px !important
        }

        .breadcrumb-item+.breadcrumb-item:before {
            width: 5px;
            height: 5px;
            margin: 0 8px
        }

        .breadcrumb-item.active {
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden
        }
    }

    .post-next-prev {
        margin-top: 3rem !important
    }

    .post-next-prev .row {
        gap: 16px
    }

    .post-next-prev .left,
    .post-next-prev .right {
        -webkit-backdrop-filter: blur(8px)saturate(120%);
        backdrop-filter: blur(8px)saturate(120%);
        background: #f9fafb80;
        border: 1px solid #0000000f;
        border-radius: 16px;
        padding: 20px;
        transition: all .3s cubic-bezier(.4, 0, .2, 1)
    }

    .post-next-prev .left:hover,
    .post-next-prev .right:hover {
        background: #f9fafbcc;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px #00000014
    }

    .post-next-prev .head-title a {
        text-transform: uppercase;
        letter-spacing: .5px;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        text-decoration: none;
        transition: color .2s;
        color: #6b7280 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        display: inline-flex !important
    }

    .post-next-prev .head-title a:hover {
        color: #2b3990 !important
    }

    .post-next-prev .head-title svg {
        width: 14px;
        height: 14px;
        transition: transform .2s
    }

    .post-next-prev .left:hover .head-title svg {
        transform: translate(-3px)
    }

    .post-next-prev .right:hover .head-title svg {
        transform: translate(3px)
    }

    .post-next-prev .title {
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important
    }

    .post-next-prev .title a {
        text-decoration: none;
        transition: color .2s;
        color: #1f2937 !important
    }

    .post-next-prev .title a:hover {
        color: #2b3990 !important
    }

    .dark-mode .post-next-prev .left,
    .dark-mode .post-next-prev .right {
        border-color: #ffffff14;
        background: #07092680 !important
    }

    .dark-mode .post-next-prev .left:hover,
    .dark-mode .post-next-prev .right:hover {
        background: #070926cc !important
    }

    .dark-mode .post-next-prev .head-title a {
        color: #9ca3af !important
    }

    .dark-mode .post-next-prev .head-title a:hover {
        color: #60a5fa !important
    }

    .dark-mode .post-next-prev .title a {
        color: #f3f4f6 !important
    }

    .dark-mode .post-next-prev .title a:hover {
        color: #60a5fa !important
    }

    .post-tags {
        -webkit-backdrop-filter: blur(8px)saturate(120%);
        backdrop-filter: blur(8px)saturate(120%);
        background: #f9fafb80;
        border: 1px solid #0000000f;
        border-radius: 16px;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 20px;
        margin-top: 3rem !important;
        display: flex !important
    }

    .post-tags .title {
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #6b7280 !important;
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important
    }

    .post-tags ul {
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important
    }

    .post-tags ul li {
        list-style: none;
        margin: 0 !important
    }

    .post-tags ul li a {
        background: linear-gradient(135deg, #2b399014, #03072514);
        border: 1.5px solid #2b399026;
        padding: 8px 16px;
        text-decoration: none;
        transition: all .2s;
        display: inline-block;
        box-shadow: 0 2px 4px #0000000a;
        color: #2b3990 !important;
        border-radius: 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important
    }

    .post-tags ul li a:hover {
        background: linear-gradient(135deg, #2b3990, #030725);
        border-color: #0000;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px #2b399033;
        color: #fff !important
    }

    .dark-mode .post-tags {
        border-color: #ffffff14;
        background: #07092680 !important
    }

    .dark-mode .post-tags .title {
        color: #9ca3af !important
    }

    .dark-mode .post-tags ul li a {
        background: linear-gradient(135deg, #60a5fa1a, #3b82f61a);
        border-color: #60a5fa33;
        color: #60a5fa !important
    }

    .dark-mode .post-tags ul li a:hover {
        background: linear-gradient(135deg, #60a5fa, #3b82f6);
        border-color: #0000;
        color: #fff !important
    }

    .section-newsticker {
        margin-bottom: 20px !important;
        padding: 0 !important
    }

    .newsticker-container {
        justify-content: center;
        align-items: center;
        position: relative
    }

    .newsticker-title {
        color: #fff;
        white-space: nowrap;
        -webkit-user-select: none;
        user-select: none;
        padding: 6px 10px;
        font-size: 13px;
        font-weight: 400;
        display: flex !important
    }

    .newsticker {
        height: 30px;
        margin: 0 0 0 15px;
        padding: 0;
        line-height: 30px;
        display: block
    }

    .newsticker li {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 800px;
        list-style: none;
        display: none;
        overflow: hidden !important
    }

    .newsticker li a {
        font-size: 14px;
        font-weight: 600
    }

    .main-slider-container {
        width: 100%;
        max-width: 100%;
        display: block;
        position: relative;
        overflow: hidden !important
    }

    .main-slider-container .slick-list {
        width: 100% !important;
        overflow: hidden !important
    }

    .main-slider-container .slick-track {
        align-items: stretch !important;
        display: flex !important
    }

    .main-slider-container .slick-slide {
        height: auto !important;
        display: flex !important
    }

    .main-slider-container .slick-slide>div {
        flex-direction: column;
        width: 100%;
        height: 100%;
        display: flex
    }

    .slick-slider {
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
        display: block;
        position: relative
    }

    .slick-list {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
        position: relative;
        overflow: hidden
    }

    .slick-list:focus {
        outline: none
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand
    }

    .slick-track {
        opacity: 1;
        will-change: transform;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: relative;
        top: 0;
        left: 0;
        transform: translateZ(0)
    }

    .slick-track:before,
    .slick-track:after {
        content: "";
        display: table
    }

    .slick-track:after {
        clear: both;
        clear: both
    }

    .slick-loading .slick-track {
        visibility: hidden
    }

    .slick-slide {
        float: left;
        height: 100%;
        min-height: 1px;
        display: none;
        position: relative;
        outline: none !important
    }

    .slick-slide>div {
        width: 100%;
        height: 100%
    }

    [dir=rtl] .slick-slide {
        float: right
    }

    .slick-slide img {
        display: block
    }

    .slick-slide.slick-loading img {
        display: none
    }

    .slick-slide.dragging img {
        pointer-events: none
    }

    .slick-initialized .slick-slide {
        display: block
    }

    .slick-loading .slick-slide {
        visibility: hidden
    }

    .slick-vertical .slick-slide {
        border: 1px solid #0000;
        height: auto;
        display: block
    }

    .slick-arrow.slick-hidden {
        display: none
    }

    .main-slider {
        width: 100%;
        display: block;
        position: relative
    }

    .main-slider .main-slider-item {
        background-color: #fafafa;
        width: 100%;
        height: 526px;
        position: relative
    }

    .badge-category {
        z-index: 2;
        border-radius: .063rem;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 400
    }

    .main-slider .main-slider-item .badge-category {
        position: relative
    }

    .main-slider .main-slider-item .img-link {
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0
    }

    .main-slider .main-slider-item .img-link:after {
        content: "";
        opacity: .9;
        will-change: opacity;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(#0000 0, #0000005c 50%, #0009 100%);
        width: 100%;
        height: 50%;
        transition: all .3s ease-in;
        display: block;
        position: absolute;
        bottom: 0
    }

    .main-slider .main-slider-item img {
        object-fit: cover;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0
    }

    .main-slider .main-slider-item .caption {
        pointer-events: none;
        z-index: 10;
        padding: 30px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }

    .main-slider .main-slider-item .caption .category-link {
        pointer-events: auto
    }

    .main-slider .main-slider-item .caption .title {
        color: #fff;
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
        position: relative
    }

    .main-slider .main-slider-item .caption .title a {
        color: #fff
    }

    .main-slider .main-slider-item .post-meta span,
    .main-slider .main-slider-item .post-meta a {
        color: #bebebe;
        font-size: 12px
    }

    .main-slider-nav {
        pointer-events: none;
        width: 100%;
        max-width: 100%;
        height: 36px;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0
    }

    .main-slider-nav .prev,
    .main-slider-nav .next {
        color: #fff;
        opacity: 0;
        z-index: 2;
        pointer-events: auto;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        position: relative;
        box-shadow: none !important;
        background-color: #0000 !important;
        border: none !important
    }

    .main-slider-nav .prev {
        float: left;
        text-align: left;
        left: 15px
    }

    .main-slider-nav .next {
        float: right;
        text-align: right;
        right: 15px
    }

    .main-slider-nav svg {
        vertical-align: middle;
        width: 36px;
        height: 36px;
        display: inline-block;
        position: relative
    }

    .main-slider .main-slider-item .post-meta {
        z-index: 14;
        margin-bottom: 0;
        position: relative
    }

    .main-slider .main-slider-item .post-meta a {
        pointer-events: auto
    }

    .main-slider-container:hover .prev,
    .main-slider-container:hover .next {
        transition: all .3s ease-in-out;
        opacity: .8 !important
    }

    .section-featured {
        height: 526px;
        overflow: hidden;
        padding: 0 !important
    }

    .section-featured .col-featured-left {
        width: 53.1%;
        padding-right: 2px
    }

    .section-featured .col-featured-right {
        width: 46.9%;
        padding-left: 2px
    }

    .section-featured .col-featured-right .item {
        background-color: #fafafa;
        width: 100%;
        height: 242px;
        display: block;
        position: relative
    }

    .section-featured .col-featured-right .item .img-link {
        width: 100%;
        height: 100%;
        display: block
    }

    .section-featured .col-featured-right .item img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .section-featured .col-featured-right .item-large {
        height: 280px;
        overflow: hidden
    }

    .section-featured .col-featured-right .item:after {
        content: "";
        opacity: .9;
        will-change: opacity;
        pointer-events: none;
        background: linear-gradient(#0000 0, #0006 50%, #000000a3 100%);
        width: 100%;
        height: 50%;
        transition: all .3s ease-in;
        display: block;
        position: absolute;
        bottom: 0
    }

    .section-featured .col-featured-right .img-item {
        background-position: 50%;
        background-size: cover;
        width: 100%;
        height: 100%;
        display: block;
        position: relative
    }

    .col-featured-right .item .caption {
        pointer-events: none;
        padding: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }

    .col-featured-right .item .caption .category-link {
        pointer-events: auto
    }

    .col-featured-right .item .caption .title {
        color: #fff;
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px
    }

    .col-featured-right .item .caption .title a {
        color: #fff
    }

    .col-featured-right .item .post-meta span,
    .col-featured-right .item .post-meta a {
        color: #bebebe;
        font-size: 11px
    }

    .col-sidebar {
        padding-left: 10px
    }

    @media (min-width:992px) {
        .col-sidebar {
            padding-left: 35px
        }
    }

    .post-meta {
        align-items: center;
        width: 100%;
        margin: 0;
        display: flex
    }

    .post-meta span {
        color: #7a7a7a;
        white-space: nowrap;
        margin-right: 8px;
        font-size: 12px;
        list-style: none
    }

    .post-meta a {
        color: #7a7a7a;
        white-space: nowrap;
        margin-right: 8px;
        font-size: 12px;
        font-weight: 600;
        list-style: none
    }

    .lazyload,
    .lazyloading {
        opacity: 0
    }

    .lazyloaded {
        opacity: 1;
        transition: opacity .3s
    }

    img.lazyload:not([src]) {
        visibility: hidden
    }

    .about-author {
        border-top: 1px solid #f0f0f0;
        padding-top: 30px;
        padding-bottom: 30px
    }

    .about-author .img-author {
        border: 1px solid #eee;
        border-radius: 2px;
        width: 110px;
        height: 110px
    }

    .about-author .username {
        margin-bottom: 5px;
        display: block
    }

    .about-author .social {
        margin-top: 15px
    }

    .section-comments {
        display: block
    }

    .section-comments .nav-tabs {
        border-bottom: 2px solid #e5e7eb;
        margin-bottom: 30px;
        position: relative
    }

    .section-comments .nav-tabs button {
        border-bottom: 2px solid #0000;
        padding: 10px 30px;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        transition: color .2s, border-color .2s;
        position: relative;
        bottom: -1px;
        color: #374151 !important;
        background-color: #0000 !important;
        border: 0 !important
    }

    .section-comments .nav-tabs button:hover {
        color: #2b3990 !important
    }

    .section-comments .nav-tabs button.active {
        color: #2b3990 !important;
        border-bottom-color: #2b3990 !important
    }

    .section-comments .form-group {
        margin-bottom: 15px
    }

    .section-comments .form-group label {
        margin-bottom: 5px;
        font-weight: 600
    }

    .section-comments textarea {
        resize: none;
        height: 100px;
        max-height: 100px;
        padding: 15px 20px
    }

    .section-comments .comment-list {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block
    }

    .section-comments .comment-list li {
        width: 100%;
        margin-bottom: 20px;
        list-style: none;
        display: table
    }

    .section-comments .comment-list li .left {
        vertical-align: top;
        text-align: left;
        width: 55px;
        height: auto;
        padding-right: 10px;
        display: table-cell
    }

    .section-comments .comment-list li .left a {
        display: block
    }

    .section-comments .comment-list li .left img {
        border: 1px solid #eee;
        border-radius: 2px;
        width: 54px;
        height: 54px
    }

    .section-comments .comment-list li .right {
        vertical-align: top;
        display: table-cell
    }

    .section-comments .comment-list li .right .row-custom {
        margin-bottom: 6px
    }

    .section-comments .comment-list li .right .username {
        font-size: 14px;
        display: inline-block;
        color: #222 !important;
        font-weight: 600 !important
    }

    .dark-mode .section-comments .comment-list li .right .username {
        color: #fff !important
    }

    .section-comments .comment-list li .right a {
        font-size: 12px
    }

    .section-comments .comment-meta,
    .section-comments .comment-meta span,
    .section-comments .comment-meta a {
        color: #777;
        font-size: 12px
    }

    .section-comments .comment-meta .item {
        align-items: center;
        margin-right: 15px;
        display: flex
    }

    .section-comments .comment-meta .item a {
        align-items: center;
        display: flex
    }

    .section-comments .comment-meta .btn-reply {
        margin-left: 15px
    }

    .section-comments .comment-meta svg {
        margin-right: 5px
    }

    .section-comments .comment-meta .btn-reply:hover {
        color: #444
    }

    .section-comments .comment-meta .btn-comment-like {
        margin-left: 15px;
        position: relative
    }

    .section-comments .comment-total {
        margin-top: 25px;
        margin-bottom: 30px
    }

    .section-comments .label-comment {
        margin-bottom: 0;
        margin-right: 10px;
        font-size: 15px;
        font-weight: 600;
        display: block
    }

    .section-comments .comment-total span {
        font-size: 15px;
        display: block
    }

    .row-sub-comment {
        margin: 0 !important;
        padding: 0 !important
    }

    .sub-comment-form {
        background: #f9fafb;
        border: 1.5px solid #e5e7eb;
        border-radius: 12px;
        margin-top: 1rem;
        padding: 1.25rem;
        transition: all .2s
    }

    .dark-mode .sub-comment-form {
        background: #0f172a;
        border-color: #334155
    }

    .sub-comment-form .form-group {
        margin-bottom: 1rem
    }

    .sub-comment-form .form-group:last-child {
        margin-bottom: 0
    }

    .sub-comment-form-registered .form-group {
        margin-bottom: 1rem
    }

    .sub-comment-form-registered {
        margin-top: 1rem
    }

    .sub-comment-form .form-input,
    .sub-comment-form .form-textarea,
    .sub-comment-form-registered .form-input,
    .sub-comment-form-registered .form-textarea {
        color: #111827;
        background: #fff;
        border: 1.5px solid #e5e7eb;
        border-radius: 10px;
        padding: .75rem 1rem;
        font-size: .9375rem;
        transition: all .2s;
        width: 100% !important
    }

    .sub-comment-form .form-input:focus,
    .sub-comment-form .form-textarea:focus,
    .sub-comment-form-registered .form-input:focus,
    .sub-comment-form-registered .form-textarea:focus {
        border-color: #2b3990;
        outline: none;
        box-shadow: 0 0 0 3px #2b39901a
    }

    .dark-mode .sub-comment-form .form-input,
    .dark-mode .sub-comment-form .form-textarea,
    .dark-mode .sub-comment-form-registered .form-input,
    .dark-mode .sub-comment-form-registered .form-textarea {
        color: #f1f5f9;
        background: #1e293b;
        border-color: #334155
    }

    .dark-mode .sub-comment-form .form-input:focus,
    .dark-mode .sub-comment-form .form-textarea:focus,
    .dark-mode .sub-comment-form-registered .form-input:focus,
    .dark-mode .sub-comment-form-registered .form-textarea:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px #60a5fa26
    }

    .row-sub-comment .form-textarea {
        resize: vertical;
        min-height: 100px;
        line-height: 1.6
    }

    .row-sub-comment .comment-list {
        margin-top: 20px !important
    }

    .row-sub-comment .comment-list li {
        margin-bottom: 15px !important
    }

    .btn-delete-comment {
        margin-left: 15px;
        color: #d43f3a !important
    }

    .message-comment-result {
        min-height: 22px;
        margin: 10px 0 !important
    }

    .comment-success-message {
        color: #00a65a;
        position: relative;
        margin: 0 !important
    }

    .alert-message,
    .alert-messages {
        border-radius: 2px;
        padding: 12px 15px
    }

    .alert-messages ul {
        padding: 0 !important
    }

    .alert-messages li {
        list-style: none
    }

    .alert-message svg {
        flex-shrink: 0 !important
    }

    .scrollup {
        z-index: 999999;
        display: none;
        position: fixed;
        bottom: 20px;
        right: 15px;
        color: #fff !important
    }

    .scrollup:hover,
    .scrollup:active,
    .scrollup:focus {
        color: #fff !important
    }

    .scrollup i {
        text-align: center;
        background-color: var(--vr-block-color);
        z-index: 999999;
        border-radius: 2px;
        width: 42px;
        height: 42px;
        line-height: 42px;
        display: block
    }

    .cookies-warning {
        z-index: 9999999;
        background-color: #fff;
        border-radius: 2px;
        width: 400px;
        max-width: 100%;
        padding: 35px 25px;
        position: fixed;
        bottom: 20px;
        left: 20px;
        box-shadow: 0 0 12px #00000024
    }

    .cookies-warning .text {
        color: #333;
        width: 100%;
        margin-bottom: 20px;
        line-height: 26px
    }

    .cookies-warning .close {
        font-size: 12px;
        position: absolute;
        top: 10px;
        right: 10px;
        box-shadow: none !important;
        background-color: #0000 !important;
        border: 0 !important
    }

    .cookies-warning p {
        margin-bottom: 0
    }

    .cookies-warning a {
        color: var(--vr-theme-color) !important
    }

    .pagination-wrapper {
        justify-content: center;
        align-items: center;
        margin: 2rem 0;
        padding: 1rem 0;
        display: flex
    }

    .pagination-modern {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex
    }

    .pagination-item {
        justify-content: center;
        align-items: center;
        display: flex
    }

    .pagination-link {
        color: #374151;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        min-width: 44px;
        height: 44px;
        padding: 0 16px;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        box-shadow: 0 1px 2px #0000000d
    }

    .pagination-link:hover {
        color: #2563eb;
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px #0000001a
    }

    .pagination-link:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px #0000000d
    }

    .pagination-item.active .pagination-link {
        color: #fff;
        background: linear-gradient(135deg, #2b3990, #3d4fa8);
        border-color: #2b3990;
        font-weight: 600;
        box-shadow: 0 4px 12px #2b39904d
    }

    .pagination-item.active .pagination-link:hover {
        color: #fff;
        background: linear-gradient(135deg, #3d4fa8, #4f63c0);
        border-color: #3d4fa8;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px #2b399066
    }

    .pagination-nav .pagination-link {
        min-width: 44px;
        padding: 0 12px
    }

    .pagination-nav .pagination-link svg {
        width: 18px;
        height: 18px
    }

    .pagination-nav .pagination-link:hover {
        background: #f3f4f6;
        border-color: #2563eb
    }

    .dark-mode .pagination-link {
        color: #e2e8f0;
        background: #1e293bcc;
        border-color: #334155
    }

    .dark-mode .pagination-link:hover {
        color: #60a5fa;
        background: #334155e6;
        border-color: #475569
    }

    .dark-mode .pagination-item.active .pagination-link {
        color: #fff;
        background: linear-gradient(135deg, #3d4fa8, #4f63c0);
        border-color: #4f63c0
    }

    .dark-mode .pagination-item.active .pagination-link:hover {
        background: linear-gradient(135deg, #4f63c0, #60a5fa);
        border-color: #60a5fa
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex
    }

    .pagination li {
        justify-content: center;
        align-items: center;
        display: flex
    }

    .pagination li a {
        color: #374151;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        min-width: 44px;
        height: 44px;
        padding: 0 16px;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        box-shadow: 0 1px 2px #0000000d;
        box-shadow: none !important;
        outline: none !important
    }

    .pagination li.active a {
        background: linear-gradient(135deg, #2b3990, #3d4fa8);
        border-color: #2b3990;
        font-weight: 600;
        color: #fff !important;
        box-shadow: 0 4px 12px #2b39904d !important
    }

    .pagination a:hover,
    .pagination a:focus,
    .pagination a:active {
        transform: translateY(-2px);
        color: #2563eb !important;
        background: #f9fafb !important;
        border-color: #d1d5db !important;
        box-shadow: 0 4px 12px #0000001a !important
    }

    .pagination li.active a:hover {
        color: #fff !important;
        background: linear-gradient(135deg, #3d4fa8, #4f63c0) !important;
        border-color: #3d4fa8 !important;
        box-shadow: 0 6px 16px #2b399066 !important
    }

    .dark-mode .pagination li a {
        color: #e2e8f0;
        background: #1e293bcc;
        border-color: #334155
    }

    .dark-mode .pagination li a:hover {
        color: #60a5fa;
        background: #334155e6;
        border-color: #475569
    }

    .dark-mode .pagination li.active a {
        color: #fff;
        background: linear-gradient(135deg, #3d4fa8, #4f63c0);
        border-color: #4f63c0
    }

    .dark-mode .pagination li.active a:hover {
        background: linear-gradient(135deg, #4f63c0, #60a5fa);
        border-color: #60a5fa
    }

    .sidebar-widget {
        margin-bottom: 35px;
        display: block
    }

    .sidebar-widget .widget-head {
        border-bottom: 2px solid #eee;
        margin-bottom: 30px;
        position: relative
    }

    .sidebar-widget .widget-head:after {
        content: "";
        width: 60px;
        height: 2px;
        display: block;
        position: relative;
        bottom: -2px
    }

    .sidebar-widget .widget-head-tabs {
        border-bottom: 0 !important
    }

    .sidebar-widget .widget-head-tabs:after {
        display: none
    }

    .sidebar-widget .widget-head-tabs .nav-tabs {
        border: 0 !important
    }

    .sidebar-widget .widget-head-tabs .nav-tabs li {
        width: 50%
    }

    .sidebar-widget .widget-head-tabs .nav-tabs li .btn {
        text-align: center;
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        line-height: 28px;
        display: block
    }

    .sidebar-widget .widget-head-tabs .nav-tabs .active {
        color: #fff !important
    }

    .sidebar-widget .widget-head .title {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
        line-height: 26px
    }

    .sidebar-widget .tag-list {
        margin: 0;
        padding: 0 0 15px;
        display: block
    }

    .sidebar-widget .tag-list li {
        margin-bottom: 7px;
        margin-right: 5px;
        list-style: none;
        display: inline-block
    }

    .sidebar-widget .tag-list li a {
        color: #888;
        background-color: #f7f7f7;
        border: 1px solid #f3f3f3;
        border-radius: 2px;
        padding: 7px 12px;
        font-size: 13px;
        text-decoration: none;
        display: inline-block
    }

    .sidebar-widget .tag-list li a:hover {
        color: #fff !important
    }

    .sidebar-widget .poll {
        border-bottom: 1px solid #eee;
        width: 100%;
        margin-top: 30px;
        padding-bottom: 30px;
        display: block;
        position: relative;
        overflow: hidden
    }

    .sidebar-widget .poll:first-child {
        margin-top: 0 !important
    }

    .sidebar-widget .poll:last-child {
        border: 0
    }

    .sidebar-widget .poll .title {
        text-transform: none;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: 600;
        line-height: 22px
    }

    .sidebar-widget .poll .option {
        margin-bottom: 15px
    }

    .sidebar-widget .poll .button-cnt {
        align-items: center;
        margin-top: 20px;
        display: flex
    }

    .sidebar-widget .poll .button-cnt button {
        margin-right: 15px
    }

    .sidebar-widget .poll .result {
        display: none
    }

    .sidebar-widget .poll .result .progress {
        color: #222;
        background-color: #f3f3f3;
        border-radius: 1px;
        height: 16px;
        margin-bottom: 15px;
        box-shadow: none !important
    }

    .sidebar-widget .poll .result .progress .progress-bar {
        font-size: 11px;
        font-weight: 600;
        box-shadow: none !important
    }

    .sidebar-widget .poll .result .progress .progress-bar-0 {
        color: #444
    }

    .sidebar-widget .poll .result .progress .progress-bar-0 span {
        margin-left: 5px
    }

    .sidebar-widget .poll-error-message {
        color: #e95350;
        display: none
    }

    .sidebar-widget .a-view-results {
        cursor: pointer;
        font-weight: 600
    }

    .sidebar-widget .total-vote {
        text-align: center;
        margin-top: 19px;
        margin-bottom: 5px;
        font-weight: 700
    }

    .sidebar-widget .poll .result .progress span {
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        position: absolute;
        right: 0
    }

    .sidebar-widget .form-check {
        margin-bottom: 10px
    }

    .widget-follow {
        display: flex
    }

    .widget-follow .item a {
        border-radius: .125rem;
        align-items: center;
        margin-bottom: 10px;
        padding: 6px 15px;
        display: flex;
        color: #fff !important
    }

    .widget-follow .item a i {
        margin-right: 10px;
        font-size: 22px;
        display: block
    }

    .widget-follow .item a:hover {
        background-image: linear-gradient(#0000001a 0 0)
    }

    .list-followers {
        max-height: 300px;
        overflow: hidden auto
    }

    .color-facebook {
        background-color: #3b5998
    }

    .color-twitter {
        background-color: #14171a
    }

    .color-pinterest {
        background-color: #cb2027
    }

    .color-instagram {
        background-color: #125688
    }

    .color-linkedin {
        background-color: #007bb5
    }

    .color-vk {
        background-color: #4d76a1
    }

    .color-rss {
        background-color: #f8991d
    }

    .color-telegram {
        background-color: #08c
    }

    .color-youtube {
        background-color: red
    }

    .color-whatsapp {
        background-color: #25d366
    }

    .color-tiktok {
        background-color: #000
    }

    .color-discord {
        background-color: #5865f2
    }

    .color-tumblr {
        background-color: #35465c
    }

    .color-twitch {
        background-color: #9146ff
    }

    .title-index {
        text-align: center;
        color: #0000;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        height: 0;
        margin: 0;
        padding: 0;
        line-height: 0
    }

    .section-videos {
        background-color: #0d0d0d;
        padding-top: 60px;
        padding-bottom: 60px
    }

    .section-videos .video-large,
    .section-videos .video-small {
        position: relative
    }

    .section-videos .section-title {
        border-bottom: 2px solid #0000 !important
    }

    .section-videos .section-title:after {
        background: #fff
    }

    .section-videos .title {
        color: #fff;
        margin-top: 0;
        font-size: 22px;
        font-weight: 600;
        line-height: 26px;
        position: relative
    }

    .section-videos .image {
        background-color: #1b1b1b;
        border-radius: 1px;
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .section-videos .image a {
        width: 100%;
        display: block
    }

    .section-videos .img-container {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex
    }

    .section-videos .image:after {
        content: "";
        opacity: .9;
        will-change: opacity;
        background: linear-gradient(#0000 0, #0000005c 50%, #0009 100%);
        width: 100%;
        height: 50%;
        transition: all .3s ease-in;
        display: block;
        position: absolute;
        bottom: 0;
        pointer-events: none !important
    }

    .section-videos .image .img-bg {
        height: 100% !important
    }

    .section-videos .img-container img {
        width: auto !important;
        max-width: none !important;
        height: 100% !important
    }

    .section-videos .caption {
        pointer-events: none;
        padding: 30px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }

    .section-videos .caption a {
        pointer-events: auto !important
    }

    .section-videos .caption .title {
        color: #fff;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
        line-height: 26px;
        position: relative
    }

    .section-videos .caption .title a {
        color: #fff
    }

    .section-videos .caption .title a:hover {
        color: #fff !important
    }

    .section-videos .media-icon {
        inset: 15px 15px auto auto
    }

    .section-videos .post-meta span,
    .section-videos .post-meta a {
        color: #bebebe
    }

    .post-item-small {
        margin-bottom: 25px
    }

    .post-item-small .left {
        width: 130px;
        display: table-cell;
        position: relative
    }

    .post-item-small .left .image {
        background-color: #fafafa;
        width: 130px;
        height: 91px;
        display: block;
        position: relative
    }

    .post-item-small .left .image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .post-item-small .right {
        padding-left: 15px;
        position: relative
    }

    .post-item-small .title {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .post-item-small .title a {
        display: block
    }

    .post-item-small .media-icon {
        width: 32px;
        height: 32px;
        line-height: 32px
    }

    .post-item-small .media-icon svg {
        width: 32px;
        height: 32px
    }

    .small-post-meta {
        align-items: center;
        margin: 0;
        display: flex
    }

    .small-post-meta a {
        color: #7a7a7a;
        white-space: nowrap;
        margin-right: 8px;
        font-size: 12px;
        font-weight: 600;
        list-style: none
    }

    .small-post-meta span {
        color: #7a7a7a;
        white-space: nowrap;
        margin-right: 8px;
        font-size: 12px;
        list-style: none
    }

    .section-block-2 .post-item {
        margin-bottom: 30px
    }

    .nav-category-block {
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important
    }

    .nav-category-block .nav-item .nav-link {
        color: #222;
        padding: 2px 5px;
        font-size: 13px;
        font-weight: 600;
        background-color: #0000 !important;
        border: 0 !important
    }

    .section {
        margin-bottom: 45px;
        display: block
    }

    .section .section-title .view-all {
        font-size: 13px;
        font-weight: 600;
        position: relative
    }

    .section-mid-title .title,
    .section .section-content .title {
        font-family: var(--vr-font-secondary)
    }

    .section .section-head .title {
        font-family: var(--vr-font-primary)
    }

    .section-cat-slider .section-content {
        width: 100%;
        height: 364px;
        overflow: hidden
    }

    .section-cat-slider .slider-row {
        margin-left: -12px;
        margin-right: -12px
    }

    .section-cat-slider .slider-row .slider-col {
        padding-left: 12px;
        padding-right: 12px
    }

    .section-cat-slider .post-item .title {
        font-size: 16px;
        line-height: 24px
    }

    .section-cat-slider .img-slider-ratio {
        --bs-aspect-ratio: 76.67% !important
    }

    .section-cat-slider .img-slider-ratio img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .section-cat-block .col-post-item-vr {
        margin-bottom: 30px
    }

    .section-cat-block .post-item-vr {
        width: 100%;
        height: 100%;
        position: relative;
        margin-bottom: 0 !important
    }

    .section-cat-block .post-item-vr .image {
        height: 340px
    }

    .section-cat-block .post-item-vr .image img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .section-cat-block .post-item-vr .caption {
        width: 100%;
        padding: 15px;
        display: block;
        position: absolute;
        bottom: 0
    }

    .section-cat-block .post-item-vr .caption .title {
        margin-bottom: 5px;
        font-size: 18px;
        line-height: 25px
    }

    @media (min-width:768px) and (max-width:1023px) {
        .section-cat-block .post-item-vr .image {
            height: 280px
        }

        .section-cat-block .post-item-vr .caption .title {
            font-size: 16px;
            line-height: 22px
        }

        .section-cat-block .post-item-vr .caption {
            padding: 12px
        }

        .section-cat-block .col-post-item-vr {
            margin-bottom: 24px
        }

        .post-item-small .title {
            font-size: 15px;
            line-height: 20px
        }

        .section-block-2 .post-item {
            margin-bottom: 24px
        }

        .post-card {
            min-height: 320px
        }

        .post-item .title {
            font-size: 18px;
            line-height: 24px
        }

        .post-item .description {
            font-size: 13px;
            line-height: 20px
        }

        .section-title .title {
            font-size: 24px;
            line-height: 30px
        }

        .page-title {
            font-size: 26px;
            line-height: 32px
        }

        .navbar {
            flex-direction: column !important;
            align-items: stretch !important;
            min-height: auto !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important
        }

        nav.navbar.nav-main {
            padding-top: 10px !important;
            padding-bottom: 10px !important
        }

        .navbar.nav-main {
            display: flex !important
        }

        .navbar>nav {
            flex-direction: column !important;
            gap: 0 !important;
            min-height: auto !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            display: flex !important
        }

        .navbar .container-xl {
            grid-template-rows: auto auto;
            grid-template-columns: 1fr;
            min-height: 60px;
            gap: 12px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
            display: grid !important;
            position: relative !important
        }

        .navbar-brand {
            z-index: 1;
            flex-shrink: 0;
            grid-area: 1/1;
            position: relative;
            order: 1 !important;
            justify-content: flex-start !important;
            align-items: center !important;
            width: auto !important;
            margin: 0 !important;
            padding: 8px 0 !important;
            display: flex !important
        }

        .navbar-brand>a {
            align-items: center !important;
            margin: 0 !important;
            padding: 0 !important;
            display: flex !important
        }

        .navbar-brand .logo {
            visibility: visible !important;
            opacity: 1 !important;
            width: auto !important;
            height: auto !important;
            max-height: 38px !important;
            display: block !important
        }

        .navbar-collapse {
            grid-area: 2/1;
            flex-direction: column !important;
            order: 2 !important;
            gap: 0 !important;
            width: 100% !important;
            display: flex !important
        }

        .navbar-collapse .navbar-right {
            z-index: 10 !important;
            flex-wrap: nowrap !important;
            flex-shrink: 0 !important;
            align-items: center !important;
            gap: 8px !important;
            width: auto !important;
            margin: 0 !important;
            display: flex !important;
            position: absolute !important;
            top: 8px !important;
            right: 20px !important
        }

        .navbar-left {
            margin-top: 0;
            overflow: visible;
            flex: auto !important;
            order: 1 !important;
            width: 100% !important;
            min-width: 0 !important
        }

        .navbar-left .navbar-nav {
            justify-content: flex-start;
            align-items: center;
            gap: 6px 4px;
            width: 100%;
            flex-wrap: wrap !important;
            gap: 0 !important
        }

        .nav-main .nav-link {
            letter-spacing: .2px;
            padding: 8px 12px !important;
            font-size: 12px !important;
            line-height: 1.4 !important
        }

        .navbar-left .nav-item {
            flex-shrink: 1;
            max-width: fit-content
        }

        .navbar-collapse {
            justify-content: flex-start !important;
            align-items: flex-start !important;
            min-height: auto !important;
            padding: 0 !important
        }

        .nav-link .icon-arrow-down {
            margin-left: 4px !important;
            font-size: 10px !important
        }

        .nav-live-tv {
            gap: 8px !important;
            padding: 8px 14px !important
        }

        .live-tv-text-nav {
            white-space: nowrap;
            font-size: 12px !important
        }

        .live-tv-play-nav,
        .live-tv-play-nav svg {
            width: 18px !important;
            height: 18px !important
        }

        .search-icon {
            padding: 8px 10px !important
        }

        .search-icon svg {
            width: 20px !important;
            height: 20px !important
        }

        .btn-switch-mode {
            padding: 8px 10px !important
        }

        .btn-switch-mode svg {
            width: 18px !important;
            height: 18px !important
        }

        .navbar-left .navbar-nav {
            overflow: visible;
            flex-wrap: wrap !important;
            max-height: none !important
        }

        .d-md-none {
            display: none !important
        }

        .mega-menu {
            max-width: 100%;
            left: 0;
            right: 0
        }

        .mega-menu .menu-left {
            width: 25%;
            min-width: 200px;
            padding: 16px
        }

        .mega-menu .menu-right {
            width: 75%;
            padding: 16px
        }

        .mega-menu .row {
            gap: 12px
        }

        .mega-menu .col-sm-2,
        .mega-menu-programs .col-6 {
            grid-column: span 6/span 6 !important
        }

        .mega-menu-programs .col-sm-4 {
            grid-column: span 4/span 4 !important
        }

        .mega-menu-programs .col-md-3 {
            grid-column: span 3/span 3 !important
        }

        .section-featured,
        .section-featured .container-xl,
        .section-featured .grid {
            height: auto !important;
            max-height: 840px !important
        }

        .section-featured .col-span-9,
        .section-featured .col-span-3 {
            height: auto;
            max-height: 840px
        }

        .modern-slider-container,
        .modern-slider-item {
            height: auto !important;
            max-height: 840px !important
        }

        .slider-title {
            font-size: 24px !important;
            line-height: 30px !important
        }

        .section {
            margin-bottom: 36px
        }

        .category-small-grid {
            gap: 16px
        }

        .section-block-2 .row {
            gap: 20px
        }

        .section-cat-block .col-lg-3 {
            grid-column: span 4/span 4 !important
        }

        .section-block-2 .col-lg-4,
        .section-block-2 .col-lg-6 {
            grid-column: span 6/span 6 !important
        }

        .sidebar {
            margin-top: 0
        }

        .sidebar-widget {
            margin-bottom: 24px
        }

        .sidebar-widget .widget-head .title {
            font-size: 16px !important
        }

        .widget-follow .item {
            margin-bottom: 12px
        }

        .widget-follow .item a {
            min-height: 56px
        }

        .widget-follow .item a i {
            font-size: 28px !important
        }

        .sidebar-category {
            margin-top: 0
        }
    }

    .section-cat-block .post-item-vr .caption .title a {
        color: #fff !important
    }

    .section-cat-block .post-item-vr .caption .post-meta a,
    .section-cat-block .post-item-vr .caption .post-meta span {
        color: #bebebe !important
    }

    .section-cat-block .post-item-vr .image:after {
        content: "";
        opacity: .9;
        will-change: opacity;
        pointer-events: none;
        background: linear-gradient(#0000 0, #0006 50%, #000000a3 100%);
        width: 100%;
        height: 50%;
        transition: all .3s ease-in;
        display: block;
        position: absolute;
        bottom: 0
    }

    .section-category .dropdown .dropdown-menu {
        left: -125px !important
    }

    .category-block-links-mobile {
        display: none
    }

    .section-page {
        display: block
    }

    .commentator-detail-page {
        padding-top: 0 !important
    }

    .section-page .page-title {
        margin-bottom: 20px;
        font-size: 28px;
        font-weight: 600;
        line-height: 36px
    }

    .section-page .font-text {
        font-family: var(--vr-font-tertiary) !important
    }

    .section-page .page-text iframe,
    .section-page .page-text img,
    .section-page .page-text object {
        max-width: 100%
    }

    .section-page .form-contact {
        margin-top: 30px
    }

    .section-page .title-send-message {
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 600
    }

    .section-page .form-contact textarea {
        height: 150px;
        min-height: 150px
    }

    .section-page .contact-icon {
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        margin-right: 15px;
        display: flex
    }

    .page-title {
        margin-bottom: 20px;
        font-size: 28px;
        font-weight: 600;
        line-height: 36px
    }

    .page-content {
        font-family: var(--vr-font-tertiary)
    }

    .latest-posts {
        margin-bottom: 45px
    }

    .page-gallery .filters {
        text-align: center;
        width: auto;
        margin-bottom: 45px;
        display: block;
        position: relative
    }

    .page-gallery .filters input {
        display: none
    }

    .page-gallery .filters .btn {
        box-shadow: none;
        text-align: center;
        background-color: #fff;
        border: 0;
        margin: 5px 10px;
        padding: 6px 15px;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        transition: all .45s ease-in-out;
        position: relative;
        color: #555 !important;
        box-shadow: none !important;
        background-color: #0000 !important
    }

    .page-gallery .filters .active:after {
        content: "";
        width: 100%;
        height: 3px;
        position: absolute;
        bottom: -3px;
        left: 0
    }

    .page-gallery .filters .btn:last-child {
        margin-right: 0
    }

    .page-gallery .filters .btn:focus:after,
    .page-gallery .filters .btn:hover:after,
    .page-gallery .filters .btn:active:after {
        content: "";
        width: 100%;
        height: 2px;
        transition: all .45s ease-in-out;
        position: absolute;
        bottom: -2px;
        left: 0
    }

    .page-gallery .gallery .gallery-item {
        cursor: pointer;
        margin-bottom: 15px;
        position: relative;
        padding-left: 7.5px !important;
        padding-right: 7.5px !important
    }

    .page-gallery .gallery .gallery-item .item-inner {
        display: block;
        position: relative;
        overflow: hidden
    }

    .page-gallery .gallery img {
        width: 100%;
        transition: all .5s
    }

    .page-gallery .gallery .lightbox img {
        border-radius: 0;
        width: 100%;
        position: relative
    }

    .page-gallery .gallery .lightbox:after {
        opacity: 0;
        content: "";
        background-color: #0009;
        width: 100%;
        height: 100%;
        transition: all .4s;
        position: absolute;
        top: 0;
        left: 0
    }

    .page-gallery .gallery .lightbox:hover:after,
    .page-gallery .gallery .lightbox:hover:before {
        opacity: .5
    }

    .page-gallery .gallery .gallery-item:hover img {
        transform: scale(1.1)
    }

    .page-gallery .row-masonry {
        min-height: 700px;
        margin-left: -7.5px;
        margin-right: -7.5px
    }

    .page-gallery .gallery .gallery-item .caption {
        color: #fff;
        z-index: 10;
        text-align: center;
        width: 100%;
        padding: 8px;
        font-size: 16px;
        position: absolute;
        bottom: 0;
        left: 0
    }

    .page-gallery .gallery .gallery-item .gallery-image-cover a:after {
        content: "";
        opacity: .9;
        will-change: opacity;
        background: linear-gradient(#0000 0, #0000005c 50%, #000c 100%);
        width: 100%;
        height: 40%;
        transition: all .3s ease-in;
        display: block;
        position: absolute;
        bottom: 0
    }

    .page-gallery .gallery .gallery-item .caption .album-name {
        border-radius: 3px;
        width: auto;
        height: auto;
        padding: 5px 10px;
        display: inline-block
    }

    .page-gallery .img-gallery-empty {
        background-color: #fafafa;
        width: 100%;
        height: 300px
    }

    .page-gallery .gallery-category-title {
        width: auto;
        margin: 0 15px 30px;
        padding: 10px 20px;
        font-size: 22px;
        font-weight: 600;
        line-height: 22px;
        display: inline-block
    }

    .page-gallery .gallery-links {
        font-size: 16px
    }

    .page-gallery .gallery-links .gallery-next-link {
        margin-left: 60px
    }

    .glightbox-clean .gslide-description {
        background: 0 0 !important
    }

    .glightbox-clean .gdesc-inner {
        padding: 10px 0 !important
    }

    .glightbox-clean .gslide-title {
        text-align: center !important;
        color: #fff !important
    }

    .contact-map-container {
        width: 100%;
        margin-top: 30px;
        display: block;
        padding: 0 !important
    }

    .contact-map-container iframe {
        width: 100%;
        height: 460px;
        display: block
    }

    .section-profile {
        padding-top: 0 !important
    }

    .section-profile .widget-head {
        margin-bottom: 20px
    }

    .section-profile .widget-head .title {
        font-size: 18px;
        line-height: 24px
    }

    .container-profile {
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding-top: 32px !important
    }

    .profile-header {
        border-radius: 0 0 24px 24px !important;
        width: 100% !important;
        height: 360px !important;
        padding: 0 !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important
    }

    .profile-header .profile-cover-image {
        z-index: 0 !important;
        background-position: 50% !important;
        background-size: cover !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important
    }

    .profile-header .profile-info-container {
        z-index: 2 !important;
        background: linear-gradient(#0000 0%, #000000d9 100%) !important;
        width: 100% !important;
        padding: 40px 0 24px !important;
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important
    }

    .profile-header .tbl-container.profile-info {
        align-items: flex-end !important;
        gap: 24px !important;
        padding: 0 !important;
        display: flex !important
    }

    .profile-header .tbl-cell {
        display: block !important
    }

    .profile-header .profile-info .cell-left {
        flex: 0 0 152px !important;
        width: 152px !important;
        height: auto !important
    }

    .profile-header .profile-info .profile-image {
        background-color: #fff !important;
        border: none !important;
        border-radius: 50% !important;
        width: 152px !important;
        height: 152px !important;
        padding: 4px !important;
        position: relative !important;
        bottom: 0 !important;
        overflow: hidden !important;
        box-shadow: 0 8px 24px #00000040 !important
    }

    .profile-header .profile-info .profile-image img {
        object-fit: cover !important;
        border-radius: 50% !important;
        width: 144px !important;
        height: 144px !important
    }

    .profile-header .profile-info .profile-username {
        color: #fff !important;
        flex: 1 !important;
        padding: 0 0 4px !important;
        position: relative !important
    }

    .profile-header .profile-info .profile-username .username {
        color: #fff !important;
        text-shadow: 0 2px 8px #0006 !important;
        margin: 0 0 10px !important;
        font-size: 32px !important;
        font-weight: 700 !important
    }

    .profile-header .profile-last-seen {
        color: #fffffff2 !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
        font-size: 14px !important;
        display: flex !important
    }

    .profile-header .btn-follow {
        background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 24px !important;
        display: inline-flex !important;
        position: static !important;
        box-shadow: 0 4px 12px #2b39904d !important
    }

    .profile-header .btn-follow:hover {
        transform: translateY(-2px) !important
    }

    .profile-header .btn-follow svg {
        width: 16px !important;
        height: 16px !important;
        margin-right: 0 !important
    }

    .profile-header .profile-last-seen svg {
        color: #888 !important;
        width: 10px !important;
        height: 10px !important;
        margin-right: 0 !important
    }

    .profile-header .profile-last-seen.online svg {
        color: #10b981 !important
    }

    .profile-details {
        margin-bottom: 60px
    }

    .profile-details .profile-email {
        border-left: 1px solid #e1e3df;
        margin-left: 15px;
        padding-left: 15px
    }

    .profile-social-links {
        margin: 0;
        padding: 0;
        display: block
    }

    .profile-social-links li {
        margin-bottom: 5px;
        margin-right: 3px;
        list-style: none;
        display: inline-block
    }

    .profile-social-links li a {
        color: #555;
        background-color: #f2f4f6;
        border-radius: 100%;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        font-size: 16px;
        display: flex
    }

    .profile-social-links li a:hover {
        color: #fff !important
    }

    .section-profile .img-follower {
        float: left;
        border: 1px solid #ebebeb;
        width: 46px;
        height: 46px;
        margin-bottom: 5px;
        margin-right: 5px
    }

    .profile-list-group .list-group .list-group-item {
        border-radius: .125rem;
        margin-bottom: 2px;
        padding: 0;
        border: 0 !important;
        margin-top: 0 !important
    }

    .profile-list-group .list-group .list-group-item a {
        width: 100%;
        padding: 12px 15px;
        display: block;
        color: #222 !important;
        transition: none !important
    }

    .profile-list-group .list-group .active,
    .profile-list-group .list-group .list-group-item:hover {
        background-color: #f2f2f2
    }

    .modal-login {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto
    }

    .modal-login .modal-content {
        border-radius: .188rem
    }

    .modal-login .modal-body {
        padding-bottom: 30px
    }

    .modal-header {
        text-align: center;
        border: 0;
        border-radius: .188rem .188rem 0 0;
        width: 100%;
        padding: .938rem 0;
        display: block
    }

    .modal-login .modal-header {
        padding-bottom: 0
    }

    .modal-header .modal-title {
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: 600;
        position: relative
    }

    .modal-header .btn-close {
        z-index: 10;
        font-size: .875rem;
        position: absolute;
        top: .938rem;
        right: .938rem;
        box-shadow: none !important;
        background-color: #0000 !important;
        border: 0 !important;
        outline: none !important
    }

    .modal-body {
        padding: 1rem 2rem
    }

    .modal-add-post {
        padding: 0
    }

    .modal-add-post .modal-dialog {
        max-width: 600px
    }

    .modal-add-post .row {
        margin-left: 0;
        margin-right: 0
    }

    .modal-add-post .col-add-post {
        padding-left: 0;
        padding-right: 0
    }

    .modal-add-post .modal-header {
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
        padding-bottom: 15px
    }

    .modal-add-post .modal-body {
        padding: 20px
    }

    .modal-add-post .modal-content {
        border-radius: 2px
    }

    .modal-add-post .modal-header .modal-title {
        margin-bottom: 0;
        font-size: 20px;
        font-weight: 600
    }

    .modal-add-post .item {
        cursor: pointer;
        border: 1px solid #eee;
        align-items: center;
        margin-bottom: 10px;
        padding: 15px;
        display: flex
    }

    .modal-add-post .item-icon {
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        margin-right: 15px;
        display: flex
    }

    .modal-add-post .item-icon svg {
        width: 24px;
        height: 24px
    }

    .modal-add-post .item .title {
        margin-bottom: 0;
        font-size: 16px;
        font-weight: 600
    }

    .modal-add-post .item .desc {
        color: #777;
        margin-top: 5px;
        font-size: 13px
    }

    .modal-add-post .close {
        position: absolute;
        top: 15px;
        right: 15px
    }

    .modal-add-post .item:hover {
        background-color: #f9f9f9
    }

    .btn-social {
        text-align: left;
        border-radius: 2px;
        width: 100%;
        margin-bottom: 5px;
        padding: 10px 12px 10px 54px;
        font-size: .875rem;
        line-height: 24px;
        display: block;
        position: relative;
        box-shadow: none !important;
        color: #fff !important;
        outline: 0 !important;
        font-weight: 600 !important
    }

    .btn-social svg {
        position: absolute;
        left: 15px
    }

    .btn-social-facebook {
        background-color: #1877f2
    }

    .btn-social-facebook:hover {
        background-color: #0665e0
    }

    .btn-social-google {
        background-color: #eee;
        color: #757575 !important;
        border-color: #ebebeb !important
    }

    .btn-social-google:hover,
    .btn-social-google:active,
    .btn-social-google:focus {
        background-color: #e1e1e1;
        color: #757575 !important
    }

    .btn-social-vk {
        background-color: #5c81b5
    }

    .btn-social-vk:hover {
        background-color: #39679b
    }

    .section-account {
        background-color: #0000;
        width: 450px;
        max-width: 100%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 60px;
        padding: 30px
    }

    .section-account .title {
        text-align: center;
        font-size: 26px;
        font-weight: 600;
        line-height: 28px
    }

    .input-account {
        padding: 10px 20px;
        line-height: 24px
    }

    .btn-account {
        width: 100%;
        padding: 10px 20px;
        line-height: 24px
    }

    .modal-newsletter .modal-content {
        width: 100%;
        max-width: 100%;
        display: flex;
        box-shadow: 0 4px 20px #0000001a;
        border-radius: 2px !important;
        padding: 0 !important
    }

    .modal-newsletter .modal-body {
        width: 100%;
        max-width: 100%;
        display: flex;
        border-radius: 2px !important;
        padding: 0 !important
    }

    .modal-newsletter .image {
        background-position: 50%;
        background-size: cover;
        flex: 1;
        height: 330px
    }

    .modal-newsletter .content {
        flex-direction: column;
        flex: 1;
        justify-content: center;
        padding: 2rem;
        display: flex
    }

    .modal-newsletter .title {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 20px;
        font-size: 20px;
        font-weight: 600
    }

    .modal-newsletter .content p {
        text-align: center;
        color: #6c757d;
        min-height: 70px;
        margin-bottom: 20px;
        line-height: 26px
    }

    .modal-newsletter .content form {
        flex-direction: column;
        display: flex
    }

    .modal-newsletter .content input[type=email] {
        flex: 1;
        margin-bottom: 1rem;
        padding: .68rem 1.4rem
    }

    .modal-newsletter .content input[type=email]:focus {
        outline: none
    }

    .modal-newsletter .content .btn {
        padding: .76rem 1.4rem;
        background-color: var(--vr-block-color) !important
    }

    .modal-newsletter .btn-close {
        z-index: 10;
        opacity: .4;
        font-size: .675rem;
        position: absolute;
        top: .938rem;
        right: .938rem;
        box-shadow: none !important;
        background-color: #0000 !important;
        border: 0 !important;
        outline: none !important
    }

    .footer-widget .newsletter input[name=url],
    .modal-newsletter input[name=url],
    .form-contact input[name=message_content] {
        display: none !important
    }

    .page-confirm {
        text-align: center;
        width: 400px;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        padding-top: 120px
    }

    .page-confirm .title {
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 400;
        line-height: 30px
    }

    #footer {
        color: #999;
        background-color: #0d0d0d;
        margin-top: 100px;
        font-size: 15px;
        line-height: 26px
    }

    #footer .footer-inner {
        padding: 90px 0
    }

    #footer .footer-widget-about {
        padding-right: 30px
    }

    .footer-widget .widget-title {
        color: #fff;
        margin-bottom: 30px;
        font-size: 20px;
        font-weight: 700;
        position: relative
    }

    .footer-widget .footer-logo {
        text-align: left;
        width: 100%;
        margin-bottom: 10px;
        display: block
    }

    .footer-social-links {
        margin-top: 30px
    }

    .footer-social-links ul {
        margin: 0;
        padding: 0;
        list-style: none
    }

    .footer-social-links ul li {
        margin-bottom: 8px;
        display: inline-block
    }

    .footer-social-links ul li a {
        background-color: #2c2c2c;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 46px;
        height: 46px;
        margin-right: 4px;
        font-size: 18px;
        display: flex
    }

    .footer-social-links ul li a i {
        color: #ebebeb
    }

    .footer-widget .footer-posts .post-item-small {
        margin-bottom: 20px
    }

    .footer-widget .footer-posts .post-item-small .image {
        background-color: #2c2c2c
    }

    .footer-widget .footer-posts .post-item-small .title {
        margin-bottom: 2px;
        font-size: 15px;
        line-height: 20px
    }

    .footer-widget .footer-posts .post-item-small .title a {
        color: #f6f6f6
    }

    .footer-widget .newsletter .newsletter-inputs {
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
        display: flex;
        position: relative
    }

    .footer-widget .newsletter .newsletter-inputs input {
        flex: auto;
        width: 1%;
        min-width: 0;
        position: relative
    }

    .footer-widget .newsletter .newsletter-inputs button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .footer-widget .newsletter .form-input {
        color: #bababa;
        background-color: #2c2c2c;
        box-shadow: none !important;
        border: 0 !important
    }

    .footer-copyright {
        border-top: 1px solid #2c2c2c;
        padding: 40px 0
    }

    .footer-copyright .copyright {
        color: #999;
        font-size: 14px
    }

    .footer-copyright .nav-footer ul {
        margin: 0;
        padding: 0
    }

    .footer-copyright .nav-footer ul li {
        margin-right: 15px;
        list-style: none;
        display: inline-block
    }

    .footer-copyright .nav-footer ul li a {
        color: #999;
        font-size: 15px
    }

    .form-control.is-invalid,
    .was-validated .form-control:invalid {
        background-image: none;
        border-color: #dc354566 !important
    }

    .form-control.is-valid,
    .was-validated .form-control:valid {
        border-color: #e6e6e6;
        background-image: none !important
    }

    .is-recaptcha-invalid>div {
        border: 1px solid #dc354566 !important
    }

    .swal2-confirm {
        padding: .56rem 1.2rem;
        font-size: 14px;
        background-color: var(--vr-theme-color) !important;
        border-radius: 2px !important;
        font-weight: 400 !important
    }

    .swal2-cancel {
        padding: .56rem 1.2rem;
        font-size: 14px;
        color: #333 !important;
        background-color: #e9e9ed !important;
        border-radius: 2px !important;
        font-weight: 400 !important
    }

    div:where(.swal2-container) div:where(.swal2-popup) {
        border-radius: 2px !important;
        width: 26em !important
    }

    div:where(.swal2-container) div:where(.swal2-html-container) {
        font-size: 15px !important
    }

    .btn-file-upload {
        cursor: pointer;
        width: 180px;
        margin-right: 15px;
        display: block;
        position: relative;
        color: #fff !important;
        padding: 6px 16px !important;
        font-size: 13px !important;
        overflow: hidden !important
    }

    .btn-file-upload:hover {
        color: #fff !important
    }

    .btn-file-upload input {
        z-index: 2;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
        opacity: 0;
        color: #0000;
        cursor: pointer;
        background-color: #0000;
        position: absolute;
        inset: 0
    }

    a:hover,
    a:active,
    a:focus,
    .mega-menu .menu-left .active,
    .nav-category-block .nav-item.show .nav-link,
    .nav-category-block .nav-link.active {
        color: var(--vr-theme-color) !important
    }

    .pagination-item.active a,
    .pagination-item.active a:link,
    .pagination-item.active a:visited,
    .pagination-item.active a:hover,
    .pagination-item.active a:active,
    .pagination-item.active a:focus,
    .pagination-item.active .pagination-link,
    .pagination-item.active .pagination-link:link,
    .pagination-item.active .pagination-link:visited,
    .pagination-item.active .pagination-link:hover,
    .pagination-item.active .pagination-link:active,
    .pagination-item.active .pagination-link:focus,
    .dark-mode .pagination-link,
    .dark-mode .pagination-link:link,
    .dark-mode .pagination-link:visited,
    .dark-mode .pagination-link:hover,
    .dark-mode .pagination-link:active,
    .dark-mode .pagination-link:focus,
    .dark-mode .pagination-modern .pagination-link,
    .dark-mode .pagination-modern .pagination-link:link,
    .dark-mode .pagination-modern .pagination-link:visited,
    .dark-mode .pagination-modern .pagination-link:hover,
    .dark-mode .pagination-modern .pagination-link:active,
    .dark-mode .pagination-modern .pagination-link:focus,
    .dark-mode .pagination-wrapper .pagination-link,
    .dark-mode .pagination-wrapper .pagination-link:link,
    .dark-mode .pagination-wrapper .pagination-link:visited,
    .dark-mode .pagination-wrapper .pagination-link:hover,
    .dark-mode .pagination-wrapper .pagination-link:active,
    .dark-mode .pagination-wrapper .pagination-link:focus,
    .dark-mode .text-black {
        color: #fff !important
    }

    .nav-sm-buttons .prev:hover,
    .nav-sm-buttons .next:hover,
    .post-content .post-files .file button,
    .post-content .post-files .file svg,
    .post-next-prev .head-title a,
    .section-comments .comment-meta .btn-comment-like:hover,
    .nav-mobile .dropdown .menu-sub-items .nav-link:hover,
    .nav-mobile .profile-dropdown-mobile .menu-sub-items .dropdown-item:hover {
        color: var(--vr-theme-color) !important
    }

    .form-check .form-check-input:checked,
    .progress-bar,
    .post-content .post-tags ul li a:hover,
    .sidebar-widget .widget-head:after,
    .sidebar-widget .widget-head-tabs .nav-tabs .active,
    .sidebar-widget .tag-list li a:hover,
    .section-page .contact-icon,
    .profile-social-links li a:hover,
    .footer-social-links ul li a:hover {
        background-color: var(--vr-theme-color)
    }

    .form-input:focus,
    .form-check .form-check-input:checked,
    .post-content .post-tags ul li a:hover,
    .sidebar-widget .tag-list li a:hover,
    .profile-social-links li a:hover {
        border-color: var(--vr-theme-color)
    }

    .pagination li.active a,
    .form-control:focus {
        border-color: var(--vr-theme-color) !important
    }

    .btn-custom,
    .pagination li.active a,
    .page-gallery .filters .active:after {
        background-color: var(--vr-theme-color) !important
    }

    .plyr__control--overlaid {
        background: var(--vr-theme-color) !important;
        opacity: .8 !important
    }

    .plyr--video .plyr__control.plyr__tab-focus,
    .plyr--video .plyr__control:hover,
    .plyr--video .plyr__control[aria-expanded=true] {
        background: var(--vr-theme-color) !important
    }

    .plyr--full-ui input[type=range] {
        color: var(--vr-theme-color) !important
    }

    .nav-sm-buttons .prev:hover,
    .nav-sm-buttons .next:hover {
        border: 1px solid var(--vr-theme-color) !important
    }

    .section-comments .nav-tabs .active {
        border-bottom: 2px solid var(--vr-theme-color) !important
    }

    .btn-custom:active {
        background-color: var(--vr-theme-color) !important;
        border-color: var(--vr-theme-color) !important
    }

    #nav-top {
        background-color: var(--vr-block-color) !important
    }

    .nav-sm-buttons {
        width: auto;
        position: relative;
        white-space: nowrap !important
    }

    .nav-sm-buttons .prev,
    .nav-sm-buttons .next {
        color: #a9a9a9;
        -o-transition: all .3s ease 0s;
        text-align: center;
        border: 1px solid #e2e2e2;
        width: 26px;
        height: 26px;
        margin: 0;
        padding: 0;
        font-size: 12px;
        line-height: 24px;
        transition: all .3s;
        position: relative;
        background-color: #0000 !important
    }

    .nav-sm-buttons .prev {
        margin-right: 2px
    }

    .post-content .post-title {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 36px;
        font-weight: 600;
        line-height: 1.2
    }

    .post-content .post-summary {
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        font-family: var(--vr-font-tertiary);
        margin-bottom: 15px
    }

    .post-content .post-text,
    .post-content .post-summary h2 {
        font-family: var(--vr-font-tertiary)
    }

    .post-details-meta .item-meta {
        color: #a7a8ac;
        justify-content: center;
        align-items: center;
        margin-right: 30px;
        font-size: 13px;
        display: flex
    }

    .post-details-meta .item-meta svg {
        margin-right: 5px
    }

    .post-details-meta .item-meta i {
        font-size: 13px
    }

    .post-details-meta .item-meta-author a {
        font-weight: 600
    }

    .post-details-meta .item-meta-author img {
        border: 1px solid #eee;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        margin-right: 5px
    }

    .post-details-meta .item-meta-comment {
        margin-right: 0 !important
    }

    .post-details-meta .item-meta-comment span:first-child {
        margin-right: 10px
    }

    .post-content .btn-share {
        display: flex
    }

    .post-content .btn-share a {
        border-radius: .125rem;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 40px;
        margin-right: 10px;
        font-size: 18px;
        display: flex;
        color: #fff !important
    }

    .post-share-buttons .btn-share {
        display: inline-flex !important
    }

    .post-share-buttons .btn-share a {
        color: #fff !important;
        border-radius: 16px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 48px !important;
        height: 48px !important;
        margin-right: 0 !important;
        font-size: 20px !important;
        display: flex !important;
        position: relative !important;
        overflow: hidden !important
    }

    .post-share-buttons.post-share-buttons .btn-share a,
    .post-share-buttons .btn-share a {
        border-radius: 16px !important
    }

    .section-comments .post-share-buttons {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        display: flex !important
    }

    .section-comments .post-share-buttons .btn-share {
        flex-shrink: 0 !important;
        display: inline-flex !important
    }

    .section-comments .post-share-buttons .btn-share a {
        aspect-ratio: 1 !important;
        color: #fff !important;
        -webkit-backdrop-filter: blur(14px)saturate(180%) !important;
        backdrop-filter: blur(14px)saturate(180%) !important;
        border: 1.5px solid #ffffff38 !important;
        border-radius: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 52px !important;
        margin-right: 0 !important;
        padding: 10px !important;
        transition: all .4s cubic-bezier(.4, 0, .2, 1) !important;
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 0 6px 24px #00000029, inset 0 0 0 1px #ffffff1f, inset 0 3px 8px #00000014 !important
    }

    .section-comments .post-share-buttons .btn-share a:before {
        content: "" !important;
        opacity: 0 !important;
        background: radial-gradient(circle, #ffffff4d 0%, #0000 70%) !important;
        transition: opacity .4s !important;
        animation: 8s linear infinite rotate !important;
        position: absolute !important;
        inset: -50% !important
    }

    .section-comments .post-share-buttons .btn-share a:hover:before {
        opacity: 1 !important
    }

    .section-comments .post-share-buttons .btn-share a:after {
        content: "" !important;
        opacity: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(135deg, #ffffff59 0%, #0000 50%) !important;
        border-radius: 12px !important;
        transition: opacity .3s !important;
        position: absolute !important;
        inset: 0 !important
    }

    .section-comments .post-share-buttons .btn-share a:hover:after {
        opacity: 1 !important
    }

    .section-comments .post-share-buttons .btn-share a:hover {
        border-color: #ffffff4d !important;
        transform: translateY(-4px)scale(1.06) !important;
        box-shadow: 0 10px 36px #0000004d, inset 0 0 0 1.5px #ffffff40 !important
    }

    .section-comments .post-share-buttons .btn-share a i {
        z-index: 2 !important;
        filter: drop-shadow(0 2px 5px #00000040) !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        font-size: 24px !important;
        transition: all .3s !important;
        display: flex !important;
        position: relative !important
    }

    .section-comments .post-share-buttons .btn-share a:hover i {
        filter: drop-shadow(0 3px 8px #00000059) !important;
        transform: scale(1.1) !important
    }

    .section-comments .post-share-buttons .color-facebook {
        color: #1877f2 !important;
        background: linear-gradient(135deg, #1877f2d9, #0d5dbfd9) !important
    }

    .section-comments .post-share-buttons .color-twitter {
        color: #000 !important;
        background: linear-gradient(135deg, #000000d9, #14171ad9) !important
    }

    .section-comments .post-share-buttons .color-linkedin {
        color: #0077b5 !important;
        background: linear-gradient(135deg, #0077b5d9, #005885d9) !important
    }

    .section-comments .post-share-buttons .color-whatsapp {
        color: #25d366 !important;
        background: linear-gradient(135deg, #25d366d9, #1ba14ed9) !important
    }

    .section-comments .post-share-buttons .color-pinterest {
        color: #e60023 !important;
        background: linear-gradient(135deg, #e60023d9, #bd081cd9) !important
    }

    .dark-mode .section-comments .post-share-buttons .btn-share a {
        border-color: #ffffff26 !important;
        box-shadow: 0 6px 24px #0000004d !important
    }

    .dark-mode .section-comments .post-share-buttons .btn-share a:hover {
        border-color: #fff3 !important;
        box-shadow: 0 10px 36px #00000080, inset 0 0 0 1.5px #ffffff26 !important
    }

    .post-content .btn-share .btn-print {
        background-color: #444
    }

    .post-content .btn-share .btn-reading-list {
        background-color: #444;
        margin-right: 0 !important
    }

    .post-content .img-description {
        text-align: left;
        color: #666;
        margin-top: 5px;
        font-size: 12px;
        font-style: italic;
        line-height: 18px;
        display: block
    }

    .post-image {
        width: 100%;
        max-width: 100%;
        margin-bottom: 15px;
        display: block;
        position: relative
    }

    .post-image.post-video {
        height: auto;
        min-height: 400px;
        overflow: hidden
    }

    .post-image.post-video .ratio {
        height: auto;
        min-height: 400px
    }

    .post-image.post-video .ratio-16x9 {
        --bs-aspect-ratio: 56.25%
    }

    .post-image.post-video .fb-video {
        width: 100%;
        min-height: 400px
    }

    .post-video iframe {
        border: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 400px;
        display: block
    }

    .video-player {
        width: 100%;
        max-width: 100%;
        display: block;
        position: relative;
        overflow: hidden
    }

    .video-player video {
        width: 100%;
        max-width: 100%;
        height: auto
    }

    .post-detail-slider-nav {
        align-items: center;
        display: flex;
        position: absolute;
        top: 15px;
        right: 15px
    }

    .post-detail-slider-nav .prev,
    .post-detail-slider-nav .next {
        pointer-events: auto;
        opacity: .8;
        background-color: #010101;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        display: flex;
        position: relative;
        border: 0 !important
    }

    .post-detail-slider-nav .next {
        margin-left: 5px
    }

    .post-detail-slider-nav .next i,
    .post-detail-slider-nav .prev i {
        color: #fafafa;
        border-radius: 2px;
        height: 38px;
        font-size: 16px;
        font-weight: 700;
        line-height: 38px;
        display: inline-block;
        position: relative
    }

    .post-content .post-text img,
    .post-content .post-image img,
    .post-content img {
        border-radius: 16px !important
    }

    .page-content iframe,
    .post-content iframe,
    .post-text iframe {
        display: block;
        box-shadow: 0 4px 12px #0000001a;
        border-radius: 12px !important;
        max-width: 100% !important
    }

    p[style*="text-align: center"] iframe,
    p[style*=text-align\:center] iframe,
    .text-center iframe {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .page-content iframe[src*=youtube],
    .page-content iframe[src*=vimeo],
    .post-content iframe[src*=youtube],
    .post-content iframe[src*=vimeo],
    .post-text iframe[src*=youtube],
    .post-text iframe[src*=vimeo] {
        aspect-ratio: 16/9;
        width: 100%
    }

    .badge-category {
        text-transform: uppercase;
        letter-spacing: .5px;
        -webkit-backdrop-filter: blur(5px)saturate(150%);
        backdrop-filter: blur(5px)saturate(150%);
        align-items: center;
        transition: all .3s;
        box-shadow: 0 4px 12px #00000014;
        background: #fff0 !important;
        border: 2px solid !important;
        border-radius: 12px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        display: inline-flex !important
    }

    .badge-category:hover {
        -webkit-backdrop-filter: blur(8px)saturate(180%);
        backdrop-filter: blur(8px)saturate(180%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px #0000001f
    }

    .dark-mode .badge-category {
        -webkit-backdrop-filter: blur(5px)saturate(150%);
        backdrop-filter: blur(5px)saturate(150%)
    }

    .dark-mode .badge-category:hover {
        -webkit-backdrop-filter: blur(8px)saturate(180%);
        backdrop-filter: blur(8px)saturate(180%)
    }

    .post-share-buttons {
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding-top: 24px;
        padding-bottom: 24px;
        display: flex
    }

    .post-share-buttons .btn-share {
        flex: none;
        width: auto;
        min-width: 52px;
        display: inline-flex
    }

    .post-share-buttons .btn-share a {
        aspect-ratio: 1 !important;
        color: #fff !important;
        -webkit-backdrop-filter: blur(14px)saturate(180%) !important;
        backdrop-filter: blur(14px)saturate(180%) !important;
        border: 1.5px solid #ffffff38 !important;
        border-radius: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 52px !important;
        margin-right: 0 !important;
        padding: 10px !important;
        transition: all .4s cubic-bezier(.4, 0, .2, 1) !important;
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 0 6px 24px #00000029, inset 0 0 0 1px #ffffff1f, inset 0 3px 8px #00000014 !important
    }

    .post-share-buttons .btn-share a:before {
        content: "";
        opacity: 0;
        background: radial-gradient(circle, #ffffff4d 0%, #0000 70%);
        transition: opacity .4s;
        animation: 8s linear infinite rotate;
        position: absolute;
        inset: -50%
    }

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

        to {
            transform: rotate(360deg)
        }
    }

    .post-share-buttons .btn-share a:hover:before {
        opacity: 1
    }

    .post-share-buttons .btn-share a:after {
        content: "";
        opacity: 0;
        z-index: 1;
        background: linear-gradient(135deg, #ffffff59 0%, #0000 50%);
        border-radius: 12px;
        transition: opacity .3s;
        position: absolute;
        inset: 0
    }

    .post-share-buttons .btn-share a:hover:after {
        opacity: 1
    }

    .post-share-buttons .btn-share a:hover {
        border-color: #ffffff4d !important;
        transform: translateY(-4px)scale(1.06) !important;
        box-shadow: 0 10px 36px #0000004d, inset 0 0 0 1.5px #ffffff40 !important
    }

    .post-share-buttons .btn-share a i {
        z-index: 2;
        filter: drop-shadow(0 2px 5px #00000040);
        justify-content: center;
        align-items: center;
        width: auto;
        height: auto;
        transition: all .3s;
        display: flex;
        position: relative;
        margin: 0 !important;
        font-size: 24px !important
    }

    .post-share-buttons .btn-share a:hover i {
        filter: drop-shadow(0 3px 8px #00000059);
        transform: scale(1.1)
    }

    .post-share-buttons .color-facebook {
        color: #1877f2 !important;
        background: linear-gradient(135deg, #1877f2d9, #0d5dbfd9) !important
    }

    .post-share-buttons .color-twitter {
        color: #000 !important;
        background: linear-gradient(135deg, #000000d9, #14171ad9) !important
    }

    .post-share-buttons .color-linkedin {
        color: #0077b5 !important;
        background: linear-gradient(135deg, #0077b5d9, #005885d9) !important
    }

    .post-share-buttons .color-whatsapp {
        color: #25d366 !important;
        background: linear-gradient(135deg, #25d366d9, #1ba14ed9) !important
    }

    .post-share-buttons .color-pinterest {
        color: #e60023 !important;
        background: linear-gradient(135deg, #e60023d9, #bd081cd9) !important
    }

    .post-share-buttons .color-nsosyal {
        color: #3a40f0 !important;
        background: linear-gradient(135deg, #3a40f0eb, #2bd3dce6) !important
    }

    .post-share-buttons .color-vk {
        color: #4680c2 !important;
        background: linear-gradient(135deg, #4680c2d9, #2a5885d9) !important
    }

    .dark-mode .post-share-buttons .btn-share a {
        border-color: #ffffff26 !important;
        box-shadow: 0 6px 24px #0000004d !important
    }

    .dark-mode .post-share-buttons .btn-share a:hover {
        border-color: #fff3 !important;
        box-shadow: 0 10px 36px #00000080, inset 0 0 0 1.5px #ffffff26 !important
    }

    @media (max-width:768px) {
        .post-share-buttons .btn-share {
            min-width: 48px
        }

        .post-share-buttons .btn-share a {
            min-height: 48px !important;
            padding: 8px !important
        }

        .post-share-buttons .btn-share a i {
            font-size: 22px !important
        }

        .section-comments .post-share-buttons .btn-share a {
            min-height: 48px !important;
            padding: 8px !important
        }

        .section-comments .post-share-buttons .btn-share a i {
            font-size: 22px !important
        }
    }

    .post-item-small {
        transition: all .3s
    }

    .post-item-small:hover {
        transform: translate(4px)
    }

    .post-item-small .left .image {
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        overflow: hidden;
        box-shadow: 0 4px 12px #00000014;
        background: linear-gradient(135deg, #f5f5f5, #e8e8e8) !important;
        border-radius: 14px !important
    }

    .post-item-small:hover .left .image {
        transform: scale(1.02);
        box-shadow: 0 6px 20px #0000001f
    }

    .post-item-small .left .image img {
        transition: transform .4s cubic-bezier(.4, 0, .2, 1);
        border-radius: 14px !important
    }

    .post-item-small:hover .left .image img {
        transform: scale(1.05)
    }

    .post-item-small .right {
        flex-direction: column;
        justify-content: center;
        display: flex;
        padding-left: 16px !important
    }

    .post-item-small .title {
        color: #1f2937;
        transition: color .2s;
        margin-bottom: 6px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important
    }

    .post-item-small .title a {
        text-decoration: none;
        transition: color .2s;
        color: #1f2937 !important
    }

    .post-item-small:hover .title a {
        color: #2b3990 !important
    }

    .small-post-meta {
        align-items: center;
        gap: 8px;
        margin: 0 !important;
        display: flex !important
    }

    .small-post-meta a,
    .small-post-meta span {
        font-weight: 600;
        transition: color .2s;
        color: #9ca3af !important;
        font-size: 11px !important
    }

    .small-post-meta a:hover {
        color: #2b3990 !important
    }

    .dark-mode .post-item-small .left .image {
        background: linear-gradient(135deg, #070926cc, #030514cc) !important
    }

    .dark-mode .post-item-small .title,
    .dark-mode .post-item-small .title a {
        color: #f3f4f6 !important
    }

    .dark-mode .post-item-small:hover .title a {
        color: #60a5fa !important
    }

    .widget-follow .item {
        margin-bottom: 14px
    }

    .widget-follow .item a {
        aspect-ratio: 1;
        -webkit-backdrop-filter: blur(14px)saturate(180%);
        backdrop-filter: blur(14px)saturate(180%);
        border: 1.5px solid #ffffff38;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 64px;
        transition: all .4s cubic-bezier(.4, 0, .2, 1);
        position: relative;
        overflow: hidden;
        box-shadow: 0 6px 24px #00000029, inset 0 0 0 1px #ffffff1f, inset 0 3px 8px #00000014;
        color: #fff !important;
        border-radius: 18px !important;
        padding: 14px !important;
        display: flex !important
    }

    .widget-follow .item a:before {
        content: "";
        opacity: 0;
        background: radial-gradient(circle, #ffffff4d 0%, #0000 70%);
        transition: opacity .4s;
        animation: 8s linear infinite rotate;
        position: absolute;
        inset: -50%
    }

    .widget-follow .item a:hover:before {
        opacity: 1
    }

    .widget-follow .item a:after {
        content: "";
        opacity: 0;
        background: linear-gradient(135deg, #ffffff59 0%, #0000 50%);
        border-radius: 18px;
        transition: opacity .3s;
        position: absolute;
        inset: 0
    }

    .widget-follow .item a:hover:after {
        opacity: 1
    }

    .widget-follow .item a:hover {
        border-color: #ffffff4d;
        transform: translateY(-4px)scale(1.06);
        box-shadow: 0 10px 36px #0000004d, inset 0 0 0 1.5px #ffffff40
    }

    .dark-mode .widget-follow .item a {
        border-color: #ffffff26;
        box-shadow: 0 6px 24px #0000004d
    }

    .dark-mode .widget-follow .item a:hover {
        border-color: #fff3;
        box-shadow: 0 10px 36px #00000080, inset 0 0 0 1.5px #ffffff26
    }

    .widget-follow .item a i {
        z-index: 2;
        filter: drop-shadow(0 2px 5px #00000040);
        justify-content: center;
        align-items: center;
        width: auto;
        height: auto;
        transition: all .3s;
        display: flex;
        position: relative;
        margin: 0 !important;
        font-size: clamp(24px, 4vw, 32px) !important
    }

    .widget-follow .item a:hover i {
        filter: drop-shadow(0 3px 8px #00000059);
        transform: scale(1.1)
    }

    .widget-follow .item a span {
        display: none !important
    }

    .color-facebook {
        color: #1877f2 !important;
        background: linear-gradient(135deg, #1877f2d9, #0d5dbfd9) !important
    }

    .color-twitter {
        color: #000 !important;
        background: linear-gradient(135deg, #000000d9, #14171ad9) !important
    }

    .color-instagram {
        color: #e1306c !important;
        background: linear-gradient(135deg, #f58529d9, #dd2a7bd9, #8134afd9) !important
    }

    .color-youtube {
        color: red !important;
        background: linear-gradient(135deg, #ff0000d9, #cc0000d9) !important
    }

    .color-linkedin {
        color: #0077b5 !important;
        background: linear-gradient(135deg, #0077b5d9, #005885d9) !important
    }

    .color-pinterest {
        color: #e60023 !important;
        background: linear-gradient(135deg, #e60023d9, #bd081cd9) !important
    }

    .color-nsosyal {
        color: #3a40f0 !important;
        background: linear-gradient(135deg, #3a40f0eb, #2bd3dce6) !important
    }

    .color-vk {
        color: #4680c2 !important;
        background: linear-gradient(135deg, #4680c2d9, #2a5885d9) !important
    }

    .sidebar-widget .widget-head {
        border-bottom: none !important;
        margin-bottom: 24px !important
    }

    .sidebar-widget .widget-head:after {
        display: none !important
    }

    .sidebar-widget .widget-head .title {
        color: #1f2937;
        padding-left: 12px;
        position: relative;
        margin-bottom: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important
    }

    .sidebar-widget .widget-head .title:before {
        content: "";
        background: linear-gradient(135deg, #2b3990, #030725);
        border-radius: 2px;
        width: 4px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

    .dark-mode .sidebar-widget .widget-head {
        border-bottom: none !important
    }

    .dark-mode .sidebar-widget .widget-head .title {
        color: #f3f4f6 !important
    }

    .dark-mode .sidebar-widget .widget-head .title:before {
        background: linear-gradient(135deg, #60a5fa, #3b82f6) !important
    }

    .dark-mode .mega-menu {
        background: #0f172afa !important;
        border: 1px solid #33415580 !important;
        border-top: none !important;
        box-shadow: 0 12px 48px #0006, inset 0 0 0 1px #3341554d !important
    }

    .dark-mode .mega-menu .menu-left {
        background: linear-gradient(135deg, #0f172af2, #1e293bf2) !important;
        border-right: 1px solid #33415580 !important
    }

    .dark-mode .mega-menu .menu-left a {
        color: #d1d5db !important
    }

    .dark-mode .mega-menu .menu-left a:hover,
    .dark-mode .mega-menu .menu-left a.active {
        background: #60a5fa1a;
        color: #60a5fa !important
    }

    .dark-mode .mega-menu .post-item .title,
    .dark-mode .mega-menu .post-item .title a {
        color: #f3f4f6 !important
    }

    .dark-mode .mega-menu .post-item:hover .title a {
        color: #60a5fa !important
    }

    .mega-menu-container {
        z-index: 9999;
        width: 100%;
        max-width: 100%;
        position: relative
    }

    .mega-menu {
        right: calc(var(--spacing)*0);
        left: calc(var(--spacing)*0);
        z-index: 60;
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        pointer-events: auto;
        -webkit-backdrop-filter: blur(20px)saturate(180%);
        backdrop-filter: blur(20px)saturate(180%);
        background: #ffffffd9;
        border: 1px solid #ffffff80;
        border-top: none;
        border-radius: 0 0 20px 20px;
        width: 100%;
        max-width: 100%;
        animation: .3s ease-out slideDownScale;
        display: none;
        position: absolute;
        top: 2px;
        left: 0;
        right: 0;
        box-shadow: 0 12px 48px #00000026, inset 0 0 0 1px #ffffff4d;
        margin-top: -2px !important
    }

    @keyframes slideDownScale {
        0% {
            opacity: 0;
            transform: translateY(-10px)scale(.98)
        }

        to {
            opacity: 1;
            transform: translateY(0)scale(1)
        }
    }

    .mega-menu .menu-left {
        padding: calc(var(--spacing)*4);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        background: linear-gradient(135deg, #f9fafbf2, #f3f4f6f2);
        border-radius: 0 0 0 20px
    }

    .mega-menu .menu-left a {
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing)*4);
        padding-block: calc(var(--spacing)*3);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        border-left: 3px solid #0000;
        font-weight: 500;
        text-decoration-line: none;
        display: block;
        color: #1f2937 !important
    }

    .mega-menu .menu-left a:hover {
        background: linear-gradient(135deg, #2b3990, #3d4fa8);
        border-left-color: #fff;
        transform: translate(4px);
        color: #fff !important
    }

    .mega-menu .menu-right {
        padding: calc(var(--spacing)*4)
    }

    .mega-menu .menu-right a {
        text-decoration-line: none
    }

    .mega-menu .post-item .image img {
        border-radius: var(--radius-lg)
    }

    .mega-menu .post-item .title {
        color: var(--color-gray-800)
    }

    .mega-menu .post-item .title:hover {
        color: #2b3990 !important
    }

    .modal {
        inset: calc(var(--spacing)*0);
        z-index: 1050;
        display: none;
        position: fixed;
        overflow: hidden auto
    }

    .modal.show {
        display: block
    }

    .modal-backdrop {
        inset: calc(var(--spacing)*0);
        z-index: 1040;
        background-color: var(--color-black);
        opacity: .5;
        position: fixed
    }

    .modal-dialog {
        margin-inline: auto;
        margin-block: calc(var(--spacing)*6);
        width: auto;
        max-width: var(--container-lg);
        position: relative
    }

    .modal-content {
        border-radius: var(--radius-lg);
        background-color: var(--color-white);
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
        width: 100%;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        flex-direction: column;
        display: flex;
        position: relative
    }

    .modal-header {
        border-bottom-style: var(--tw-border-style);
        padding: calc(var(--spacing)*4);
        border-bottom-width: 1px;
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    .modal-body {
        padding: calc(var(--spacing)*4);
        position: relative
    }

    .modal-footer {
        border-top-style: var(--tw-border-style);
        padding: calc(var(--spacing)*4);
        border-top-width: 1px;
        justify-content: flex-end;
        align-items: center;
        display: flex
    }

    .collapse {
        display: none
    }

    .collapse.show {
        display: block
    }

    .navbar-collapse.collapse {
        visibility: visible !important;
        flex: 1 !important;
        justify-content: space-between !important;
        align-items: center !important;
        display: flex !important
    }

    @media (max-width:767px) {
        .navbar-collapse.collapse {
            visibility: hidden !important;
            display: none !important
        }

        .navbar-collapse.collapse.show {
            flex-direction: column;
            width: 100%;
            visibility: visible !important;
            display: flex !important
        }
    }

    .tab-content {
        width: 100%
    }

    .tab-pane {
        display: none
    }

    .tab-pane.active,
    .tab-pane.show.active {
        display: block
    }

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

    .sidebar {
        width: 100%
    }

    .card {
        border-radius: var(--radius-lg);
        background-color: var(--color-white);
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .card-body {
        padding: calc(var(--spacing)*4)
    }

    .post-card {
        border-radius: var(--radius-xl);
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        overflow: hidden
    }

    @media (hover:hover) {
        .post-card:hover {
            --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    .post-card {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .3s;
        transition-duration: .3s
    }

    @media (hover:hover) {
        .post-card:hover {
            --tw-translate-y: calc(var(--spacing)*-1);
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }
    }

    .post-card {
        aspect-ratio: 4/5;
        width: 100%;
        min-height: 380px;
        display: block;
        position: relative
    }

    .post-card>a {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        inset: 0
    }

    .post-card .absolute {
        position: absolute !important
    }

    .post-card .inset-0 {
        inset: 0 !important
    }

    .post-card .w-full {
        width: 100% !important
    }

    .post-card .h-full {
        height: 100% !important
    }

    .post-card img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        transition: transform .6s cubic-bezier(.4, 0, .2, 1) !important;
        display: block !important
    }

    .post-card:hover img {
        transform: scale(1.08) !important
    }

    .post-item-no-image.post-card {
        background: #fff;
        height: auto;
        min-height: 280px
    }

    .post-item {
        width: 100%;
        margin-bottom: 45px;
        display: block;
        position: relative
    }

    .post-item .badge-category {
        position: absolute;
        top: 15px;
        left: 15px
    }

    .ratio {
        width: 100%;
        position: relative
    }

    .ratio:before {
        padding-top: var(--bs-aspect-ratio);
        content: "";
        display: block
    }

    .ratio>* {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .post-item .image {
        background-color: #fafafa;
        width: 100%;
        height: 0;
        padding-bottom: 61.9%;
        display: block;
        position: relative;
        overflow: hidden
    }

    .post-item .image.ratio {
        --bs-aspect-ratio: 61.9%;
        height: auto;
        padding-bottom: 0;
        background-color: #0000 !important
    }

    .post-item .image.ratio:before,
    .section-related-posts .post-item .image.ratio,
    .section-related-posts .post-item .image.ratio:before,
    .dark-mode .post-item .image.ratio,
    .dark-mode .post-item .image.ratio:before {
        background-color: #0000 !important
    }

    .section-related-posts .post-item .image.ratio img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .post-item-no-image .badge-category {
        margin-bottom: 15px;
        position: relative;
        left: 0
    }

    .post-item .image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0
    }

    .post-item .title {
        text-transform: none;
        margin-top: 10px;
        font-size: 20px;
        font-weight: 600;
        line-height: 26px
    }

    .post-item .title a {
        color: inherit;
        transition: color .3s;
        display: block
    }

    .post-item .title a:hover {
        color: #2b3990
    }

    .dark-mode .post-item .title a:hover {
        color: #b8c5e0
    }

    .post-item .description {
        color: #7a7a7a;
        font-size: 14px;
        line-height: 22px
    }

    .post-item .post-meta {
        margin-bottom: 10px
    }

    .post-item-mid .title {
        font-size: 16px;
        line-height: 24px
    }

    .post-card .content-overlay-card {
        -webkit-backdrop-filter: blur(8px)saturate(150%);
        background: #ffffff26;
        border: 1px solid #ffffff40;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 4px 16px #0003
    }

    .w-fit {
        width: fit-content
    }

    .dark-mode .post-card {
        background: #07092699 !important
    }

    .dark-mode .post-card:hover {
        background: #070926cc !important
    }

    .dark-mode .content-overlay-card {
        border-color: #ffffff1a;
        background: #070926d9 !important
    }

    .dark-mode .post-card .post-title,
    .dark-mode .post-card h3,
    .dark-mode .post-card .title,
    .dark-mode .post-card .title a {
        color: #f3f4f6 !important
    }

    .dark-mode .post-card:hover .title a {
        color: #60a5fa !important
    }

    .dark-mode .post-card .post-description,
    .dark-mode .post-card p {
        color: #d1d5db !important
    }

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

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

    .post-item .image img,
    .post-item-small .image img,
    .post-item-mid .image img,
    .item .image img,
    .item-large img,
    .item-small img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .col-post-item-vr {
        flex-direction: column;
        display: flex
    }

    .post-item-vr {
        aspect-ratio: 3/4;
        border-radius: 16px;
        min-height: 420px;
        max-height: 500px;
        transition: all .3s;
        overflow: hidden;
        box-shadow: 0 4px 12px #00000026;
        position: relative !important
    }

    .post-item-vr:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px #00000040
    }

    .post-item-vr .image {
        width: 100%;
        position: absolute;
        inset: 0;
        height: 100% !important
    }

    .post-item-vr .image img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
        transition: transform .6s cubic-bezier(.4, 0, .2, 1) !important
    }

    .post-item-vr:hover .image img {
        transform: scale(1.08) !important
    }

    .post-item-vr:after {
        content: "";
        pointer-events: none;
        background: linear-gradient(#0000 0%, #0000004d 40%, #000000e6 100%);
        position: absolute;
        inset: 0
    }

    .post-item-vr .caption {
        z-index: 10;
        padding: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }

    .post-item-vr .caption .content-card,
    .post-card .content-card {
        -webkit-backdrop-filter: blur(8px)saturate(150%);
        background: #ffffff1f;
        border: 1px solid #fff3;
        border-radius: 10px;
        padding: 14px;
        box-shadow: 0 4px 16px #0003
    }

    .post-item-vr .caption .badge-category {
        margin-bottom: calc(var(--spacing)*3)
    }

    .post-item-vr .caption .title {
        margin-bottom: calc(var(--spacing)*2);
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
        --tw-leading: var(--leading-tight);
        line-height: var(--leading-tight);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .post-item-vr .caption .title a {
        color: #fff !important
    }

    .post-item-vr .caption .post-meta {
        margin-bottom: calc(var(--spacing)*1);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
        color: var(--color-gray-200)
    }

    .post-item-vr .caption .description {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed);
        color: var(--color-gray-200);
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .badge-category {
        padding-inline: calc(var(--spacing)*3);
        padding-block: calc(var(--spacing)*2);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        text-transform: uppercase;
        -webkit-backdrop-filter: blur(10px)saturate(180%);
        letter-spacing: .05em;
        border: 1px solid #ffffff4d;
        border-radius: 3.40282e38px;
        display: inline-block;
        box-shadow: 0 4px 12px #00000040
    }

    .modern-slider-container {
        background: 0 0;
        border-radius: 20px;
        width: 100%;
        height: 100%;
        max-height: 420px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 60px #0000004d
    }

    .modern-slider-item {
        width: 100%;
        position: relative;
        overflow: hidden
    }

    .slider-image-wrapper {
        aspect-ratio: 1479/630;
        background-color: #fafafa;
        width: 100%;
        min-height: 360px;
        position: relative;
        overflow: hidden
    }

    .slider-image-link {
        z-index: 1;
        display: block;
        position: absolute;
        inset: 0
    }

    .slider-image-wrapper:before {
        content: "";
        z-index: 1;
        pointer-events: none;
        opacity: .3;
        background: linear-gradient(135deg, #2b39901a, #0307251a);
        position: absolute;
        inset: 0
    }

    .slider-image-wrapper picture {
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0
    }

    .slider-image-wrapper picture img,
    .slider-image {
        object-fit: cover !important;
        object-position: center !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 100% !important;
        transition: transform .8s cubic-bezier(.4, 0, .2, 1) !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: scale(1) !important
    }

    .modern-slider-item:hover .slider-image {
        transform: scale(1.05) !important
    }

    .slider-gradient-overlay {
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(#0000 0%, #0000004d 30%, #0009 60%, #000000d9 100%);
        position: absolute;
        inset: 0
    }

    .slider-caption-wrapper {
        pointer-events: none;
        z-index: 25;
        justify-content: flex-start;
        align-items: flex-end;
        padding: clamp(18px, 4.5vw, 40px) clamp(18px, 5vw, 44px) clamp(14px, 3.5vw, 26px);
        display: flex;
        position: absolute;
        inset: auto 0 0
    }

    .slider-caption-content {
        pointer-events: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(12px, 3vw, 18px);
        width: min(720px, 100%);
        display: flex
    }

    .slider-caption-meta {
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        display: flex
    }

    .slider-meta-pill {
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #ffffffe0;
        -webkit-backdrop-filter: blur(12px);
        background: #0f172a66;
        border: 1px solid #ffffff52;
        border-radius: 9999px;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: .75rem;
        font-weight: 600;
        display: inline-flex
    }

    .slider-meta-pill svg {
        fill: currentColor;
        width: 14px;
        height: 14px
    }

    .badge-category-modern {
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #fff;
        -webkit-backdrop-filter: blur(10px);
        border-radius: 9999px;
        align-items: center;
        padding: 8px 16px;
        font-size: .875rem;
        font-weight: 700;
        transition: all .3s;
        display: inline-flex;
        box-shadow: 0 4px 12px #0000004d
    }

    .modern-slider-item:hover .badge-category-modern {
        transform: scale(1.05);
        box-shadow: 0 6px 20px #0006
    }

    .slider-title {
        margin: 0;
        font-size: clamp(1.35rem, 3vw, 1.9rem)
    }

    .slider-title a {
        text-decoration: none;
        transition: transform .3s;
        display: block;
        color: #fff !important
    }

    .slider-title a:hover {
        transform: translateY(-1px);
        color: #fff !important
    }

    .slider-subtitle {
        color: #ffffffd1;
        text-transform: uppercase;
        letter-spacing: .14em;
        font-size: .82rem;
        font-weight: 600
    }

    .slider-description {
        color: #ffffffe0;
        margin: 0;
        font-size: .95rem;
        line-height: 1.6
    }

    .slider-actions {
        align-items: center;
        margin-top: clamp(10px, 2.3vw, 18px);
        display: flex
    }

    .slider-button {
        letter-spacing: .05em;
        color: #fff;
        -webkit-backdrop-filter: blur(10px);
        background: linear-gradient(135deg, #fff3, #ffffff14);
        border: 1px solid #fff6;
        border-radius: 16px;
        align-items: center;
        gap: 10px;
        padding: .72rem 1.7rem;
        font-size: .95rem;
        font-weight: 600;
        text-decoration: none;
        transition: all .35s;
        display: inline-flex;
        box-shadow: 0 18px 42px #0f172a52
    }

    .slider-button:hover {
        background: linear-gradient(135deg, #ffffff47, #ffffff1f);
        transform: translateY(-1px);
        box-shadow: 0 24px 56px #0f172a66
    }

    .slider-button svg {
        width: 20px;
        height: 20px;
        transition: transform .35s
    }

    .slider-button:hover svg {
        transform: translate(4px)
    }

    @media (max-width:768px) {
        .slider-caption-wrapper {
            padding: 24px 18px 34px
        }

        .slider-caption-content {
            gap: 14px
        }

        .slider-title {
            font-size: 1.5rem !important
        }

        .slider-description {
            font-size: .9rem
        }

        .slider-button {
            justify-content: center;
            width: 100%
        }
    }

    .media-icon-wrapper {
        z-index: 10;
        pointer-events: none;
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute;
        inset: 0
    }

    .media-icon-large {
        -webkit-backdrop-filter: blur(10px);
        background: #fff3;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        padding: 24px;
        display: flex;
        box-shadow: 0 8px 32px #0000004d
    }

    .media-icon-large svg {
        color: #fff;
        filter: drop-shadow(0 4px 12px #0006);
        width: 48px;
        height: 48px
    }

    .slider-nav-wrapper {
        z-index: 30;
        align-items: center;
        gap: 8px;
        display: flex;
        position: absolute;
        top: 16px;
        right: 16px
    }

    .slider-nav-btn {
        cursor: pointer;
        background: 0 0;
        border: none;
        outline: none;
        padding: 0
    }

    .nav-btn-inner {
        -webkit-backdrop-filter: blur(20px)saturate(180%);
        background: #0006;
        border: 1.5px solid #ffffff4d;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        padding: 10px;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        box-shadow: 0 4px 16px #00000080, 0 2px 8px #0000004d, inset 0 1px #ffffff1a
    }

    .nav-btn-inner:hover {
        background: #0009;
        border-color: #ffffff80;
        transform: translateY(-2px);
        box-shadow: 0 6px 24px #0009, 0 4px 12px #0006, inset 0 1px #ffffff26
    }

    .nav-btn-inner svg {
        color: #fff;
        filter: drop-shadow(0 2px 4px #000c)drop-shadow(0 1px 2px #0009);
        width: 18px;
        height: 18px;
        transition: transform .3s
    }

    .nav-btn-inner:hover svg {
        filter: drop-shadow(0 2px 6px #000000e6)drop-shadow(0 1px 3px #000000b3);
        transform: scale(1.1)
    }

    .slider-progress-wrapper {
        z-index: 35;
        height: 4px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        display: none !important
    }

    .slider-progress-bar {
        background: 0 0;
        width: 100%;
        height: 100%;
        position: relative
    }

    .slider-progress-fill {
        background: linear-gradient(90deg, var(--color-primary)0%, #ffffffe6 50%, var(--color-primary)100%);
        background-size: 200% 100%;
        width: 0%;
        height: 100%;
        transition: width .1s linear;
        animation: 2s ease-in-out infinite progressShine;
        position: relative;
        box-shadow: 0 2px 12px #2b399099, 0 0 20px #2b399066
    }

    .slider-progress-fill:after {
        content: "";
        filter: blur(8px);
        background: linear-gradient(90deg, #0000 0%, #fff9 50%, #ffffffe6 100%);
        width: 40px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0
    }

    @keyframes progressShine {

        0%,
        to {
            background-position: 0%
        }

        50% {
            background-position: 100%
        }
    }

    @media (max-width:768px) {
        .slider-image-wrapper {
            min-height: 240px
        }

        .slider-image-link,
        .slider-image {
            position: relative
        }

        .slider-title {
            font-size: 1.5rem !important
        }

        .slider-description {
            font-size: .875rem
        }

        .nav-btn-inner {
            width: 36px;
            height: 36px;
            padding: 8px
        }

        .nav-btn-inner svg {
            width: 16px;
            height: 16px
        }

        .slider-progress-wrapper {
            height: 3px
        }
    }

    .main-slider-container {
        border-radius: var(--radius-2xl);
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        position: relative;
        overflow: hidden
    }

    .item {
        position: relative
    }

    .item-large {
        border-radius: var(--radius-xl);
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .3s;
        transition-duration: .3s;
        overflow: hidden
    }

    @media (hover:hover) {
        .item-large:hover {
            --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    .item-small {
        border-radius: var(--radius-lg);
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .3s;
        transition-duration: .3s;
        overflow: hidden
    }

    @media (hover:hover) {
        .item-small:hover {
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

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

    body.search-overlay-open {
        overflow: hidden
    }

    .site-search-overlay {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        z-index: 1060;
        background: #0307128c;
        justify-content: center;
        align-items: flex-start;
        padding: clamp(48px, 10vw, 120px) clamp(18px, 8vw, 48px);
        transition: opacity .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s;
        display: flex;
        position: fixed;
        inset: 0
    }

    .site-search-overlay.is-visible {
        opacity: 1;
        pointer-events: auto
    }

    .site-search-backdrop {
        background: linear-gradient(#02061773, #02061785);
        position: absolute;
        inset: 0
    }

    .site-search-container {
        z-index: 2;
        border-radius: 16px;
        width: min(720px, 100%);
        margin-top: clamp(28px, 4vh, 56px);
        position: relative
    }

    .dark-mode .site-search-container {
        background: linear-gradient(135deg, #0f172af5, #0a0f1ef5);
        border-color: #47556959;
        box-shadow: 0 28px 75px #0307148c, 0 12px 32px #03071459
    }

    .site-search-form {
        flex-direction: column;
        display: flex
    }

    .site-search-field {
        align-items: center;
        display: flex;
        position: relative
    }

    .site-search-field input {
        color: #0f172a;
        background: #ffffffeb;
        border: 1px solid #94a3b859;
        border-radius: 16px;
        width: 100%;
        padding: clamp(16px, 3.5vw, 22px) clamp(58px, 6vw, 68px) clamp(16px, 3vw, 20px) clamp(20px, 4vw, 28px);
        font-size: clamp(16px, 2.8vw, 20px);
        font-weight: 500;
        transition: border .2s, box-shadow .2s, background .2s;
        box-shadow: inset 0 2px 8px #0f172a0a
    }

    .site-search-field input:focus {
        background: #fffffffa;
        border-color: #3b82f699;
        outline: none;
        box-shadow: 0 0 0 4px #3b82f61f, inset 0 2px 8px #0f172a0f
    }

    .dark-mode .site-search-field input {
        color: #f8fafc;
        background: #0f172abf;
        border-color: #94a3b859;
        box-shadow: inset 0 2px 10px #02061273
    }

    .dark-mode .site-search-field input:focus {
        background: #0f172ae0;
        border-color: #60a5fab3;
        box-shadow: 0 0 0 4px #60a5fa2e, inset 0 2px 14px #02061299
    }

    .site-search-submit {
        color: #fff;
        cursor: pointer;
        background: linear-gradient(135deg, #3b82f6f2, #2563ebeb);
        border: none;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        transition: transform .2s, box-shadow .2s;
        display: flex;
        position: absolute;
        right: clamp(16px, 3vw, 24px)
    }

    .site-search-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px #2563eb40
    }

    .page-layout-modern {
        flex-direction: column;
        gap: clamp(28px, 4vw, 40px);
        display: flex
    }

    .page-header-modern {
        flex-direction: column;
        gap: clamp(12px, 2vw, 18px);
        display: flex
    }

    .page-header-modern .page-title {
        color: #0f172a;
        margin: 0;
        font-size: clamp(24px, 3.6vw, 34px);
        font-weight: 700
    }

    .dark-mode .page-header-modern .page-title {
        color: #f8fafc
    }

    .page-grid {
        grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 360px);
        align-items: start;
        gap: clamp(28px, 4vw, 38px);
        display: grid
    }

    @media (max-width:992px) {
        .page-grid {
            grid-template-columns: minmax(0, 1fr)
        }
    }

    .page-main {
        flex-direction: column;
        gap: clamp(28px, 4vw, 36px);
        display: flex
    }

    .page-post-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: clamp(22px, 3vw, 30px);
        display: grid
    }

    .page-post-card {
        display: flex
    }

    .page-post-card>* {
        width: 100%
    }

    .page-sidebar {
        flex-direction: column;
        gap: clamp(24px, 3vw, 32px);
        display: flex
    }

    .page-sidebar .sidebar-widget {
        margin-bottom: clamp(18px, 3vw, 24px)
    }

    .site-search-container svg {
        pointer-events: none
    }

    .search-empty-state {
        text-align: center;
        background: linear-gradient(135deg, #f3f6ffa6, #e8efffb8);
        border: 1px solid #94a3b859;
        border-radius: 24px;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: clamp(48px, 12vw, 96px) clamp(18px, 6vw, 38px);
        display: flex
    }

    .dark-mode .search-empty-state {
        background: linear-gradient(135deg, #0f172aa6, #0b1224c7);
        border-color: #64748b52
    }

    .search-empty-icon {
        color: #3b82f6e6;
        background: #3b82f61f;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 72px;
        height: 72px;
        display: flex
    }

    .dark-mode .search-empty-icon {
        color: #bfdbfeeb;
        background: #2563eb2e
    }

    .search-empty-state h2 {
        color: #111827;
        margin: 0;
        font-size: clamp(20px, 3vw, 28px);
        font-weight: 700
    }

    .search-empty-state p {
        color: #374151b8;
        margin: 0;
        font-size: 1rem
    }

    body.gallery-fullscreen-open {
        overflow: hidden
    }

    .gallery-modern {
        flex-direction: column;
        align-items: center;
        gap: clamp(24px, 3vw, 32px);
        display: flex;
        position: relative
    }

    .gallery-modern-slide {
        opacity: 0;
        flex-direction: column;
        gap: clamp(18px, 2.6vw, 24px);
        width: 100%;
        transition: opacity .35s, transform .35s;
        display: none;
        transform: translateY(10px)
    }

    .gallery-modern-slide.is-active {
        opacity: 1;
        display: flex;
        transform: translateY(0)
    }

    .gallery-modern-card {
        background: linear-gradient(#0f172a1f, #0f172a0a);
        border-radius: clamp(18px, 2.8vw, 24px);
        flex-direction: column;
        display: flex;
        overflow: hidden;
        box-shadow: 0 26px 55px #0f172a38
    }

    .gallery-media {
        aspect-ratio: 16/9;
        background: radial-gradient(circle at 20% 20%, #3b82f62e, #0f172af5);
        width: 100%;
        min-height: clamp(240px, 36vw, 520px);
        max-height: clamp(300px, 48vw, 580px);
        position: relative;
        overflow: hidden
    }

    .gallery-media:after {
        content: "";
        pointer-events: none;
        background: linear-gradient(#0f172a00 40%, #0f172a8c 100%);
        position: absolute;
        inset: 0
    }

    .gallery-media img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .gallery-counter-overlay {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        color: #f8fafc;
        letter-spacing: .08em;
        text-transform: uppercase;
        z-index: 3;
        background: #0f172ac7;
        border-radius: 999px;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        font-size: .8rem;
        font-weight: 600;
        display: inline-flex;
        position: absolute;
        top: clamp(14px, 2vw, 22px);
        left: clamp(14px, 2vw, 22px)
    }

    .dark-mode .gallery-counter-overlay {
        color: #bfdbfef2;
        background: #0f172ad9
    }

    .gallery-media figcaption {
        color: #f8fafc;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: center;
        z-index: 2;
        background: #0f172ab8;
        border-radius: 999px;
        max-width: calc(100% - clamp(40px, 6vw, 80px));
        padding: 10px 18px;
        font-size: .85rem;
        position: absolute;
        bottom: clamp(14px, 2.2vw, 24px);
        left: 50%;
        transform: translate(-50%)
    }

    .dark-mode .gallery-media figcaption {
        background: #0f172ac7
    }

    .gallery-fullscreen-btn {
        color: #f8fafc;
        cursor: pointer;
        z-index: 3;
        background: #0f172a9e;
        border: none;
        border-radius: 12px;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        transition: transform .2s, background .2s;
        display: inline-flex;
        position: absolute;
        top: clamp(14px, 2vw, 22px);
        right: clamp(14px, 2vw, 22px)
    }

    .gallery-fullscreen-btn:hover {
        background: #0f172ac7;
        transform: scale(1.05)
    }

    .gallery-nav-inline {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #f8fafc;
        cursor: pointer;
        z-index: 3;
        background: #0f172ab3;
        border: none;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 46px;
        height: 46px;
        transition: transform .2s, background .2s, box-shadow .2s;
        display: inline-flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .gallery-nav-inline:hover {
        background: #0f172ad9;
        transform: translateY(-50%)scale(1.08);
        box-shadow: 0 8px 20px #0f172a66
    }

    .gallery-nav-inline.prev {
        left: clamp(14px, 2vw, 22px)
    }

    .gallery-nav-inline.next {
        right: clamp(14px, 2vw, 22px)
    }

    .gallery-nav-inline:disabled {
        opacity: .4;
        cursor: not-allowed
    }

    .gallery-nav-inline:disabled:hover {
        box-shadow: none;
        background: #0f172ab3;
        transform: translateY(-50%)scale(1)
    }

    .gallery-body {
        background: linear-gradient(135deg, #f6f8fff5, #eaf0ffe6);
        border: 1px solid #c7d2fe66;
        border-radius: clamp(16px, 2.6vw, 22px);
        flex-direction: column;
        gap: clamp(12px, 2vw, 18px);
        margin: clamp(-26px, -3vw, -18px) clamp(16px, 3vw, 26px) clamp(22px, 3vw, 30px);
        padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 28px);
        display: flex;
        position: relative;
        box-shadow: 0 20px 44px #0f172a29
    }

    .dark-mode .gallery-body {
        background: linear-gradient(135deg, #0f172aeb, #0b1224f0);
        border-color: #6366f147;
        box-shadow: 0 26px 54px #0307147a
    }

    .gallery-meta {
        color: #475569b8;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        font-size: .88rem;
        display: flex
    }

    .dark-mode .gallery-meta {
        color: #cbd5e1b3
    }

    .gallery-counter {
        color: #2563ebd9;
        letter-spacing: .08em;
        text-transform: uppercase;
        background: #3b82f61f;
        border-radius: 999px;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        font-size: .75rem;
        font-weight: 600;
        display: inline-flex
    }

    .dark-mode .gallery-counter {
        color: #bfdbfee6;
        background: #2563eb24
    }

    .gallery-description {
        font-size: .88rem
    }

    .gallery-title {
        color: #0f172a;
        letter-spacing: -.01em;
        margin: 0;
        font-size: clamp(22px, 3.2vw, 30px);
        font-weight: 700
    }

    .dark-mode .gallery-title {
        color: #f8fafc
    }

    .gallery-content {
        color: #475569d1;
        font-size: .95rem;
        line-height: 1.7
    }

    .dark-mode .gallery-content {
        color: #e2e8f0cc
    }

    .gallery-controls {
        justify-content: center;
        gap: clamp(12px, 2.6vw, 20px);
        margin-top: clamp(16px, 2.6vw, 24px);
        display: flex
    }

    .gallery-nav {
        color: #2563ebe6;
        cursor: pointer;
        background: #3b82f61f;
        border: none;
        border-radius: 12px;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        transition: transform .2s, background .2s, box-shadow .2s;
        display: inline-flex
    }

    .gallery-nav:hover {
        background: #2563eb33;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px #2563eb33
    }

    .dark-mode .gallery-nav {
        color: #bfdbfeeb;
        background: #2563eb33
    }

    .dark-mode .gallery-nav:hover {
        background: #3b82f63d;
        box-shadow: 0 14px 28px #2563eb42
    }

    .gallery-fullscreen {
        z-index: 1600;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        scrollbar-width: thin;
        scrollbar-color: #94a3b866 #0f172a33;
        background: #030712eb;
        justify-content: center;
        align-items: flex-start;
        padding: clamp(40px, 7vw, 80px) clamp(24px, 5vw, 60px);
        display: none;
        position: fixed;
        inset: 0;
        overflow-y: auto
    }

    .gallery-fullscreen::-webkit-scrollbar {
        width: 10px
    }

    .gallery-fullscreen::-webkit-scrollbar-track {
        background: #0f172a33;
        border-radius: 5px
    }

    .gallery-fullscreen::-webkit-scrollbar-thumb {
        background: #94a3b866;
        border-radius: 5px;
        transition: background .2s
    }

    .gallery-fullscreen::-webkit-scrollbar-thumb:hover {
        background: #94a3b899
    }

    .dark-mode .gallery-fullscreen {
        scrollbar-color: #47556980 #0f172a4d
    }

    .dark-mode .gallery-fullscreen::-webkit-scrollbar-track {
        background: #0f172a4d
    }

    .dark-mode .gallery-fullscreen::-webkit-scrollbar-thumb {
        background: #47556980
    }

    .dark-mode .gallery-fullscreen::-webkit-scrollbar-thumb:hover {
        background: #475569b3
    }

    .gallery-fullscreen.is-visible {
        display: flex
    }

    .gallery-fullscreen-content {
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        min-height: 100%;
        display: flex;
        position: relative
    }

    .gallery-fullscreen-content .gallery-modern-slide {
        opacity: 1;
        flex-direction: column;
        width: min(100%, 900px);
        max-width: 900px;
        display: flex;
        transform: none
    }

    .gallery-fullscreen-content .gallery-modern-card {
        background: 0 0;
        box-shadow: 0 32px 64px #03071499
    }

    .gallery-fullscreen-content .gallery-media {
        aspect-ratio: 16/9;
        min-height: auto;
        max-height: 56vh
    }

    .gallery-fullscreen-content .gallery-body {
        max-height: none;
        margin: clamp(16px, 2.8vw, 24px) 0 0
    }

    .gallery-fullscreen-close {
        color: #f8fafc;
        cursor: pointer;
        z-index: 1610;
        background: #0f172ac7;
        border: none;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        font-size: 1.6rem;
        transition: transform .2s, background .2s;
        display: flex;
        position: fixed;
        top: clamp(20px, 4vw, 32px);
        right: clamp(20px, 4vw, 32px)
    }

    .gallery-fullscreen-close:hover {
        background: #0f172ae6;
        transform: scale(1.08)
    }

    .emoji-reactions-container {
        float: left;
        width: 100%;
        margin-bottom: clamp(40px, 6vw, 60px);
        padding: clamp(24px, 4vw, 32px) 0
    }

    .emoji-reactions-container .title-reactions {
        text-align: center;
        color: #0f172a;
        letter-spacing: .01em;
        width: 100%;
        margin-bottom: clamp(20px, 3vw, 28px);
        font-size: clamp(17px, 2.6vw, 22px);
        font-weight: 700;
        display: block
    }

    .dark-mode .emoji-reactions-container .title-reactions {
        color: #f8fafc
    }

    .emoji-reactions {
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(18px, 3.2vw, 28px);
        max-width: 100%;
        display: flex
    }

    .emoji-reactions .reaction-container {
        flex: none
    }

    .emoji-reactions .reaction {
        text-align: center;
        cursor: pointer;
        background: 0 0;
        border: none;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: auto;
        padding: 0;
        transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
        display: flex;
        position: relative
    }

    .emoji-reactions .reaction:hover:not(.disabled) {
        transform: translateY(-6px)scale(1.12)
    }

    .emoji-reactions .reaction.selected {
        transform: translateY(-4px)
    }

    .emoji-reactions .emoji {
        filter: drop-shadow(0 6px 14px #0f172a1f);
        width: clamp(56px, 11vw, 72px);
        height: clamp(56px, 11vw, 72px);
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1)
    }

    .emoji-reactions .reaction:hover:not(.disabled) .emoji {
        filter: drop-shadow(0 10px 22px #0f172a2e)
    }

    .emoji-reactions .reaction.selected .emoji {
        filter: drop-shadow(0 8px 20px #3b82f659)
    }

    .dark-mode .emoji-reactions .reaction.selected .emoji {
        filter: drop-shadow(0 10px 24px #3b82f680)
    }

    .emoji-reactions .reaction .vote {
        color: #fff;
        background: linear-gradient(135deg, #3b82f6eb, #2563ebe0);
        border: 2px solid #ffffffe6;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        min-width: 24px;
        height: 22px;
        padding: 0 7px;
        font-size: clamp(10px, 1.8vw, 12px);
        font-weight: 700;
        transition: all .3s;
        display: inline-flex;
        position: absolute;
        top: clamp(-2px, 0vw, 0px);
        right: clamp(-4px, 0vw, -2px);
        box-shadow: 0 4px 12px #3b82f652
    }

    .dark-mode .emoji-reactions .reaction .vote {
        background: linear-gradient(135deg, #3b82f6f2, #2563ebeb);
        border-color: #0f172acc;
        box-shadow: 0 6px 16px #3b82f673
    }

    .emoji-reactions .reaction:hover:not(.disabled) .vote {
        transform: scale(1.1);
        box-shadow: 0 8px 18px #3b82f66b
    }

    .emoji-reactions .reaction.disabled {
        cursor: not-allowed;
        opacity: .4
    }

    .emoji-reactions .reaction.disabled:hover {
        transform: none
    }

    @media (max-width:768px) {
        .emoji-reactions-container {
            margin-bottom: clamp(32px, 6vw, 48px);
            padding: clamp(20px, 5vw, 28px) 0
        }

        .emoji-reactions {
            gap: clamp(14px, 3.5vw, 22px)
        }

        .emoji-reactions .emoji {
            width: clamp(52px, 12vw, 64px);
            height: clamp(52px, 12vw, 64px)
        }

        .gallery-modern-slide {
            width: 100%
        }

        .gallery-body {
            margin: clamp(-28px, -5vw, -24px) clamp(16px, 5vw, 24px) clamp(22px, 5vw, 30px)
        }

        .gallery-modern-card {
            border-radius: clamp(16px, 3vw, 22px)
        }

        .gallery-fullscreen-inner {
            width: min(100%, 96vw);
            max-height: 96vh;
            padding: clamp(14px, 4vw, 22px)
        }

        .gallery-fullscreen-content {
            max-height: calc(96vh - clamp(90px, 12vw, 150px))
        }

        .gallery-fullscreen-close {
            width: 36px;
            height: 36px;
            font-size: 1.25rem
        }

        .gallery-fullscreen-controls {
            width: calc(100% - clamp(28px, 8vw, 48px));
            bottom: clamp(16px, 6vw, 24px)
        }
    }

    .dark-mode .search-empty-state h2 {
        color: #f8fafc
    }

    .dark-mode .search-empty-state p {
        color: #cbd5e1b8
    }

    @media (max-width:640px) {
        .site-search-overlay {
            padding: clamp(32px, 12vw, 56px) clamp(12px, 6vw, 22px)
        }

        .site-search-container {
            border-radius: 22px;
            padding: 26px 18px 34px
        }

        .site-search-field input {
            border-radius: 16px;
            padding: 16px 60px 16px 18px;
            font-size: 1rem
        }
    }

    .category-small-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(22px, 3vw, 30px);
        margin-top: clamp(28px, 4vw, 36px);
        display: grid
    }

    .category-small-grid.category-small-grid--compact {
        gap: clamp(22px, 3vw, 30px);
        margin-top: clamp(24px, 3.2vw, 32px)
    }

    .row-gap-modern {
        row-gap: clamp(22px, 3vw, 30px)
    }

    .category-small-item {
        width: 100%
    }

    .category-small-grid .post-item-small {
        background: linear-gradient(135deg, #f9faffeb, #ecf3fff5);
        border: 1px solid #0f172a14;
        border-radius: 20px;
        align-items: center;
        gap: clamp(12px, 2.4vw, 18px);
        padding: clamp(16px, 3vw, 20px) clamp(18px, 3.4vw, 24px);
        transition: transform .25s, box-shadow .25s;
        box-shadow: 0 18px 45px #0f172a0f;
        display: flex !important
    }

    .category-small-grid .post-item-small:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 50px #0f172a1f
    }

    .dark-mode .category-small-grid .post-item-small {
        background: linear-gradient(135deg, #0d132cf0, #060b1ef7);
        border-color: #94a3b829;
        box-shadow: 0 22px 55px #0206127a
    }

    .category-small-grid .post-item-small .tbl-cell {
        float: none !important;
        width: auto !important;
        display: block !important
    }

    .category-small-grid .post-item-small .tbl-cell.left {
        flex: none;
        justify-content: center;
        align-items: center;
        margin-bottom: 0 !important;
        display: flex !important
    }

    .category-small-grid .post-item-small .image {
        flex-shrink: 0
    }

    .category-small-grid .post-item-small .tbl-cell.right {
        flex-direction: column;
        flex: 1;
        justify-content: center;
        gap: 6px;
        display: flex !important
    }

    .category-small-grid .post-item-small .image img {
        object-fit: cover;
        border-radius: 16px;
        width: clamp(110px, 24vw, 132px);
        height: clamp(86px, 20vw, 120px)
    }

    .category-small-grid .post-item-small .title a {
        font-weight: 600
    }

    @media (max-width:1200px) {
        .category-small-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media (max-width:768px) {
        .post-item-vr {
            aspect-ratio: auto;
            border-radius: 20px;
            flex-direction: column;
            min-height: 0;
            max-height: none;
            display: flex
        }

        .post-item-vr .image {
            flex: none;
            width: 100%;
            height: clamp(200px, 55vw, 240px);
            position: relative;
            inset: auto
        }

        .post-item-vr:after {
            display: none
        }

        .post-item-vr .caption {
            background: linear-gradient(135deg, #0f172abd, #0f172a7a);
            border: 1px solid #e2e8f00d;
            border-radius: 0 0 20px 20px;
            margin-top: -10px;
            padding: 18px 20px 20px;
            position: static;
            box-shadow: 0 6px 18px #0f172a29
        }

        .category-small-grid {
            grid-template-columns: 1fr;
            gap: 18px;
            margin-top: 24px
        }

        .category-small-grid .post-item-small {
            align-items: flex-start;
            gap: 14px;
            padding: 16px 18px
        }

        .category-small-grid .post-item-small .image img {
            border-radius: 14px;
            width: 110px;
            height: 82px
        }
    }

    @media (max-width:576px) {
        .slider-image-wrapper {
            min-height: 210px
        }

        .category-small-grid .post-item-small {
            flex-direction: row;
            gap: 12px;
            padding: 14px 16px
        }

        .category-small-grid .post-item-small .tbl-cell.left {
            flex: none
        }

        .category-small-grid .post-item-small .image img {
            border-radius: 12px;
            width: 96px;
            height: 72px
        }

        .post-item-vr .image {
            height: clamp(180px, 58vw, 220px);
            inset: auto
        }

        .post-item-vr .caption {
            background: linear-gradient(135deg, #0f172ab3, #0f172a73);
            padding: 16px 18px 18px;
            box-shadow: 0 5px 16px #0f172a24
        }
    }

    .section-title {
        margin-bottom: calc(var(--spacing)*6);
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        display: flex;
        position: relative
    }

    .section-title:before {
        content: "";
        background: radial-gradient(circle, var(--color-primary)1px, transparent 1px);
        opacity: .15;
        background-position: 0 0;
        background-size: 8px 8px;
        height: 1px;
        position: absolute;
        bottom: -8px;
        left: 0;
        right: 0
    }

    .section-title:after {
        content: "";
        background: var(--color-primary);
        border-radius: 2px;
        width: 90px;
        height: 3px;
        position: absolute;
        bottom: -8px;
        left: 0
    }

    .section-title .title {
        color: #0a0a0a;
        letter-spacing: -.03em;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
        font-size: 2rem;
        font-weight: 800;
        display: flex;
        position: relative
    }

    .dark-mode .section-title .title {
        color: #f3f4f6 !important
    }

    .dark-mode .section-title .view-all {
        color: #9ca3af !important
    }

    .dark-mode .section-title .view-all:hover {
        color: #60a5fa !important
    }

    .section-title .view-all {
        color: var(--color-primary);
        align-items: center;
        gap: 6px;
        padding: 0;
        font-size: .875rem;
        font-weight: 600;
        text-decoration: none;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        display: inline-flex;
        position: relative
    }

    .section-title .view-all:after {
        content: "";
        background: var(--color-primary);
        transform-origin: 100%;
        height: 1px;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        transform: scaleX(0)
    }

    .section-title .view-all:hover {
        color: var(--color-primary-dark)
    }

    .section-title .view-all:hover:after {
        transform-origin: 0;
        transform: scaleX(1)
    }

    .section-title .view-all i {
        font-size: 12px;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1)
    }

    .section-title .view-all:hover i {
        transform: translate(4px)
    }

    @media (max-width:768px) {
        .section-title .title {
            font-size: 2rem
        }

        .section-title .view-all {
            font-size: .8rem
        }
    }

    .nav-live-tv {
        white-space: nowrap;
        align-items: center;
        gap: 8px;
        position: relative;
        display: flex !important
    }

    .nav-live-tv .live-tv-text-nav {
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: .875rem;
        font-weight: 700;
        color: #fff !important
    }

    .live-tv-play-nav {
        background: #fff;
        border: 2px solid #ffffff80;
        border-radius: 50%;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        transition: all .3s;
        animation: 2s ease-in-out infinite nav-play-pulse;
        display: flex;
        position: relative;
        box-shadow: 0 0 #fff9, 0 2px 8px #00000026
    }

    .live-tv-play-nav svg {
        width: 12px;
        height: 12px;
        color: var(--color-primary);
        margin-left: 2px
    }

    .nav-live-tv:hover .live-tv-play-nav {
        background: #fff;
        transform: scale(1.1);
        box-shadow: 0 0 #fffc, 0 4px 12px #0003
    }

    @keyframes nav-play-pulse {

        0%,
        to {
            box-shadow: 0 0 #fff9, 0 2px 8px #00000026
        }

        50% {
            box-shadow: 0 0 0 8px #fff0, 0 2px 8px #00000026
        }
    }

    .live-tv-button {
        background: linear-gradient(135deg, var(--color-primary)0%, var(--color-primary-dark)100%);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 24px;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        transition: all .4s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 0 1px #ffffff1a
    }

    .live-tv-button:before {
        content: "";
        opacity: 1;
        z-index: 1;
        background-color: #2b399040;
        background-image: radial-gradient(circle at 25% 25%, #ffffff0d 2px, #0000 2px), radial-gradient(circle at 75% 75%, #ffffff0a 2px, #0000 2px), radial-gradient(circle, #ffffff08 1.5px, #0000 1.5px);
        background-position: 0 0, 20px 20px, 10px 10px;
        background-size: 40px 40px, 50px 50px, 30px 30px;
        position: absolute;
        inset: 0
    }

    .live-tv-button[style*=background-image]:before {
        background-color: #2b399066
    }

    .section-featured .live-tv-button:hover {
        box-shadow: 0 0 0 2px #ffffff26
    }

    .live-tv-content {
        z-index: 3;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        width: 100%;
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .live-tv-play {
        opacity: .8;
        z-index: 3;
        background: #fff;
        border: 3px solid #ffffff4d;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        transition: all .4s cubic-bezier(.4, 0, .2, 1);
        animation: 2s ease-in-out infinite live-tv-play-pulse;
        display: flex;
        position: relative;
        box-shadow: 0 0 #fff6, 0 8px 32px #0003
    }

    .live-tv-play svg {
        width: 32px;
        height: 32px;
        color: var(--color-primary);
        margin-left: 4px
    }

    .live-tv-button:hover .live-tv-play {
        background: #fff;
        border-color: #ffffff80;
        transform: scale(1.08);
        box-shadow: 0 0 0 8px #fff3, 0 12px 48px #0000004d
    }

    .live-tv-button:hover .live-tv-play svg {
        color: var(--color-primary);
        transition: transform .3s ease-in-out;
        animation: none;
        transform: scale(1.1)
    }

    @keyframes live-tv-play-pulse {

        0%,
        to {
            box-shadow: 0 0 #fffc, 0 8px 32px #0003
        }

        50% {
            box-shadow: 0 0 0 20px #fff0, 0 8px 32px #0003
        }
    }

    .live-tv-title {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .1em;
        text-shadow: 0 6px 20px #00000080, 0 2px 8px #0000004d;
        z-index: 3;
        margin: 0;
        font-size: 1.5rem;
        font-weight: 500;
        transition: text-shadow .3s;
        position: relative
    }

    .live-tv-button:hover .live-tv-title {
        text-shadow: 0 6px 20px #1a2467ba, 0 2px 8px #1a2467ba
    }

    @media (max-width:768px) {
        .live-tv-play {
            border-width: 2.5px;
            width: 70px;
            height: 70px
        }

        .live-tv-play svg {
            width: 28px;
            height: 28px
        }

        .live-tv-title {
            font-size: 1.5rem
        }
    }

    .section-featured {
        max-height: 420px;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important
    }

    .section-featured .container-xl,
    .section-featured .grid {
        max-height: 420px;
        height: auto !important
    }

    @media (max-width:1399.98px) {
        .section-featured {
            max-height: 420px !important
        }
    }

    @media (max-width:1199.98px) {
        .section-featured {
            height: auto !important;
            max-height: 840px !important
        }
    }

    .slider-skeleton,
    .featured-skeleton {
        background: linear-gradient(135deg, #2b399008 0%, #0307250d 100%);
        transition: all .3s;
        border-color: #2b399033 !important
    }

    .section-featured .col-span-9 {
        max-height: 420px
    }

    .slider-skeleton {
        height: 420px !important;
        max-height: 420px !important
    }

    .section-featured .col-span-3 {
        max-height: 420px
    }

    .section-featured .col-span-3>.flex {
        height: 420px;
        max-height: 420px
    }

    .section-featured .col-span-3 .flex-1 {
        flex: 0 0 202px;
        width: 100%;
        height: 202px;
        min-height: 202px;
        max-height: 202px
    }

    @media (min-width:1024px) {
        .live-tv-flex {
            height: 0 !important
        }

        .section-featured .col-span-3>.flex,
        .section-featured .lg\:col-span-3>.flex {
            height: 420px !important
        }
    }

    .featured-skeleton,
    .section-featured .live-tv-button {
        aspect-ratio: 1 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 202px !important
    }

    .slider-skeleton:hover,
    .featured-skeleton:hover {
        background: linear-gradient(135deg, #2b39900d 0%, #03072514 100%);
        border-color: #2b39904d !important
    }

    .slider-skeleton span,
    .featured-skeleton span {
        letter-spacing: .05em;
        font-weight: 600;
        color: #2b399066 !important
    }

    .mobile-navbar-wrapper {
        display: none;
        position: relative
    }

    .container-bn {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .container-bn-header.container,
    .container-bn-header.container-bn {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .container-bn-header .row,
    .container-bn-header .bn-content,
    .container-bn-header .bn-inner {
        margin: 0 !important;
        padding: 0 !important
    }

    @media (max-width:767px) {
        .container-bn {
            margin-bottom: calc(var(--spacing)*15) !important;
            margin-top: calc(var(--spacing)*15) !important
        }

        .container-bn+.my-0 {
            margin-top: 0 !important;
            margin-bottom: 0 !important
        }

        .container-bn-header.container,
        .container-bn-header.container-bn {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important
        }
    }

    .container-bn .row {
        margin: 0 !important;
        padding: 0 !important
    }

    .bn-content {
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important
    }

    .bn-inner {
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        display: flex !important
    }

    .bn-inner img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important
    }

    .bn-sidebar-content {
        justify-content: flex-start !important
    }

    .bn-sidebar-content .bn-inner {
        justify-content: flex-start !important;
        width: 100% !important
    }

    .container-bn-ds {
        display: block !important
    }

    .container-bn-mb {
        display: none !important
    }

    @media (min-width:768px) and (max-width:1023px) {
        .container-bn {
            padding-left: 24px !important;
            padding-right: 24px !important
        }

        .container.container-bn,
        .container-bn.container {
            box-sizing: border-box;
            padding-left: 24px !important;
            padding-right: 24px !important
        }

        .container-bn .row,
        .bn-content {
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important
        }

        .bn-inner {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%
        }

        .bn-inner img,
        .bn-inner iframe,
        .bn-inner>* {
            box-sizing: border-box;
            max-width: 100% !important
        }

        .bn-sidebar-content .bn-inner {
            width: 100%;
            max-width: 100%
        }
    }

    @media (max-width:639px) {
        .container-bn-mb.mt-20 {
            margin-top: 5rem !important
        }
    }

    @media (min-width:640px) {
        .container-bn-mb.mt-20.sm\:mt-0 {
            margin-top: 0 !important
        }
    }

    @media (max-width:767px) {
        .mobile-navbar-wrapper {
            display: block
        }

        .navbar.nav-main {
            display: none !important
        }
    }

    @media (min-width:768px) {
        .mobile-navbar-wrapper {
            display: none !important
        }

        .navbar.nav-main {
            display: flex !important
        }
    }

    .mobile-top-bar {
        z-index: 1000;
        background: linear-gradient(135deg, #2b3990, #030725);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        box-shadow: 0 2px 10px #0000001a
    }

    .mobile-container {
        padding: 0 16px
    }

    .mobile-top-inner {
        justify-content: space-between;
        align-items: center;
        height: 80px;
        display: flex
    }

    .mobile-menu-toggle {
        cursor: pointer;
        z-index: 1001;
        background: 0 0;
        border: none;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        display: flex
    }

    .hamburger-line {
        background: #fff;
        border-radius: 2px;
        width: 24px;
        height: 2px;
        transition: all .3s
    }

    .mobile-menu-toggle.active .hamburger-line:first-child {
        transform: rotate(45deg)translate(7px, 7px)
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg)translate(6px, -6px)
    }

    .mobile-logo {
        flex: 1;
        justify-content: flex-start;
        align-items: center;
        margin-left: 16px;
        display: flex
    }

    .mobile-logo a {
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex
    }

    .mobile-logo img {
        width: auto;
        max-height: 38px
    }

    .mobile-actions {
        align-items: center;
        gap: 10px;
        display: flex
    }

    .mobile-live-tv-btn {
        cursor: pointer;
        background: #ffffff1a;
        border: 1px solid #fff3;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        padding: 8px;
        text-decoration: none;
        transition: all .3s;
        display: flex;
        position: relative
    }

    .mobile-live-play {
        background: #fff;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        animation: 2s ease-in-out infinite mobile-live-pulse;
        display: flex;
        position: relative;
        box-shadow: 0 0 #fff9, 0 2px 8px #00000026
    }

    .mobile-live-play svg {
        width: 10px;
        height: 10px;
        color: var(--color-primary);
        margin-left: 2px
    }

    .mobile-live-tv-btn:hover {
        background: #ffffff26;
        border-color: #ffffff4d
    }

    @keyframes mobile-live-pulse {

        0%,
        to {
            box-shadow: 0 0 #fff9, 0 2px 8px #00000026
        }

        50% {
            box-shadow: 0 0 0 8px #fff0, 0 2px 8px #00000026
        }
    }

    .mobile-action-btn {
        cursor: pointer;
        background: #ffffff1a;
        border: 1px solid #fff3;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        padding: 8px;
        transition: all .3s;
        display: flex
    }

    .mobile-action-btn:hover {
        background: #fff3
    }

    .mobile-action-btn svg {
        color: #fff;
        stroke: #fff
    }

    .mobile-darkmode-form {
        margin: 0
    }

    .mobile-search-form {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: #ffffff0d;
        max-height: 0;
        transition: max-height .3s;
        overflow: hidden
    }

    .mobile-search-form.active {
        max-height: 100px;
        padding: 12px 0
    }

    .mobile-search-inner {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .mobile-search-input {
        color: #fff;
        background: #ffffff1a;
        border: 1px solid #fff3;
        border-radius: 10px;
        flex: 1;
        padding: 12px 16px;
        font-size: 14px
    }

    .mobile-search-input::placeholder {
        color: #fff9
    }

    .mobile-search-btn {
        cursor: pointer;
        background: #fff3;
        border: 1px solid #ffffff4d;
        border-radius: 10px;
        padding: 12px 16px
    }

    .mobile-search-btn svg {
        color: #fff;
        stroke: #fff
    }

    .mobile-menu-overlay {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        background: #00000080;
        transition: opacity .3s;
        position: fixed;
        inset: 0
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto
    }

    .mobile-menu-sidebar {
        z-index: 1001;
        background: linear-gradient(#fff 0%, #f9fafb 100%);
        width: 320px;
        max-width: 90%;
        transition: transform .4s cubic-bezier(.4, 0, .2, 1);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        transform: translate(-100%);
        box-shadow: 4px 0 40px #00000026, 0 0 0 1px #0000000d
    }

    .mobile-menu-sidebar.active {
        transform: translate(0)
    }

    .dark-mode .mobile-menu-sidebar {
        background: linear-gradient(#070926 0%, #0a0d1f 100%);
        box-shadow: 4px 0 40px #0006, 0 0 0 1px #ffffff0d
    }

    .mobile-menu-header {
        background: linear-gradient(135deg, #2b3990, #030725);
        border-bottom: 1px solid #ffffff1a;
        justify-content: space-between;
        align-items: center;
        padding: 24px 20px;
        display: flex;
        box-shadow: 0 2px 10px #0000001a
    }

    .mobile-menu-logo {
        align-items: center;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important
    }

    .mobile-menu-logo img {
        filter: drop-shadow(0 2px 8px #0003);
        object-fit: contain !important;
        max-width: 200px !important;
        height: 34px !important;
        display: block !important
    }

    .mobile-menu-close {
        cursor: pointer;
        background: #ffffff1a;
        border: 1px solid #fff3;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        padding: 10px;
        transition: all .3s;
        display: flex
    }

    .mobile-menu-close:hover {
        background: #fff3;
        border-color: #ffffff4d
    }

    .mobile-menu-close svg {
        color: #fff;
        width: 20px;
        height: 20px
    }

    .mobile-menu-nav {
        padding: 16px 0
    }

    .mobile-menu-list {
        margin: 0;
        padding: 0;
        list-style: none
    }

    .mobile-menu-item {
        position: relative
    }

    .mobile-menu-link {
        color: #1f2937;
        border-left: 3px solid #0000;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: all .3s;
        display: flex;
        position: relative
    }

    .dark-mode .mobile-menu-link {
        color: #f3f4f6
    }

    .mobile-menu-link:before {
        content: "";
        background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
        border-radius: 0 4px 4px 0;
        width: 4px;
        height: 0;
        transition: height .3s;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

    .mobile-menu-link:hover,
    .mobile-menu-link:active {
        color: var(--color-primary);
        background: linear-gradient(90deg, #2b399014 0%, #0000 100%);
        border-left-color: #0000
    }

    .mobile-menu-link:hover:before,
    .mobile-menu-link:active:before {
        height: 60%
    }

    .dark-mode .mobile-menu-link:hover,
    .dark-mode .mobile-menu-link:active {
        color: #60a5fa;
        background: linear-gradient(90deg, #2b399040 0%, #0000 100%)
    }

    .mobile-menu-arrow {
        font-size: 12px;
        transition: transform .3s
    }

    .mobile-menu-item.active .mobile-menu-arrow {
        transform: rotate(180deg)
    }

    .mobile-submenu {
        background: linear-gradient(90deg, #2b399008 0%, #0000 50%);
        border-left: 2px solid #2b39901a;
        max-height: 0;
        margin: 0 0 0 24px;
        padding: 0;
        list-style: none;
        transition: max-height .3s;
        overflow: hidden
    }

    .dark-mode .mobile-submenu {
        background: linear-gradient(90deg, #2b399014 0%, #0000 50%);
        border-left-color: #2b399033
    }

    .mobile-menu-item.active .mobile-submenu {
        max-height: 500px;
        padding: 8px 0
    }

    .mobile-submenu-item {
        position: relative
    }

    .mobile-submenu-link {
        color: #6b7280;
        align-items: center;
        padding: 12px 20px 12px 28px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all .3s;
        display: flex;
        position: relative
    }

    .mobile-submenu-link:before {
        content: "";
        background: var(--color-primary);
        opacity: 0;
        border-radius: 50%;
        width: 6px;
        height: 6px;
        transition: opacity .3s;
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%)
    }

    .dark-mode .mobile-submenu-link {
        color: #9ca3af
    }

    .mobile-submenu-link:hover {
        color: var(--color-primary);
        background: #2b399014;
        padding-left: 32px
    }

    .mobile-submenu-link:hover:before {
        opacity: 1
    }

    .dark-mode .mobile-submenu-link:hover {
        color: #60a5fa;
        background: #2b399033
    }

    .mobile-submenu-divider {
        background: #0000001a;
        height: 1px;
        margin: 8px 20px
    }

    .dark-mode .mobile-submenu-divider {
        background: #ffffff1a
    }

    body.mobile-menu-open {
        overflow: hidden
    }

    @media (max-width:767px) {
        body {
            padding-top: 80px
        }

        .section {
            margin-bottom: 32px !important
        }

        .container-xl {
            padding-left: 12px !important;
            padding-right: 12px !important
        }

        .row {
            gap: 16px !important
        }

        .section-featured {
            clear: both !important;
            z-index: 2 !important;
            max-height: none !important;
            margin-top: 0 !important;
            margin-bottom: 24px !important;
            padding-top: 0 !important;
            position: relative !important
        }

        .section-featured .container-xl {
            max-height: none !important;
            padding-left: 12px !important;
            padding-right: 12px !important
        }

        .section-featured .grid {
            gap: 12px !important;
            max-height: none !important
        }

        .modern-slider-container {
            margin-top: 0 !important
        }

        .section-featured .col-span-9,
        .section-featured .col-span-3 {
            grid-column: span 12/span 12 !important
        }

        .modern-slider-container {
            max-height: 300px !important
        }

        .modern-slider-item {
            height: 300px !important;
            max-height: 300px !important
        }

        .slider-caption-glass {
            padding: 16px 20px !important
        }

        .slider-title {
            margin-bottom: 8px !important;
            font-size: 1.25rem !important
        }

        .slider-subtitle {
            font-size: .75rem !important
        }

        .slider-description {
            margin-bottom: 16px !important;
            font-size: .875rem !important
        }

        .slider-meta {
            gap: 8px !important;
            font-size: .75rem !important
        }

        .slider-button {
            padding: 10px 20px !important;
            font-size: .875rem !important
        }

        .badge-category-modern {
            padding: 6px 12px !important;
            font-size: .75rem !important
        }

        .section-featured .col-span-3>.flex {
            flex-direction: row !important;
            gap: 12px !important;
            height: auto !important;
            max-height: none !important
        }

        .section-featured .col-span-3 .flex-1 {
            flex: 1 !important;
            height: 150px !important;
            min-height: 150px !important;
            max-height: 150px !important
        }

        .featured-skeleton,
        .section-featured .live-tv-button {
            max-height: 150px !important
        }

        .live-tv-title {
            font-size: 1.25rem !important
        }

        .live-tv-play {
            width: 60px !important;
            height: 60px !important
        }

        .live-tv-play svg {
            width: 24px !important;
            height: 24px !important
        }

        .section-category .col-lg-3 {
            grid-column: span 6/span 6 !important
        }

        .post-card {
            margin-bottom: 16px !important
        }

        .post-card .content-overlay-card {
            padding: 14px !important
        }

        .post-card .post-title {
            margin-bottom: 6px !important;
            font-size: .95rem !important
        }

        .post-card .post-description {
            font-size: .8rem !important
        }

        .latest-posts .col-md-6,
        .latest-posts .col-md-4 {
            grid-column: span 12/span 12 !important
        }

        .col-sidebar {
            margin-top: 32px
        }

        .sidebar-widget {
            max-width: 100% !important;
            margin-bottom: 24px !important;
            overflow-x: hidden !important
        }

        .sidebar-widget .widget-head {
            margin-bottom: 16px !important
        }

        .sidebar-widget .widget-head .title {
            font-size: 16px !important
        }

        .sidebar-widget .widget-body {
            max-width: 100% !important;
            overflow-x: hidden !important
        }

        .post-item-small .title {
            font-size: 13px !important
        }

        .widget-follow {
            flex-flow: row !important;
            justify-content: space-between !important;
            gap: 6px !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            display: flex !important;
            overflow-x: hidden !important
        }

        .widget-follow .item {
            flex: 0 0 calc(20% - 4.8px) !important;
            width: calc(20% - 4.8px) !important;
            min-width: 0 !important;
            max-width: calc(20% - 4.8px) !important;
            margin: 0 !important;
            padding: 0 !important
        }

        .widget-follow .item a {
            aspect-ratio: 1 !important;
            justify-content: center !important;
            align-items: center !important;
            width: 100% !important;
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
            padding: 8px !important;
            font-size: 16px !important;
            display: flex !important;
            overflow: hidden !important
        }

        .widget-follow .item a i {
            margin: 0 !important;
            font-size: 24px !important;
            line-height: 1 !important
        }

        .container-bn-ds {
            display: none !important
        }

        .container-bn-mb {
            display: block !important
        }

        .bn-inner {
            width: 100% !important
        }

        .bn-inner img {
            width: 100% !important;
            height: auto !important
        }

        .section-title .title {
            font-size: 1.25rem !important
        }

        .section-title .view-all {
            font-size: .75rem !important
        }

        .section-newsticker {
            z-index: 1 !important;
            margin-bottom: 50px !important;
            padding-bottom: 0 !important;
            position: relative !important
        }

        .section-newsticker .container-xl {
            padding-left: 12px !important;
            padding-right: 12px !important
        }

        .newsticker-container {
            margin-bottom: 0 !important;
            padding: 12px !important;
            overflow: hidden !important
        }

        .newsticker-title {
            padding: 8px 12px !important;
            font-size: .75rem !important
        }

        .newsticker-title svg {
            width: 12px !important;
            height: 12px !important
        }

        .newsticker,
        .nav-sm-buttons {
            margin-bottom: 0 !important
        }

        .newsticker li {
            font-size: .875rem !important
        }

        .post-item-vr .image {
            min-height: 200px !important;
            max-height: 200px !important
        }

        .col-lg-8,
        .col-lg-4,
        .col-md-8,
        .col-md-4 {
            grid-column: span 12/span 12 !important
        }

        .col-md-6 {
            grid-column: span 6/span 6 !important
        }
    }

    #footer {
        background-size: 80px 80px, 80px 80px, 100% 100%;
        min-height: 400px;
        position: relative;
        overflow: hidden
    }

    #footer:before {
        content: "";
        filter: blur(120px);
        opacity: .8;
        pointer-events: none;
        z-index: 1;
        background: radial-gradient(circle at 40% 40%, #2b399066 0%, #0000 50%), radial-gradient(circle at 60% 60%, #4361ee4d 0%, #0000 60%);
        width: 800px;
        height: 800px;
        position: absolute;
        top: -300px;
        right: -150px
    }

    #footer:after {
        content: "";
        filter: blur(110px);
        opacity: .8;
        pointer-events: none;
        z-index: 1;
        background: radial-gradient(circle, #2b399066 0%, #0000 50%), radial-gradient(circle at 30% 70%, #4361ee4d 0%, #0000 60%);
        width: 700px;
        height: 700px;
        position: absolute;
        bottom: -250px;
        left: -150px
    }

    .footer-inner:before {
        content: "";
        filter: blur(100px);
        opacity: .7;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(circle, #2b39904d 0%, #0000 65%);
        width: 500px;
        height: 500px;
        position: absolute;
        top: 20%;
        left: 15%
    }

    .footer-inner:after {
        content: "";
        filter: blur(95px);
        opacity: .7;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(circle, #4f46e54d 0%, #0000 65%);
        width: 450px;
        height: 450px;
        position: absolute;
        bottom: 15%;
        right: 20%
    }

    .footer-inner {
        z-index: 2;
        padding-top: 80px;
        padding-bottom: 60px;
        position: relative
    }

    .footer-col-left {
        z-index: 3;
        position: relative
    }

    .footer-logo-left {
        margin-bottom: 32px
    }

    .footer-logo-left img {
        width: auto;
        height: 60px;
        filter: brightness(0)invert() !important
    }

    .footer-social-left {
        margin-bottom: 24px
    }

    .footer-social-left ul {
        justify-content: flex-start;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex
    }

    .footer-social-left ul li a {
        -webkit-backdrop-filter: blur(10px);
        background: #ffffff14;
        border: 1px solid #ffffff26;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        transition: all .3s;
        display: flex
    }

    .footer-social-left ul li a.nsosyal i {
        width: 16px !important;
        min-width: 16px !important;
        height: 16px !important;
        min-height: 16px !important
    }

    .footer-social-left ul li a.nsosyal:hover {
        background: linear-gradient(135deg, #3a40f07a, #2bd3dc80);
        border-color: #ffffff61;
        transform: translateY(-2px)
    }

    .footer-social-left ul li a:hover:not(.nsosyal) {
        background: #2b39904d;
        border-color: #ffffff4d;
        transform: translateY(-2px)
    }

    .footer-social-left ul li a svg,
    .footer-social-left ul li a i {
        color: #fffc !important;
        fill: currentColor !important
    }

    .footer-social-left ul li a:hover svg,
    .footer-social-left ul li a:hover i {
        color: #fff !important
    }

    .footer-menu-left {
        margin-top: 24px;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 20px !important;
        display: block !important
    }

    .footer-menu-left ul {
        visibility: visible !important;
        opacity: 1 !important;
        flex-flow: wrap !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: flex !important
    }

    .footer-menu-left ul li {
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: inline-block !important
    }

    .footer-menu-left ul li a {
        color: #ffffffb3 !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
        font-size: .875rem !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        transition: all .3s !important;
        display: inline-block !important;
        position: relative !important
    }

    .footer-menu-left ul li a:after {
        content: "";
        background: #ffffff80;
        height: 1px;
        transition: transform .3s;
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        transform: scaleX(0)
    }

    .footer-menu-left ul li a:hover {
        color: #fff !important
    }

    .footer-menu-left ul li a:hover:after {
        transform: scaleX(1)
    }

    .footer-copyright-col {
        border-top: 1px solid #ffffff14;
        margin-top: 32px;
        padding-top: 24px
    }

    .footer-copyright-col p {
        margin: 0;
        font-size: .8rem;
        line-height: 1.6;
        color: #ffffff80 !important
    }

    .footer-bottom {
        z-index: 2;
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid #ffffff14;
        padding: 24px 0;
        position: relative
    }

    .footer-copyright-left {
        text-align: left
    }

    .footer-copyright-left p {
        margin: 0;
        font-size: .875rem;
        color: #fff9 !important
    }

    .footer-credits-right {
        text-align: right;
        justify-content: flex-end;
        align-items: center;
        display: flex
    }

    .footer-credits-right p {
        margin: 0;
        font-size: .8rem;
        color: #ffffff80 !important
    }

    .footer-credits-right a {
        font-weight: 600;
        text-decoration: none;
        transition: color .3s;
        color: #ffffffb3 !important
    }

    .footer-credits-right a:hover {
        color: var(--color-primary) !important
    }

    .sam-kreatif-logo {
        opacity: .7;
        align-items: center;
        transition: all .3s;
        display: inline-flex
    }

    .sam-kreatif-logo:hover {
        opacity: 1;
        transform: translateY(-2px)
    }

    .logo-sam {
        width: auto;
        height: 32px
    }

    #footer *,
    #footer p,
    #footer a,
    #footer li,
    #footer span,
    #footer h1,
    #footer h2,
    #footer h3,
    #footer h4,
    #footer h5,
    #footer h6,
    #footer svg {
        color: #fffc !important
    }

    #footer a:hover,
    #footer .widget-title {
        color: #fff !important
    }

    #footer svg {
        fill: currentColor !important;
        stroke: currentColor !important
    }

    @media (max-width:768px) {
        #footer {
            min-height: auto;
            padding-bottom: 40px
        }

        #footer:before,
        #footer:after,
        .footer-inner:before,
        .footer-inner:after {
            width: 400px !important;
            height: 300px !important
        }

        .footer-inner {
            padding-top: 50px;
            padding-bottom: 30px
        }

        .footer-col-left {
            text-align: center;
            margin-bottom: 0
        }

        .footer-logo-left {
            justify-content: center;
            margin-bottom: 24px;
            display: flex
        }

        .footer-logo-left img {
            height: 45px !important
        }

        .footer-social-left ul {
            flex-wrap: wrap;
            justify-content: center !important;
            gap: 10px !important
        }

        .footer-social-left ul li a {
            width: 40px !important;
            height: 40px !important;
            font-size: 18px !important
        }

        .footer-menu-left {
            text-align: center;
            margin-top: 20px;
            visibility: visible !important;
            opacity: 1 !important;
            display: block !important
        }

        .footer-menu-left ul {
            align-items: center;
            visibility: visible !important;
            opacity: 1 !important;
            gap: 10px !important;
            display: flex !important
        }

        .footer-menu-left ul li {
            visibility: visible !important;
            opacity: 1 !important;
            display: inline-block !important
        }

        .footer-menu-left ul li a {
            visibility: visible !important;
            opacity: 1 !important;
            font-size: .8rem !important;
            display: inline-block !important
        }

        .footer-copyright-col {
            text-align: center;
            margin-top: 24px;
            padding-top: 20px
        }

        .footer-copyright-col p {
            font-size: .75rem !important
        }

        .footer-col-middle,
        .footer-col-right {
            display: none !important
        }

        .footer-bottom {
            padding: 20px 0
        }

        .footer-copyright-left,
        .footer-credits-right {
            margin-top: 12px;
            text-align: center !important;
            justify-content: center !important
        }

        .footer-copyright-left p {
            font-size: .75rem !important
        }

        .logo-sam {
            height: 26px !important
        }

        #footer .row {
            grid-template-columns: 1fr !important
        }

        #footer .col-sm-12 {
            grid-column: span 12/span 12 !important
        }
    }

    @media (min-width:768px) and (max-width:1023px) {
        #footer {
            min-height: auto
        }

        #footer:before,
        #footer:after,
        .footer-inner:before,
        .footer-inner:after {
            width: 500px !important;
            height: 400px !important
        }

        .footer-inner {
            padding-top: 60px !important;
            padding-bottom: 40px !important
        }

        .footer-col-left {
            padding-right: 0
        }

        .footer-logo-left {
            margin-bottom: 28px !important
        }

        .footer-logo-left img {
            width: auto !important;
            height: 50px !important
        }

        .footer-social-left {
            margin-bottom: 20px !important
        }

        .footer-social-left ul {
            flex-wrap: wrap;
            gap: 10px !important
        }

        .footer-social-left ul li a {
            width: 38px !important;
            height: 38px !important
        }

        .footer-menu-left {
            text-align: center !important;
            visibility: visible !important;
            opacity: 1 !important;
            margin-top: 20px !important;
            display: block !important
        }

        .footer-menu-left ul {
            flex-wrap: wrap;
            align-items: center;
            visibility: visible !important;
            opacity: 1 !important;
            justify-content: center !important;
            gap: 10px !important;
            display: flex !important
        }

        .footer-menu-left ul li {
            visibility: visible !important;
            opacity: 1 !important;
            display: inline-block !important
        }

        .footer-menu-left ul li a {
            visibility: visible !important;
            opacity: 1 !important;
            font-size: .8125rem !important;
            display: inline-block !important
        }

        .footer-copyright-col {
            margin-top: 28px !important;
            padding-top: 20px !important
        }

        .footer-copyright-col p {
            font-size: .75rem !important
        }

        .footer-col-middle,
        .footer-col-right {
            display: none !important
        }

        .footer-bottom {
            padding: 20px 0 !important
        }

        .footer-copyright-left {
            text-align: left !important
        }

        .footer-copyright-left p {
            font-size: .8125rem !important
        }

        .footer-credits-right {
            text-align: right !important;
            justify-content: flex-end !important
        }

        .logo-sam {
            height: 28px !important
        }

        #footer .container-xl {
            padding-left: 24px !important;
            padding-right: 24px !important
        }

        #footer .row {
            gap: 0 !important
        }
    }

    .footer-widget {
        margin-bottom: calc(var(--spacing)*6)
    }

    @media (min-width:64rem) {
        .footer-widget {
            margin-bottom: calc(var(--spacing)*0)
        }
    }

    .footer-widget {
        z-index: 3;
        position: relative
    }

    .widget-title {
        margin-bottom: calc(var(--spacing)*4);
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        color: #fff
    }

    .img-fluid {
        max-width: 100%;
        height: auto
    }

    .img-cover {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

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

    .shadow {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .text-right {
        text-align: right
    }

    .w-100 {
        width: 100%
    }

    .h-100 {
        height: 100%
    }

    .section-newsticker {
        z-index: 1;
        margin-bottom: 24px;
        position: relative
    }

    .section-newsticker .newsticker-container {
        align-items: center;
        gap: calc(var(--spacing)*4);
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops));
        --tw-gradient-from: color-mix(in oklab, var(--color-primary)5%, transparent);
        --tw-gradient-to: color-mix(in oklab, var(--color-primary)10%, transparent);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position));
        border-radius: var(--radius-xl);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: color-mix(in oklab, var(--color-primary)20%, transparent);
        width: 100%;
        padding: calc(var(--spacing)*4);
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        margin-bottom: 0;
        display: flex
    }

    .section-newsticker .newsticker-title {
        align-items: center;
        gap: calc(var(--spacing)*2);
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing)*5);
        padding-block: calc(var(--spacing)*3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide);
        white-space: nowrap;
        text-transform: uppercase;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        color: #fff;
        border: 1px solid #fff3;
        flex-shrink: 0;
        display: flex;
        box-shadow: 0 4px 12px #2b399026;
        background: linear-gradient(135deg, #2b3990, #030725) !important
    }

    .section-newsticker .newsticker-title svg {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        animation: 2s cubic-bezier(.4, 0, .6, 1) infinite pulse
    }

    .newsticker {
        margin: calc(var(--spacing)*0);
        padding: calc(var(--spacing)*0);
        flex: 1;
        list-style-type: none;
        position: relative;
        overflow: hidden
    }

    .newsticker li {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--color-gray-800)
    }

    .newsticker li a {
        color: var(--color-gray-800);
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        text-decoration-line: none
    }

    @media (hover:hover) {
        .newsticker li a:hover {
            color: var(--color-primary)
        }
    }

    .nav-sm-buttons {
        gap: calc(var(--spacing)*2);
        flex-shrink: 0;
        display: flex
    }

    .nav-sm-buttons button {
        height: calc(var(--spacing)*8);
        width: calc(var(--spacing)*8);
        background-color: var(--color-white);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        border-radius: 3.40282e38px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    @media (hover:hover) {
        .nav-sm-buttons button:hover {
            background-color: var(--color-primary);
            color: var(--color-white)
        }
    }

    .nav-sm-buttons button {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-gray-200);
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    @media (max-width:767px) {
        .d-md-none {
            display: none
        }
    }

    @media (min-width:768px) {
        .d-md-block {
            display: block
        }

        .d-md-flex {
            display: flex
        }
    }

    .kunye-page {
        margin-top: -24px;
        padding: 0
    }

    .kunye-hero {
        color: #fff;
        background: linear-gradient(135deg, #0b1f4f 0%, #123d8c 100%);
        border-radius: 28px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 32px;
        padding: 48px;
        display: grid;
        box-shadow: 0 24px 60px #0b1f4f59
    }

    .kunye-hero-content {
        flex-direction: column;
        gap: 16px;
        max-width: 540px;
        display: flex
    }

    .kunye-badge {
        letter-spacing: .18em;
        text-transform: uppercase;
        color: #ffffffd1;
        background: #ffffff0f;
        border: 1px solid #ffffff40;
        border-radius: 999px;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        font-size: 11px;
        font-weight: 600;
        display: inline-flex
    }

    .kunye-badge:before {
        content: "";
        background: #3b82f6;
        border-radius: 50%;
        width: 8px;
        height: 8px
    }

    .kunye-title {
        margin: 0;
        font-size: 42px;
        font-weight: 700;
        line-height: 1.15
    }

    .kunye-description {
        color: #ffffffb8;
        margin: 0;
        font-size: 16px;
        line-height: 1.7
    }

    .kunye-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 16px;
        display: grid
    }

    .kunye-stat-card {
        background: #1125548c;
        border: 1px solid #3b82f659;
        border-radius: 20px;
        flex-direction: column;
        gap: 8px;
        padding: 18px 20px;
        display: flex;
        box-shadow: inset 0 1px #ffffff0a
    }

    .kunye-stat-card dt {
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #e2e8f0b3;
        margin: 0;
        font-size: 12px
    }

    .kunye-stat-card dd {
        color: #f8fafc;
        margin: 0;
        font-size: 18px;
        font-weight: 600
    }

    .kunye-card-grid {
        gap: 24px;
        margin-top: 48px;
        display: grid
    }

    @media (min-width:768px) {
        .kunye-card-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media (min-width:1200px) {
        .kunye-card-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    .kunye-card {
        background: #fffffffa;
        border: 1px solid #0f172a14;
        border-radius: 24px;
        padding: 32px;
        box-shadow: 0 18px 40px #0f172a1a
    }

    .kunye-card h2 {
        color: #0f172a;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600
    }

    .kunye-card dl {
        flex-direction: column;
        gap: 14px;
        margin: 0;
        display: flex
    }

    .kunye-card-row {
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        display: flex
    }

    .kunye-card-row dt {
        color: #0f172a94;
        font-size: 14px;
        font-weight: 600
    }

    .kunye-card-row dd {
        color: #0f172a;
        text-align: right;
        margin: 0;
        font-size: 14px;
        font-weight: 600
    }

    .kunye-section {
        background: #fffffffa;
        border: 1px solid #0f172a14;
        border-radius: 24px;
        margin-top: 56px;
        padding: 40px 32px;
        box-shadow: 0 20px 48px #0f172a1f
    }

    .kunye-section-header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 32px;
        display: flex
    }

    @media (min-width:768px) {
        .kunye-section-header {
            flex-direction: row;
            justify-content: space-between;
            align-items: center
        }
    }

    .kunye-section-header h2 {
        color: #0f172a;
        margin: 0;
        font-size: 22px;
        font-weight: 600
    }

    .kunye-section-header p {
        color: #0f172aa6;
        margin: 8px 0 0;
        font-size: 14px
    }

    .kunye-pill {
        color: #0f172aad;
        background: #0f172a14;
        border: 1px solid #0f172a1f;
        border-radius: 999px;
        align-items: center;
        padding: 10px 16px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex
    }

    .kunye-team-grid {
        gap: 16px;
        display: grid
    }

    @media (min-width:640px) {
        .kunye-team-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media (min-width:1200px) {
        .kunye-team-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    .kunye-team-card {
        background: #f8fafcfa;
        border: 1px solid #0f172a14;
        border-radius: 18px;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        transition: transform .25s, box-shadow .25s;
        display: flex
    }

    .kunye-team-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px #0f172a1f
    }

    .kunye-team-initial {
        color: #fff;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        border-radius: 12px;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        font-weight: 700;
        display: flex
    }

    .kunye-team-name {
        color: #0f172a;
        margin: 0;
        font-size: 15px;
        font-weight: 600
    }

    .kunye-team-role {
        color: #0f172a99;
        margin: 4px 0 0;
        font-size: 13px
    }

    .kunye-double-grid {
        gap: 24px;
        margin-top: 48px;
        display: grid
    }

    @media (min-width:1024px) {
        .kunye-double-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    .kunye-info-block {
        background: #fffffffa;
        border: 1px solid #0f172a14;
        border-radius: 24px;
        padding: 32px;
        box-shadow: 0 18px 40px #0f172a1f
    }

    .kunye-info-block h2 {
        color: #0f172a;
        margin: 0 0 20px;
        font-size: 20px;
        font-weight: 600
    }

    .kunye-info-block p {
        color: #0f172aa6;
        margin: 0 0 16px;
        font-size: 14px;
        line-height: 1.7
    }

    .kunye-info-block ul {
        color: #0f172aa6;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding-left: 20px;
        font-size: 14px;
        display: flex
    }

    .kunye-info-block ul li::marker {
        color: #2563eb
    }

    .kunye-card-list {
        flex-direction: column;
        gap: 14px;
        margin: 0;
        display: flex
    }

    .kunye-card-list dt {
        color: #0f172a99;
        font-size: 13px;
        font-weight: 600
    }

    .kunye-card-list dd {
        color: #0f172a;
        margin: 4px 0 0;
        font-size: 14px;
        font-weight: 600
    }

    .kunye-projects {
        color: #fff;
        background: linear-gradient(135deg, #0b1f4f 0%, #123d8c 100%);
        border: 1px solid #ffffff14;
        border-radius: 28px;
        margin-top: 56px;
        padding: 48px;
        box-shadow: 0 30px 60px #0b1f4f59
    }

    .kunye-projects-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 32px;
        display: flex
    }

    @media (min-width:992px) {
        .kunye-projects-header {
            flex-direction: row;
            justify-content: space-between;
            align-items: center
        }
    }

    .kunye-projects-header h2 {
        margin: 0;
        font-size: 26px;
        font-weight: 600
    }

    .kunye-projects-header p {
        color: #ffffffb8;
        max-width: 540px;
        margin: 12px 0 0;
        font-size: 15px;
        line-height: 1.7
    }

    .kunye-project-actions {
        flex-wrap: wrap;
        gap: 12px;
        display: flex
    }

    .kunye-button-primary,
    .kunye-button-outline {
        border-radius: 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: transform .2s, box-shadow .2s, color .2s, background .2s;
        display: inline-flex
    }

    .kunye-button-primary {
        color: #fff;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 16px 30px #1d4ed859
    }

    .kunye-button-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px #1d4ed873
    }

    .kunye-button-outline {
        color: #fffc;
        background: 0 0;
        border: 1px solid #ffffff59
    }

    .kunye-button-outline:hover {
        color: #fff;
        border-color: #ffffff8c;
        transform: translateY(-2px)
    }

    .kunye-project-grid {
        gap: 18px;
        display: grid
    }

    @media (min-width:768px) {
        .kunye-project-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    .kunye-project-card {
        background: #ffffff1a;
        border: 1px solid #3b82f640;
        border-radius: 20px;
        padding: 22px;
        box-shadow: inset 0 1px #ffffff14
    }

    .kunye-project-card h3 {
        color: #fff;
        margin: 0 0 10px;
        font-size: 18px;
        font-weight: 600
    }

    .kunye-project-card p {
        color: #e2e8f0d1;
        margin: 0;
        font-size: 14px;
        line-height: 1.6
    }

    .dark-mode .kunye-card,
    .dark-mode .kunye-section,
    .dark-mode .kunye-info-block {
        background: #0f172aeb;
        border-color: #94a3b824;
        box-shadow: 0 20px 48px #02061773
    }

    .dark-mode .kunye-card h2,
    .dark-mode .kunye-section-header h2,
    .dark-mode .kunye-info-block h2 {
        color: #f8fafc
    }

    .dark-mode .kunye-card-row dt,
    .dark-mode .kunye-card-row dd,
    .dark-mode .kunye-section-header p,
    .dark-mode .kunye-info-block p,
    .dark-mode .kunye-info-block ul,
    .dark-mode .kunye-card-list dt,
    .dark-mode .kunye-card-list dd,
    .dark-mode .kunye-team-role {
        color: #e2e8f0b8
    }

    .dark-mode .kunye-card-row dd,
    .dark-mode .kunye-team-name {
        color: #f8fafc
    }

    .dark-mode .kunye-team-card {
        background: #1e293bd1;
        border-color: #94a3b826
    }

    .prestige-races-section {
        margin-bottom: clamp(48px, 7vw, 90px);
        padding: clamp(48px, 6vw, 80px) 0;
        position: relative;
        overflow: hidden
    }

    .prestige-races-section:before,
    .prestige-races-section:after {
        content: "";
        z-index: 0;
        pointer-events: none;
        position: absolute
    }

    .prestige-races-section:before {
        background: radial-gradient(circle at 20% 20%, #6b8eff59, #0000 65%), radial-gradient(circle at 80% 30%, #4f46e538, #0000 55%);
        inset: -20%
    }

    .prestige-races-section:after {
        background: linear-gradient(135deg, #ffffffd1, #e6eefff0);
        inset: -10%
    }

    .dark-mode .prestige-races-section:before {
        background: radial-gradient(circle at 15% 20%, #3b82f63d, #0000 60%), radial-gradient(circle at 85% 30%, #60a5fa2e, #0000 70%)
    }

    .dark-mode .prestige-races-section:after {
        background: linear-gradient(135deg, #030818f2, #00000ffa)
    }

    .prestige-races-container {
        z-index: 1;
        position: relative
    }

    .prestige-races-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: clamp(32px, 4vw, 48px);
        display: flex
    }

    .prestige-races-title h2 {
        letter-spacing: -.02em;
        color: #19224a;
        margin: 12px 0 10px;
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 700
    }

    .dark-mode .prestige-races-title h2 {
        color: #f1f5f9
    }

    .prestige-races-title p {
        color: #39486de0;
        max-width: 520px;
        font-size: 16px;
        line-height: 1.7
    }

    .dark-mode .prestige-races-title p {
        color: #cbd5e1d1
    }

    .prestige-races-slider {
        position: relative
    }

    .prestige-races-scroller {
        cursor: grab;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
        position: relative;
        overflow: auto hidden
    }

    .prestige-races-scroller::-webkit-scrollbar {
        display: none
    }

    .prestige-races-scroller.is-dragging {
        cursor: grabbing
    }

    .prestige-races-row {
        gap: clamp(18px, 3vw, 28px);
        min-width: max(100%, 620px);
        padding-right: 16px;
        display: flex
    }

    .prestige-race-card {
        scroll-snap-align: start;
        color: #fff;
        border: 1px solid #ffffff1a;
        border-radius: 28px;
        min-width: clamp(260px, 32vw, 360px);
        max-width: 380px;
        min-height: clamp(320px, 38vw, 420px);
        transition: transform .35s, border .35s, color .35s;
        display: block;
        position: relative;
        overflow: hidden;
        text-decoration: none !important
    }

    .prestige-race-card:after {
        content: "";
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        background: linear-gradient(120deg, #ffffff24, #0000 60%);
        transition: opacity .35s;
        position: absolute;
        inset: 0
    }

    .prestige-race-card:hover {
        border-color: #ffffff2e;
        transform: translateY(-4px)
    }

    .prestige-race-card:hover:after {
        opacity: 1
    }

    .prestige-race-card-media {
        background-position: 50%;
        background-size: cover;
        transition: transform .6s;
        position: absolute;
        inset: 0
    }

    .prestige-race-card:hover .prestige-race-card-media {
        transform: scale(1.05)
    }

    .prestige-race-card-overlay {
        opacity: .94;
        background: linear-gradient(210deg, #1118272e, #1f2760d9);
        position: absolute;
        inset: 0
    }

    .dark-mode .prestige-race-card-overlay {
        background: linear-gradient(210deg, #03081875, #020612e6)
    }

    .prestige-race-card-content {
        z-index: 2;
        flex-direction: column;
        justify-content: flex-end;
        gap: 16px;
        height: 100%;
        padding: 32px 28px;
        display: flex;
        position: relative
    }

    .prestige-race-card h3 {
        letter-spacing: -.01em;
        text-shadow: 0 18px 48px #0a1128a6;
        color: #fff;
        margin: 0;
        font-size: clamp(20px, 2.2vw, 26px);
        font-weight: 700
    }

    .dark-mode .prestige-race-card h3 {
        text-shadow: 0 18px 44px #000000b8;
        color: #fff
    }

    .prestige-race-meta {
        color: #f1f5f9f2;
        flex-wrap: wrap;
        gap: 12px 16px;
        font-size: 14px;
        display: flex
    }

    .prestige-race-meta span {
        align-items: center;
        gap: 6px;
        display: inline-flex
    }

    .prestige-race-meta i,
    .prestige-race-chip i {
        font-size: 12px
    }

    .prestige-race-chip {
        letter-spacing: .08em;
        color: #fff;
        background: #ffffff3d;
        border: 1px solid #ffffff52;
        border-radius: 999px;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex
    }

    .dark-mode .prestige-race-chip {
        color: #f8fafc;
        background: #94a3b83d;
        border-color: #94a3b861
    }

    .prestige-races-button {
        appearance: none;
        color: #2b3990;
        cursor: pointer;
        z-index: 5;
        background: #fffffff2;
        border: none;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        transition: transform .3s, box-shadow .3s, background .3s;
        display: inline-flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 8px 24px #12204426
    }

    .prestige-races-button-prev {
        left: -8px
    }

    .prestige-races-button-next {
        right: -8px
    }

    @media (max-width:768px) {
        .prestige-races-button-prev {
            left: 6px
        }

        .prestige-races-button-next {
            right: 6px
        }
    }

    .prestige-races-button:hover:not([disabled]) {
        background: #ffffffbf;
        transform: translateY(-50%)scale(1.05);
        box-shadow: 0 16px 32px #12204442
    }

    .prestige-races-button[disabled] {
        opacity: .45;
        cursor: not-allowed;
        box-shadow: none
    }

    .prestige-races-button i {
        font-size: 16px;
        line-height: 1
    }

    .dark-mode .prestige-races-button {
        color: #e0f2fe;
        background: #1e40af47;
        box-shadow: 0 14px 34px #040c2099
    }

    .dark-mode .prestige-races-button:hover:not([disabled]) {
        background: #2563eb59;
        box-shadow: 0 18px 40px #030818ad
    }

    .commentators-section {
        margin-bottom: clamp(48px, 7vw, 90px);
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
        overflow: hidden
    }

    .commentators-container {
        z-index: 1;
        position: relative
    }

    .commentators-title {
        margin-bottom: clamp(32px, 4vw, 48px)
    }

    .commentators-title h3 {
        letter-spacing: -.02em;
        color: #19224a;
        margin: 12px 0 10px;
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 700
    }

    .dark-mode .commentators-title h3 {
        color: #f1f5f9
    }

    .commentators-slider {
        position: relative
    }

    .commentators-scroller {
        cursor: grab;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
        position: relative;
        overflow: auto hidden
    }

    .commentators-scroller::-webkit-scrollbar {
        display: none
    }

    .commentators-scroller.is-dragging {
        cursor: grabbing
    }

    .commentators-row {
        gap: clamp(18px, 3vw, 28px);
        min-width: max(100%, 620px);
        padding-right: 16px;
        display: flex
    }

    .commentator-card {
        scroll-snap-align: start;
        min-width: clamp(110px, 13vw, 150px);
        max-width: 150px;
        color: inherit;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        transition: transform .3s;
        display: flex;
        text-decoration: none !important
    }

    .commentator-card:hover {
        transform: translateY(-4px);
        text-decoration: none !important
    }

    .commentator-photo-wrapper {
        justify-content: center;
        align-items: center;
        width: clamp(110px, 13vw, 150px);
        height: clamp(110px, 13vw, 150px);
        display: flex;
        position: relative
    }

    .commentator-photo {
        z-index: 2;
        background-color: #f0f0f0;
        border: 3px solid #2b3990;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .dark-mode .commentator-photo {
        background-color: #1a1a1a;
        border-color: #b8c5e0
    }

    .commentator-photo img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .commentator-name {
        text-align: center;
        color: #19224a;
        font-size: clamp(14px, 1.5vw, 16px);
        font-weight: 600;
        transition: color .3s
    }

    .dark-mode .commentator-name {
        color: #f1f5f9
    }

    .commentator-card:hover .commentator-name {
        color: #2b3990
    }

    .dark-mode .commentator-card:hover .commentator-name {
        color: #b8c5e0
    }

    .commentators-button {
        z-index: 5;
        color: #2b3990;
        cursor: pointer;
        background: #fffffff2;
        border: none;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        transition: transform .3s, box-shadow .3s, background .3s;
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 8px 24px #12204426
    }

    .commentators-button-prev {
        left: -8px
    }

    .commentators-button-next {
        right: -8px
    }

    @media (max-width:768px) {
        .commentators-button-prev {
            left: 6px
        }

        .commentators-button-next {
            right: 6px
        }
    }

    .commentators-button:hover:not([disabled]) {
        background: #ffffffbf;
        transform: translateY(-50%)scale(1.05);
        box-shadow: 0 16px 32px #12204442
    }

    .commentators-button[disabled] {
        opacity: .45;
        cursor: not-allowed;
        box-shadow: none
    }

    .commentators-button i {
        font-size: 16px;
        line-height: 1
    }

    .dark-mode .commentators-button {
        color: #e0f2fe;
        background: #1e40af47;
        box-shadow: 0 14px 34px #040c2099
    }

    .dark-mode .commentators-button:hover:not([disabled]) {
        background: #2563eb59;
        box-shadow: 0 18px 40px #030818ad
    }

    .section-broadcast-schedule {
        padding-top: 0;
        padding-bottom: clamp(32px, 4vw, 60px)
    }

    .broadcast-days-nav {
        width: 100%
    }

    .broadcast-days-container {
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        display: flex
    }

    .broadcast-days-container .btn-day {
        color: #374151;
        background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        flex-direction: column;
        flex: 1 1 0;
        justify-content: center;
        align-items: center;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        min-height: 80px;
        padding: 14px 10px;
        text-decoration: none;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        position: relative;
        overflow: hidden;
        box-shadow: 0 1px 3px #0000000d
    }

    .broadcast-days-container .btn-day:before {
        content: "";
        opacity: 0;
        background: linear-gradient(135deg, #2b39900d 0%, #2b399005 100%);
        transition: opacity .3s;
        position: absolute;
        inset: 0
    }

    .broadcast-days-container .btn-day:hover:before {
        opacity: 1
    }

    .dark-mode .broadcast-days-container .btn-day {
        color: #e2e8f0;
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-color: #334155;
        box-shadow: 0 1px 3px #0000004d
    }

    .dark-mode .broadcast-days-container .btn-day:before {
        background: linear-gradient(135deg, #b8c5e014 0%, #b8c5e008 100%)
    }

    .broadcast-days-container .btn-day:hover {
        color: #2b3990;
        background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        border-color: #2b3990;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px #2b399026
    }

    .broadcast-days-container .btn-day:hover .day-name,
    .broadcast-days-container .btn-day:hover .day-date {
        color: #2b3990
    }

    .dark-mode .broadcast-days-container .btn-day:hover {
        color: #fff;
        background: linear-gradient(135deg, #2b3990 0%, #1e3a8a 100%);
        border-color: #3b4fa0;
        box-shadow: 0 8px 20px #2b399066
    }

    .dark-mode .broadcast-days-container .btn-day:hover .day-name,
    .dark-mode .broadcast-days-container .btn-day:hover .day-date {
        color: #fff !important
    }

    .broadcast-days-container .btn-day-active {
        color: #fff;
        background: linear-gradient(135deg, #2b3990 0%, #1e3a8a 100%);
        border-color: #2b3990;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px #2b399040
    }

    .broadcast-days-container .btn-day-active:before {
        opacity: 0
    }

    .dark-mode .broadcast-days-container .btn-day-active {
        color: #fff;
        background: linear-gradient(135deg, #2b3990 0%, #1e3a8a 100%);
        border-color: #3b4fa0;
        box-shadow: 0 4px 16px #2b399080
    }

    .broadcast-days-container .btn-day-past {
        opacity: .6;
        color: #9ca3af;
        box-shadow: none;
        background: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%)
    }

    .broadcast-days-container .btn-day-past:before {
        display: none
    }

    .dark-mode .broadcast-days-container .btn-day-past {
        color: #64748b;
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-color: #334155
    }

    .broadcast-days-container .btn-day-past:hover {
        opacity: .8;
        border-color: #d1d5db;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px #0000001a
    }

    .dark-mode .broadcast-days-container .btn-day-past:hover {
        opacity: .85;
        border-color: #475569;
        box-shadow: 0 4px 12px #0000004d
    }

    .broadcast-days-container .day-name {
        letter-spacing: -.01em;
        z-index: 1;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        position: relative
    }

    .broadcast-days-container .day-date {
        opacity: .85;
        z-index: 1;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        position: relative
    }

    .broadcast-days-container .btn-day-active .day-date {
        opacity: .95
    }

    .broadcast-days-container .btn-day-past .day-date {
        opacity: .6
    }

    .broadcast-schedule-list {
        flex-direction: column;
        gap: 16px;
        display: flex
    }

    .broadcast-schedule-item {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        width: 100%;
        min-height: 70px;
        padding: .1rem 24px;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        position: relative;
        box-shadow: 0 1px 3px #0000000d
    }

    .broadcast-schedule-item:hover {
        border-color: #2b3990;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px #2b39901f
    }

    .dark-mode .broadcast-schedule-item {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-color: #334155;
        box-shadow: 0 1px 3px #0000004d
    }

    .dark-mode .broadcast-schedule-item:hover {
        border-color: #3b4fa0;
        box-shadow: 0 8px 24px #2b39904d
    }

    .broadcast-schedule-item.schedule-status-past {
        opacity: .6;
        background: #f9fafb;
        border-color: #d1d5db
    }

    .dark-mode .broadcast-schedule-item.schedule-status-past {
        opacity: .7;
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-color: #475569
    }

    .broadcast-schedule-item.schedule-status-past .schedule-title,
    .broadcast-schedule-item.schedule-status-past .schedule-description {
        color: #6b7280
    }

    .dark-mode .broadcast-schedule-item.schedule-status-past .schedule-title,
    .dark-mode .broadcast-schedule-item.schedule-status-past .schedule-description {
        color: #94a3b8
    }

    .broadcast-schedule-item.schedule-status-active {
        box-shadow: 0 4px 16px #2b399033;
        border: 2px solid #2b3990 !important
    }

    .dark-mode .broadcast-schedule-item.schedule-status-active {
        box-shadow: 0 4px 16px #60a5fa4d;
        border: 2px solid #60a5fa !important
    }

    .schedule-time-ribbon {
        z-index: 2;
        background: linear-gradient(135deg, #2b3990 0%, #1e3a8a 100%);
        border-radius: 16px 0 0 16px;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 70px;
        display: flex;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        box-shadow: 3px 0 12px #2b399040
    }

    .dark-mode .schedule-time-ribbon {
        background: linear-gradient(135deg, #2b3990 0%, #1e3a8a 100%);
        box-shadow: 3px 0 12px #2b399066
    }

    .schedule-time-icon {
        color: #fff;
        opacity: .95;
        font-size: 18px
    }

    .schedule-time-text {
        color: #fff;
        white-space: nowrap;
        text-align: center;
        letter-spacing: .3px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2
    }

    @media (min-width:769px) {
        .broadcast-schedule-item {
            align-items: center;
            position: relative
        }

        .schedule-time-ribbon {
            background: linear-gradient(135deg, #2b3990 0%, #1e3a8a 100%);
            border: 2px solid #ffffff40;
            border-radius: 14px;
            flex-direction: row;
            flex-shrink: 0;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: auto;
            min-width: 90px;
            max-width: 130px;
            height: auto;
            margin-right: 20px;
            padding: 4px 5px;
            transition: all .3s cubic-bezier(.4, 0, .2, 1);
            display: flex;
            position: relative;
            top: auto;
            bottom: auto;
            left: auto;
            transform: none;
            box-shadow: 0 6px 20px #2b399040, 0 2px 8px #2b399026
        }

        .broadcast-schedule-item:hover .schedule-time-ribbon {
            transform: scale(1.02);
            box-shadow: 0 8px 24px #2b399059, 0 4px 12px #2b399033
        }

        .dark-mode .schedule-time-ribbon {
            background: linear-gradient(135deg, #2b3990 0%, #1e3a8a 100%);
            border-color: #fff3;
            box-shadow: 0 6px 20px #2b399066, 0 2px 8px #2b399040
        }

        .dark-mode .broadcast-schedule-item:hover .schedule-time-ribbon {
            box-shadow: 0 8px 24px #2b399080, 0 4px 12px #2b39904d
        }

        .schedule-time-icon {
            color: #fff;
            opacity: 1;
            filter: drop-shadow(0 1px 2px #0003);
            justify-content: center;
            align-items: center;
            font-size: 18px;
            line-height: 0;
            display: flex
        }

        .schedule-time-icon svg {
            fill: currentColor;
            width: 18px;
            height: 18px
        }

        .schedule-time-text {
            color: #fff;
            white-space: nowrap;
            text-align: center;
            letter-spacing: .5px;
            text-shadow: 0 1px 2px #00000026;
            font-variant-numeric: tabular-nums;
            font-size: 18px;
            font-weight: 800;
            line-height: 1.2
        }

        .schedule-photo {
            z-index: 1;
            margin-left: 0;
            position: relative
        }

        .schedule-content {
            z-index: 1;
            position: relative
        }
    }

    .schedule-photo {
        background: #f9fafb;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        flex-shrink: 0;
        width: 100px;
        height: 100px;
        min-height: 100px;
        overflow: hidden
    }

    .dark-mode .schedule-photo {
        background: #0f172a;
        border-color: #334155
    }

    .schedule-photo img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block
    }

    .schedule-photo-placeholder {
        color: #9ca3af;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 32px;
        display: flex
    }

    .dark-mode .schedule-photo-placeholder {
        color: #64748b;
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%)
    }

    .schedule-content {
        flex-direction: column;
        flex: 1;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
        display: flex
    }

    .schedule-title {
        color: #111827;
        letter-spacing: -.01em;
        width: 100%;
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        display: block
    }

    .dark-mode .schedule-title {
        color: #f1f5f9
    }

    .schedule-description {
        color: #6b7280;
        width: 100%;
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        display: block
    }

    .dark-mode .schedule-description {
        color: #94a3b8
    }

    .broadcast-schedule-empty {
        text-align: center;
        padding: 80px 20px
    }

    .empty-state {
        max-width: 400px;
        margin: 0 auto
    }

    .empty-icon {
        color: #cbd5e1;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
        font-size: 64px;
        display: flex
    }

    .dark-mode .empty-icon {
        color: #475569
    }

    .empty-title {
        color: #334155;
        margin: 0 0 12px;
        font-size: 24px;
        font-weight: 600
    }

    .dark-mode .empty-title {
        color: #e2e8f0
    }

    .empty-text {
        color: #64748b;
        margin: 0;
        font-size: 16px;
        line-height: 1.6
    }

    @media (max-width:768px) {
        .broadcast-days-nav {
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            width: 100%;
            margin-bottom: 1.5rem;
            overflow-x: auto
        }

        .broadcast-days-nav::-webkit-scrollbar {
            display: none
        }

        .broadcast-days-container {
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 8px;
            width: 100%;
            min-width: min-content;
            padding-bottom: 8px;
            display: flex
        }

        .broadcast-days-container .btn-day {
            flex: 0 0 calc((100vw - var(--container-padding, 32px) - 16px)/3);
            width: calc((100vw - var(--container-padding, 32px) - 16px)/3);
            min-width: calc((100vw - var(--container-padding, 32px) - 16px)/3);
            max-width: calc((100vw - var(--container-padding, 32px) - 16px)/3);
            box-sizing: border-box;
            border-radius: 12px;
            gap: 6px;
            min-height: 80px;
            padding: 12px 6px
        }

        .broadcast-days-container .day-name {
            font-size: 13px;
            line-height: 1.3
        }

        .broadcast-days-container .day-date {
            word-break: break-word;
            text-align: center;
            font-size: 10px;
            line-height: 1.3
        }

        .broadcast-days-container .btn-day-active {
            transform: none
        }

        .empty-icon {
            margin-bottom: 16px;
            font-size: 48px
        }

        .empty-title {
            font-size: 20px
        }

        .empty-text {
            font-size: 14px
        }

        .broadcast-schedule-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            min-height: auto;
            padding: 16px
        }

        .schedule-time-ribbon {
            border-radius: 12px 12px 0 0;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            height: auto;
            padding: 12px;
            position: relative;
            box-shadow: 0 2px 8px #2b399033
        }

        .schedule-time-icon,
        .schedule-time-text {
            font-size: 16px
        }

        .schedule-photo {
            width: 100%;
            max-width: 100%;
            height: 180px;
            margin-left: 0
        }

        .schedule-content {
            width: 100%
        }

        .schedule-title {
            font-size: 18px
        }

        .schedule-description {
            font-size: 14px
        }
    }

    .home-broadcast-schedule-wrapper {
        background: linear-gradient(135deg, #fff 0%, #f9fafb 50%, #fff 100%);
        min-height: auto;
        max-height: 100%
    }

    .dark-mode .home-broadcast-schedule-wrapper {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)
    }

    .broadcast-schedule-header {
        flex-shrink: 0;
        position: relative
    }

    .broadcast-icon-wrapper {
        justify-content: center;
        align-items: center;
        display: flex
    }

    .broadcast-title {
        letter-spacing: -.01em;
        font-size: 15px
    }

    .broadcast-day {
        opacity: .9;
        font-size: 10px
    }

    .broadcast-link-more {
        text-decoration: none
    }

    .broadcast-link-more:hover,
    .broadcast-link-more:hover span,
    .broadcast-link-more:hover svg {
        color: #fff !important
    }

    .broadcast-schedule-content {
        background: #fff;
        flex: auto;
        min-height: 0;
        overflow-y: auto
    }

    .dark-mode .broadcast-schedule-content {
        background: 0 0
    }

    .home-schedule-item {
        cursor: default;
        background: #fff;
        border: 1px solid #e5e7eb
    }

    .dark-mode .home-schedule-item {
        background: #1e293b;
        border-color: #334155
    }

    .home-schedule-item:hover {
        border-color: #2b39904d;
        box-shadow: 0 4px 12px #00000014
    }

    .dark-mode .home-schedule-item:hover {
        border-color: #2b399080;
        box-shadow: 0 4px 12px #0000004d
    }

    .schedule-time-badge {
        box-shadow: 0 2px 6px #2b399033
    }

    .time-text {
        font-variant-numeric: tabular-nums;
        letter-spacing: .3px;
        font-size: 11px
    }

    .home-schedule-item.home-schedule-status-past {
        opacity: .6;
        background: #f9fafb;
        border-color: #d1d5db
    }

    .dark-mode .home-schedule-item.home-schedule-status-past {
        opacity: .7;
        background: #1e293b;
        border-color: #475569
    }

    .home-schedule-item.home-schedule-status-past .schedule-item-title,
    .home-schedule-item.home-schedule-status-past .schedule-item-desc {
        color: #6b7280
    }

    .dark-mode .home-schedule-item.home-schedule-status-past .schedule-item-title,
    .dark-mode .home-schedule-item.home-schedule-status-past .schedule-item-desc {
        color: #94a3b8
    }

    .home-schedule-item.home-schedule-status-active {
        box-shadow: 0 4px 12px #2b399033;
        border: 2px solid #2b3990 !important
    }

    .dark-mode .home-schedule-item.home-schedule-status-active {
        box-shadow: 0 4px 12px #60a5fa4d;
        border: 2px solid #60a5fa !important
    }

    .schedule-item-title {
        color: #111827;
        font-size: 13px;
        transition: color .2s
    }

    .dark-mode .schedule-item-title {
        color: #f1f5f9
    }

    .schedule-item-title:hover {
        color: #2b3990
    }

    .dark-mode .schedule-item-title:hover {
        color: #b8c5e0
    }

    .schedule-item-desc {
        color: #4b5563;
        font-size: 11px;
        transition: color .2s
    }

    .dark-mode .schedule-item-desc {
        color: #94a3b8
    }

    .broadcast-empty-state {
        min-height: auto;
        padding: 1rem 0
    }

    .empty-icon-wrapper {
        background: #f3f4f6;
        padding: .75rem;
        transition: transform .3s
    }

    .dark-mode .empty-icon-wrapper {
        background: #1e293b
    }

    .empty-icon-wrapper svg {
        color: #9ca3af;
        width: 20px;
        height: 20px
    }

    .dark-mode .empty-icon-wrapper svg {
        color: #475569
    }

    .empty-text {
        color: #6b7280
    }

    .dark-mode .empty-text {
        color: #94a3b8
    }

    @media (max-width:1024px) {
        .broadcast-title {
            font-size: 14px
        }

        .broadcast-day {
            font-size: 9px
        }
    }

    .header-no-margin {
        margin-bottom: 0 !important
    }

    .race-header-ad {
        margin: clamp(24px, 4vw, 48px) 0
    }

    .race-detail-hero {
        color: #fff;
        background-color: #111827;
        background-position: 50%;
        background-size: cover;
        align-items: center;
        min-height: 360px;
        padding: clamp(60px, 10vw, 120px) 0 clamp(48px, 8vw, 80px);
        display: flex;
        position: relative
    }

    .race-detail-hero--no-image {
        background: radial-gradient(circle at 20% 20%, #3b82f659, #0f172af2)
    }

    .race-detail-overlay {
        background: linear-gradient(210deg, #0f172a40, #0f172ae6);
        position: absolute;
        inset: 0
    }

    .race-detail-hero-inner {
        z-index: 2;
        flex-direction: column;
        gap: 18px;
        max-width: 720px;
        display: flex;
        position: relative
    }

    .race-detail-badge {
        letter-spacing: .18em;
        text-transform: uppercase;
        background: #3b82f633;
        border: 1px solid #ffffff3d;
        border-radius: 999px;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex
    }

    .race-detail-title {
        text-shadow: 0 20px 60px #0f172aa6;
        margin: 0;
        font-size: clamp(28px, 5vw, 44px);
        font-weight: 700;
        line-height: 1.2
    }

    .race-detail-meta {
        color: #e2e8f0e6;
        flex-wrap: wrap;
        gap: 12px 18px;
        font-size: 14px;
        display: flex
    }

    .race-detail-meta span {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        background: #0f172a59;
        border: 1px solid #ffffff2e;
        border-radius: 999px;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        display: inline-flex
    }

    .race-detail-actions .race-detail-button {
        color: #fff;
        background: #0f172a99;
        border: 1px solid #ffffff40;
        border-radius: 14px;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        font-weight: 600;
        text-decoration: none;
        transition: all .3s;
        display: inline-flex
    }

    .race-detail-actions .race-detail-button:hover {
        background: #3b82f6a6;
        border-color: #60a5faa6
    }

    .race-detail-content .container-xl {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: clamp(24px, 4vw, 48px);
        display: grid
    }

    @media (max-width:992px) {
        .race-detail-content .container-xl {
            grid-template-columns: 1fr
        }
    }

    .race-detail-body {
        background: linear-gradient(135deg, #fffffff2, #f6f9fffa);
        border: 1px solid #0f172a0f;
        border-radius: 28px;
        padding: clamp(26px, 4.5vw, 40px);
        box-shadow: 0 30px 70px #0f172a14
    }

    .dark-mode .race-detail-body {
        color: #e2e8f0;
        background: linear-gradient(135deg, #0d1326f5, #080d1efa);
        border-color: #94a3b824;
        box-shadow: 0 36px 80px #02061299
    }

    .race-detail-summary {
        color: #0f172abf;
        border-left: 3px solid #3b82f68c;
        margin-bottom: 24px;
        padding-left: 18px;
        font-size: 16px;
        font-weight: 500
    }

    .race-detail-article {
        color: #0f172ac7;
        font-size: 16px;
        line-height: 1.8
    }

    .race-detail-article ul {
        margin: 1rem 0;
        padding-left: 1.5rem;
        list-style: outside !important
    }

    .race-detail-article ul li {
        margin: .5rem 0;
        list-style: outside !important
    }

    .race-detail-article ol {
        margin: 1rem 0;
        padding-left: 1.5rem;
        list-style: decimal !important
    }

    .race-detail-article ol li {
        margin: .5rem 0;
        list-style: decimal !important
    }

    .dark-mode .race-detail-summary,
    .dark-mode .race-detail-article {
        color: #e2e8f0e0
    }

    .race-detail-article img {
        border-radius: 18px;
        max-width: 100%
    }

    .race-detail-sidebar {
        flex-direction: column;
        align-self: start;
        gap: 24px;
        display: flex
    }

    .race-sidebar-card {
        color: #1f2a44;
        background: linear-gradient(135deg, #f1f5ffeb, #e5ecfffa);
        border: 1px solid #0f172a14;
        border-radius: 22px;
        padding: 26px;
        box-shadow: 0 24px 52px #0f172a14
    }

    .dark-mode .race-sidebar-card {
        color: #e2e8f0;
        background: linear-gradient(135deg, #090d1cf2, #040916fa);
        border-color: #94a3b82e;
        box-shadow: 0 26px 60px #020612a6
    }

    .race-sidebar-card h3 {
        letter-spacing: .02em;
        margin: 0 0 18px;
        font-size: 18px;
        font-weight: 700
    }

    .race-sidebar-card ul {
        flex-direction: column;
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex
    }

    .race-sidebar-card li {
        flex-direction: column;
        gap: 6px;
        display: flex
    }

    .race-sidebar-card span {
        text-transform: uppercase;
        letter-spacing: .18em;
        color: #475569b3;
        font-size: 12px
    }

    .dark-mode .race-sidebar-card span {
        color: #f1f5f9b8
    }

    .race-sidebar-card strong {
        color: #1f2a44;
        font-size: 16px;
        font-weight: 600
    }

    .dark-mode .race-sidebar-card strong {
        color: #e0f2fe
    }

    .race-sidebar-card a {
        color: #3b82f6;
        text-decoration: none
    }

    .race-sidebar-card a:hover {
        color: #1d4ed8
    }

    .dark-mode .race-sidebar-card a {
        color: #93c5fd
    }

    .dark-mode .race-sidebar-card a:hover {
        color: #bfdbfe
    }

    .race-other-races-wrapper {
        flex-direction: column;
        gap: 16px;
        display: flex
    }

    .race-other-races-title {
        color: #1f2937;
        padding-left: 12px;
        position: relative;
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important
    }

    .race-other-races-title:before {
        content: "";
        background: linear-gradient(135deg, #2b3990, #030725);
        border-radius: 2px;
        width: 4px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

    .dark-mode .race-other-races-title {
        color: #f3f4f6 !important
    }

    .dark-mode .race-other-races-title:before {
        background: linear-gradient(135deg, #60a5fa, #3b82f6) !important
    }

    .race-other-races-list {
        flex-direction: column;
        gap: 14px;
        display: flex
    }

    .race-other-race-item {
        background: #fff9;
        border: 1px solid #0f172a0f;
        border-radius: 16px;
        gap: 14px;
        padding: 14px;
        text-decoration: none;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        overflow: hidden
    }

    .dark-mode .race-other-race-item {
        background: #0d1224b3;
        border-color: #94a3b81f
    }

    .race-other-race-item:hover {
        background: #fffc;
        border-color: #2b399033;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px #0f172a1f
    }

    .dark-mode .race-other-race-item:hover {
        background: #0d1224d9;
        border-color: #2b399059;
        box-shadow: 0 8px 24px #02061280
    }

    .race-other-race-image {
        background: #f1f5f9;
        border-radius: 12px;
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        overflow: hidden
    }

    .dark-mode .race-other-race-image {
        background: #1e293b
    }

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

    .race-other-race-content {
        flex-direction: column;
        flex: 1;
        gap: 6px;
        min-width: 0;
        display: flex
    }

    .race-other-race-title {
        color: #1f2a44;
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        transition: color .2s
    }

    .dark-mode .race-other-race-title {
        color: #e2e8f0
    }

    .race-other-race-item:hover .race-other-race-title {
        color: #2b3990
    }

    .dark-mode .race-other-race-item:hover .race-other-race-title {
        color: #b8c5e0
    }

    .race-other-race-summary {
        color: #475569cc;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        display: -webkit-box;
        overflow: hidden
    }

    .dark-mode .race-other-race-summary {
        color: #cbd5e1b3
    }

    .race-champions-section {
        background: linear-gradient(135deg, #ecf3ffe6, #e3ecfff5);
        border: 1px solid #0f172a14;
        border-radius: 24px;
        margin-top: clamp(56px, 7vw, 96px);
        padding: clamp(28px, 4vw, 44px);
        box-shadow: 0 32px 70px #0f172a14
    }

    .dark-mode .race-champions-section {
        background: linear-gradient(135deg, #090e1cf0, #040a18fa);
        border-color: #94a3b82e;
        box-shadow: 0 28px 70px #0206128c
    }

    .race-champions-content {
        flex-direction: column;
        gap: clamp(20px, 3vw, 32px);
        display: flex
    }

    .race-champions-header {
        flex-direction: column;
        gap: 14px;
        display: flex
    }

    .race-champions-header h2 {
        color: #1b2751;
        margin: 0;
        font-size: clamp(22px, 3vw, 28px);
        font-weight: 700
    }

    .dark-mode .race-champions-header h2 {
        color: #f1f5f9
    }

    .race-champions-divider {
        background: linear-gradient(90deg, #2b459659, #2b459600);
        height: 1px
    }

    .dark-mode .race-champions-divider {
        background: linear-gradient(90deg, #94bfff66, #94bfff00)
    }

    .race-champions-list {
        gap: clamp(18px, 3vw, 24px);
        display: grid
    }

    .race-champions-card {
        background: #fffc;
        border: 1px solid #0f172a0f;
        border-radius: 20px;
        flex-direction: column;
        gap: 8px;
        padding: 18px 22px;
        display: flex;
        box-shadow: 0 18px 45px #0f172a14
    }

    .dark-mode .race-champions-card {
        background: #0d1224eb;
        border-color: #94a3b829;
        box-shadow: 0 22px 55px #02061273
    }

    .race-champions-note {
        color: #1f2a44;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.6
    }

    .race-champions-card ul {
        gap: 18px
    }

    .race-champions-item {
        flex-direction: column;
        gap: 6px;
        display: flex
    }

    .race-champions-year {
        text-transform: uppercase;
        letter-spacing: .18em;
        color: #253862bf;
        font-size: 13px
    }

    .dark-mode .race-champions-year {
        color: #e2e8f0b8
    }

    .race-champions-note {
        color: #1f2a44;
        font-size: 15px;
        font-weight: 600
    }

    .dark-mode .race-champions-note {
        color: #f8fafc
    }

    .sss-page {
        background: linear-gradient(135deg, #0f172a05, #2563eb0d);
        border: 1px solid #0f172a0d;
        border-radius: 32px;
        margin-top: -24px;
        padding: clamp(32px, 5vw, 48px);
        position: relative;
        box-shadow: 0 36px 110px #0f172a24
    }

    .sss-hero {
        flex-direction: column;
        gap: 18px;
        padding-bottom: 28px;
        display: flex;
        position: relative
    }

    .sss-hero:after {
        content: "";
        background: linear-gradient(90deg, #2563eb00, #2563eb59, #2563eb00);
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0
    }

    .sss-title {
        letter-spacing: -.015em;
        color: #0f172a;
        margin: 0;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 800
    }

    .sss-description {
        color: #0f172ab3;
        max-width: 640px;
        margin: 0;
        font-size: 17px;
        line-height: 1.7
    }

    .sss-content {
        margin-top: 40px
    }

    .sss-accordion {
        flex-direction: column;
        gap: 16px;
        display: flex
    }

    .sss-accordion-item {
        background: #fffffff2;
        border: 1px solid #0f172a14;
        border-radius: 20px;
        transition: transform .25s, box-shadow .25s, border-color .25s;
        overflow: hidden;
        box-shadow: 0 18px 40px #0f172a1a
    }

    .sss-accordion-item:hover {
        border-color: #2563eb38;
        transform: translateY(-2px);
        box-shadow: 0 24px 60px #0f172a24
    }

    .sss-accordion-trigger {
        text-align: left;
        color: #0f172a;
        cursor: pointer;
        background: 0 0;
        border: none;
        outline: none;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        width: 100%;
        padding: 22px 28px;
        font-size: 18px;
        font-weight: 600;
        transition: color .25s;
        display: flex
    }

    .sss-accordion-trigger .icon {
        color: #3a40f0;
        background: linear-gradient(135deg, #3a40f01f, #2bd3dc1f);
        border-radius: 12px;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        transition: transform .3s, background .3s;
        display: inline-flex
    }

    .sss-accordion-trigger[aria-expanded=true] {
        color: #2563eb
    }

    .sss-accordion-trigger[aria-expanded=true] .icon {
        background: linear-gradient(135deg, #3a40f038, #2bd3dc38);
        transform: rotate(45deg)
    }

    .sss-accordion-panel {
        opacity: 0;
        max-height: 0;
        transition: max-height .4s, opacity .4s;
        overflow: hidden
    }

    .sss-accordion-panel-inner {
        color: #0f172ab3;
        padding: 0 28px 26px;
        font-size: 16px;
        line-height: 1.7
    }

    .dark-mode .sss-page {
        background: #0f172a9e;
        border-color: #94a3b81a;
        box-shadow: 0 40px 120px #020617a6
    }

    .dark-mode .sss-title {
        color: #e2e8f0f2
    }

    .dark-mode .sss-description {
        color: #cbd5e1b8
    }

    .dark-mode .sss-accordion-item {
        background: #0f172ad9;
        border-color: #94a3b824;
        box-shadow: 0 24px 60px #0206178c
    }

    .dark-mode .sss-accordion-trigger {
        color: #e2e8f0eb
    }

    .dark-mode .sss-accordion-trigger[aria-expanded=true] {
        color: #38bdf8
    }

    .dark-mode .sss-accordion-panel-inner {
        color: #cbd5e1c2
    }

    @media (max-width:575.98px) {
        .sss-accordion-trigger {
            padding: 18px 20px;
            font-size: 16px
        }

        .sss-accordion-panel-inner {
            padding: 0 20px 20px;
            font-size: 15px
        }
    }
}

@layer utilities {
    .pointer-events-none {
        pointer-events: none
    }

    .collapse {
        visibility: collapse
    }

    .invisible {
        visibility: hidden
    }

    .visible {
        visibility: visible
    }

    .visible\! {
        visibility: visible !important
    }

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

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

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

    .start-0 {
        inset-inline-start: calc(var(--spacing)*0)
    }

    .start-50 {
        inset-inline-start: calc(var(--spacing)*50)
    }

    .start-100 {
        inset-inline-start: calc(var(--spacing)*100)
    }

    .end-0 {
        inset-inline-end: calc(var(--spacing)*0)
    }

    .end-50 {
        inset-inline-end: calc(var(--spacing)*50)
    }

    .end-100 {
        inset-inline-end: calc(var(--spacing)*100)
    }

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

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

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

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

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

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

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

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

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

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

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

    .isolate {
        isolation: isolate
    }

    .z-5 {
        z-index: 5
    }

    .z-10 {
        z-index: 10
    }

    .z-30 {
        z-index: 30
    }

    .z-\[60\] {
        z-index: 60
    }

    .z-\[1050\] {
        z-index: 1050
    }

    .order-0 {
        order: 0
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .order-3 {
        order: 3
    }

    .order-4 {
        order: 4
    }

    .order-5 {
        order: 5
    }

    .order-first {
        order: -9999
    }

    .order-last {
        order: 9999
    }

    .col-1 {
        grid-column: 1
    }

    .col-2 {
        grid-column: 2
    }

    .col-3 {
        grid-column: 3
    }

    .col-4 {
        grid-column: 4
    }

    .col-5 {
        grid-column: 5
    }

    .col-6 {
        grid-column: 6
    }

    .col-7 {
        grid-column: 7
    }

    .col-8 {
        grid-column: 8
    }

    .col-9 {
        grid-column: 9
    }

    .col-10 {
        grid-column: 10
    }

    .col-11 {
        grid-column: 11
    }

    .col-12 {
        grid-column: 12
    }

    .col-auto {
        grid-column: auto
    }

    .col-span-3 {
        grid-column: span 3/span 3
    }

    .col-span-9 {
        grid-column: span 9/span 9
    }

    .col-span-12 {
        grid-column: span 12/span 12
    }

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

    .float-end {
        float: inline-end
    }

    .float-none {
        float: none
    }

    .float-right {
        float: right
    }

    .float-start {
        float: inline-start
    }

    .container {
        width: 100%
    }

    @media (min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .container\! {
        width: 100% !important
    }

    @media (min-width:40rem) {
        .container\! {
            max-width: 40rem !important
        }
    }

    @media (min-width:48rem) {
        .container\! {
            max-width: 48rem !important
        }
    }

    @media (min-width:64rem) {
        .container\! {
            max-width: 64rem !important
        }
    }

    @media (min-width:80rem) {
        .container\! {
            max-width: 80rem !important
        }
    }

    @media (min-width:96rem) {
        .container\! {
            max-width: 96rem !important
        }
    }

    .m-0 {
        margin: calc(var(--spacing)*0)
    }

    .m-1 {
        margin: calc(var(--spacing)*1)
    }

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

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

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

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

    .m-auto {
        margin: auto
    }

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

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

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

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

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

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

    .mx-auto {
        margin-inline: auto
    }

    .my-0 {
        margin-block: calc(var(--spacing)*0)
    }

    .my-1 {
        margin-block: calc(var(--spacing)*1)
    }

    .my-2 {
        margin-block: calc(var(--spacing)*2)
    }

    .my-3 {
        margin-block: calc(var(--spacing)*3)
    }

    .my-4 {
        margin-block: calc(var(--spacing)*4)
    }

    .my-5 {
        margin-block: calc(var(--spacing)*5)
    }

    .my-6 {
        margin-block: calc(var(--spacing)*6)
    }

    .my-auto {
        margin-block: auto
    }

    .ms-0 {
        margin-inline-start: calc(var(--spacing)*0)
    }

    .ms-1 {
        margin-inline-start: calc(var(--spacing)*1)
    }

    .ms-2 {
        margin-inline-start: calc(var(--spacing)*2)
    }

    .ms-3 {
        margin-inline-start: calc(var(--spacing)*3)
    }

    .ms-4 {
        margin-inline-start: calc(var(--spacing)*4)
    }

    .ms-5 {
        margin-inline-start: calc(var(--spacing)*5)
    }

    .ms-auto {
        margin-inline-start: auto
    }

    .me-0 {
        margin-inline-end: calc(var(--spacing)*0)
    }

    .me-1 {
        margin-inline-end: calc(var(--spacing)*1)
    }

    .me-2 {
        margin-inline-end: calc(var(--spacing)*2)
    }

    .me-3 {
        margin-inline-end: calc(var(--spacing)*3)
    }

    .me-4 {
        margin-inline-end: calc(var(--spacing)*4)
    }

    .me-5 {
        margin-inline-end: calc(var(--spacing)*5)
    }

    .me-auto {
        margin-inline-end: auto
    }

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

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

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

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

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

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

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

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

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

    .mt-auto {
        margin-top: auto
    }

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

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

    .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-15 {
        margin-bottom: calc(var(--spacing)*15)
    }

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

    .mb-auto {
        margin-bottom: auto
    }

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

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

    .ml-auto {
        margin-left: auto
    }

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

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

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

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline\! {
        display: inline !important
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .list-item {
        display: list-item
    }

    .table {
        display: table
    }

    .table\! {
        display: table !important
    }

    .table-caption {
        display: table-caption
    }

    .table-cell {
        display: table-cell
    }

    .table-row {
        display: table-row
    }

    .aspect-square {
        aspect-ratio: 1
    }

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

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

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

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

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

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

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

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

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

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

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

    .h-auto {
        height: auto
    }

    .h-full {
        height: 100%
    }

    .h-px {
        height: 1px
    }

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

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

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

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

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

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

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

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

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

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

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

    .w-auto {
        width: auto
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

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

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

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

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

    .min-w-0 {
        min-width: calc(var(--spacing)*0)
    }

    .min-w-\[45px\] {
        min-width: 45px
    }

    .min-w-\[240px\] {
        min-width: 240px
    }

    .flex-1 {
        flex: 1
    }

    .flex-shrink {
        flex-shrink: 1
    }

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

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

    .flex-grow {
        flex-grow: 1
    }

    .flex-grow-0 {
        flex-grow: 0
    }

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

    .caption-top {
        caption-side: top
    }

    .border-collapse {
        border-collapse: collapse
    }

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

    .resize {
        resize: both
    }

    .list-none {
        list-style-type: none
    }

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

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

    .flex-col {
        flex-direction: column
    }

    .flex-row {
        flex-direction: row
    }

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

    .flex-nowrap {
        flex-wrap: nowrap
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .flex-wrap-reverse {
        flex-wrap: wrap-reverse
    }

    .items-center {
        align-items: center
    }

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

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

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

    .justify-center {
        justify-content: center
    }

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

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

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

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

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

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

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

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

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

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

    .overflow-auto {
        overflow: auto
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-scroll {
        overflow: scroll
    }

    .overflow-visible {
        overflow: visible
    }

    .overflow-x-hidden {
        overflow-x: hidden
    }

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

    .rounded {
        border-radius: .25rem
    }

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

    .rounded-full {
        border-radius: 3.40282e38px
    }

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

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

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

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

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

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

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

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

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

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

    .border-blue-200 {
        border-color: var(--color-blue-200)
    }

    .border-gray-200 {
        border-color: var(--color-gray-200)
    }

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

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

    .border-white\/20 {
        border-color: #fff3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .border-white\/20 {
            border-color: color-mix(in oklab, var(--color-white)20%, transparent)
        }
    }

    .bg-black {
        background-color: var(--color-black)
    }

    .bg-blue-50 {
        background-color: var(--color-blue-50)
    }

    .bg-gray-100 {
        background-color: var(--color-gray-100)
    }

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

    .bg-gray-600\/80 {
        background-color: #4a5565cc
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-gray-600\/80 {
            background-color: color-mix(in oklab, var(--color-gray-600)80%, transparent)
        }
    }

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

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

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-white\/10 {
        background-color: #ffffff1a
    }

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

    .bg-white\/20 {
        background-color: #fff3
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/20 {
            background-color: color-mix(in oklab, var(--color-white)20%, transparent)
        }
    }

    .bg-gradient-to-br {
        --tw-gradient-position: to bottom right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

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

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

    .from-\[\#2b3990\] {
        --tw-gradient-from: #2b3990;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

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

    .from-black\/80 {
        --tw-gradient-from: #000c
    }

    @supports (color:color-mix(in lab, red, red)) {
        .from-black\/80 {
            --tw-gradient-from: color-mix(in oklab, var(--color-black)80%, transparent)
        }
    }

    .from-black\/80 {
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-black\/90 {
        --tw-gradient-from: #000000e6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .from-black\/90 {
            --tw-gradient-from: color-mix(in oklab, var(--color-black)90%, transparent)
        }
    }

    .from-black\/90 {
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-primary\/5 {
        --tw-gradient-from: #2b39900d
    }

    @supports (color:color-mix(in lab, red, red)) {
        .from-primary\/5 {
            --tw-gradient-from: color-mix(in oklab, var(--color-primary)5%, transparent)
        }
    }

    .from-primary\/5 {
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-slate-700 {
        --tw-gradient-from: var(--color-slate-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .from-white\/10 {
        --tw-gradient-from: #ffffff1a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .from-white\/10 {
            --tw-gradient-from: color-mix(in oklab, var(--color-white)10%, transparent)
        }
    }

    .from-white\/10 {
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .via-\[\#1e3a8a\] {
        --tw-gradient-via: #1e3a8a;
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-via)var(--tw-gradient-via-position), var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-black\/40 {
        --tw-gradient-via: #0006
    }

    @supports (color:color-mix(in lab, red, red)) {
        .via-black\/40 {
            --tw-gradient-via: color-mix(in oklab, var(--color-black)40%, transparent)
        }
    }

    .via-black\/40 {
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-via)var(--tw-gradient-via-position), var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .via-black\/60 {
        --tw-gradient-via: #0009
    }

    @supports (color:color-mix(in lab, red, red)) {
        .via-black\/60 {
            --tw-gradient-via: color-mix(in oklab, var(--color-black)60%, transparent)
        }
    }

    .via-black\/60 {
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-via)var(--tw-gradient-via-position), var(--tw-gradient-to)var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    .to-\[\#1e3a8a\] {
        --tw-gradient-to: #1e3a8a;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-\[\#2b3990\] {
        --tw-gradient-to: #2b3990;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

    .to-slate-900 {
        --tw-gradient-to: var(--color-slate-900);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
    }

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

    .object-cover {
        object-fit: cover
    }

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

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

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

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

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

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

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

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

    .p-\[0-9a-fA-F\] {
        padding: 0-9a-fA-F
    }

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

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

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

    .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-4 {
        padding-block: calc(var(--spacing)*4)
    }

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

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

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

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

    .ps-0 {
        padding-inline-start: calc(var(--spacing)*0)
    }

    .ps-1 {
        padding-inline-start: calc(var(--spacing)*1)
    }

    .ps-2 {
        padding-inline-start: calc(var(--spacing)*2)
    }

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

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

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

    .pe-0 {
        padding-inline-end: calc(var(--spacing)*0)
    }

    .pe-1 {
        padding-inline-end: calc(var(--spacing)*1)
    }

    .pe-2 {
        padding-inline-end: calc(var(--spacing)*2)
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .text-center {
        text-align: center
    }

    .text-end {
        text-align: end
    }

    .text-justify {
        text-align: justify
    }

    .text-left {
        text-align: left
    }

    .text-right {
        text-align: right
    }

    .text-start {
        text-align: start
    }

    .align-baseline {
        vertical-align: baseline
    }

    .align-bottom {
        vertical-align: bottom
    }

    .align-middle {
        vertical-align: middle
    }

    .align-text-bottom {
        vertical-align: text-bottom
    }

    .align-text-top {
        vertical-align: text-top
    }

    .align-top {
        vertical-align: top
    }

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

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

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

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

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

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

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

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

    .text-nowrap {
        text-wrap: nowrap
    }

    .text-wrap {
        text-wrap: wrap
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

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

    .text-blue-400 {
        color: var(--color-blue-400)
    }

    .text-blue-700 {
        color: var(--color-blue-700)
    }

    .text-gray-100 {
        color: var(--color-gray-100)
    }

    .text-gray-200 {
        color: var(--color-gray-200)
    }

    .text-gray-300 {
        color: var(--color-gray-300)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-500 {
        color: var(--color-gray-500)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-gray-700 {
        color: var(--color-gray-700)
    }

    .text-gray-800 {
        color: var(--color-gray-800)
    }

    .text-gray-900 {
        color: var(--color-gray-900)
    }

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

    .text-slate-700 {
        color: var(--color-slate-700)
    }

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

    .text-white\/80 {
        color: #fffc
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/80 {
            color: color-mix(in oklab, var(--color-white)80%, transparent)
        }
    }

    .text-white\/90 {
        color: #ffffffe6
    }

    @supports (color:color-mix(in lab, red, red)) {
        .text-white\/90 {
            color: color-mix(in oklab, var(--color-white)90%, transparent)
        }
    }

    .capitalize {
        text-transform: capitalize
    }

    .lowercase {
        text-transform: lowercase
    }

    .normal-case {
        text-transform: none
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

    .ordinal {
        --tw-ordinal: ordinal;
        font-variant-numeric: var(--tw-ordinal, )var(--tw-slashed-zero, )var(--tw-numeric-figure, )var(--tw-numeric-spacing, )var(--tw-numeric-fraction, )
    }

    .line-through {
        text-decoration-line: line-through
    }

    .no-underline {
        text-decoration-line: none
    }

    .overline {
        text-decoration-line: overline
    }

    .underline {
        text-decoration-line: underline
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-25 {
        opacity: .25
    }

    .opacity-50 {
        opacity: .5
    }

    .opacity-75 {
        opacity: .75
    }

    .opacity-100 {
        opacity: 1
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

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

    .shadow-none {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

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

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }

    .drop-shadow-lg {
        --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, #00000026));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }

    .drop-shadow-md {
        --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));
        --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }

    .grayscale {
        --tw-grayscale: grayscale(100%);
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }

    .invert {
        --tw-invert: invert(100%);
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }

    .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-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, )
    }

    .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, )
    }

    .transition {
        transition-property: color, background-color, border-color, 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, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

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

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

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

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

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

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

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

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

    .ease-in {
        --tw-ease: var(--ease-in);
        transition-timing-function: var(--ease-in)
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

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

    .\[hostname\:port\] {
        hostname: port
    }

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

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

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

        .group-hover\:text-primary:is(:where(.group):hover *) {
            color: var(--color-primary)
        }

        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 1
        }

        .hover\:border-white\/30:hover {
            border-color: #ffffff4d
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:border-white\/30:hover {
                border-color: color-mix(in oklab, var(--color-white)30%, transparent)
            }
        }

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

        .hover\:bg-white\/20:hover {
            background-color: #fff3
        }

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

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

        .hover\:text-white:hover {
            color: var(--color-white)
        }

        .hover\:text-white\/90:hover {
            color: #ffffffe6
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:text-white\/90:hover {
                color: color-mix(in oklab, var(--color-white)90%, transparent)
            }
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }

        .hover\:shadow-2xl:hover {
            --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-lg:hover {
            --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-xl:hover {
            --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    @media (min-width:40rem) {
        .sm\:mt-0 {
            margin-top: calc(var(--spacing)*0)
        }

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

    @media (min-width:48rem) {
        .md\:mb-4 {
            margin-bottom: calc(var(--spacing)*4)
        }

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

        .md\:block {
            display: block
        }

        .md\:hidden {
            display: none
        }

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

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

        .md\:w-auto {
            width: auto
        }

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

        .md\:pb-12 {
            padding-bottom: calc(var(--spacing)*12)
        }

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

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

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

        .md\:text-\[28px\] {
            font-size: 28px
        }
    }

    @media (min-width:64rem) {
        .lg\:col-span-3 {
            grid-column: span 3/span 3
        }

        .lg\:col-span-9 {
            grid-column: span 9/span 9
        }

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

        .lg\:pb-16 {
            padding-bottom: calc(var(--spacing)*16)
        }

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

        .lg\:text-\[34px\] {
            font-size: 34px
        }
    }

    @media (prefers-color-scheme:dark) {
        .dark\:border-blue-800 {
            border-color: var(--color-blue-800)
        }

        .dark\:border-slate-700 {
            border-color: var(--color-slate-700)
        }

        .dark\:bg-blue-900\/20 {
            background-color: #1c398e33
        }

        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-blue-900\/20 {
                background-color: color-mix(in oklab, var(--color-blue-900)20%, transparent)
            }
        }

        .dark\:bg-gray-700 {
            background-color: var(--color-gray-700)
        }

        .dark\:bg-gray-800 {
            background-color: var(--color-gray-800)
        }

        .dark\:bg-slate-600 {
            background-color: var(--color-slate-600)
        }

        .dark\:text-blue-300 {
            color: var(--color-blue-300)
        }

        .dark\:text-gray-300 {
            color: var(--color-gray-300)
        }

        .dark\:text-gray-400 {
            color: var(--color-gray-400)
        }

        .dark\:text-slate-400 {
            color: var(--color-slate-400)
        }

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

    .hover\:text-primary:hover {
        color: #2b3990
    }

    .no-underline,
    a.no-underline:hover {
        text-decoration: none !important
    }

    .d-none,
    [style*="display: none"],
    [style*=display\:none] {
        display: none !important
    }

    .p0 {
        padding: 0 !important
    }

    .m0 {
        margin: 0 !important
    }

    .m-r-0 {
        margin-right: 0 !important
    }

    .m-l-5 {
        margin-left: 5px !important
    }

    .m-l-15 {
        margin-left: 15px !important
    }

    .m-r-5 {
        margin-right: 5px !important
    }

    .m-r-15 {
        margin-right: 15px !important
    }

    .m-b-15 {
        margin-bottom: 15px !important
    }

    .m-b-20 {
        margin-bottom: 20px !important
    }

    .m-b-30 {
        margin-bottom: 30px !important
    }

    .width20 {
        width: 20% !important
    }

    .width25 {
        width: 25% !important
    }

    .width100 {
        width: 100% !important
    }

    .display-block {
        display: block !important
    }

    .display-inline-block {
        display: inline-block !important
    }

    .display-flex {
        display: flex !important
    }

    .position-relative {
        position: relative !important
    }

    .row>.col-1,
    .row>.col-2,
    .row>.col-3,
    .row>.col-4,
    .row>.col-5,
    .row>.col-6,
    .row>.col-7,
    .row>.col-8,
    .row>.col-9,
    .row>.col-10,
    .row>.col-11,
    .row>.col-12,
    .row>.col-sm-1,
    .row>.col-sm-2,
    .row>.col-sm-3,
    .row>.col-sm-4,
    .row>.col-sm-5,
    .row>.col-sm-6,
    .row>.col-sm-7,
    .row>.col-sm-8,
    .row>.col-sm-9,
    .row>.col-sm-10,
    .row>.col-sm-11,
    .row>.col-sm-12,
    .row>.col-md-1,
    .row>.col-md-2,
    .row>.col-md-3,
    .row>.col-md-4,
    .row>.col-md-5,
    .row>.col-md-6,
    .row>.col-md-7,
    .row>.col-md-8,
    .row>.col-md-9,
    .row>.col-md-10,
    .row>.col-md-11,
    .row>.col-md-12,
    .row>.col-lg-1,
    .row>.col-lg-2,
    .row>.col-lg-3,
    .row>.col-lg-4,
    .row>.col-lg-5,
    .row>.col-lg-6,
    .row>.col-lg-7,
    .row>.col-lg-8,
    .row>.col-lg-9,
    .row>.col-lg-10,
    .row>.col-lg-11,
    .row>.col-lg-12 {
        grid-column: span 12/span 12 !important
    }

    @media (min-width:640px) {
        .row>.col-sm-1 {
            grid-column: span 1/span 1 !important
        }

        .row>.col-sm-2 {
            grid-column: span 2/span 2 !important
        }

        .row>.col-sm-3 {
            grid-column: span 3/span 3 !important
        }

        .row>.col-sm-4 {
            grid-column: span 4/span 4 !important
        }

        .row>.col-sm-5 {
            grid-column: span 5/span 5 !important
        }

        .row>.col-sm-6 {
            grid-column: span 6/span 6 !important
        }

        .row>.col-sm-7 {
            grid-column: span 7/span 7 !important
        }

        .row>.col-sm-8 {
            grid-column: span 8/span 8 !important
        }

        .row>.col-sm-9 {
            grid-column: span 9/span 9 !important
        }

        .row>.col-sm-10 {
            grid-column: span 10/span 10 !important
        }

        .row>.col-sm-11 {
            grid-column: span 11/span 11 !important
        }

        .row>.col-sm-12 {
            grid-column: span 12/span 12 !important
        }
    }

    @media (min-width:768px) {
        .row>.col-md-1 {
            grid-column: span 1/span 1 !important
        }

        .row>.col-md-2 {
            grid-column: span 2/span 2 !important
        }

        .row>.col-md-3 {
            grid-column: span 3/span 3 !important
        }

        .row>.col-md-4 {
            grid-column: span 4/span 4 !important
        }

        .row>.col-md-5 {
            grid-column: span 5/span 5 !important
        }

        .row>.col-md-6 {
            grid-column: span 6/span 6 !important
        }

        .row>.col-md-7 {
            grid-column: span 7/span 7 !important
        }

        .row>.col-md-8 {
            grid-column: span 8/span 8 !important
        }

        .row>.col-md-9 {
            grid-column: span 9/span 9 !important
        }

        .row>.col-md-10 {
            grid-column: span 10/span 10 !important
        }

        .row>.col-md-11 {
            grid-column: span 11/span 11 !important
        }

        .row>.col-md-12 {
            grid-column: span 12/span 12 !important
        }
    }

    @media (min-width:1024px) {
        .row>.col-lg-1 {
            grid-column: span 1/span 1 !important
        }

        .row>.col-lg-2 {
            grid-column: span 2/span 2 !important
        }

        .row>.col-lg-3 {
            grid-column: span 3/span 3 !important
        }

        .row>.col-lg-4 {
            grid-column: span 4/span 4 !important
        }

        .row>.col-lg-5 {
            grid-column: span 5/span 5 !important
        }

        .row>.col-lg-6 {
            grid-column: span 6/span 6 !important
        }

        .row>.col-lg-7 {
            grid-column: span 7/span 7 !important
        }

        .row>.col-lg-8 {
            grid-column: span 8/span 8 !important
        }

        .row>.col-lg-9 {
            grid-column: span 9/span 9 !important
        }

        .row>.col-lg-10 {
            grid-column: span 10/span 10 !important
        }

        .row>.col-lg-11 {
            grid-column: span 11/span 11 !important
        }

        .row>.col-lg-12 {
            grid-column: span 12/span 12 !important
        }
    }
}

.edit-profile-cover {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) 50%/cover !important;
    border-radius: 20px !important;
    margin-bottom: 80px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px #00000014 !important
}

.edit-profile-cover:before {
    content: "" !important;
    z-index: 1 !important;
    background: #0000004d !important;
    position: absolute !important;
    inset: 0 !important
}

.edit-profile-cover .edit-avatar {
    z-index: 2 !important
}

.edit-profile-cover .edit-avatar img {
    border: 5px solid #fff !important;
    transition: all .3s !important;
    box-shadow: 0 8px 24px #00000026 !important
}

.edit-profile-cover .btn-file-upload {
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border: none !important;
    transition: all .3s !important;
    box-shadow: 0 4px 12px #2b39904d !important
}

.edit-profile-cover .btn-file-upload:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px #2b399066 !important
}

.edit-profile-cover .btn-edit-cover {
    z-index: 2 !important;
    border-radius: 12px !important
}

.profile-header {
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px #0000001f !important
}

.profile-header .profile-cover-image {
    filter: brightness(.9) !important
}

.profile-header .profile-info .profile-image {
    border-radius: 50% !important;
    transition: all .3s !important;
    box-shadow: 0 8px 24px #00000026 !important
}

.profile-header .profile-info .profile-image:hover {
    transform: scale(1.05) !important
}

.profile-header .profile-info .profile-username .username {
    text-shadow: 0 2px 8px #0000004d !important
}

.profile-header .btn-follow {
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all .3s !important;
    box-shadow: 0 4px 12px #2b39904d !important
}

.profile-details {
    background: #fff !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px #0000000f !important
}

.profile-details .description {
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.7 !important
}

.profile-details .contact-details {
    gap: 16px !important
}

.profile-details .profile-email {
    border-left: 2px solid #2b3990 !important
}

.profile-social-links {
    gap: 12px !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important
}

.profile-social-links li a {
    color: #2b3990 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-radius: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    transition: all .3s !important;
    display: flex !important
}

.profile-social-links li a:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px #2b39904d !important
}

.list-followers {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
    gap: 8px !important;
    display: grid !important
}

.img-follower {
    float: none !important;
    border-radius: 12px !important;
    width: 48px !important;
    height: 48px !important;
    transition: all .3s !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px #00000014 !important
}

.img-follower:hover {
    transform: translateY(-2px)scale(1.05) !important;
    box-shadow: 0 4px 12px #0000001f !important
}

.img-follower img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important
}

.page-title {
    color: #1e293b !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    font-size: 32px !important;
    font-weight: 700 !important
}

.page-content {
    margin-top: 24px !important
}

.form-label {
    color: #475569 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important
}

.form-input,
.form-textarea {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: all .3s !important
}

.form-input:focus,
.form-textarea:focus {
    border-color: #2b3990 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px #2b39901a !important
}

.btn-custom {
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all .3s !important;
    box-shadow: 0 4px 12px #2b39904d !important
}

.btn-custom:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px #2b399066 !important
}

.settings-tabs {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px #0000000f !important
}

.settings-tabs .nav-link {
    color: #64748b !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
    transition: all .3s !important
}

.settings-tabs .nav-link:hover {
    color: #2b3990 !important;
    background: #2b39900d !important
}

.settings-tabs .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    box-shadow: 0 4px 12px #2b39904d !important
}

.dark-mode .profile-details,
.dark-mode .edit-profile-cover,
.dark-mode .settings-tabs {
    background: #1a1a1a !important;
    border-color: #2f2f2f !important
}

.dark-mode .form-label,
.dark-mode .page-title {
    color: #e2e8f0 !important
}

@media (max-width:767px) {
    .profile-header {
        border-radius: 0 0 16px 16px !important
    }

    .page-title {
        font-size: 24px !important
    }

    .profile-details {
        padding: 16px !important
    }
}

.settings-tabs .nav {
    flex-direction: column !important;
    gap: 8px !important;
    display: flex !important
}

.settings-tabs .nav-link {
    color: #64748b !important;
    border: 2px solid #0000 !important;
    border-radius: 12px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all .3s !important;
    display: flex !important
}

.settings-tabs .nav-link svg {
    flex-shrink: 0 !important;
    transition: all .3s !important
}

.settings-tabs .nav-link:hover {
    color: #2b3990 !important;
    background: #2b39900d !important;
    transform: translate(4px) !important
}

.settings-tabs .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border-color: #2b3990 !important;
    box-shadow: 0 4px 12px #2b39904d !important
}

.settings-tabs .nav-link.active svg {
    transform: scale(1.1) !important
}

.modern-radio-group {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 2px 12px #0000000f !important
}

.radio-options {
    flex-wrap: wrap !important;
    gap: 12px !important;
    display: flex !important
}

.form-check-modern {
    flex: 1 !important;
    min-width: 140px !important;
    position: relative !important
}

.form-check-modern input[type=radio] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important
}

.form-check-modern label {
    cursor: pointer !important;
    color: #64748b !important;
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 24px !important;
    font-weight: 500 !important;
    transition: all .3s !important;
    display: flex !important;
    position: relative !important;
    overflow: hidden !important
}

.form-check-modern label:before {
    content: "" !important;
    opacity: 0 !important;
    background: linear-gradient(135deg, #2b39900d 0%, #1f276005 100%) !important;
    transition: opacity .3s !important;
    position: absolute !important;
    inset: 0 !important
}

.form-check-modern label:hover {
    border-color: #2b3990 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px #2b399026 !important
}

.form-check-modern label:hover:before {
    opacity: 1 !important
}

.form-check-modern .radio-icon {
    color: #0000 !important;
    background: #fff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
    transition: all .3s !important;
    display: flex !important
}

.form-check-modern input[type=radio]:checked+label {
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border-color: #2b3990 !important;
    box-shadow: 0 6px 20px #2b39904d !important
}

.form-check-modern input[type=radio]:checked+label:before {
    opacity: 0 !important
}

.form-check-modern input[type=radio]:checked+label .radio-icon {
    color: #2b3990 !important;
    background: #fff !important;
    border-color: #fff !important;
    transform: scale(1.1) !important
}

.form-check-delete-account {
    background: #fff3cd !important;
    border: 2px solid #ff6b6b !important;
    border-radius: 12px !important;
    padding: 16px !important;
    transition: all .3s !important
}

.form-check-delete-account:hover {
    background: #ffe5e5 !important;
    border-color: #ff4757 !important
}

.form-check-delete-account .form-check-input {
    cursor: pointer !important;
    border: 2px solid #ff6b6b !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important
}

.form-check-delete-account .form-check-input:checked {
    background-color: #ff4757 !important;
    border-color: #ff4757 !important
}

.form-check-delete-account label {
    cursor: pointer !important;
    color: #721c24 !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    margin: 0 !important;
    font-weight: 500 !important
}

.dark-mode .modern-radio-group {
    background: #1a1a1a !important;
    box-shadow: 0 2px 12px #0000004d !important
}

.dark-mode .form-check-modern label {
    color: #cbd5e1 !important;
    background: #1a1a1a !important;
    border-color: #2f2f2f !important
}

.dark-mode .form-check-modern label:hover {
    border-color: #2b3990 !important
}

.dark-mode .form-check-modern input[type=radio]:checked+label {
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important
}

.dark-mode .settings-tabs {
    background: #1a1a1a !important
}

.dark-mode .settings-tabs .nav-link {
    color: #cbd5e1 !important
}

.dark-mode .settings-tabs .nav-link:hover {
    color: #fff !important;
    background: #2b399026 !important
}

.dark-mode .form-check-delete-account {
    background: #ff6b6b1a !important;
    border-color: #ff6b6b !important
}

.dark-mode .form-check-delete-account label {
    color: #ff6b6b !important
}

.container-profile {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important
}

.container-profile>.row {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 1rem !important;
    display: grid !important
}

@media (max-width:1023px) {

    .container-profile>.row>.col-12.col-lg-4,
    .container-profile>.row>.col-12.col-lg-8 {
        grid-column: span 12/span 12 !important
    }
}

@media (min-width:1024px) {
    .container-profile>.row>.col-12.col-lg-4 {
        grid-column: span 4/span 4 !important
    }

    .container-profile>.row>.col-12.col-lg-8 {
        grid-column: span 8/span 8 !important
    }
}

.container-profile .col-12.col-md-6 {
    grid-column: span 12/span 12 !important
}

@media (min-width:768px) {
    .container-profile .col-12.col-md-6 {
        grid-column: span 6/span 6 !important
    }
}

.edit-profile-cover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border: 3px dashed #cbd5e1 !important;
    border-radius: 24px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 280px !important;
    margin-bottom: 100px !important;
    transition: all .3s !important;
    display: flex !important;
    position: relative !important
}

.edit-profile-cover:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    border-color: #2b3990 !important
}

.edit-profile-cover.edit-cover-no-image {
    background: linear-gradient(135deg, #2b39900d 0%, #1f276005 100%) !important
}

.edit-profile-cover .edit-avatar {
    z-index: 10 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    display: flex !important;
    position: absolute !important;
    bottom: -60px !important;
    left: 50% !important;
    transform: translate(-50%) !important
}

.edit-profile-cover .edit-avatar img {
    object-fit: cover !important;
    background: #fff !important;
    border: 6px solid #fff !important;
    border-radius: 50% !important;
    width: 180px !important;
    height: 180px !important;
    transition: all .3s !important;
    box-shadow: 0 12px 32px #00000026 !important
}

.edit-profile-cover .edit-avatar img:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 16px 40px #0003 !important
}

.edit-profile-cover .edit-avatar .btn-file-upload {
    cursor: pointer !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border: 4px solid #fff !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    transition: all .3s !important;
    display: flex !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    box-shadow: 0 6px 20px #2b399066 !important
}

.edit-profile-cover .edit-avatar .btn-file-upload:hover {
    transform: scale(1.1)rotate(15deg) !important;
    box-shadow: 0 8px 28px #2b399080 !important
}

.edit-profile-cover .edit-avatar .btn-file-upload svg {
    color: #fff !important;
    width: 24px !important;
    height: 24px !important
}

.edit-profile-cover .edit-avatar .btn-file-upload input[type=file],
.edit-profile-cover .btn-edit-cover input[type=file] {
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important
}

.edit-profile-cover:not(.edit-cover-no-image):before {
    content: "" !important;
    z-index: 1 !important;
    background: linear-gradient(#0000 0%, #0006 100%) !important;
    border-radius: 21px !important;
    position: absolute !important;
    inset: 0 !important
}

.dark-mode .page-title {
    color: #f1f5f9 !important
}

.dark-mode .page-content {
    color: #e2e8f0 !important
}

.dark-mode .breadcrumb {
    background: #1e293b99 !important;
    border-color: #33415580 !important
}

.dark-mode .breadcrumb-item {
    color: #cbd5e1 !important
}

.dark-mode .breadcrumb-item a {
    color: #94a3b8 !important
}

.dark-mode .breadcrumb-item a:hover {
    color: #2b3990 !important
}

.dark-mode .breadcrumb-item.active {
    color: #f1f5f9 !important
}

.dark-mode .edit-profile-cover:hover {
    background: linear-gradient(135deg, #2b399033 0%, #1f27601a 100%) !important;
    border-color: #2b3990 !important
}

.dark-mode .edit-profile-cover .edit-avatar .btn-file-upload {
    border-color: #1e293b !important;
    box-shadow: 0 6px 20px #2b399099 !important
}

.dark-mode .edit-profile-cover .btn-edit-cover {
    background: #1e293bf2 !important;
    border-color: #2b399066 !important;
    box-shadow: 0 8px 24px #0000004d !important
}

.dark-mode .edit-profile-cover .btn-edit-cover:hover {
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important
}

.dark-mode .form-input,
.dark-mode .form-textarea {
    color: #f1f5f9 !important;
    background: #1e293b !important;
    border-color: #334155 !important
}

.dark-mode .form-input::placeholder,
.dark-mode .form-textarea::placeholder {
    color: #64748b !important
}

.dark-mode .form-input:focus,
.dark-mode .form-textarea:focus {
    background: #1e293b !important;
    border-color: #2b3990 !important
}

.dark-mode .profile-details {
    background: #1e293b !important;
    border: 1px solid #334155 !important
}

.dark-mode .profile-details .description {
    color: #cbd5e1 !important
}

.dark-mode .profile-details .contact-details {
    color: #94a3b8 !important
}

.dark-mode .profile-details .profile-email {
    border-left-color: #2b3990 !important
}

.dark-mode .profile-social-links li a {
    color: #94a3b8 !important;
    background: linear-gradient(135deg, #1e293bcc 0%, #0f172a99 100%) !important;
    border: 1px solid #334155 !important
}

.dark-mode .profile-social-links li a:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border-color: #2b3990 !important
}

.dark-mode .widget-head .title {
    color: #f1f5f9 !important
}

.dark-mode .img-follower {
    border: 2px solid #334155 !important;
    box-shadow: 0 2px 8px #0000004d !important
}

@media (max-width:767px) {
    .edit-profile-cover {
        height: 220px !important;
        margin-bottom: 80px !important
    }

    .edit-profile-cover .edit-avatar {
        bottom: -50px !important
    }

    .edit-profile-cover .edit-avatar img {
        border-width: 5px !important;
        width: 140px !important;
        height: 140px !important
    }

    .edit-profile-cover .edit-avatar .btn-file-upload {
        width: 44px !important;
        height: 44px !important;
        bottom: 5px !important;
        right: 5px !important
    }

    .edit-profile-cover .edit-avatar .btn-file-upload svg {
        width: 20px !important;
        height: 20px !important
    }

    .edit-profile-cover .btn-edit-cover {
        width: 48px !important;
        height: 48px !important;
        top: 15px !important;
        right: 15px !important
    }

    .edit-profile-cover .btn-edit-cover svg {
        width: 22px !important;
        height: 22px !important
    }
}

.settings-tabs {
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px #0000000f !important
}

.btn {
    border-radius: .125rem;
    transition: all .2s ease-in-out;
    box-shadow: none !important;
    color: #fff !important;
    outline: 0 !important
}

.btn:hover,
.btn:active,
.btn:focus {
    color: #fff !important
}

.btn-default {
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 400;
    display: flex;
    box-shadow: none !important;
    color: #222 !important;
    background-color: #ebeff2 !important;
    border-color: #ebeff2 !important;
    outline: 0 !important
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: #222 !important;
    background-color: #dfe3e6 !important;
    border-color: #dfe3e6 !important
}

.btn-block {
    width: 100% !important
}

.btn-sm {
    border-radius: .125rem;
    padding: .5rem .75rem;
    font-size: 13px;
    line-height: 1.5
}

.btn-md {
    border-radius: .125rem;
    padding: .54rem 1.2rem;
    line-height: 1.5
}

.btn-lg {
    border-radius: .125rem;
    padding: .625rem 1.5rem;
    line-height: 1.5
}

.btn-xl {
    border-radius: .125rem;
    padding: 1rem 6.4rem;
    line-height: 1.5;
    font-size: 15px !important
}

.btn-link {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-shadow: none !important;
    background-color: #0000 !important;
    border: 0 !important;
    outline: none !important
}

.form-control::placeholder {
    color: #9aa2aa;
    opacity: 1
}

.form-control:-ms-placeholder-shown {
    color: #9aa2aa
}

.form-control::-moz-placeholder {
    color: #9aa2aa
}

.form-check .form-check-input {
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
    box-shadow: none !important
}

.form-check .form-check-label {
    cursor: pointer
}

.form-check-input[type=checkbox] {
    border-radius: .125rem
}

.caret:after {
    vertical-align: .255em;
    content: "";
    border: .3em solid #0000;
    border-top-color: currentColor;
    border-bottom: 0;
    margin-left: .255em;
    display: inline-block
}

.caret-right:after {
    vertical-align: .255em;
    content: "";
    border: .3em solid #0000;
    border-left-color: currentColor;
    border-right: 0;
    margin-left: .255em;
    display: inline-block
}

.img-fluid {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block
}

.img-container {
    margin: auto;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.img-container .img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative
}

.tbl-container {
    width: 100%;
    max-width: 100%;
    display: table
}

.tbl-cell {
    vertical-align: top;
    display: table-cell;
    position: relative
}

.ul-list {
    margin: 0;
    padding: 0
}

.ul-list li {
    list-style: none
}

.media-icon {
    z-index: 11;
    text-align: center;
    pointer-events: none;
    width: 42px;
    height: 42px;
    margin: auto;
    position: absolute;
    inset: 0
}

.media-icon svg {
    z-index: 1;
    width: 42px;
    height: 42px;
    display: inline-block;
    position: relative;
    background: #0000004d !important;
    border-radius: 100% !important
}

.media-icon-sm {
    width: 36px;
    height: 36px;
    line-height: 36px
}

.media-icon-sm svg {
    width: 36px;
    height: 36px
}

.media-icon-lg {
    width: 52px;
    height: 52px;
    line-height: 52px
}

.media-icon-lg svg {
    width: 52px;
    height: 52px
}

.breadcrumb {
    font-size: 13px
}

.breadcrumb a {
    color: #727272
}

.breadcrumb-item.active {
    color: #606060
}

.font-weight-normal {
    font-weight: 400 !important
}

.font-weight-600 {
    font-weight: 600 !important
}

.font-text {
    color: #333
}

.fsize-16 {
    font-size: 16px !important;
    line-height: 22px !important
}

.fsize-16 a {
    color: inherit;
    transition: color .3s
}

.fsize-16 a:hover {
    color: #2b3990 !important
}

.dark-mode .fsize-16 a:hover {
    color: #b8c5e0 !important
}

.tooltip {
    font-size: 12px
}

.show-on-page-load {
    visibility: hidden;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden
}

#header {
    background-color: #2b3990;
    margin-bottom: 20px
}

#nav-top {
    padding: .188rem 0
}

#nav-top .navbar-nav {
    margin: 0;
    padding: 0
}

#nav-top .navbar-nav .nav-item {
    margin-right: 20px;
    list-style: none
}

#nav-top .navbar-nav .nav-item .nav-link {
    color: #d1d1d1;
    margin-right: 0;
    font-size: .813rem
}

#nav-top .navbar-nav .nav-item svg {
    color: #d1d1d1
}

#nav-top .navbar-nav .nav-item .nav-link:hover,
#nav-top .navbar-nav .nav-item .nav-link:active,
#nav-top .navbar-nav .nav-item .nav-link:focus {
    color: #f5f5f5 !important
}

#nav-top .span-login-sep {
    color: #ccc;
    margin: 0 5px
}

#nav-top .dropdown-menu {
    z-index: 99999
}

#nav-top .profile-dropdown .dropdown-menu .icon {
    width: 26px;
    display: inline-block
}

.modal-add-post {
    z-index: 999999
}

.modal-add-post .modal-dialog {
    max-width: 900px
}

.modal-add-post .row {
    margin-left: -5px;
    margin-right: -5px
}

.modal-add-post .col-add-post {
    padding-left: 5px;
    padding-right: 5px
}

.modal-add-post .modal-header {
    text-align: center;
    padding: 30px 20px 10px;
    border: 0 !important
}

.modal-add-post .modal-body {
    padding: 20px 20px 30px
}

.modal-add-post .modal-content {
    border-radius: 4px
}

.modal-add-post .modal-header .modal-title {
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 24px
}

.modal-add-post .item {
    background-color: #fbfbfb;
    width: 100%;
    height: 215px;
    margin-bottom: 10px;
    padding: 20px;
    overflow: hidden
}

.modal-add-post .item-icon {
    background-color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 82px;
    height: 82px;
    margin: 0 auto;
    display: flex
}

.modal-add-post .item-icon svg {
    vertical-align: middle;
    width: 40px;
    height: 40px
}

.modal-add-post .item .title {
    text-align: center;
    margin: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #333 !important
}

.modal-add-post .item .desc {
    color: #a6a6a6;
    text-align: center;
    margin-bottom: 0;
    font-size: 13px
}

.modal-add-post .close {
    z-index: 10;
    font-size: 15px;
    position: absolute;
    top: 15px;
    right: 15px
}

.modal-add-post .item:hover {
    background-color: #f7f7f7
}

.nav-main {
    padding: 0
}

.nav-main .navbar-toggler {
    border: 0;
    padding: 0
}

.nav-main .navbar-brand {
    margin-right: 30px
}

.mobile-logo {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 58px;
    display: flex
}

.mobile-logo a {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex
}

.mobile-logo img {
    object-fit: contain;
    width: auto;
    max-width: 100%;
    max-height: 38px
}

.nav-main .navbar-nav .nav-link i {
    margin-left: 3px;
    font-size: 12px
}

.nav-main .navbar-nav .search-icon {
    cursor: pointer !important
}

.nav-main .navbar-nav .search-icon:hover,
.nav-main .navbar-nav .search-icon:active,
.nav-main .navbar-nav .search-icon:focus {
    color: #fff !important;
    opacity: 1 !important
}

.dropdown .dropdown-menu .dropdown-item i {
    margin-left: 3px;
    font-size: 12px
}

.nav-main .navbar-nav-svg {
    width: 1rem;
    height: 1rem
}

.bd-subnavbar {
    z-index: 1020;
    background-color: #fffffff2;
    position: relative;
    box-shadow: 0 .5rem 1rem #0000000d, inset 0 -1px #00000026
}

.bd-subnavbar .dropdown-menu {
    font-size: .875rem;
    box-shadow: 0 .5rem 1rem #0000000d
}

.bd-subnavbar .dropdown-item.current {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-position: right 1rem top .6rem;
    background-repeat: no-repeat;
    background-size: .75rem .75rem;
    font-weight: 600
}

.mega-menu-container {
    z-index: 9999;
    width: 100%;
    max-width: 100%;
    position: relative
}

.mega-menu {
    z-index: 9999;
    width: 100%
}

.mega-menu .menu-left {
    width: 19.7%;
    min-height: 250px;
    max-height: 315px
}

.mega-menu .menu-right {
    width: 80.3%;
    min-height: 285px;
    padding-top: 30px;
    padding-bottom: 30px
}

.mega-menu .menu-right .container-fluid {
    padding-left: 10px;
    padding-right: 10px
}

.mega-menu .menu-post-item {
    border-radius: 12px;
    padding: .5rem;
    transition: transform .2s
}

.mega-menu .menu-post-item:hover {
    background: #2b39900d;
    transform: translateY(-4px)
}

.dark-mode .mega-menu .menu-post-item:hover {
    background: #60a5fa1a
}

.mega-menu .menu-post-item .image {
    border-radius: 12px;
    width: 100%;
    height: 144px;
    margin-bottom: 10px;
    display: block;
    position: relative;
    overflow: hidden
}

.mega-menu .menu-post-item .image img {
    object-fit: cover;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    display: block
}

.mega-menu .menu-post-item:hover .image img {
    transform: scale(1.08)
}

.mega-menu .menu-post-item .title {
    color: #1f2937;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    max-height: 36px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    display: -webkit-box;
    overflow: hidden
}

.mega-menu .menu-post-item .title a {
    color: #1f2937;
    text-decoration: none;
    transition: color .2s
}

.mega-menu .menu-post-item:hover .title a {
    color: #2b3990
}

.mega-menu-programs-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    padding: 0;
    display: grid
}

.mega-menu-programs-left,
.mega-menu-programs-right {
    padding: 0 1.5rem
}

.mega-menu-divider {
    justify-content: center;
    align-items: center;
    width: 1px;
    padding: 0 1rem;
    display: flex
}

.mega-menu-divider-line {
    background: linear-gradient(#0000, #2b399026, #2b399026, #0000);
    width: 1px;
    height: 80%
}

.mega-menu-section-header {
    margin-bottom: 1.75rem
}

.mega-menu-section-badge {
    background: 0 0;
    border: none;
    align-items: center;
    gap: .75rem;
    padding: 0;
    display: flex;
    position: relative
}

.mega-menu-badge-content {
    flex-direction: column;
    flex: 1;
    gap: .375rem;
    display: flex
}

.mega-menu-badge-label {
    color: #2b3990;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2
}

.mega-menu-badge-programs .mega-menu-badge-label,
.mega-menu-badge-documentaries .mega-menu-badge-label {
    color: #2b3990
}

.mega-menu-badge-line {
    border-radius: 2px;
    width: 100%;
    height: 3px
}

.mega-menu-badge-programs .mega-menu-badge-line,
.mega-menu-badge-documentaries .mega-menu-badge-line {
    background: linear-gradient(90deg, #2b3990, #2b39904d)
}

.mega-menu-programs-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    display: grid
}

.mega-menu-program-card {
    background: 0 0;
    border-radius: 12px;
    text-decoration: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    display: block;
    overflow: visible
}

.mega-menu-program-card:hover {
    transform: translateY(-2px)
}

.mega-menu-program-image {
    aspect-ratio: 720/1066;
    background: #f3f4f6;
    border-radius: 12px;
    width: 100%;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px #0000001a
}

.mega-menu-program-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1)
}

.mega-menu-program-overlay {
    pointer-events: none;
    background: 0 0;
    border-radius: 12px;
    transition: background .3s;
    position: absolute;
    inset: 0
}

.mega-menu-program-card:hover .mega-menu-program-overlay {
    background: #00000026
}

.mega-menu-program-schedule {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    background: #000000b3;
    border-radius: 6px;
    align-items: center;
    gap: .375rem;
    padding: .375rem .625rem;
    font-size: .75rem;
    font-weight: 500;
    transition: all .3s;
    display: flex;
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    right: .75rem;
    transform: translateY(4px)
}

.mega-menu-program-schedule svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px
}

.mega-menu-program-card:hover .mega-menu-program-schedule {
    opacity: 1;
    transform: translateY(0)
}

.mega-menu-program-card:hover .mega-menu-program-image {
    box-shadow: 0 8px 24px #00000026
}

.mega-menu-program-card:hover .mega-menu-program-image img {
    transform: scale(1.03)
}

.mega-menu-program-title {
    color: #1f2937;
    text-align: left;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    background: 0 0;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 2.5rem;
    padding: .75rem .5rem 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    overflow: hidden
}

.mega-menu-program-card:hover .mega-menu-program-title {
    color: var(--vr-theme-color, #2b3990)
}

.mega-menu-view-all {
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
    transition: all .3s;
    display: flex
}

.mega-menu-view-all:hover {
    background: #2b39900d;
    border-radius: 8px
}

.mega-menu-view-all-content {
    color: #2b3990;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
}

.mega-menu-view-all-text {
    letter-spacing: .3px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    display: block;
    position: relative
}

.mega-menu-view-all-text:after {
    content: "→";
    margin-left: .5rem;
    transition: transform .3s;
    display: inline-block
}

.mega-menu-view-all:hover .mega-menu-view-all-text:after {
    transform: translate(4px)
}

.mega-menu-view-all-link {
    text-align: center;
    padding: 1rem .5rem .5rem
}

.mega-menu-view-all-link a {
    color: #2b3990;
    border-radius: 8px;
    align-items: center;
    gap: .25rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
    display: inline-flex
}

.mega-menu-view-all-link a:hover {
    color: #1e2a6e;
    background: #2b399014;
    transform: translate(4px)
}

.dark-mode .mega-menu-view-all-link a {
    color: #60a5fa
}

.dark-mode .mega-menu-view-all-link a:hover {
    color: #93c5fd;
    background: #60a5fa1a
}

.dark-mode .mega-menu-divider-line {
    background: linear-gradient(#0000, #60a5fa33, #60a5fa33, #0000)
}

.dark-mode .mega-menu-badge-label {
    color: #f3f4f6
}

.dark-mode .mega-menu-badge-programs .mega-menu-badge-label,
.dark-mode .mega-menu-badge-documentaries .mega-menu-badge-label {
    color: #60a5fa
}

.dark-mode .mega-menu-badge-programs .mega-menu-badge-line,
.dark-mode .mega-menu-badge-documentaries .mega-menu-badge-line {
    background: linear-gradient(90deg, #60a5fa, #60a5fa4d)
}

.dark-mode .mega-menu-program-title {
    color: #f3f4f6
}

.dark-mode .mega-menu-program-card:hover .mega-menu-program-title {
    color: #60a5fa
}

.dark-mode .mega-menu-program-image {
    background: #1e293b;
    box-shadow: 0 4px 12px #0000004d
}

.dark-mode .mega-menu-program-card:hover .mega-menu-program-image {
    box-shadow: 0 8px 24px #0006
}

.dark-mode .mega-menu-view-all:hover {
    background: #2b39901a
}

.dark-mode .mega-menu-view-all-content {
    color: #a5b4fc
}

@media (max-width:991px) {
    .mega-menu-programs-grid {
        grid-template-columns: 1fr;
        padding: 0
    }

    .mega-menu-programs-left,
    .mega-menu-programs-right {
        padding: 0 1rem
    }

    .mega-menu-programs-left {
        border-bottom: 1px solid #2b39901a;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem
    }

    .mega-menu-divider {
        display: none
    }

    .mega-menu-programs-items {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem
    }

    .mega-menu-view-all {
        padding: 1rem 0
    }
}

.dark-mode .mega-menu .menu-post-item .title,
.dark-mode .mega-menu .menu-post-item .title a {
    color: #f3f4f6
}

.dark-mode .mega-menu .menu-post-item:hover .title a {
    color: #60a5fa
}

.mega-menu-backdrop {
    -webkit-backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #0006;
    transition: opacity .3s, visibility .3s;
    position: fixed;
    inset: 0;
    -webkit-mask-image: linear-gradient(#0000 0 80px, #000 80px 100%);
    mask-image: linear-gradient(#0000 0 80px, #000 80px 100%)
}

.mega-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.dark-mode .mega-menu-backdrop {
    background: #0009
}

.mega-menu-footer {
    border-top: none;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    display: flex
}

.btn-view-all-posts {
    background: linear-gradient(135deg, #2b3990, #3d4fa8);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    min-width: 200px;
    padding: .75rem 2rem;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
    display: inline-flex;
    box-shadow: 0 2px 8px #2b399033;
    color: #fff !important
}

.btn-view-all-posts:hover {
    text-shadow: 0 1px 2px #0003;
    background: linear-gradient(135deg, #3d4fa8, #4f63c0);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #2b39904d;
    color: #fff !important
}

.btn-view-all-posts:hover span {
    text-shadow: 0 1px 2px #0003;
    color: #fff !important
}

.btn-view-all-posts:hover svg {
    filter: drop-shadow(0 1px 1px #0003)
}

.btn-view-all-posts svg {
    transition: transform .3s
}

.btn-view-all-posts:hover svg {
    transform: translate(4px)
}

.dark-mode .btn-view-all-posts {
    background: linear-gradient(135deg, #3d4fa8, #4f63c0);
    box-shadow: 0 2px 8px #60a5fa33
}

.dark-mode .btn-view-all-posts:hover {
    text-shadow: 0 1px 3px #0000004d;
    background: linear-gradient(135deg, #4f63c0, #60a5fa);
    box-shadow: 0 4px 12px #60a5fa4d;
    color: #fff !important
}

.dark-mode .btn-view-all-posts:hover span {
    text-shadow: 0 1px 3px #0000004d;
    color: #fff !important
}

.dark-mode .btn-view-all-posts:hover svg {
    filter: drop-shadow(0 1px 2px #0000004d)
}

.mega-menu-programs {
    padding: 1.5rem
}

.mega-menu-programs .container-xl {
    padding: 0
}

.mega-menu-programs .row {
    margin: 0
}

.mega-menu-programs .menu-post-item {
    margin-bottom: 0;
    padding: .5rem
}

.mega-menu .menu-category-items {
    display: none
}

.mega-menu .menu-right .active {
    display: block !important
}

.mega-menu .small-post-meta a,
.mega-menu .small-post-meta span {
    font-size: 11px
}

.dropdown .dropdown-menu .dropdown-item {
    align-items: center;
    display: flex
}

.nav-dropdown-menu>li {
    position: relative
}

.nav-dropdown-menu .dropdown-sub {
    display: none;
    position: absolute;
    top: 0;
    left: 100%
}

.nav-dropdown-menu .caret-right {
    position: absolute;
    top: 10px;
    right: 10px
}

.nav-main .nav-dropdown-menu .dropdown-sub,
.nav-main ul ul {
    display: none
}

.btn-switch-mode {
    align-items: center;
    min-width: 30px;
    padding: 0 6px;
    display: flex;
    box-shadow: none !important;
    background-color: #0000 !important;
    border: 0 !important;
    margin: 0 !important
}

#nav-top .btn-switch-mode .dark-mode-icon {
    width: 14px;
    height: 14px
}

.search-form {
    -webkit-backdrop-filter: blur(16px);
    z-index: 999999;
    background-color: #fffffff2;
    border: 1px solid #ffffff4d;
    border-top: none;
    border-radius: 0 0 16px 16px;
    width: 380px;
    padding: 10px;
    display: none;
    position: absolute;
    top: 41px;
    right: -10px;
    box-shadow: 0 8px 32px #00000026
}

.search-form .form-input {
    box-shadow: none;
    color: #1f2937;
    background-color: #fff;
    height: 44px;
    padding: 10px 60px 10px 20px;
    font-size: .875rem;
    line-height: 20px;
    transition: all .3s;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important
}

.search-form .form-input:focus {
    outline: none;
    border-color: #2b3990 !important;
    box-shadow: 0 0 0 3px #2b39901a !important
}

.search-form button {
    box-shadow: none;
    text-align: center;
    width: 44px;
    height: 44px;
    padding: 5px;
    font-size: 16px;
    line-height: 20px;
    transition: all .3s;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #2b3990, #3d4fa8) !important;
    border: 0 !important;
    border-radius: 12px !important
}

.search-form button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px #2b39904d !important
}

.search-form.open {
    display: block !important
}

.profile-dropdown .dropdown-menu {
    min-width: 11rem !important;
    top: 4px !important;
    left: -40px !important
}

.profile-dropdown>a {
    padding: 0 !important
}

.profile-dropdown>a img {
    border: 1px solid #888;
    border-radius: 50%;
    width: 28px;
    height: 28px
}

.dropdown-languages .dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    left: -34px !important
}

.header-mobile-container {
    width: 100%;
    display: none;
    position: relative
}

.header-mobile {
    background-color: #2b3990;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    display: flex
}

.header-mobile-container .header-mobile>.d-flex {
    align-items: center
}

.header-mobile .menu-button {
    color: #fff;
    cursor: pointer;
    background-color: #0000;
    border: 0;
    padding: 5px
}

.mobile-search-form {
    background-color: #2b3990;
    width: 100%;
    padding: 10px 15px;
    display: block
}

.mobile-search-form input {
    width: 100%;
    padding: 8px 12px
}

.mobile-search-form .btn {
    display: none
}

.nav-mobile {
    z-index: 999999;
    background-color: #2b3990;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto
}

.nav-mobile .nav-mobile-inner {
    width: 100%;
    height: 100%;
    padding: 80px 0 30px;
    display: block
}

.nav-mobile-open {
    overflow: hidden
}

.nav-mobile-open .nav-mobile-inner {
    display: block
}

.overlay-bg {
    z-index: 999998;
    background-color: #00000080;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0
}

.nav-mobile .nav-item {
    width: 100%;
    display: block
}

.nav-mobile .nav-item:last-child {
    border-bottom: 0
}

.nav-mobile .nav-item .nav-item {
    padding-left: 20px
}

.nav-mobile .nav-item .nav-link {
    color: #fff;
    padding: 12px 20px;
    font-weight: 600;
    display: block
}

.nav-mobile .nav-item .nav-link i {
    margin-right: 8px
}

.nav-mobile .nav-item .nav-link:after {
    content: ""
}

.nav-mobile .dropdown .menu-sub-items {
    background-color: #0003;
    padding-left: 20px;
    display: none
}

.nav-mobile .dropdown .menu-sub-items .nav-link {
    padding: 10px 20px;
    font-size: 14px
}

.nav-link-mobile-profile {
    align-items: center;
    padding: 12px 20px;
    display: flex
}

.nav-link-mobile-profile img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px
}

.nav-mobile .profile-dropdown-mobile {
    border-bottom: 1px solid #ffffff1a
}

.nav-mobile .profile-dropdown-mobile .menu-sub-items {
    background-color: #0003;
    padding-left: 0;
    display: none
}

.nav-mobile .profile-dropdown-mobile .menu-sub-items .dropdown-item {
    color: #fff;
    border-bottom: 1px solid #ffffff1a;
    padding: 10px 20px;
    display: block
}

.profile-dropdown-mobile .dropdown-item:hover,
.profile-dropdown-mobile .dropdown-item:active,
.profile-dropdown-mobile .dropdown-item:focus {
    background-color: #ffffff1a
}

.nav-mobile .profile-dropdown-mobile .menu-sub-items .dropdown-item .icon {
    width: 20px;
    margin-right: 10px;
    display: inline-block
}

.mobile-language-dropdown .dropdown-menu {
    background-color: #0003;
    border: 0;
    width: 100%;
    display: block !important;
    position: static !important
}

.btn-switch-mode-mobile {
    color: #fff;
    text-align: left;
    background-color: #0000;
    border: 0;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    display: flex
}

.form-input,
.form-textarea,
.form-control {
    background: #fff !important;
    border: 2px solid #e2e8f0 !important
}

.dark-mode .settings-tabs,
.dark-mode .form-input,
.dark-mode .form-textarea,
.dark-mode .form-control {
    background: #1e293b !important;
    border-color: #334155 !important
}

.edit-profile-cover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border: 3px dashed #cbd5e1 !important;
    border-radius: 24px !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: 280px !important;
    margin-bottom: 110px !important;
    padding-bottom: 0 !important;
    display: flex !important;
    position: relative !important
}

.edit-profile-cover .edit-avatar {
    width: 180px !important;
    margin: 0 auto !important;
    display: block !important;
    position: absolute !important;
    bottom: -70px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important
}

.profile-header {
    border-radius: 0 0 24px 24px !important;
    width: 100% !important;
    height: 360px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px #0000001f !important
}

.profile-header .profile-cover-image {
    filter: brightness(.9) !important;
    background-position: 50% !important;
    background-size: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important
}

.profile-header .profile-info-container {
    background: linear-gradient(#0000 0%, #000000b3 100%) !important;
    width: 100% !important;
    padding: 40px 0 20px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important
}

.profile-header .profile-info .profile-image {
    background: #fff !important;
    border-radius: 50% !important;
    width: 152px !important;
    height: 152px !important;
    padding: 4px !important;
    position: relative !important;
    box-shadow: 0 8px 24px #00000026 !important
}

.profile-header .profile-info .profile-image img {
    object-fit: cover !important;
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important
}

.profile-header .profile-info .profile-username {
    flex: 1 !important;
    padding: 0 0 8px !important
}

.profile-header .profile-info .profile-username .username {
    color: #fff !important;
    text-shadow: 0 2px 8px #0000004d !important;
    margin: 0 0 8px !important;
    font-size: 32px !important;
    font-weight: 700 !important
}

.profile-header .profile-last-seen {
    color: #ffffffe6 !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    display: flex !important
}

.profile-header .profile-last-seen svg {
    color: #888 !important;
    width: 10px !important;
    height: 10px !important
}

.profile-header .btn-follow {
    margin-top: 0 !important
}

.profile-header:not(:has(.profile-cover-image[style*=background-image])) {
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    height: 200px !important
}

.profile-header:not(:has(.profile-cover-image[style*=background-image])) .profile-info-container {
    background: 0 0 !important
}

.profile-header:not(:has(.profile-cover-image[style*=background-image])) .profile-username .username {
    color: #fff !important
}

.profile-header:not(:has(.profile-cover-image[style*=background-image])) .profile-last-seen {
    color: #ffffffe6 !important
}

@media (max-width:1023px) {
    .profile-header {
        height: 320px !important
    }

    .profile-header .profile-info {
        text-align: center !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important
    }

    .profile-header .profile-info .profile-image {
        width: 120px !important;
        height: 120px !important
    }

    .profile-header .profile-username {
        padding-bottom: 0 !important
    }

    .profile-header .profile-username .username {
        font-size: 28px !important
    }
}

@media (max-width:767px) {
    .profile-header {
        border-radius: 0 0 16px 16px !important;
        height: 280px !important
    }

    .profile-header .profile-info .profile-image {
        width: 100px !important;
        height: 100px !important
    }

    .profile-header .profile-username .username {
        font-size: 24px !important
    }

    .profile-header .profile-last-seen {
        font-size: 13px !important
    }

    .edit-profile-cover {
        height: 220px !important;
        margin-bottom: 90px !important
    }

    .edit-profile-cover .edit-avatar {
        width: 140px !important;
        bottom: -55px !important
    }

    .edit-profile-cover .edit-avatar img {
        width: 140px !important;
        height: 140px !important
    }
}

.container-profile {
    margin-top: 32px !important
}

.container-profile .row {
    flex-wrap: wrap !important;
    gap: 24px !important;
    display: flex !important
}

.container-profile .row>.col-12.col-lg-4,
.container-profile .row>.col-12.col-lg-8 {
    flex: none !important;
    width: 100% !important
}

@media (min-width:1024px) {
    .container-profile .row>.col-12.col-lg-4 {
        width: calc(33.3333% - 16px) !important
    }

    .container-profile .row>.col-12.col-lg-8 {
        width: calc(66.6667% - 8px) !important
    }
}

.container-profile .row>.col-12.col-lg-8>.row {
    flex-wrap: wrap !important;
    gap: 16px !important;
    display: flex !important
}

.container-profile .row>.col-12.col-lg-8>.row>.col-12.col-md-6 {
    flex: none !important;
    width: 100% !important
}

@media (min-width:768px) {
    .container-profile .row>.col-12.col-lg-8>.row>.col-12.col-md-6 {
        width: calc(50% - 8px) !important
    }
}

.dark-mode .profile-header .profile-info .profile-image {
    background: #1e293b !important;
    border: 3px solid #1e293b !important
}

.edit-profile-cover .edit-avatar img {
    width: 180px !important;
    height: 180px !important;
    display: block !important
}

.dark-mode .form-input,
.dark-mode .form-textarea,
.dark-mode .form-control,
.dark-mode input.form-control,
.dark-mode textarea.form-control,
.dark-mode select.form-control {
    color: #f1f5f9 !important;
    background: #0f172a !important;
    border-color: #1e293b !important
}

.dark-mode .form-input:focus,
.dark-mode .form-textarea:focus,
.dark-mode .form-control:focus {
    background: #0f172a !important;
    border-color: #2b3990 !important
}

.dark-mode .settings-tabs {
    background: #0f172a !important;
    border-color: #1e293b !important
}

.profile-header {
    border-radius: 0 0 24px 24px !important;
    width: 100% !important;
    height: 360px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px #0000001f !important
}

.profile-header .profile-cover-image {
    background-color: #1e293b !important;
    background-position: 50% !important;
    background-size: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important
}

.profile-header .profile-info-container {
    z-index: 2 !important;
    width: 100% !important;
    padding: 0 !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important
}

.profile-header .profile-info-container .container-xl {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 15px !important
}

.profile-header .profile-info {
    align-items: flex-end !important;
    gap: 24px !important;
    padding: 0 0 20px !important;
    display: flex !important
}

.profile-header .tbl-cell {
    float: none !important;
    vertical-align: bottom !important;
    display: block !important
}

.profile-header .profile-info .cell-left {
    flex-shrink: 0 !important;
    width: 152px !important;
    height: auto !important
}

.profile-header .profile-info .profile-image {
    background: #fff !important;
    border-radius: 50% !important;
    width: 152px !important;
    height: 152px !important;
    margin: 0 !important;
    padding: 4px !important;
    position: relative !important;
    box-shadow: 0 8px 24px #0003 !important
}

.profile-header .profile-info .profile-username {
    flex: 1 !important;
    width: auto !important;
    padding: 0 0 8px !important;
    display: block !important
}

.profile-header .profile-username form {
    margin-top: 12px !important
}

.container-profile {
    max-width: 1280px !important;
    margin-top: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important
}

.container-profile>.row {
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin: 0 !important;
    display: flex !important
}

.container-profile>.row>.col-12 {
    flex: none !important;
    width: 100% !important;
    padding: 0 !important
}

@media (min-width:1024px) {
    .container-profile>.row>.col-12.col-lg-4 {
        width: calc(33.3333% - 16px) !important
    }

    .container-profile>.row>.col-12.col-lg-8 {
        width: calc(66.6667% - 8px) !important
    }
}

.container-profile .col-lg-8>.row {
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
    display: flex !important
}

.container-profile .col-lg-8>.row>.col-12 {
    flex: none !important;
    width: 100% !important;
    padding: 0 !important
}

@media (min-width:768px) {
    .container-profile .col-lg-8>.row>.col-12.col-md-6 {
        width: calc(50% - 8px) !important
    }
}

.edit-profile-cover .edit-avatar {
    z-index: 10 !important;
    width: 180px !important;
    height: 180px !important;
    display: block !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translate(-50%) !important
}

.edit-profile-cover .edit-avatar>a {
    width: 180px !important;
    height: 180px !important;
    display: block !important;
    position: relative !important
}

.edit-profile-cover .edit-avatar img {
    object-fit: cover !important;
    border: 6px solid #fff !important;
    border-radius: 50% !important;
    width: 180px !important;
    height: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important
}

.edit-profile-cover .edit-avatar .btn-file-upload {
    z-index: 20 !important;
    width: 52px !important;
    height: 52px !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important
}

.edit-profile-cover {
    height: 320px !important;
    margin-bottom: 80px !important
}

@media (max-width:767px) {
    .edit-profile-cover {
        height: 260px !important;
        margin-bottom: 70px !important
    }

    .edit-profile-cover .edit-avatar {
        width: 140px !important;
        height: 140px !important;
        bottom: 16px !important
    }

    .edit-profile-cover .edit-avatar>a {
        width: 140px !important;
        height: 140px !important
    }

    .edit-profile-cover .edit-avatar img {
        border-width: 5px !important;
        width: 140px !important;
        height: 140px !important
    }
}

.profile-header .tbl-container.profile-info {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important
}

.profile-header .tbl-container.profile-info:after {
    content: "" !important;
    clear: both !important;
    display: table !important
}

.profile-header .tbl-cell {
    vertical-align: bottom !important;
    float: left !important;
    display: inline-block !important
}

.profile-header .tbl-cell.cell-left {
    width: 152px !important;
    height: auto !important;
    margin-right: 24px !important
}

.profile-header .tbl-cell.profile-username {
    width: calc(100% - 176px) !important;
    padding: 0 0 8px !important
}

.profile-header .profile-info-container {
    background: linear-gradient(#0000 0%, #000000bf 100%) !important
}

@media (max-width:767px) {
    .profile-header {
        height: 280px !important
    }

    .profile-header .tbl-cell {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        display: block !important
    }

    .profile-header .tbl-cell.cell-left {
        width: 100px !important;
        margin: 0 auto 16px !important
    }

    .profile-header .profile-info .profile-image {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto !important
    }

    .profile-header .profile-info .profile-image img {
        width: 92px !important;
        height: 92px !important
    }

    .profile-header .tbl-cell.profile-username {
        width: 100% !important
    }

    .profile-header .profile-username .username {
        font-size: 24px !important
    }
}

.dark-mode .modern-radio-group {
    background: #0f172a !important;
    border: 2px solid #1e293b !important
}

.profile-header .profile-info-container {
    z-index: 2 !important;
    background: linear-gradient(#0000 0%, #000c 100%) !important;
    width: 100% !important;
    padding: 30px 0 24px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important
}

.profile-header .profile-info-container .container-xl {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 15px !important
}

.profile-header .tbl-container.profile-info {
    align-items: flex-end !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important
}

.profile-header .tbl-cell {
    float: none !important;
    display: block !important;
    position: static !important
}

.profile-header .tbl-cell.profile-username {
    flex: 1 !important;
    width: auto !important;
    padding: 0 0 4px !important
}

.dark-mode .sidebar-widget {
    background: 0 0 !important;
    border: none !important
}

@media (max-width:767px) {
    .profile-header .tbl-container.profile-info {
        text-align: center !important;
        flex-direction: column !important;
        align-items: center !important
    }

    .profile-header .tbl-cell.cell-left {
        width: 100px !important;
        margin-bottom: 12px !important
    }

    .profile-header .tbl-cell.profile-username {
        width: 100% !important;
        padding-bottom: 0 !important
    }
}

.section-profile .profile-header,
section.section-profile .profile-header,
.profile-header {
    visibility: visible !important;
    opacity: 1 !important;
    background: #1e293b !important;
    border-radius: 0 0 24px 24px !important;
    width: 100% !important;
    height: 360px !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px #0000001f !important
}

.profile-header .profile-cover-image {
    visibility: visible !important;
    z-index: 0 !important;
    background-color: #1e293b !important;
    background-position: 50% !important;
    background-size: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important
}

.profile-header .profile-info-container {
    visibility: visible !important;
    z-index: 2 !important;
    background: linear-gradient(#0000 0%, #000000d9 100%) !important;
    width: 100% !important;
    padding: 40px 0 24px !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important
}

.profile-header .profile-info-container .container-xl {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    display: block !important
}

.profile-header .tbl-container {
    width: 100% !important;
    display: block !important
}

.profile-header .tbl-container.profile-info {
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 24px !important;
    display: flex !important
}

.profile-header .tbl-cell {
    visibility: visible !important;
    display: block !important
}

.profile-header .tbl-cell.cell-left {
    flex: 0 0 152px !important;
    width: 152px !important;
    height: auto !important
}

.profile-header .tbl-cell.profile-username {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 0 4px !important
}

.profile-header .profile-info .profile-image {
    visibility: visible !important;
    background: #fff !important;
    border-radius: 50% !important;
    width: 152px !important;
    height: 152px !important;
    margin: 0 !important;
    padding: 4px !important;
    display: block !important;
    position: relative !important;
    box-shadow: 0 8px 24px #00000040 !important
}

.profile-header .profile-info .profile-image img {
    object-fit: cover !important;
    border-radius: 50% !important;
    width: 144px !important;
    height: 144px !important;
    display: block !important
}

.profile-header .profile-username .username {
    visibility: visible !important;
    color: #fff !important;
    text-shadow: 0 2px 8px #0006 !important;
    margin: 0 0 10px !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: block !important
}

.profile-header .profile-last-seen {
    visibility: visible !important;
    color: #fffffff2 !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
    font-size: 14px !important;
    display: flex !important
}

.profile-header .profile-last-seen svg {
    color: #888 !important;
    flex-shrink: 0 !important;
    width: 10px !important;
    height: 10px !important
}

.profile-header .profile-last-seen.online svg {
    color: #10b981 !important
}

.profile-header .btn-follow {
    visibility: visible !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .3s !important;
    display: inline-flex !important;
    box-shadow: 0 4px 12px #2b39904d !important
}

.profile-header .btn-follow:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px #2b399066 !important
}

.profile-header .btn-follow svg {
    width: 16px !important;
    height: 16px !important
}

.dark-mode .profile-header .profile-cover-image {
    background-color: #0f172a !important
}

.dark-mode .profile-header .profile-info .profile-image {
    background: #1e293b !important;
    box-shadow: 0 8px 24px #0009 !important
}

.profile-header {
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) 50%/cover !important;
    border-radius: 0 0 24px 24px !important;
    width: 100% !important;
    height: 360px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px #0000001f !important
}

.profile-header-overlay {
    z-index: 1 !important;
    background: linear-gradient(#0000 0%, #000c 100%) !important;
    position: absolute !important;
    inset: 0 !important
}

.profile-header .profile-info-container {
    z-index: 2 !important;
    width: 100% !important;
    padding: 40px 0 24px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important
}

.profile-info-wrapper {
    align-items: flex-end !important;
    gap: 24px !important;
    display: flex !important
}

.profile-avatar-section {
    flex: none !important
}

.profile-avatar-section .profile-image {
    background: #fff !important;
    border-radius: 50% !important;
    width: 152px !important;
    height: 152px !important;
    padding: 4px !important;
    position: relative !important;
    box-shadow: 0 8px 24px #00000040 !important
}

.profile-avatar-section .profile-image img {
    object-fit: cover !important;
    border-radius: 50% !important;
    width: 144px !important;
    height: 144px !important;
    display: block !important
}

.profile-content-section {
    flex: 1 !important;
    padding-bottom: 4px !important
}

.profile-content-section .username {
    color: #fff !important;
    text-shadow: 0 2px 8px #0006 !important;
    margin: 0 0 10px !important;
    font-size: 32px !important;
    font-weight: 700 !important
}

.profile-content-section .profile-last-seen {
    color: #fffffff2 !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    display: flex !important
}

.profile-content-section .profile-last-seen svg {
    color: #888 !important;
    width: 10px !important;
    height: 10px !important
}

.profile-content-section .profile-last-seen.online svg {
    color: #10b981 !important
}

.edit-profile-cover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) 50%/cover !important;
    border: 3px dashed #cbd5e1 !important;
    border-radius: 24px !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: 320px !important;
    margin-bottom: 90px !important;
    display: flex !important;
    position: relative !important;
    overflow: hidden !important
}

.edit-profile-cover:not(.edit-cover-no-image) {
    border-style: solid !important;
    border-color: #0000 !important
}

.edit-profile-cover .btn-edit-cover {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
    z-index: 5 !important;
    background: #fffffff2 !important;
    border: 2px solid #2b399033 !important;
    border-radius: 16px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    transition: all .3s !important;
    display: flex !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    box-shadow: 0 8px 24px #0000001f !important
}

.edit-profile-cover .btn-edit-cover:hover {
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border-color: #2b3990 !important;
    transform: translateY(-2px)scale(1.05) !important;
    box-shadow: 0 12px 32px #2b399066 !important
}

.edit-profile-cover .btn-edit-cover svg {
    color: #2b3990 !important;
    width: 26px !important;
    height: 26px !important;
    transition: color .3s !important
}

.edit-profile-cover .btn-edit-cover:hover svg {
    color: #fff !important
}

.edit-profile-cover .edit-avatar img {
    object-fit: cover !important;
    border: 6px solid #fff !important;
    border-radius: 50% !important;
    width: 180px !important;
    height: 180px !important;
    transition: all .3s !important;
    display: block !important;
    box-shadow: 0 12px 32px #00000026 !important
}

.edit-profile-cover .edit-avatar img:hover {
    transform: scale(1.05) !important
}

.dark-mode .edit-profile-cover {
    background: linear-gradient(135deg, #1e293bcc 0%, #0f172a99 100%) !important;
    border-color: #334155cc !important
}

.dark-mode .edit-profile-cover.edit-cover-no-image {
    background: linear-gradient(135deg, #2b399026 0%, #1f276014 100%) !important
}

.dark-mode .edit-profile-cover .btn-edit-cover {
    background: #1e293bf2 !important;
    border-color: #2b399066 !important
}

.dark-mode .edit-profile-cover .btn-edit-cover svg {
    color: #94a3b8 !important
}

.dark-mode .edit-profile-cover .btn-edit-cover:hover svg {
    color: #fff !important
}

.dark-mode .profile-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important
}

.dark-mode .profile-avatar-section .profile-image {
    background: #0f172a !important;
    box-shadow: 0 8px 24px #0009 !important
}

#edit_profile_cover {
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important
}

.edit-profile-cover .edit-avatar {
    z-index: 10 !important;
    width: 180px !important;
    height: 180px !important;
    position: absolute !important;
    bottom: -70px !important;
    left: 50% !important;
    transform: translate(-50%) !important
}

.edit-profile-cover .edit-avatar img {
    object-fit: cover !important;
    border: 6px solid #fff !important;
    border-radius: 50% !important;
    width: 180px !important;
    height: 180px !important;
    display: block !important;
    box-shadow: 0 12px 32px #00000026 !important
}

.edit-profile-cover .btn-avatar-upload {
    cursor: pointer !important;
    z-index: 20 !important;
    background: linear-gradient(135deg, #2b3990 0%, #1f2760 100%) !important;
    border: 4px solid #fff !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    transition: all .3s !important;
    display: flex !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    box-shadow: 0 6px 20px #2b399066 !important
}

.edit-profile-cover .btn-avatar-upload:hover {
    transform: scale(1.15)rotate(15deg) !important;
    box-shadow: 0 8px 28px #2b399080 !important
}

.edit-profile-cover .btn-avatar-upload svg {
    color: #fff !important;
    width: 22px !important;
    height: 22px !important
}

.profile-header,
#edit_profile_cover[style*=background-image] {
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important
}

.dark-mode .edit-profile-cover .edit-avatar img {
    border-color: #1e293b !important;
    box-shadow: 0 12px 32px #0009 !important
}

.dark-mode .edit-profile-cover .btn-avatar-upload {
    border-color: #1e293b !important;
    box-shadow: 0 6px 20px #2b399099 !important
}

@media (max-width:767px) {
    .edit-profile-cover .edit-avatar {
        width: 140px !important;
        height: 140px !important;
        bottom: -60px !important
    }

    .edit-profile-cover .edit-avatar img {
        border-width: 5px !important;
        width: 140px !important;
        height: 140px !important
    }

    .edit-profile-cover .btn-avatar-upload {
        width: 44px !important;
        height: 44px !important;
        bottom: 5px !important;
        right: 5px !important
    }

    .edit-profile-cover .btn-avatar-upload svg {
        width: 18px !important;
        height: 18px !important
    }
}

.contact-wrapper {
    margin-top: 32px
}

.contact-content-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    display: grid
}

.contact-form-card,
.contact-info-card {
    background: #fffffffa;
    border: 1px solid #0f172a14;
    border-radius: 24px;
    grid-column: span 12;
    padding: 32px;
    box-shadow: 0 20px 48px #0f172a1f
}

@media (min-width:992px) {
    .contact-form-card {
        grid-column: span 7
    }

    .contact-info-card {
        grid-column: span 5
    }
}

.contact-card-head {
    margin-bottom: 24px
}

.contact-card-title {
    color: #0f172a;
    margin: 0;
    font-size: 24px;
    font-weight: 700
}

.contact-card-subtitle {
    color: #0f172aa6;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6
}

.contact-card-body {
    flex-direction: column;
    gap: 24px;
    display: flex
}

.contact-form .form-row {
    flex-wrap: wrap;
    gap: 16px;
    display: flex
}

.contact-form .form-field {
    flex-direction: column;
    flex: 100%;
    gap: 8px;
    margin-top: 12px;
    display: flex
}

@media (min-width:640px) {
    .contact-form .form-row .form-field {
        flex: calc(50% - 8px)
    }
}

.contact-form .form-label {
    color: #0f172aad;
    font-size: 14px;
    font-weight: 600
}

.contact-form .form-input {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    transition: border-color .2s
}

.contact-form .form-input:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px #2563eb1a
}

.contact-form .form-checkbox {
    background: #f8fafce6;
    border: 1px solid #94a3b84d;
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    display: flex
}

.contact-form .form-check-input {
    appearance: none;
    cursor: pointer;
    border: 2px solid #94a3b899;
    border-radius: 6px;
    width: 18px;
    height: 18px;
    transition: all .2s;
    position: relative
}

.contact-form .form-check-input:checked {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8
}

.contact-form .form-check-input:checked:after {
    content: "✔";
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%)
}

.contact-form .form-check-label {
    color: #0f172ab8;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    display: flex
}

.honeypot {
    display: none
}

@media (max-width:640px) {
    .contact-form .form-footer {
        justify-content: center
    }
}

.contact-info-list {
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.contact-info-item {
    background: #f8fafcf5;
    border: 1px solid #0f172a14;
    border-radius: 22px;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    box-shadow: 0 14px 32px #0f172a1a
}

.contact-info-item:hover {
    border-color: #2563eb2e;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px #0f172a24
}

.contact-icon {
    color: #1d4ed8;
    background: radial-gradient(circle at 30% 30%, #60a5fa40, #2563eb1f);
    border: 1px solid #2563eb47;
    border-radius: 18px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    display: flex;
    position: relative;
    box-shadow: 0 14px 28px #2563eb2e
}

.contact-icon svg {
    filter: drop-shadow(0 2px 4px #2563eb33);
    width: 22px;
    height: 22px
}

.contact-info-content h4 {
    color: #0f172a;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600
}

.contact-info-content p {
    color: #0f172aa8;
    margin: 0;
    font-size: 14px
}

.contact-map-section {
    padding: 24px 0 0
}

.contact-map-card {
    border: 1px solid #0f172a14;
    border-radius: 24px;
    margin-top: 16px;
    overflow: hidden;
    box-shadow: 0 20px 48px #0f172a26
}

.contact-map-card iframe {
    width: 100%;
    height: 420px
}

@media (max-width:767px) {

    .contact-form-card,
    .contact-info-card {
        padding: 24px
    }

    .contact-card-title {
        font-size: 20px
    }

    .contact-form .form-row {
        gap: 12px
    }

    .contact-info-item {
        padding: 16px
    }
}

.dark-mode .contact-form-card,
.dark-mode .contact-info-card,
.dark-mode .contact-info-item,
.dark-mode .contact-map-card {
    background: #0f172aeb;
    border-color: #94a3b824;
    box-shadow: 0 20px 48px #02061773
}

.dark-mode .contact-card-title,
.dark-mode .contact-info-content h4,
.dark-mode .contact-card-subtitle,
.dark-mode .contact-info-content p {
    color: #f8fafce6
}

.dark-mode .contact-icon {
    color: #60a5fa;
    background: radial-gradient(circle at 28% 28%, #60a5fa59, #2563eb2e);
    border-color: #3b82f673;
    box-shadow: 0 16px 34px #0e74f447
}

.dark-mode .contact-form .form-label {
    color: #e2e8f0b8
}

.dark-mode .contact-form .form-input {
    color: #f8fafc;
    background: #0f172ae6;
    border-color: #94a3b833
}

.dark-mode .contact-form .form-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #60a5fa1f
}

.dark-mode .contact-form .form-checkbox {
    background: #0f172ab8;
    border-color: #60a5fa2e;
    box-shadow: 0 12px 28px #02061773
}

.dark-mode .contact-form .form-check-input {
    background: #0f172aa6;
    border-color: #94a3b880
}

.dark-mode .contact-form .form-check-input:checked {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #2563eb40
}

.dark-mode .contact-form .form-check-label {
    color: #e2e8f0b8
}

.contact-info-list.primary .contact-info-item {
    background: linear-gradient(135deg, #2563eb1f, #2563eb0a);
    border: 1px solid #2563eb2e
}

.contact-info-list.secondary .contact-info-item {
    background: #f8fafce6;
    border: 1px solid #94a3b838
}

.contact-icon {
    color: #2563eb;
    background: linear-gradient(135deg, #2563eb33, #2563eb0d);
    border: 1px solid #2563eb40;
    border-radius: 14px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    display: flex
}

.contact-icon svg {
    width: 20px;
    height: 20px
}

.contact-info-heading {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0f172a8c;
    margin: 12px 0;
    font-size: 14px;
    font-weight: 600
}

.contact-info-divider {
    width: 100%;
    height: 1px
}

.contact-form.was-validated .form-input:invalid,
.was-validated .contact-form .form-input:invalid,
.contact-form .form-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px #ef44442e
}

.contact-form.was-validated .form-input:valid,
.was-validated .contact-form .form-input:valid,
.contact-form .form-input.is-valid {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px #22c55e2e
}

.contact-form.was-validated .form-check-input:invalid,
.was-validated .contact-form .form-check-input:invalid,
.contact-form .form-check-input.is-invalid {
    background: #f871712e;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px #ef44442e
}

.contact-form.was-validated .form-check-input:invalid+.form-check-label,
.was-validated .contact-form .form-check-input:invalid+.form-check-label,
.contact-form .form-check-input.is-invalid+.form-check-label {
    color: #b91c1c
}

.alert-message {
    border-radius: 22px;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
    padding: 16px 18px;
    font-size: 14px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 24px #0f172a14;
    color: #0f172ad1 !important;
    background: #f8fafcf2 !important;
    border: 1px solid #0f172a14 !important
}

.alert-message svg {
    width: 20px;
    height: 20px
}

.alert-message.alert-success {
    color: #166534 !important;
    background: linear-gradient(135deg, #f0fdf4f2, #dcfce7e0) !important;
    border-color: #22c55e2e !important
}

.alert-message.alert-danger {
    color: #7f1d1d !important;
    background: linear-gradient(135deg, #fef2f2f2, #fee2e2e0) !important;
    border-color: #ef444433 !important
}

.dark-mode .alert-message {
    box-shadow: 0 10px 26px #02061766;
    color: #e2e8f0eb !important;
    background: #0f172ae6 !important;
    border-color: #94a3b838 !important
}

.dark-mode .alert-message.alert-success {
    color: #d1fae5 !important;
    background: linear-gradient(135deg, #0c4a6ea6, #0f766e8c) !important;
    border-color: #22c55e52 !important
}

.dark-mode .alert-message.alert-danger {
    color: #fecaca !important;
    background: linear-gradient(135deg, #4338ca66, #7f1d1d73) !important;
    border-color: #f8717147 !important
}

.dark-mode .rc-anchor-dark.rc-anchor-normal,
.dark-mode .rc-anchor-dark.rc-anchor-compact {
    background-color: #0e162a !important;
    border-color: #1e293b !important
}

.icon-nsosyal {
    filter: drop-shadow(0 2px 5px #0003);
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAyNi40MiI+CiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUuMDYsMGg0LjE4djI2LjQySDBWMGg1LjA2Wk0yMC4zNSwwbDkuMjIsMjYuNDJoLTUuODVjLTIuMDMsMC0zLjg0LTEuMjgtNC41MS0zLjJMMTEuMTEsMGg5LjI0Wk0zNiwyMS45YzAsMi40OS0yLjAyLDQuNTItNC41Miw0LjUybC00LjQ2LTEyLjc0Yy0uMTctLjQ5LS4yNi0xLjAxLS4yNi0xLjUzVjBoOS4yNHYyMS45WiIvPgo8L3N2Zz4=);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    color: #0000 !important;
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    font-size: 0 !important;
    display: block !important
}

.icon-nsosyal:before {
    content: "";
    display: none
}

@media (min-width:992px) {

    .modal-newsletter .modal-lg,
    .modal-newsletter .modal-xl {
        --bs-modal-width: 750px
    }
}

@media (max-width:992px) {
    .modal-newsletter {
        flex-direction: column
    }

    .modal-newsletter .image {
        display: none
    }

    .modal-newsletter .title {
        margin: 0 0 15px;
        font-size: 18px
    }
}

@media (min-width:1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1240px
    }
}

@media (min-width:1300px) {
    .section-videos .video-large .image {
        height: 505.1px
    }
}

@media (min-width:1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px
    }

    .section-videos .video-large .image {
        height: 515px
    }
}

@media (max-width:1399.98px) {

    .section-featured,
    .main-slider .main-slider-item {
        height: 454px
    }

    .section-featured .col-featured-right .item {
        height: 210px
    }

    .section-featured .col-featured-right .item-large {
        height: 240px
    }
}

@media (max-width:1199.98px) {
    .category-block-links {
        display: none
    }

    .category-block-links-mobile {
        display: block
    }

    .section-cat-block .post-item-vr .image {
        height: 285px
    }

    .post-meta a,
    .post-meta span,
    .small-post-meta a,
    .small-post-meta span {
        margin-right: 4px;
        font-size: 11px !important
    }

    .nav-main .navbar-nav .nav-link {
        padding: 1.375rem .5rem;
        font-size: 13px
    }

    .col-sidebar {
        padding: 0 !important
    }
}

@media (max-width:991.98px) {
    #header {
        margin-bottom: 15px
    }

    #nav-top,
    .nav-main {
        display: none !important
    }

    .header-mobile-container {
        z-index: 999999;
        border-bottom: 1px solid #ebebeb;
        height: auto;
        position: relative;
        display: block !important
    }

    .header-mobile {
        z-index: 999999;
        background-color: #fff;
        width: 100%;
        padding: 6px 0;
        position: relative;
        box-shadow: 0 2px 15px #0000001a
    }

    .header-mobile-container .header-mobile>.d-flex {
        min-height: 58px
    }

    .header-mobile .menu-button {
        box-shadow: none !important;
        background-color: #0000 !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 10px 13px !important
    }

    .mobile-search-form {
        background-color: #fff;
        padding: 10px;
        display: none;
        position: relative
    }

    .mobile-search-form input {
        border-radius: 2px 0 0 2px;
        height: 44px
    }

    .mobile-search-form .btn {
        border-radius: 0 2px 2px 0;
        height: 44px
    }

    .nav-mobile {
        z-index: 9999;
        text-align: center;
        -o-transition: all .25s ease;
        background-color: #fff;
        width: 0;
        height: 100%;
        transition: all .25s;
        position: fixed;
        top: 70px;
        left: 0;
        overflow-x: hidden
    }

    .nav-mobile .nav-mobile-inner {
        width: 310px;
        padding: 20px 15px 60px;
        display: block;
        position: absolute;
        inset: 0 0 40px;
        overflow: hidden scroll
    }

    .nav-mobile-open,
    .nav-mobile-open .nav-mobile-inner {
        width: 310px
    }

    .overlay-bg {
        z-index: 1001;
        background-color: #0009;
        width: 100%;
        height: 100%;
        animation-name: fadeIn;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden
    }

    .nav-mobile .nav-item {
        border-bottom: 1px solid #0000000d
    }

    .nav-mobile .nav-item:last-child,
    .nav-mobile .nav-item .nav-item {
        border-bottom: 0
    }

    .nav-mobile .nav-item .nav-link {
        color: #434343;
        padding: 12px 0;
        font-size: 16px;
        display: flex
    }

    .nav-mobile .nav-item .nav-link i {
        font-size: 14px
    }

    .nav-mobile .nav-item .nav-link:after {
        display: none
    }

    .nav-mobile .dropdown .menu-sub-items {
        box-shadow: none !important;
        background-color: #0000 !important;
        border: 0 !important;
        padding: 0 0 10px !important;
        position: relative !important;
        transform: none !important
    }

    .nav-mobile .dropdown .menu-sub-items .nav-link {
        padding: 8px 15px 8px 20px;
        font-size: 15px
    }

    .nav-link-mobile-profile {
        align-items: center;
        font-weight: 600;
        display: flex
    }

    .nav-link-mobile-profile img {
        border-radius: 6px !important;
        width: 40px !important;
        height: 40px !important;
        margin-right: 10px !important
    }

    .nav-mobile .profile-dropdown-mobile {
        border-bottom: 1px solid #eaecef;
        margin-bottom: 12px;
        padding-bottom: 15px
    }

    .nav-mobile .profile-dropdown-mobile .menu-sub-items {
        width: 240px;
        box-shadow: none !important;
        background-color: #0000 !important;
        border: 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: 40px !important;
        transform: none !important
    }

    .nav-mobile .profile-dropdown-mobile .menu-sub-items .dropdown-item {
        color: #434343;
        margin-bottom: 2px;
        padding: 8px 10px;
        font-size: 15px
    }

    .profile-dropdown-mobile .dropdown-item:hover,
    .profile-dropdown-mobile .dropdown-item:active,
    .profile-dropdown-mobile .dropdown-item:focus {
        background-color: #0000 !important
    }

    .nav-mobile .profile-dropdown-mobile .menu-sub-items .dropdown-item .icon {
        width: 26px
    }

    .mobile-language-dropdown .dropdown-menu {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        position: relative !important;
        top: -1px !important;
        transform: none !important
    }

    .btn-switch-mode-mobile {
        width: 40.26px;
        height: 40.26px;
        padding: 0 !important
    }

    .newsticker-title span {
        display: none
    }

    .newsticker-container .nav-sm-buttons {
        position: absolute;
        top: 3px;
        right: 15px
    }

    .newsticker li a {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 80%;
        display: block;
        overflow: hidden
    }

    .section-featured .col-featured-left,
    .section-featured .col-featured-right {
        width: 100%;
        padding-right: calc(var(--bs-gutter-x)*.5);
        padding-left: calc(var(--bs-gutter-x)*.5)
    }

    .section-featured {
        height: auto
    }

    .section-featured .col-featured-left,
    .section-featured .col-featured-right {
        padding: 0 !important
    }

    .main-slider-container {
        height: 580px;
        margin-bottom: 4px;
        overflow: hidden
    }

    .main-slider .main-slider-item {
        height: 580px
    }

    .section-featured .col-featured-right .item,
    .section-featured .col-featured-right .item-large {
        height: 290px
    }

    .section-newsticker {
        height: 31.5px
    }

    .section {
        margin-bottom: 30px
    }

    .sidebar-widget {
        margin-top: 15px;
        margin-bottom: 15px
    }

    .profile-header {
        height: 320px
    }

    .section-page {
        min-height: 800px
    }

    .container-bn-ds {
        display: none
    }

    .container-bn-mb {
        display: block
    }

    .btn-auth-mobile {
        white-space: nowrap
    }

    .btn-auth-mobile svg {
        flex-shrink: 0
    }
}

@media (max-width:767.98px) {
    .bd-subnavbar {
        position: sticky;
        top: 0
    }

    .main-slider-container,
    .main-slider .main-slider-item {
        height: 460px
    }

    .section-featured .col-featured-right .item,
    .section-featured .col-featured-right .item-large {
        height: 240px
    }

    .section-cat-block .col-post-item-vr,
    .post-item-small {
        margin-bottom: 15px
    }

    #footer {
        font-size: 14px;
        line-height: 22px
    }

    .footer-widget {
        margin-top: 30px
    }

    .footer-widget .widget-title {
        margin-bottom: 10px;
        font-size: 18px
    }

    .post-details-meta {
        display: block !important
    }

    .post-details-meta .item-meta {
        display: inline-block
    }

    .post-details-meta .item-meta svg {
        margin-right: 0;
        position: relative;
        top: -2px
    }

    .post-share-buttons {
        margin-bottom: 10px !important;
        display: block !important
    }

    .post-share-buttons .btn-share {
        margin-bottom: 8px;
        display: inline-block !important
    }

    .post-share-buttons .btn-share a {
        margin-right: 5px
    }

    .post-share-buttons .btn-share .btn-inner {
        display: inline-block !important
    }

    .title-post-item {
        margin-bottom: 10px;
        font-size: 20px;
        line-height: 28px
    }

    .post-next-prev .left {
        margin-bottom: 15px;
        border: 0 !important
    }
}

@media (max-width:575.98px) {

    .main-slider-container,
    .main-slider .main-slider-item {
        height: 380px
    }

    .section-featured .col-featured-right .item,
    .section-featured .col-featured-right .item-large {
        height: 200px
    }
}

@media (max-width:485.98px) {

    .main-slider-container,
    .main-slider .main-slider-item {
        height: 320px
    }
}

@media (max-width:427.98px) {

    .main-slider-container,
    .main-slider .main-slider-item {
        height: 280px
    }
}

@media (max-width:300px) {

    .main-slider-container,
    .main-slider .main-slider-item {
        height: 240px
    }
}

.dark-mode {
    color: #fdfdfd;
    background-color: #0d0d0d
}

.dark-mode a {
    color: #fdfdfd
}

.dark-mode #nav-top {
    background-color: #1a1a1a !important
}

.dark-mode #nav-top .navbar-nav .nav-item .nav-link,
.dark-mode #nav-top .navbar-nav .nav-item svg {
    color: #d1d1d1
}

.dark-mode .main-slider .main-slider-item,
.dark-mode .section-featured .col-featured-right .item {
    background-color: #1a1a1a
}

.dark-mode .post-item .image.ratio {
    background-color: #0000 !important
}

.dark-mode .post-item-small .left .image {
    background-color: #1a1a1a
}

.dark-mode .sidebar-widget .widget-head {
    border-bottom-color: #2c2c2c
}

.dark-mode .modal-content {
    color: #fdfdfd;
    background-color: #1a1a1a
}

.dark-mode .modal-header .btn-close {
    filter: invert()
}

.dark-mode .modal-add-post .item {
    background-color: #2c2c2c;
    border-color: #3c3c3c
}

.dark-mode .modal-add-post .item:hover {
    background-color: #3c3c3c
}

.dark-mode .modal-add-post .item-icon {
    background-color: #1a1a1a
}

.dark-mode .modal-add-post .item .title {
    color: #fdfdfd !important
}

.dark-mode .modal-add-post .item .desc {
    color: #999
}

.dark-mode .dropdown .dropdown-menu {
    background-color: #1a1a1a;
    border-color: #2c2c2c
}

.dark-mode .dropdown .dropdown-menu .dropdown-item {
    color: #fdfdfd
}

.dark-mode .dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #2c2c2c
}

.dark-mode .dropdown-item:focus,
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:active,
.dark-mode .dropdown-item.active {
    color: #fdfdfd;
    background-color: #2c2c2c
}

.dark-mode .mega-menu {
    background-color: #0f172afa !important;
    border: 1px solid #33415580 !important;
    border-top: none !important
}

.dark-mode .mega-menu .menu-left {
    border-right: 1px solid #33415580 !important
}

.dark-mode .nav-sm-buttons .prev,
.dark-mode .nav-sm-buttons .next {
    background-color: #2c2c2c;
    border-color: #3c3c3c
}

.dark-mode .search-form {
    background-color: #1a1a1afa;
    border-color: #2c2c2c
}

.dark-mode .form-input,
.dark-mode .form-textarea {
    color: #fdfdfd !important;
    background-color: #2c2c2c !important;
    border-color: #3c3c3c !important
}

.dark-mode .form-check-input {
    background-color: #2c2c2c;
    border-color: #3c3c3c
}

.dark-mode .nav-category-block .nav-item .nav-link {
    color: #fdfdfd
}

.dark-mode .section-videos {
    background-color: #1a1a1a
}

.dark-mode .sidebar-widget .tag-list li a {
    color: #fdfdfd;
    background-color: #2c2c2c
}

.dark-mode .sidebar-widget .poll .result .progress {
    background-color: #2c2c2c
}

.dark-mode .sidebar-widget .poll {
    background-color: #1a1a1a
}

.dark-mode .breadcrumb a {
    color: #999
}

.dark-mode .breadcrumb .active,
.dark-mode .font-text {
    color: #fdfdfd
}

.dark-mode .pagination .page-item .page-link {
    color: #fdfdfd;
    background-color: #2c2c2c;
    border-color: #3c3c3c
}

.dark-mode .pagination .page-item .page-link:hover {
    background-color: #3c3c3c
}

.dark-mode .page-gallery .filters .btn {
    color: #fdfdfd !important
}

.dark-mode .profile-header .profile-info .profile-username .username {
    color: #fff !important
}

.dark-mode .profile-social-links li a {
    background-color: #2c2c2c
}

.dark-mode .section-profile .img-follower {
    border-color: #3c3c3c
}

.dark-mode .edit-profile-cover {
    background-color: #1a1a1acc
}

.dark-mode .profile-list-group .list-group .list-group-item a {
    color: #fdfdfd !important
}

.dark-mode .form-control.is-valid,
.dark-mode .was-validated .form-control:valid {
    border-color: #3c3c3c
}

.dark-mode .img-thumbnail {
    background-color: #2c2c2c;
    border-color: #3c3c3c
}

.dark-mode .profile-header .profile-info .profile-image {
    border-color: #3c3c3c
}

.dark-mode .table td,
.dark-mode .table th {
    border-color: #2c2c2c
}

.dark-mode .post-details-meta .item-meta-author img {
    border-color: #3c3c3c
}

.dark-mode .post-content .post-tags ul li a {
    color: #fdfdfd;
    background-color: #2c2c2c
}

.dark-mode .post-next-prev {
    border-color: #2c2c2c
}

.dark-mode .about-author {
    background-color: #1a1a1a;
    border-color: #2c2c2c
}

.dark-mode .about-author .img-author {
    border-color: #2c2c2c
}

.dark-mode .section-comments .nav-tabs {
    border-bottom-color: #334155
}

.dark-mode .section-comments .nav-tabs button {
    color: #cbd5e1 !important
}

.dark-mode .section-comments .nav-tabs button:hover {
    color: #60a5fa !important
}

.dark-mode .section-comments .nav-tabs button.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important
}

.dark-mode .quiz-container .answer-format-text .answer {
    background-color: #2c2c2c;
    border-color: #3c3c3c
}

.dark-mode .quiz-container .answer-format-text .answer:hover {
    background-color: #3c3c3c
}

.dark-mode .quiz-container .answer-format-text .quiz-answer-icon {
    background-color: #1a1a1a
}

.dark-mode .quiz-container .quiz-question {
    color: #fdfdfd
}

.dark-mode .quiz-container .question-answers .answer-format-image .answer {
    border-color: #3c3c3c
}

.dark-mode .quiz-container .question-answers .answer-format-image .answer:hover {
    border-color: #4c4c4c
}

.dark-mode div#amplitude-player {
    background-color: #1a1a1a
}

.dark-mode div#amplitude-right div.song div.song-meta-data span.song-title {
    color: #fdfdfd
}

.dark-mode #amplitude-right .list-row {
    border-color: #2c2c2c
}

.dark-mode div#amplitude-left div#player-left-bottom {
    background-color: #1a1a1a
}

.dark-mode div#amplitude-left div#player-left-bottom div#meta-container span.song-name {
    color: #fdfdfd
}

.dark-mode div#amplitude-right {
    background-color: #1a1a1a
}

.dark-mode #footer {
    background-color: #0a0a0a
}

.dark-mode div:where(.swal2-container) div:where(.swal2-popup) {
    color: #fdfdfd;
    background-color: #1a1a1a
}

.dark-mode .swal2-cancel {
    color: #fdfdfd !important;
    background-color: #2c2c2c !important
}

.dark-mode #nav-top,
.dark-mode .reaction-num-votes,
.dark-mode .dark-mode .modal-newsletter .btn {
    background-color: #1a1a1a !important
}

.dark-mode .emoji-reactions .reaction .text {
    color: #fdfdfd
}

.dark-mode .emoji-reactions .reaction.disabled:hover {
    background-color: #2c2c2c
}

.dark-mode .sidebar-widget .a-view-results {
    color: #fdfdfd
}

.dark-mode .post-content .post-text table,
.dark-mode th,
.dark-mode td {
    border-color: #fdfdfd
}

.dark-mode .cookies-warning {
    color: #fdfdfd;
    background-color: #202020
}

.dark-mode .cookies-warning .text,
.dark-mode .cookies-warning .close {
    color: #fdfdfd
}

.dark-mode .quiz-container .question-answers .answer-format-text .progress .progress-bar {
    background-color: #2c2c2c !important
}

.dark-mode .table-of-contents {
    border: 1px solid #242424
}

.dark-mode .recipe-sum-table .item {
    color: #fdfdfd;
    background-color: #1d1d1d;
    border-color: #1d1d1d
}

.dark-mode .recipe-sum-table .item .icon-text span {
    color: #cdcdcd
}

.dark-mode .vr-scrollbar {
    scrollbar-color: #323232 #000
}

.dark-mode .vr-scrollbar::-webkit-scrollbar-track {
    background: #000
}

.dark-mode .vr-scrollbar::-webkit-scrollbar-thumb {
    background: #323232
}

.dark-mode .vr-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #323232
}

.dark-mode .btn-close {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") 50%/1em no-repeat
}

.quiz-container {
    width: 100%;
    display: block;
    position: relative
}

.quiz-container .quiz-question {
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    margin-bottom: 45px;
    padding-bottom: 30px;
    display: block;
    position: relative
}

.quiz-container .quiz-question[data-is-last-question="1"] {
    border-bottom: 0 !important
}

.quiz-container .quiz-question-answered .answer {
    pointer-events: none;
    cursor: default !important
}

.quiz-container .quiz-question-answered .answer-format-text {
    cursor: default !important
}

.quiz-container .quiz-question .alert-success {
    color: #60bc65;
    background-color: #60bc650d;
    border: 0 !important
}

.quiz-container .quiz-question .alert-danger {
    color: #e25c58;
    background-color: #e25c580d;
    border: 0 !important
}

.quiz-container .quiz-question .alert {
    display: none
}

.quiz-container .quiz-question .alert .text {
    margin: 0;
    font-size: 18px
}

.quiz-container .quiz-question .title {
    width: 100%;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    display: block;
    position: relative
}

.quiz-container .description {
    width: 100%;
    margin-bottom: 5px;
    display: block;
    position: relative
}

.quiz-container .question-image {
    width: 100%;
    margin-bottom: 20px;
    display: block;
    position: relative
}

.quiz-container .question-answers {
    width: 100%;
    margin-bottom: 15px;
    display: block;
    position: relative
}

.quiz-container .question-answers .row-answer {
    margin-left: -7.5px;
    margin-right: -7.5px
}

.quiz-container .question-answers .col-answer {
    margin-bottom: 15px;
    padding-left: 7.5px;
    padding-right: 7.5px
}

.quiz-container .question-answers .answer-format-image .answer {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-color: #f7f7f7;
    border: 1px solid #f7f7f7;
    width: 100%;
    transition: all .1s ease-in-out;
    display: block;
    position: relative
}

.quiz-container .question-answers .answer-format-image .answer:hover {
    background-color: #eee;
    border: 1px solid #eee
}

.quiz-container .question-answers .answer-format-image .answer-image {
    width: 100%;
    display: block;
    position: relative
}

.quiz-container .question-answers .answer-format-image .answer-image img {
    width: 100%;
    display: block
}

.quiz-container .question-answers .answer-format-image .answer-bottom {
    align-items: center;
    width: 100%;
    padding: 6px;
    display: flex;
    position: relative
}

.quiz-container .question-answers .answer-format-image .answer-bottom .answer-radio {
    width: 34px
}

.quiz-container .question-answers .answer-format-image .answer-bottom .answer-text span {
    word-break: break-word;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    display: inline-block;
    position: relative
}

.quiz-container .question-answers .answer-format-image .answer-bottom .quiz-answer-icon {
    color: #555;
    margin-top: 1.2px;
    position: relative
}

.quiz-container .answer-format-text {
    cursor: pointer;
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 5px !important
}

.quiz-container .answer-format-text .answer {
    cursor: pointer;
    border: 1px solid #0000001a;
    border-radius: 4px;
    width: 100%;
    display: table;
    position: relative
}

.quiz-container .answer-format-text .answer:before {
    content: " ";
    z-index: -1;
    border: 1px solid #0000;
    border-radius: 4px;
    position: absolute;
    inset: 1px
}

.quiz-container .answer-format-text .answer:hover {
    border-color: #0003
}

.quiz-container .answer-format-text .answer .answer-radio {
    vertical-align: middle;
    width: 14px;
    padding: 5px 12px;
    display: table-cell;
    position: relative
}

.quiz-container .quiz-answer-icon {
    color: #777;
    height: 30px;
    font-size: 30px;
    line-height: 30px;
    display: inline-block
}

.quiz-container .answer-format-text .quiz-answer-icon {
    color: #0003
}

.quiz-container .answer-format-text .answer .answer-text {
    vertical-align: middle;
    word-break: break-word;
    padding: 12px 12px 12px 0;
    font-size: 14px;
    display: table-cell;
    position: relative
}

.quiz-container .answer-format-text .answer .answer-vote {
    vertical-align: middle;
    width: 45px;
    padding: 5px;
    display: table-cell;
    position: relative
}

.quiz-container .answer-format-text .answer .answer-vote span {
    white-space: nowrap;
    width: 13px;
    font-weight: 600
}

.quiz-container .answer-format-text .answer-text span {
    font-size: 14px;
    font-weight: 600
}

.quiz-container .answer-format-image .answer-correct,
.quiz-container .answer-format-image .answer-correct .quiz-answer-icon {
    color: #60bc65 !important
}

.quiz-container .answer-format-image .answer-wrong,
.quiz-container .answer-format-image .answer-wrong .quiz-answer-icon {
    color: #e25c58 !important
}

.quiz-container .answer-format-text .answer-correct {
    color: #60bc65;
    border-color: #60bc6599
}

.quiz-container .answer-format-text .answer-correct .quiz-answer-icon {
    color: #60bc65 !important
}

.quiz-container .answer-format-text .answer-wrong {
    color: #e25c58;
    border-color: #e25c5899
}

.quiz-container .answer-format-text .answer-wrong .quiz-answer-icon {
    color: #e25c58 !important
}

.quiz-container .quiz-result {
    margin-bottom: 30px;
    padding-top: 10px
}

.quiz-container .quiz-result .title {
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 600;
    line-height: 32px
}

.quiz-container .quiz-result .description {
    width: 100%;
    margin-top: 10px;
    font-size: 15px;
    line-height: 28px;
    display: block
}

.quiz-container .btn-play-again-content {
    text-align: center;
    margin-bottom: 30px;
    display: none
}

.quiz-container .btn-play-again-content button {
    display: inline-block
}

.quiz-container .btn-play-again-content i {
    margin-right: 8px
}

.quiz-score {
    text-align: center;
    color: #222;
    font-size: 20px;
    font-weight: 600
}

.quiz-score .correct {
    color: #60bc65;
    background-color: #60bc650d;
    min-width: 220px;
    padding: 14px 20px;
    display: inline-block
}

.quiz-score .wrong {
    color: #e25c58;
    background-color: #e25c580d;
    min-width: 220px;
    padding: 14px 20px;
    display: inline-block
}

.quiz-container .question-answers .answer-format-image .progress {
    background-color: #f7f7f74d;
    width: 100%;
    height: 28px;
    position: absolute;
    bottom: 0;
    box-shadow: none !important;
    border-radius: 0 !important
}

.quiz-container .question-answers .answer-format-text .progress {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    box-shadow: none !important;
    background-color: #0000 !important;
    border-radius: 4px !important
}

.quiz-container .question-answers .answer-format-image .progress .progress-bar {
    background-color: #bac8e0;
    background-image: linear-gradient(270deg, #6a85b6 0%, #bac8e0 100%);
    box-shadow: none !important
}

.quiz-container .question-answers .answer-format-text .progress .progress-bar {
    background-color: #f2f6fa;
    box-shadow: none !important
}

.quiz-container .question-answers .answer-format-text .progress .score {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px
}

.quiz-container .answer-format-text .answer-correct {
    border-color: #0000001a !important
}

.quiz-container .question-answers .answer-format-image .progress .perc-zero {
    color: #fff;
    margin-left: 5px;
    line-height: 28px
}

.quiz-container .question-answers .answer-format-image .progress b {
    font-weight: 600
}

.table-of-contents {
    border: 1px solid #efeee9;
    border-radius: 3px;
    margin: 15px 0;
    padding: 30px
}

.table-of-contents .title {
    align-items: center;
    margin-bottom: 20px;
    display: flex
}

.table-of-contents .title h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 !important
}

.table-of-contents .ul-main {
    margin: 0;
    padding: 0 0 0 5px
}

.table-of-contents ul li {
    margin-bottom: 5px;
    list-style-position: inside !important
}

.table-of-contents ul li a {
    font-size: 15px;
    line-height: 26px
}

.container-toc .ul-toc-content-main {
    margin: 0;
    padding: 0
}

.container-toc .ul-toc-content .li-toc-content {
    display: block;
    list-style: none !important
}

.container-toc .ul-toc-content .li-toc-content .title-post-item {
    display: list-item
}

.container-toc .ul-toc-content-sub .li-toc-content .title-post-item {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 26px
}

.ul-toc-content-main li-toc-content .title-post-item::marker {
    font-size: 22px;
    font-weight: 600;
    line-height: 30px
}

.recipe-sum-table {
    margin-top: 4px;
    display: block
}

.recipe-sum-table .row {
    margin-left: -2px;
    margin-right: -2px
}

.recipe-sum-table .row .col-item {
    margin-bottom: 4px;
    padding-left: 2px;
    padding-right: 2px
}

.recipe-sum-table .item {
    background-color: #f9f9f9;
    border: 1px solid #f5f5f5;
    justify-content: center;
    align-items: center;
    min-height: 86px;
    display: flex;
    overflow: hidden
}

.recipe-sum-table .item .icon {
    margin-right: 10px
}

.recipe-sum-table .item .icon-text {
    text-align: left
}

.recipe-sum-table .item .icon-text strong {
    display: block
}

.recipe-sum-table .item .icon-text span {
    color: #555
}

.recipe-items-list {
    margin-bottom: 30px;
    display: block
}

.recipe-items-list ul {
    margin: 0;
    padding: 0;
    display: block
}

.recipe-items-list ul li {
    margin-bottom: 5px;
    list-style: none
}

.recipe-items-list ul li span {
    font-size: 16px;
    line-height: 28px
}

.recipe-sub-title {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 600
}

.recipe-directions {
    display: block
}

.recipe-directions .direction {
    width: 100%;
    margin-bottom: 30px;
    display: block
}

.recipe-directions .direction .title {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 600;
    line-height: 25px
}

.recipe-directions .direction img {
    display: inline-block
}

#time-container input[type=range].amplitude-song-slider,
#volume-container input[type=range] {
    outline: none !important
}

.song-now-playing-icon-container .now-playing {
    margin-top: 10px !important
}

.amplitude-inner-right .download-link-cnt {
    height: 40px !important;
    line-height: 40px !important
}

div#amplitude-left div#player-left-bottom {
    float: left;
    width: 100%;
    display: block;
    position: relative
}

div#amplitude-right {
    float: left;
    width: 100%;
    display: block;
    position: relative;
    max-height: 280px !important;
    overflow-y: visible !important
}

#amplitude-right .list-left,
div#amplitude-right div.song {
    min-height: 45px !important
}

div#amplitude-left div#player-left-bottom div#meta-container span.song-name,
div#amplitude-right div.song div.song-meta-data span.song-title {
    word-break: break-word !important
}

div#amplitude-right div.song div.song-meta-data {
    margin-top: 6px !important
}

#amplitude-right .list-row {
    border-bottom: 1px solid #eee !important
}

#amplitude-right .list-row:last-child {
    border-bottom: 0 !important
}

.post-content .post-player #amplitude-player {
    min-height: 250px !important
}

.emoji-reactions-container {
    float: left;
    width: 100%;
    margin-bottom: 60px;
    display: block;
    position: relative
}

.emoji-reactions-container .title-reactions {
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 600;
    display: block
}

.emoji-reactions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 100%;
    display: flex
}

.emoji-reactions .reaction {
    text-align: center;
    cursor: pointer;
    background-color: #0000;
    border-radius: 8px;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    width: 92px;
    padding: 3px;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    position: relative
}

.emoji-reactions .emoji {
    width: 64px;
    height: 64px
}

.emoji-reactions .text {
    color: #222;
    word-break: break-word;
    border-radius: 2px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 400;
    display: block
}

.emoji-reactions .selected .text {
    color: #fff;
    background-color: var(--vr-theme-color) !important
}

.emoji-reactions .reaction .vote {
    opacity: .8;
    color: #fff;
    border-radius: 15px;
    min-width: 24px;
    height: 16px;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 16px;
    background-color: var(--vr-block-color) !important
}

.emoji-reactions .reaction.disabled,
.emoji-reactions .reaction.disabled:hover {
    cursor: default
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none
}

.gallery-post-item {
    width: 100%;
    margin-bottom: 30px;
    display: block
}

.title-post-item {
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    display: block;
    position: relative
}

.gallery-post-item .post-image,
.gallery-post-item .post-image .post-image-inner {
    position: relative
}

.gallery-post-item .post-item-count {
    color: #fff;
    background-color: #16161680;
    width: auto;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0
}

.ordered-list-item {
    width: 100%;
    margin-bottom: 45px;
    display: block
}

.rtl-mode input {
    direction: rtl !important
}

.rtl-mode .col-sidebar {
    padding-left: 0;
    padding-right: 10px
}

.rtl-mode #nav-top .navbar-nav .nav-item {
    margin-left: 20px;
    margin-right: 0
}

.rtl-mode .nav-main .navbar-nav .nav-link i {
    margin-left: 0;
    margin-right: 3px
}

.rtl-mode .nav-main .navbar-brand {
    margin-left: 30px;
    margin-right: 0
}

.rtl-mode .search-form {
    left: 0;
    right: auto
}

.rtl-mode .mega-menu .menu-left a {
    text-align: left;
    padding: 8px 20px 8px 25px
}

.rtl-mode .post-meta a,
.rtl-mode .post-meta span {
    margin-left: 8px;
    margin-right: 0
}

.rtl-mode .nav-main .nav-dropdown-menu .dropdown-sub {
    margin-left: -1px;
    margin-right: 0;
    left: 100% !important;
    right: auto !important
}

.rtl-mode .newsticker {
    margin-left: 0;
    margin-right: 15px
}

.rtl-mode .nav-sm-buttons {
    direction: ltr !important
}

.rtl-mode .section-featured .col-featured-left {
    padding-left: 2px;
    padding-right: 13px
}

.rtl-mode .section-featured .col-featured-right {
    padding-left: 13px;
    padding-right: 2px
}

.rtl-mode .post-item-small .right {
    padding-left: 0;
    padding-right: 15px
}

.rtl-mode .form-check {
    padding-left: 1.5em;
    padding-right: 0
}

.rtl-mode .form-check .form-check-input {
    margin-left: 5px;
    margin-right: 0
}

.rtl-mode .sidebar-widget .poll .button-cnt button {
    margin-left: 15px;
    margin-right: 0
}

.rtl-mode .m-l-5 {
    margin-left: 0 !important;
    margin-right: 5px !important
}

.rtl-mode .footer-widget .footer-logo {
    text-align: right
}

.rtl-mode .post-details-meta .item-meta {
    margin-left: 30px;
    margin-right: 0
}

.rtl-mode .post-details-meta .item-meta svg {
    margin-left: 5px;
    margin-right: 0
}

.rtl-mode .post-details-meta .item-meta-comment {
    margin-left: 0 !important;
    margin-right: auto !important
}

.rtl-mode .post-details-meta .item-meta-comment span:first-child {
    margin-left: 10px;
    margin-right: 0
}

.rtl-mode .post-details-meta .item-meta-author img {
    margin-left: 5px;
    margin-right: 0
}

.rtl-mode .post-content .btn-share a {
    margin-left: 10px !important;
    margin-right: 0 !important
}

.rtl-mode .post-content .btn-share .btn-reading-list {
    margin-left: 0 !important
}

.rtl-mode .post-content .img-description {
    text-align: right
}

.rtl-mode .post-content .post-files .file svg {
    margin-left: 8px !important;
    margin-right: 0 !important
}

.rtl-mode .post-content .post-tags ul {
    margin-left: 0;
    margin-right: 20px
}

.rtl-mode .post-next-prev .head-title svg {
    display: none
}

.rtl-mode .post-next-prev .left {
    border-left: 1px solid #e6e6e6;
    border-right: 0
}

.rtl-mode .reactions .col-reaction {
    float: right;
    margin-left: 5.8px;
    margin-right: 0
}

.rtl-mode .profile-social-links li {
    margin-left: 3px;
    margin-right: 0
}

.rtl-mode .widget-follow .item a i {
    margin-left: 10px;
    margin-right: 0
}

.rtl-mode .section-comments .comment-list li .left {
    padding-left: 10px;
    padding-right: 0
}

.rtl-mode .section-comments .comment-meta .item {
    margin-left: 15px;
    margin-right: 0
}

.rtl-mode .section-comments .comment-meta svg {
    margin-left: 5px;
    margin-right: 0
}

.rtl-mode .footer-widget .newsletter .newsletter-inputs button {
    border-radius: .125rem 0 0 .125rem
}

.rtl-mode div#amplitude-right div.song div.song-now-playing-icon-container {
    float: right !important;
    margin-left: 10px !important;
    margin-right: 0 !important
}

.rtl-mode div#amplitude-right div.song div.song-meta-data {
    float: right !important;
    margin-right: 0 !important
}

.rtl-mode .gallery-post-item .btn i,
.rtl-mode .post-detail-slider-nav .next i,
.rtl-mode .post-detail-slider-nav .prev i {
    transform: rotate(180deg)
}

.rtl-mode .quiz-container .answer-format-text .answer .answer-text {
    padding-left: 12px;
    padding-right: 0
}

.rtl-mode .profile-header .profile-info .profile-username {
    padding-left: 0;
    padding-right: 25px
}

.rtl-mode .profile-header .profile-last-seen svg {
    margin-left: 8px;
    margin-right: 0
}

.rtl-mode .profile-details .profile-email {
    border-left: 0;
    border-right: 1px solid #e1e3df;
    margin-left: 0;
    margin-right: 15px;
    padding-left: 0;
    padding-right: 15px
}

.rtl-mode .section-profile .img-follower {
    float: right;
    margin-left: 5px;
    margin-right: 0
}

.rtl-mode .section-category .dropdown .dropdown-menu {
    left: 0 !important
}

.rtl-mode .section .section-title .view-all i:before {
    transform: rotate(180deg)
}

.rtl-mode .footer-social-links ul li a {
    margin-left: 4px;
    margin-right: 0
}

.rtl-mode .nav-mobile {
    left: auto;
    right: 0
}

.rtl-mode .nav-link-mobile-profile img {
    margin-left: 10px !important;
    margin-right: 0 !important
}

.rtl-mode .nav-mobile .dropdown .menu-sub-items .nav-link {
    padding-left: 15px;
    padding-right: 20px
}

.rtl-mode .section-page .contact-icon {
    margin-left: 15px;
    margin-right: 0
}

.rtl-mode .profile-header .btn-follow {
    left: 0;
    right: auto
}

.rtl-mode .profile-header .btn-follow svg,
.rtl-mode .small-post-meta a,
.rtl-mode .small-post-meta span {
    margin-left: 8px;
    margin-right: 0
}

.rtl-mode .recipe-sum-table .item .icon {
    margin-left: 10px;
    margin-right: 0
}

.rtl-mode .recipe-sum-table .item .icon-text {
    text-align: right
}

.rtl-mode #amplitude-right .list-left {
    float: right !important
}

.rtl-mode #amplitude-right .list-right {
    float: left !important
}

.rtl-mode .modal-newsletter .btn-close {
    left: .938rem;
    right: auto
}

@media (max-width:991.98px) {
    .rtl-mode .newsticker-container .nav-sm-buttons {
        left: 15px;
        right: auto
    }

    .rtl-mode .newsticker {
        margin-right: 8px
    }
}

@media (max-width:767.98px) {
    .rtl-mode .profile-details .contact-details .item {
        border: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important
    }
}

@media (max-width:575.98px) {
    .rtl-mode .nav-footer {
        text-align: right !important
    }

    .rtl-mode .profile-header .profile-info .profile-username {
        padding-right: 10px
    }

    .rtl-mode .post-details-meta .item-meta {
        margin-left: 5px
    }
}

@font-face {
    font-family: sam-icons;
    font-weight: 400;
    font-style: normal;
    src: url(data:application/octet-stream;base64,d09GMgABAAAAABs4AA8AAAAAMzwAABrfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACFXAgOCZwMEQgKtTStKAs6AAE2AiQDcAQgBYVNB4JCDIEcG+4tFWxcxYaNA0Ng6wYiKjafZf9/Sm4MEaihqv1wIJyoTDJFJ2wK06C60JPU3U0WpUf1Gsuhg81mmxaJvFu8etWclHq3WxQ25Pr4WWaF/Fk8U3hMgb9hMoW/uRifLI+2VYZ+qi4cobFPcqGexn7z7r6JN8S0RDqhkDUTE5RK2kOddifLSAqhA1Sn4DhYF5i2pd2WH8Yfnrb57707QvKONCdlNG0tSKsobZApRlNzZS2iWZc/onS/qrD/ptrM/LKbXnHwEZK2KUJ+QjojP9Fr0KkyAOx4njjc+y2MIA2sC2RMnFMDynQswy4i2XWZBIG2H6gGEmLw/OtPdQrDBKTCU1/Z5/8CBVCmIEhFKXY8zBnGHm3T1Q+1ptnSDhBasrwPO031EyA4VJ80ZboyNrbkckNS1B97zi/XZ9g6tI6smiSkoj4XeL3B/hsyme+24hJ5va0E4P+tVdr/a7pu63g2yBMC4VCycRGyunprtqu7Z2+7l7pnD6b7aJZ7DmcnuJCwA7SAKm890M0BokvYojARLsZGqFh9sSiEzzKmwvewlacOCsUYs7+MrW5eZEws3AjhlP82qc6DVKRb6vGcVNgbDBATWgw1S6rsgLPzBIZAPNxCYD3PK9qu1+cB9P58FAWUagTRdRb/8i0I3AU9AN73P739qIIAhy+y2KrHhXUpeES+rGEN0T40Fy/7ya8HMIcFMc9ZEGuwK67eABv752KU5oDbyKIQqhaNbohBO93wpQPg/8sjkSlUGp3BZCHx8AkIiYjFihMvAbAKCysB060LdRSRskOuGY6K4akYASpGkIoRomKEqRgRKkaUihGjYsSpUiSAGEkqRoqKkaZiZKgYWSpGjoqRp2IUqBhFKkaJilGmYlSoGFUqRo2KoZ1Nj/ZZBnoC3PheEFn7B8btGsL9d8/qNq3XOJZ88wKJ9F+SCamHemysBR6ALe02gMLoKhCUi3EFgVq1FRxkdMat3Gm5Di4lRlfISseVYJgQ7p8KmkPYSSPozWlDhoYYHZX2kX1S2BirE4NHUgvUNa4uw6MpcO5PQsN0qDCgBVzGp1ecDky+3F0jI+H/DTR9b1o6y96wh3DoLVyE3R/+ZqHJ98b5zatKVo/42B6/BikQphEtKa84RkIrFIL/MRlL/i0rKCoOVvm5pRxJBJEfQ7i3BkigcQhceuCor2xvGkmKSxbP0z9Lhuh6/vFShTBKAcwhkIdwFGFUFyp4SE+gkUaCyG2P6A7JnbE2gEWFoGuuILcWsXLyQnB1TNnF1gfe5xC+by92n5LLf/80l3A0oGnHx22TdoPXYIOQ3HtlGZPIcoxVIQKZ7QaIjUGKy+5UAHeXBKnGYO0j9uesDCFaYnD4j0olqSOSIryui91oVQoaeU7Yc2+t04Da04kcLYcAs0Kl0IjSy7XSooamPchZo4vyNom2fLhAnW72r0RP6lL/AkKfHTAEm00/02dk+HDbW6M2vLUVJgoZOuSbElZYmE3hWZOrifWPVncB6wov0QorbKyGRsrKPyp1rpXYjJLf7eCXoGUdrO37QptueI7e6ukA7oIdv7Y3dI2dE+6NPRRwOgems5WApcPOgU8rCVfMEVpF4JoKXDir6G5JaLj8a0WGVt/qZ9Jnx2BA9GRM4gGTAyyuA71Yqj/2W2sBuKVdkMCiQdXxEfPRKpDDfY/jTnoY7tAdeHcSr9IbE7LYutVyzikP3tBgWbyJzF/efhZkjKGA3z4gRRDShECGcJAlFHKEhzwRoEBEKBIJSkSe24WafkSEYm3fq9TgZ03h0wt7LyqY9nP3fkVD+x2wMlqks4oLwPJiKKCHaljBMlbRsIaGdTQM0LCBhk00bKFhGw07aPMHkFlnhaXCSLqQjrZ2x54RFgz8tTYEYubZ7JcBGUJkIBUZaZrURr3/qGUUh+WqQVSMsUNvG41hv/C62vPvg4LOim76j89fhXwhPWcNLXiZQ3nvDmYa4lkE7BwWJd15nSyruqrmgESQWRlQ94Et+wuqGKG+N1sRxwtBDu8Wj1GIrL2Q2mSBWk3Jr+TfYw+tSfyxCbjF7ppYdfX2W1k4AcBIvbs0ohGnfNFkgMr2SR64yGyO2b1M66Tu+4IwpAWzwns4KU5u/Rm1m2a21nRzK7gg26ZQck3Y136070QIcRHoqj6RhqCMI4VnGlm9cZNRVgxyvYoHSYUYS9pPk2YuUNiHxG5IeNUoHUtBKajiEcJHSr3GyEJTCUgobpNB9BlyFoWKmRmUAA18Al9nJ88r5nUomNnnokCV1kkLg0mVkflwp2tfy6xaUz2cJ/B2CBCie9HK95YqC/bp6bKiLHf3mvW5YXg54e4dy8W4m7avn0ApwoA8lU/Rb5vd4GU21CXUlTZyz41H75rtl99M12/hz7wFJrmw+DaY5lxehX+9xhzH41jImpAMO3XAfNNJRm9PaO54C+c09f5CqXUy78JdFGUkHH/O3fkPMfBgoY4IYR+d1UljfaXBBoqwNxcmbYOo/Y6vDVa7UpFq/njg+O+810DtNm9BLOrfn8P8EQpg4zJS4TEY73AyEbCeSi39XCsN5Z3CmV1OasEZGoC+wXOCcDEFBS+JWlc4Dsi1ALiZgoK3RAvvcAbQ6mi8TyA8TEXBx4RaTyJkgjwTJS9EyStR600e9si7aMPHFClATWIZHMuIJQDsKYAOie1SQgvxjDH4UwGDROwQBGCUAPFUwCSRrhSFjvXs7MqFJy1HZRUaNyIUszzNAIeKIlFTQNNElSO2WmGnldOfUGBAIGsjKm1CgbmJkhcuWnDVgpsW3OVLOCjgpFAXr2i8tcZHa3y1xk8C/JQE4Zfi/D/8q99qYwjbDR0qG/ZqjQ3BtZFaBmCKumUf1CPkAAhgNArSYDElETgFQ0b9htE/MeBGT0CZBhnYzWD/bog9YPLOofQkrnCD0EWkzwlIYZyFxPIiuUJpYbN5JClkR+/aU8TwQ1wUh7OTqmJi4xJS5TgeQ2fhnRl8gQbTuZ916ilfdcszVyZ+/mWXOtUw6b0OMemLk+hs0+Qvh/lLE3/rFHCuQ51ppnD0pvLs5UnfdeukOHVJtLs3TfltuVM45HnopYZEVrOvvOQ680ykTOVMFrlYhalOiihL6rhISp6rEj363Ciazg+N0LL7+ul3Xf8nHtPsLrl+W0cif/mhEZ3tLI6s7pbvpq79Tl2WGSmyTZumtrMp4w4jXUCQi3Rc+VytJ6++ZSxUDjjpAWMrfHU1uzIlofAPm5BplvgtxMbQtvE5vwQVb0W6iIuCy+FyZ5esUEjsqxUUkJIs9tLW+hIwdMnBnCvcMTAPK5OfLA114UeC6G6WnZ3j6YnF5N8U855kVbEnlliBjy00huxfZlkRe1Dw/Gd14oA8eFIf3y/2HXvl4itRyvn5IM1zINekYZZVFV9Kh1UaWO2BLJD2n4iB6aO9T3hFDimePn0cJaUAqlNBgEKI4DMQoDh1Ja1VW/V27wtjsPaSeT+hnTjvPWPGUYGlM9R5oTduTUUYOnAKY6Owpw56NECSGrNN5oTFwrkWS77VEYtz5zpq9hK78W6srmAvkWfSe9rKvGdeW2Q91WjcEGUMVTWvsHeQe07l5ltNVFIZdWPsHLDjIaiAeUI3W0Q371E7YZZ8NsQW0xOhZf4FPnPp4nH/QBAvZ5EqC0xMwswkQqyvTci4WQE21FoirGB+sHOOIk1mLhT6hNKgRdZCsFYzlJOjVqbsYg+JZ8YiD1oGU+eJBpRKSo2jAYaeqRV5h5UWak0belGFymrBM4+QlkzkoW0n9uDRttnzU75B0g0ASQF1jiLEYlQz5dRnGPV81feonVnw2CTahbYXRHUodG8XMSVHpXPZ6HgY65spYqpeL5HAzu9944zR0RtZMijBZkQijPjqlaOBSFNYozDPIx2FeccHX2SZG6a4e7F/CPxN5spxacYkw0GGz2LRobpkt+78VMHHkJdwy6mBpkbUZCZLQ9aS5PQ4e1gfLmzBhjzK2s8O8fWyPvc5+wLU0cqZ8e6IOpJ+IUamaXhp7/o8503/jSmK+GrVuiyLGiNIQVzd6JP9N/X1XtFz7Q+IycF1k7ugmtoTDECKA9S/5CbS206LMPhIFv6m63SWhSItv17lk8tDRw4tl3t6JmKaAyyI474tt0CfDtCRsttI3+w/2Nw8WCp4pILaJAlEA6RtZw40fSbuqQfyob7/ie2AUHXRPOeuiwFpNZX5Zzwz+gBUtzoSj7P/S+/XHBvPQ4MNjL/yrgV/ztsq3RNK7a21JZVvH1Auqd35RRQcGfCyKeA5JAaB2mzRbfRTVE7hpfzBupsjnoHg6MOLB+uHSI9QgAI4QCTJ4XFH/4IA8XR6vwyfZQYx8j3TGEI7YDz32l9o6RcvN78NfV++0vQO6oMr6iFUQ6fum3puaUcLVBUAZAVCVQ4EsebOyaCgDFXO3UoXVIJNIIbtjzLYM6SPMg9AHav2elznss5pvaQVId09uI6f2V3bOD/Say7OKX7TGbGBGFi+BhW/ka++AEDzCo/GaUtm1QbilCC9yzo3WX3xba2smXtMV4xEFMZZKYT7XPHWy8G8tFT3YP4RnnMezNfIU9Xenk88Yj8iSUw6kfRa0tE7pbIcjfshy7/7leSIKyJPXnBywesjmGdDUKqR5hdItTYJj8lkMXlaHZLG1W18EU8qNTYMmI+p0Sml4uTzWUzWq26wpj5Uj7/JJ2nkdz84HTKKTKrTDQ5cFF/EKSTtzuclk1pvp3Zyq3ay01tfvHUYK9ENtetb7uZa9O3vRr7zytuXfne4miXaxy76xOGtW0Oi0NUbpXuVJSwKX7tndGwZxNFo+CSk+OXBIkLlut+7fduGeDJ+w+HcSQ390oNxsh3i8Zt8eE7K1tVsWOHYW+jw0nOKHdUdOZlfTb12LvPu+zvi6Nqbby/tm630zcDD/VM3qvuBMtaqtIsspxD1XhrA+RDpkOWNO0ssadV+YKrpnblVqdtcPTt+fJPaostA4oPuW1qHyKqMVe4fLv+ZbD6lMuZaNJVrQXnWs6WptvD62qBTu2s8LArPzXeLfXNzIXG4srKYoTbpE4fBV1lREfbmwvc6xawUtgiC7vm5UjbdwHsOZFg9LkCA9dI0P+ReYgHU8eGQQNAXSb+gOMi9AMG0+3AeQbJ2IulH5wEO7EELsWVJxqYl1rXd64rPf0gguJNFEgRO2hQAydnsM5nHrocT/7+9+HZ0/P2ZLfzek/h9Q37YxNP/G4rIIvvMhCHO7Nu5ew7u3N5rjtN8KFsx+sF6/KP1ZWXM6PFzr9e6x0VRFJrNSlv85vP8k9WTtIOpkYv8ydRT1RPiUKZA2tHqVadKcl+p3O1SitP7TgtPbzt/8fz2M9uX9/hH3Q2aZDMz+Ljf//jXgotZXw//82bLQFgFdVRC80eDYhO4X/UKZNY1UZEMr7cR9Y4EwV4M4BpEFdoggQgTSSWmp+sxo1iDIdMalf8ViRxvAZiL+lcq9hdUFKsB4EEcEg2H0xeZHlek5r/Kw9weHgeKLdDlkKiXyVrkJupebCTJTC3nE56AsR6uuFsE2wi8TPAHZd8Xao5KTq23UckuKfTjikKZrA0pIHXSTdfyRRDY1XD/Vbw+iFLV0mUK9aMnMR3WFZQaYiT12coajYHObzCnrL4AhX64H0+i4KQIAsr4qFtk8ZocFpsJPUwBAPDf4CExbmB8sVKRQOJIaua3hI+i5SUGyr3NcdmYS7mmU/rHGrrSM3nHVHgKiseFlrdkUiS4H/cQtJ2VUEhSEFWMO32CO3wMwRhIS0SuOL7DwyxCYo2XNHr306gqPIdwSQHEECJJAir96qA+MfdZ4hUDKQMqngt3zqhwOo642GhhkwWMBiX3peMCqMGhUSctRNalWo2cj5SIistnwT4Id7ywBqs3USkgcGtnz89jgjo7ySCfwHUak43QEDMSKUCEFCB47xjmqCc6ZSygXmVVeiQulYtogTuhgC1UHviOnjWFT9DAL5W9dtm498EH+8cbj5r9o8YIvGKNDI+eMDvPhUf8wxZTd9l4een4PsHFBstUtQkOR7HgF/10W7HNFoIhqopaJqbuhhOr7mM6X2qqeKPwvcxlTtyFp1FHNmLCL+47eKkjYtFhte2RaebkyKWD9/32V9dWi7Xeo5n201/or/tC26SE4l81EcARQH7KxCo8IAF3a2t+3DVbPttck8h6uOhhVsH2T+Oz/bNJeXqnoCfLuFVmlc2WX61D+gPsRS7FI6Txd1f5NnxhRm95bVvhaJK7aW+5Zyts1PO78jqWWD05o6nlco7jwBPnVrzWcXflmJXmIjXiiVh34gi/KK+w9hFZmyxFtRGUJCkWtET/itwf5x7v9w7v3T4c995fb+Hcn9iTz9y/6t4Sgzfnvebl2SpplKMnKzkqNnNidnY1c17DriTu3cjFGqknKidWlZ9KaeJYiTqOhkUNe984GnnDE6bNazh1hJmLdtJigvPzYWaRftfONYNuw8PP7na3bvTu5bBfCNSFyoh9L8ieXOR8Pe2gcipL9Najcfob9xiXp+raTOpQa9Py3ClKIN/ZmbqCMbV4rKtupdRAv/ZiU5K+qj2/qjlxfqrzLl4WacF2ff2mu0pVn/Znzzzmkat3dCT/lGHmG4Gyfdmqn+ojD2ZgGrTxu3u33CclV0RXvV/X/rO+8vXKl16v4nHDsftvTn98a/5rv99m+LVybt+2/TMrV12Iban/45ec7fK8Inwr4Y+ETcZh2/1Jj6Obr1d9u7khz7Rr4L48v2JePHqoqkwzzKBdJz4VvcqbZf/IoOkFy+ba9iZfTJhk8a1OuTmlPL5mg03oF28Mc4XfL5KX5DQZmq3e9vxWXZu8sKmUUHHZ/PslrR++0/3zI/ckCv1xLt/tRSXU8PsPMWkRmezYo2nmwgE1rUOFk1Te/rUPJkjKZT219VdWKClk8HlCxQxWEa9hrCa6It30X4WNM9ubWjqV39aim4GbC2eaWtYWboRrdU0dxROwdNTUkjW1LrOxkDqDOQ6bhwfNkbPmyHD/4VI7HGzXfllR+VFxZ8hpPjjojyxym2XuXWRGeT9ehfeARtAEekAV3o+XZ/Cm9lBMS+K53LglFNOeKbKUj1/YBBpvTO7cg5tqY/aQUYubQisWiY7FT9z98I8AAFgOigcg+gX8Db2+Z0gjn2Fj2zPYJvTr9QXH0c2eUNmAXrz6fOABTODfcN8NYn+pP4Ex6fZ0u7IFsyX/wlavJfpP9CdsGL0Z/Tvabf1pmq97XlTZZ/cKGdrdF+NWtL/1qj+BcSju69Xml+4/M4UgmyPBCeCf59tcnnUT72ENnc+W9kmedoAxQsG7pgLJLKbN+N+JoAi9h2hBwjgid/VIPsfl3SjwvXApGDfGhbxX9+tFMU+6SQUIE1ETNGMPaXOM1lVc16Z53k36POUEhRHf85yNuKzbgRPIFbu2K+RxNzliZqULbMZizyD07qlwxTLKrHSkj0Qp0RNR5pQo3apfyMej/sZgI6jne4Wel/Z8ZXjV1b1WbYd/RGV8tjBrfQw+HqPfh6mklIcF7WgO9xwFY4gtKzNEd3ZyVMyzOBVbBo7sSKKnAuKZdZscQaw46T3unENnl3dLrlsQ8rKbzNfCXpWCbIn16q6H7WKWwz2lsZIhC1lFW3J5sbN9f3fxcvlydLh9vnPe7YgyjvKWKrm2CFPDZXJ7xyDDEkCBSxLy1Agj9Apx9IPRlVnd89NMzKtuEkKQbJhsRQJMLHhS4ixIUgOV4KVv+zq3En+ZFQdNBzJtSWMjnxiOWHC9RTGoNQNrr+9gXaWs/2J7c0MZ2zkScISPGEAz8shap8ZoVdnaKv2e69qf2M3ben35eX24vrq8mM8m43gUrW25XvAck8ru71YxyBYma1TGe8iFwIqtUdU0ctJae2rlDnXLgn7TqJRLxWzasdV13+V3bUupBVuyFddJ6ABpak3kPXK3WsM7YR62BHCBqo5GPWYMwUY635lNlsNOqxUIObgjdpW/kQVy4TYFYXwnnZfBz0YlrBUDlUC8RCzOr7pO/+PMVsPez6leZoSBzQm2j4S+LXublgZXGEABMBIMXVAv5FMWjd0y1Ekzmehy6Tm7bQsC8GAhjtFm221Ws85hPpWJtT1ThYfoxVqCfh9jYg25tnCEkQVcRFjcy2zn2h2CpCH9JVJPU8x3HWk3+I5rK89SM/tBPbWG3IPN0zfILBgcdfCSdWQV1EXpEFRlkq2ZGJOW72FGxgpamuxM55xkdpuZXtSP0kMpr7vJS4yw++0x57jF4tYusdw7Mixo7xjCsAR4wAPEnRHMGCN01/vd8jH4Vu3NOu3d7dnZ/Gx52J52pkW7xeMzWl1inVaDNY+KOhEpSWsmtbwBBBgY1Of+kF74a9oLgP/x/W8vArvnDwT8ZYggQJzY4P0FIPBH4N/e/BZoFL9UsK1z59RoxWAfilhAP6iekwfb6D/yxX/PgnNZGiu/tpH/xDqcIqut4LXKIpqX8/4mwppsU0aylnJEc+Uhuq0CnB6nglTXKsTpWyqmy7f+ONcuHpaiAC/OyClkhZsijLQVx2mOopwuSvFYqpXAqTeluI3/I6pGnv1DHFlzhuSDKqoxZ3m5j2W4wYZAvgUKm5blIzDTdrqUV7/MVeUq+3tczrykP+RTBwLd17BkSoTpZ5zLKwd6rGo3gNmwEePG9PLpESCRzixDBmrKpLRFdaJKQjIm4PwmhngMBB5Bst1DKj9XhqS6O44FAV1WDTyDXF7x0oOUapCBT1C+o8eYoPde5Sxi8XYv9fklVHIpJ8BSLsREtoeYtXSzA7+QUWrBrd29gfbYBr2TRInZLDFCq75BeSE794CogAuK5IV+7Vo9Ej2AmDPfCDJvAQtayMIWsajFLG4JS1rK0pZB4uETEBIRixUnXoJESYMxHhsbDucAx7IR7GONaZxfDt1tDo6wuM+ZnJfYsSm6xsnkcLBtFrwshRkagm1TIHGbdkHBimNLsa7xLjrKn6F8qWl9FxVMr4l5fRT5kZ8OHUbnj8aYEcZ1Hhvz++mVE4QoTw309ge+yPergoOdA2M3C/cGvD00/WaEQv105nWJ3zMyQhsfDjLS1wkAN1/4ffY3EH6OQG7DE083INy4AczKe8Y+ei9A3ORuDR6c3uo2tPz15O99L3yTVvYeCehiZDRKuLHM2H3SJCtRGr/2h4po6BuQql3RCd9607jkg19KBdtNAAA=)format("woff2"), url(data:application/font-woff;base64,d09GRgABAAAAACAAAA8AAAAAMzwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABWAAAADsAAABUIIslek9TLzIAAAGUAAAARAAAAGA+J0pOY21hcAAAAdgAAADIAAAC3Ooa4tNjdnQgAAACoAAAAAsAAAAOAAAAAGZwZ20AAAKsAAAG7QAADgxiLvl6Z2FzcAAACZwAAAAIAAAACAAAABBnbHlmAAAJpAAAEqoAABq042cW2WhlYWQAABxQAAAAMwAAADYoKLsoaGhlYQAAHIQAAAAgAAAAJAgLBGVobXR4AAAcpAAAACoAAABwafb/9WxvY2EAABzQAAAAOgAAADpaxFUKbWF4cAAAHQwAAAAgAAAAIAFCEFBuYW1lAAAdLAAAAXUAAALNzZ0bHHBvc3QAAB6kAAAA3wAAAUJzQByxcHJlcAAAH4QAAAB6AAAAnH62O7Z4nGNgZGBg4GIwYLBjYHJx8wlh4MtJLMljkGJgYYAAkDwymzEnMz2RgQPGA8qxgGkOIGaDiAIAJjsFSAB4nGNgYT7JOIGBlYGBqYppDwMDQw+EZnzAYMjIBBRlYGVmwAoC0lxTGA68YHghxRz0P4shinkNwyygMCOKIiYAlDsM83ic7dLrTQMxGETRu8QkISzkAXmQbYFyEAXlF6VOF5v5nCkDS8eSLXu18gzwDCzs2xoMfwzUuHl36PsLNn2/8dvPtNrXdZ49U7PXrc9PPtv8xSUr1rz43isjb7yzZceeAx98cuTEmQtfXJl8bcn/GGsafrKa6mUf+luH3xdFZaao11dUngrngMKJoHA2KJwSispZ4eRQ1N8pnCYK54rCCaNw1iicOgrnj8JNQOFOoHA7ULgnKNwYFO4OCrcIhfvkXj4w3QGCQD9+eJxjYEAGAAAOAAEAeJytV2tbG8cVntUNjAEDQtjNuu4oY1GXHckkcRxiKw7ZZVEcJanAuN11brtIuE2TXpLe6DW9X5Q/c1a0T51v+Wl5z8xKAQfcp89TPui8M/POnOucWUhoSeJ+FMZSdh+J+Z0uVe49iOiGS9fi5KEc3o+o0Eg/mxbTot9X+269TiImEaitkXBEkPhNcjTJ5GGTClrVVb1JRS0HR8XlmvADqgYySfyssBz4WaMYUCHYO5Q0qwCCdECl3uGoUCjgGKofXK7z7Gi+5viXJaDyR1WnijVFohcdxKMVp2AUljQVPaoFEeujlSDICa4cSPq8R6XVB6NrzlwQ9kOqhFGdio14960IZHcYSer1MLUJNm0w2ohjmVk2LLqGqXwkaZ3X15n5eS+SiMYwlTTTixLMSF6bYXST0c3ETeI4dhEtmg36JHYjEl0m1zF2u3SF0ZVu+mhB9JnxqCz243iQxuR4cZx7EMsB/FF+3KSylrCg1Ejh01TQi2hK+TStfGQAW5ImVUy4EQk5yKb2fcmL7K5rzedfEknYp/JaHYuBHMohdGXr5QYitBMlPTfdjSMV12NJm/cirLkcl9yUJk1pOhd4I1GwaZ7GUPkK5aL8lAr7D8npwxCaWmvSOS3Z2nm4VRL7kk+gzSRmSrJlrJ3Ro3PzIgj9tfqkcM7rk4U0a09xPJgQwPVEhkOVclJNsIXLCSHpwsixlUitSresirkzttNV7BLul64d3zSvjUNHc7OiGEKLq+rxGor4gs4KhZAG6VaTFjSoUtKF4DU+AAAZogUe7WK0YPK1iIMWTFAkYtCHZloMEjlMJC0ibE1a0t29KCsNtuKrNHegDptU1d2dqHvPTrp1zFfN/LLOxFJwP8qWlgJyUp8WPb5yKC0/u8A/C/ghZwW5KDZ6Ucbhg7/+EBmG2oW1usK2MXbtOm/BTeaZGJ50YH8HsyeTdUYKMyGqCvFCQd0ZOY5jslXTIhOFcC+iJeXLkOZRfnOIcOLL5D+XLjliUVSF7/scgWWsOWm2PO3Rp577NMK1Ah9rXpMu6sxheQnxZvk1nRVZPqWzEktXZ2WWl3VWYfl1nU2xvKKzaZbf0Nk5lp5W4/hTJUGklWyR8w7flibpY4srk8WP7GLz2OLqZPFjuyi1oAvemX7CqX9bV9nP4/7V4Z+EXU/DP5YK/rG8Cv9YNuAfy1X4x/Kb8I/lNfjH8lvwj+Ua/GPZ0rJtCva6htpLiUTTc5LApBSXsMU1u67pukfXcR+fwVXoyDOyqdINxY39iQyXvX92nOJsvhJyxdEza1nZqYURmiJ7+dyx8JzFuaHl88by53Ga5YRf1Ylre6otPC9W/iX4b+uO2shuODX29SbiAQdOtx+XJd1o0gu6dbHdpI3/RkVh90F/ESkSKw3Zkh1uCQjt3eGwozroIREePnRdvEgbjlNbRoRvoXet0EXQSminDUPLZoVP5wPvYNhSUraHOPP2SZps2fOoovwxW1LCPWVzJzoqybJ0j0qr5adinzvtDJq2MjvUdkKV4PHrmnC3s69SKUgGisp4VLFcClIXOOFO9/ieFKah/6tt5FhBwza/WDOB0YLzTlGibE+toIkgGWUUXPkrp+JENqLBRhTxm3fSL3WhENrjWEjMllfzWKg2wvTSZIlmzPq26rBSzuKdSQjZGRtpEntRS7bxoLP1+aRku/JUUKWB0d3j3y42iadVe54txSX/8jFLgnG6Ev7AedzlcYo30T9aHMVtuhhEPRdvqmzHrWzdWca9feXE6q7bO7Hqn7r3STsCTbe8Jync0nTbG8I2rjE4dSYVCW3ROnaExmWuz1Ub+RQfaL51nQtU4fq0cPPs+ds6m8FbM97yP5Z05/9VxewT97G2Qqs6Vi/1OLezgwZ8yxtH5VWMbnt1lccl92YSgrsIQc1ee3yN4IZXW3QTt/y1M+a7OM5ZrtILwK9rehHiDY5iiHDLbTy842i9qbmg6Q3Ab+uRENsAPQCHwY4eOWZmF8DM3GNOB2CPOQzuM4fBd5jD4Lv6CL0wAIqAHINifeTYuQdAdu4t5jmM3maeQe8wz6B3mWfQe6wzBEhYJ4OUdTLYZ50M+sx5FWDAHAYHzGHwkDkMvmfs2gL6vrGL0fvGLkY/MHYx+sDYxehDYxejHxq7GP3I2MXox4hxe5LAn5gRbQJ+ZOErgB9z0M3Ix+ineGtzzs8sZM7PDcfJOb/A5pcmp/7SjMyOQwt5x68sZPqvcU5O+I2FTPithUz4Hbh3Juf93owM/RMLmf4HC5n+R+zMCX+ykAl/tpAJfwH35cl5fzUjQ/+bhUz/u4VM/wd25oR/WsiEoYVM+FSPzpsvW6o4o1KhGOKfJrTB2Pdo+oCKV3uH48e6+QUl2gFBAAAAAAEAAf//AA94nI1Ze3Abx3nfb/du93B4A4cDHyBIAgRA8QGCAHmgKIqCJIp6kJJIWS/KliXZqmUpcqLIsuoosUrLsmyrSZy6qT3jemLFTdJUk3Eerp3HeJI/6mkzmWZqt1PXyTRtJ5M2aTvptBN16rYR3N8eyNhJ0zrE4fawu7f77ff4fb9dMmL4E8O8g8VYe8O1iRHNc0LxMBrOO6m4kO2DBbdaJ2+sTCpAxVyE0vRYspakiWSxlmjeaP4kMdZHyfOJBK31n5o3KKSbMALGf+uH9O/8dYyfbjit8dnq8G0pLtsGk9JJk1v1iqUAJilKtZjUY9eKlNAjJfrGknQ1MZZo/on/GMLguq01Nq/9v2OT6yiSuaJXh+RjnpvmPclk85v+ABSG5P/X4C3Zfd0cXNUNhp7X1Q9DQbSqG/KqkN6JEKSXuTLVf5lu+GxCz6AfKdS80VKOgPzfFFf5DZZkfWwt29CYMltrYMSJ8WVJwsSkgk4ybhh8iXFuHGMGNxaLhZRTGSmsLa7tyjh9qb6skulBKhVz0dZNdlPLZKVqljsRnivzsWlezympoGw3jUavjtZiqchfyXHF/+WAMEXeMN4bTAfJ5H8+++Dx8fE7H/xIq9j63iO3efW6d9uRv159oO/0cf6v+4XISXlPMEiSqx++/YIuvJ/r7z+s6vQa/xJrY32NXsY4e5hx4g8zEoKWsHpxDAsWi23JZNyQHYPwN23AEfKX5XTzlXWJeZW2mmct1/o8HnZa1hf0M2eWxa9baFDqS5a1BVVfvVcpVKcVplrVd4wVWKUxbBI3oHDOTv7i7Ik4sUxnvJAoBCwWo5iU7iC9qyrpxruqjX/93ZX0tl90siG2ke1qzLlRiwwO94M7wP7wDUHcNLh5EU6HJiaNk8xUylxipqmOMWWqxfJwV2aiPryxvLHQlxnqGnLanJQNjRZKENf3lDJJt5uwDNfbQFiINybe3V0eOXEikOgI4N7uEAo76f/oSDzzrov/D7+f7k1Ou361PalHwHD06q/gO1ovXxA/4n/EUmyC3cb2N245GLIEsWqAC9pFphDzeTJpbhMZ2xVxuWpbhjAS0I9h+PrRMWQai2mX2OLunXPZjDuRnohFWIpSlrYzAE45WjG+VmrVaQLy6UBCjOdKUInK54rjQJPxDRxaQtvYNFGWEHPdQqET1FSS+VwJ73r1aTSXsuRIemzfk/tpatxLJqPt2cEB/Nr/5L5TL93NT3/pdKU6uy/VyWUIkW/0mpGIsWUXnfpD7pkhqzMAcWFvW2Wc/bPVylNneuKHPrVpyzyFt+1d4B+aPL52eH+2pxy0E9KaPH7mrolt85efubSLAqNp07AVGQYJmTfbErH+c5t3XZ6/eS7i2r1BYUpbWDYZZno0sENUR8au7BgcKN3/yPnVON3Dv81GWH+jAP0ZArCH+ivMIDKWGAY9xsgggHV3MtklZUaDrR+jrXI1ZnU5tgExu1JWNTbpMi22W9arSr1qWTqYX135zqHSv+YtF21p9RpK/gGE8msrPeYV6nSPObSu9PBf88fy/eSzxsvCYZvZAjvMGo3145WhnKGhNWRbQNIdk9kOwbYbpJFHAvlWk8aexS0zBw8sHt5zeG7HzMKWhcEBpT2imC+WdDAUFUybl8oPjLQfGTowtMGxsml4S0/d07UOOiBNrrSPowchNcBNqvCECPW+8wfUSWcucIqHH3ooHCd+4QzRe9YUYvTQM5z3dpAYGSQEuck/Qmt+k2sXocERZKCOXs6feYgSw4M3d2cqmUxl7UhnZoSOZUYymRE8d1b4t6iWoq5ux+nuolSNrl1/+jrRsQrx4argiXZMbUqTGg3gINyA2uMkeHWYU+UY0Uufebb5aPf49HhPtzc93v32k6/f/0QcPsDiLMdqbLaxOYjMxMMIND4PfBLcEMvoxgW7qHMZo4tMIoVJjmA0TR9ozWPMJBNB2Oek2lwlu6DlkptyZJnGx+pSZanHo7GiysmUA2QaH/MQTCb0avT0Qdt1b4iMtCs+uW8598SrT+SW9839HRnfb345Fpw9HnNjM5VgjL4T3NV8s/nd5pu7gsFdZFGRrF1Bmry8cXLziY/zj53cPLnx8tlHH6Xt6Ht8SzAWC1ZmYn+aTD749NMPJovO8tP8ExedFof5Iv+x2MMcVmtU8FsiRwsurmBVjCQ7gSzNOR1AQfyI71W783H8JXv9haXyOdlFNZWP4zNe89fCf3ygkvuU+9Hrjz9+7ugeMffb/f2nPt08SJ/99IW7z7aw7ovikyLIQvQN+immaTlLy3EICAW0BrbA3YrTfAPJYslR4E6lsgFkKo4Bw1Kt6FNwvjy4VQ3xV+Ya7BXGceGeKQn/1F2i+nV8tHeralF5YzWvjmlKrj9D1a25Xqnq95DpnEZBHQ4ehgXZwIhZqqZdWConXQXzuaW8krlSEbJpIFQA0JqXrrtpvK5cBRjwgwnrceuu0kGiJXdrOemotHTrsptnBR5SSgI4047rIMTKvFQDcsgsr6F/VaMtvjzLNZToOMtljbRXxzDeuMQUXro6PkJYM5aWclQeWI6UBn/C6nmxpEHbGyG9vHVUHatDRy4it44lZzkAyoO4WfLW01hpHJ0B4xxCVOu5Yq7klbAgBDaKujuOlnTdw9slreSqRgPh1YtAPWQNqBzfYpR8U6Sx8DJpiFRFD5URKsooepSQbNwWpEiHbtz3yrlzr/yTvqGHZSDxGzE3GaCQEQEQgBRKyXFxhCweOOcm7oEAcAxxZwYMKyuEJEkxgQswrVMKsqEtDDMshBNJCDAi0AcphWMJ2UoD+GlyrixTkhXioHOGyWOmHTUiBuYDuxMQBUkA/eMyoCwDDk/SoI5OQ1o8aQhLGOEgJlIWZBB7RvG+NEVbkDhSjOYqCA7LUglTYSagTkgHSwTCU9QSGj4gvrRsbpmmGZJI6NIIKBELWIYKRExHj8PNCGgaDxkqboO74VUuFcagAIaCIqQKQld6Co1mgksBQgf9YP1tBiQWYR4xMbIBaiADUIxlQBDLEiEB8aAppFlwKmUYIqFhWYQIpN8Og2Npia2QffLeRW7zMIgEFMQDWhqMxwk0pKUjwzINJaQ2DN7lGlijJAKWCK6YFLfm98iCAdFXmEEKYSDMozim1mYKmRAbOUrqvCA4iCnnlq8dCGgYIRKWshXw2gy1lgcxAxHYFrYTcS4iFiSFkwRECJajiGFjVJg2ZCHkA6YF+2gkxgQwsS1EBI2AYwMuYQpuRaFFwQN4FAaWIdE2vNvwbS+jtpbKMiMJFx7SwQn0QkjTESKmoQ/rgaQUbAubIRjUCFmRoCI7aIcNyx8b9qKEsA3LlpgZSwrxmJUIadPBoSA//BfWssJwGYgY5DpXc6PNkgkTkQBtaqfDlCoc1RbWqheWmYbiIF/U4LZ2C0nBANwNo2IacD5NnZRpSMIKw2gQWCxvhlP74EBYooBW9Vg6TLgtpNY4lByR+G1xC/ZBv4gbD0QCMFVMreQD8TiwOc+8Ri0BIyRbqY/7Se8kmIRpMPPELzKlVCFfKsR8ptSLVBehfK4spnmtmlbFPHAVQAq2Kep5ukG/I49//QMHP3FuE58989z+37//3Ja7tl3Yhmt0wSs6/Cf0u4XcB75+eubsteevnZ15/5nNOy48eWFHpugNpTR1M3+WPyxk6Q62l93DDjUOMJsrZZ9lkVAQ0RmRIMUMkmLzgIRDwifLwBV+MmBxFQ6rJV2q8FEWVuGFU792+9LeW/Ysrp+aXDsBVrM56eCTiOoUhw2F1Hm6rhM4UoeLhxwoctUt5FqM2r8c6eIDUPevquvhAxT1rzEPoOiV9bYEV64oydEvyR5dUYz5qahHv+jyh/ae34tr5/JXlnFNZQeyuJo/MkrrnE3VaGYgKG1D/1ncDg5kYpWZ4oJcKM5UYr+0ia4LefG+0bfY6Lll7CH0M7We6fZ1ep696269xC9+7SK/dDWlZ8reBcz7FQb+uabmc8v/a3z/ucVXxXvAVwV2psNse2M2h20MzSsglInQWZbY+5lg3iIAFBRgUai0lrDX1SzKMhdNo7/Y29Od7WhLxIO2ETNj8Zgt2wbT+Xit9E6uSfm4v4vLIwGnwEZqKWR6sBGdhFOvvPjirZnRTGZ0Qt/4P7xoyER6cGN78sXnuTMwuv5AbTgRO8i37+6qTFa6/NvNu6lrJF1KtZfzW5p/w7cvlNqzhd5N9QMr5yfwwVvFLWxOc8SJPiBNUkPWfBfRdvBBvYFdZiawS4Angjgy7YjoscSArIgZQYuzW6Ymq5WB/v6C1EdFY9MijaUgiQvNQmSUR4Q+8wCn2kD6Xq9qEukHklEaw0LBH7McVflSWTw+sOP2s/WlJ+/gTqVxx0RxR1za4aAVcTMpKLqtvSsxOZwrVqnal/V6euwQv3Dn+56MxCKxcKBrqC3EzalTC5NZ2vHRJe+uo7Nl3tftrhnvz7iV/oyQB+O15WPv75scWaByrnB1azlTmWxMdRw9/bH3tZc7OoxolQJD05NshT9f9GOzh61lk426i0X3B0CUASLYrMLzlsEtTYCrjkjmM2Z2BKCGX7s9dyIzlkxoallYjTLTlQizYit26mDQoDVZ8bNagVpwGVS6hpugjdOHpnGBQTnxuYhDoZd+Q98DUbH03PIO8ORUbAEV6vgn3rg/4qSi/AmyX7v/+LB+afpsNJ2ILL8Ugj/NxWxbzV/81KGo64Tvf+PaHRYqF2KOdf615g1Gb/33W/8m3sffAP60N9x40BQ/d0LntPsndCICiqTZT75OXlEq8vkWeVns2R9Whcy3jgWUHYnQfZaZsJu1P3YjyQ5hJbJh/ls3n+iNxz5+GMni27SoAqSa35tW6TabBpWdw/z/9dZdiKs9rMBGG+W4ADwnoEcN1EKfODG6oo3huxs7pg2zWOjryqRjhpYLeouDKwKhRTpV9NF5msbjNSc9qkGoJt6z8YNjtcMfvHTfgVJww10PbBw+VJ+49VD9c0agvmZqK32lVGz+3qZfPzQiJ+780KV7F3OBz0eyO2/f2ZXdOcKvu6nKns6SHyNfEAnImGNjjdE0/AASmqsiIjlpZzih8dw/u9BimhAzHl/j5nUmKaSRRmRZ1LGzmDbq2sSpWiofh9OnPf73w+E7qpNHGwMO3d7fKHZoovPYV79mxfrbh05fTvZRT3VmUy9V7o9Uq41yhzB+/OHm38YzPUAKxCNkOyW+CtkEU0CmNrbY2BUgFohHuSKHQHTmQ2Rst7EFCjAZOMH1WSUpRicsAolSB1Ao44iJnsZuy2oDxiQTVsyKJZLYHMWCOhHmU7USvqSARfUaxYXKq/F8vJf/dG7uz+bnm994+fsvP0V755966vIf8Fv5o6//1ev07As3L77wAm2kG83K4w88wNvYytnel/kNFmRRNtIYCmo2YZg0j739O7LxAZ2Nj2gWQbvjCfy10nEtQL1ByuPeSTXK8zevNv+C7mj+83ffvEqbmp+jrldemG8m9/Abzc82hyjT/AGdoZebN5tr+IdXzkqMLfwpGGdtw2vzz4lbsQoLkibsy0rvtK8A0aQfy/IY9pBycaJ9yBv22kYtmR0kb9DfJfgnB/lcEeFaRA3gS4MzPhrDcnqfVibUq7cb/GMmbFWKSJHV1TrsavxzCew+9BGE/hhrQiP39kUSbR2FgpO2VSiSeDEcM8C3pM0DoeRsX7Ez4KbuTQesqNNX3jh75PDhfJ/Um9tQj9tdTvd0hRKpe9tdFZrunYiAwNsiP9DVz08P9vZXB9evcZB2fuCm4rZSZiAWcXuud8YPzOzY3e7YVjQ1Mr310K3HJzzbtmKjlYgTCseH0vneQLitrbC1NBGNhqyYqG2ozvhHT7Dn8+AvEdbP1rHd7Gjj8AS8a/vkWmGwrfAuMb+N1HbNXPXhnj5tMP3TBgOERh+KMhOk/aQF11PGEgpDn4oaCuRlYM3szNTu9buro2vWDazLxjvW6FNRkBG4p+Pr3icc60lnxnRV782g+hVlVz0BhlZG1kk7aVV3k60D01KupOpIP9Oc36OOgkcGpjp7dtQXBvt5fzjmwBkTkaJIFnrGZWTo1NZLt3t88tCVq1cOTfHNQ48s3b3vmTMzM2ee2XfPkX+cn5p57zWkL+yGEm1uNt++Z3qqYlaLoMnh0aIIDVjmmny20/Ca35m47fKHL982yb2jy9vef9ulwUkh8O5nrp3exsfnvn/n+f1Pn5tmrdj4obGN/yWrsnHW0UiPj9XEz/6XAW88X+i6zPU/EMrUchnV8kJdRP1TrDTQBIrw/WjaLzb4XSluGlW7mi+c3nly6dDJnacL+WrAlnqzh02GHahuQ8OhpVYD2LneJpBp3nyM0vzoO2tsu5YrbK6sq4BVbC7kqs7bDVXdMFlB2+bmZVr/7P8AtkfpegAAeJxjYGRgYABiE+Pzd+P5bb4y8DO/AIowPFLffRRG///1P41lD3MwkMvBwAQSBQCA1Q4/AHicY2BkYGAO+p/FwMDy6P+v/39Y9jAARVCADACyWAd3eJxjfsHAwJzNwMBUCMEgNvML7JjlEQ45ZD3Z/38D8S8UfakIGgArtxk+AAAAAAAAADAAXgCOAL4BOAF2AcoCVgMMA2oEGgSSBMwHmgfsCMIJLgm6Ci4KbgrACw4LZAuiDEwM8g1aAAAAAQAAABwB/QAFAAAAAAACAB4ARQCNAAAAdQ4MAAAAAHicdZDLasJAFIb/8dKLQlta6LazKkpp1GA3giBYdNNupLgtMcYkEjMyGQVfo+/Qh+lL9Fn6G8dSlCZM5jvfnDkzOQCu8Q2B3fPEsWOBM0Y7LuAUXctF+mfLJfKL5TKqeLN8Qv9uuYIHhJaruMEHK4jSOaM5Pi0LXIlLywVciDvLRfpHyyVy13IZt+LV8gm9b7mCscgsV3EvvvpqudFxGBlZ69el23TbcrKRiipOvUR6KxMpncmenKnUBEmiHF8t9jwKwlXi6X24n8eBzmKVypbT3KthkAbaM8F0Wz1bh64xMznTaiEHNkMutZoHvnEiY5adRuPveehDYYkNNGK2KoKBRI22ztlFk6NNmjBDMnOXFSOFh4TGw4o7onwlY9zjmDFKaQNmJGQHPr+LIz8ihdyfsIo+Wj2Mx6TtGXHuJVqs2zzKGpLSPNPL7fT37hnWPM2lNdy1vaXObyUxOKgh2Y/t2pzGp3fyrhjaDhp8//m/H+BnhE0AAAB4nG2OWXKDMBBE1RBWE2ffnSP4UCDGoEJoKGkI5dsHB3+mf/p1TVfXqEhtKtX/OiBCjBskSJEhR4ESO1S4xR53uMcDHvGEZ7zgFW94xwc+8YUDvlVZe8/LseXFXdHSSXYbetP1km88T5XuSQ9Hbby2lPyF/RaOPIs1jiptOdC1kWkeR3KSaM8hZK0Jmn0b05nyU62pYR6SznJDacfcWSqMC1J3vh7zdWug1rhiMk7IU5DYh5ALWbrcUzGD8JDKPDbWp7IY0X12sbUc/Qz50tcS6mnKzutjc0NK/QIzNlZBAHicY/DewXAiKGIjI2Nf5AbGnRwMHAzJBRsZ2J02MjBoQWguFHonAwMDNxJrJwMzA4PLRhXGjsCIDQ4dESB+istGDRB/BwcDRIDBJVJ6ozpIaBdHAwMji0NHcghMAgQ2MvBp7WD837qBpXcjE4PLZtYUNgYXFwCUHCoHAAA=)format("woff")
}

[class^=icon-]:before,
[class*=\ icon-]:before {
    speak: never;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 1em;
    font-family: sam-icons;
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    display: inline-block
}

.icon-arrow-down:before {
    content: ""
}

.icon-arrow-left:before {
    content: ""
}

.icon-arrow-right:before {
    content: ""
}

.icon-arrow-up:before {
    content: ""
}

.icon-check-circle:before {
    content: ""
}

.icon-check:before {
    content: ""
}

.icon-circle-outline:before {
    content: ""
}

.icon-close-circle:before {
    content: ""
}

.icon-comment:before {
    content: ""
}

.icon-cross:before {
    content: ""
}

.icon-discord:before {
    content: ""
}

.icon-eye:before {
    content: ""
}

.icon-facebook:before {
    content: ""
}

.icon-globe:before {
    content: ""
}

.icon-google:before {
    content: ""
}

.icon-instagram:before {
    content: ""
}

.icon-linkedin:before {
    content: ""
}

.icon-pinterest:before {
    content: ""
}

.icon-rss:before {
    content: ""
}

.icon-telegram:before {
    content: ""
}

.icon-tiktok:before {
    content: ""
}

.icon-tumblr:before {
    content: ""
}

.icon-twitch:before {
    content: ""
}

.icon-twitter:before {
    content: ""
}

.icon-vk:before {
    content: ""
}

.icon-whatsapp:before {
    content: ""
}

.icon-youtube:before {
    content: ""
}

.site-preloader {
    z-index: 9999;
    background: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: opacity .5s, visibility .5s;
    display: flex;
    position: fixed;
    top: 0;
    left: 0
}

.dark-mode .site-preloader {
    background: #0f172a
}

.site-preloader.hidden {
    opacity: 0;
    visibility: hidden
}

.preloader-content {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    display: flex
}

.preloader-spinner {
    border: 4px solid #2b39901a;
    border-top-color: #2b3990;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: 1s linear infinite preloader-spin
}

.dark-mode .preloader-spinner {
    border-color: #60a5fa #60a5fa33 #60a5fa33
}

.preloader-logo {
    opacity: .9;
    max-width: 120px;
    height: auto;
    animation: 2s ease-in-out infinite preloader-pulse
}

.preloader-logo-dark {
    display: none
}

.dark-mode .preloader-logo-dark,
.preloader-logo-light {
    display: block
}

.dark-mode .preloader-logo-light {
    display: none
}

@keyframes preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes preloader-pulse {

    0%,
    to {
        opacity: .9
    }

    50% {
        opacity: .6
    }
}

.commentator-detail-page {
    padding: clamp(32px, 4vw, 60px) 0
}

.commentator-detail {
    background: #fff;
    border-radius: 16px;
    margin-bottom: clamp(24px, 3vw, 32px);
    padding: clamp(24px, 3vw, 32px);
    transition: box-shadow .3s;
    box-shadow: 0 2px 12px #0000000a
}

.dark-mode .commentator-detail {
    background: #1e293b;
    box-shadow: 0 2px 12px #0000004d
}

.commentator-detail-content-wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 24px);
    display: flex
}

.commentator-detail-left {
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    min-width: 200px;
    display: flex
}

.commentator-detail-right {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.commentator-detail-right:has(.commentator-detail-info):not(:has(.commentator-detail-biography)) {
    justify-content: center;
    align-items: flex-start;
    min-height: 160px
}

.commentator-detail-right:has(.commentator-detail-info):not(:has(.commentator-detail-biography)) .commentator-detail-info {
    text-align: left
}

.commentator-detail-photo-wrapper {
    flex-shrink: 0;
    display: inline-block;
    position: relative
}

.commentator-detail-photo {
    z-index: 2;
    background-color: #f0f0f0;
    border: 4px solid #2b39901a;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: clamp(120px, 15vw, 160px);
    height: clamp(120px, 15vw, 160px);
    transition: transform .3s, box-shadow .3s;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px #2b39901f
}

.commentator-detail-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px #2b399033
}

.dark-mode .commentator-detail-photo {
    background-color: #2a2a2a;
    border-color: #b8c5e033;
    box-shadow: 0 6px 20px #0000004d
}

.dark-mode .commentator-detail-photo:hover {
    box-shadow: 0 8px 24px #3b82f640
}

.commentator-detail-photo-decoration {
    z-index: 1;
    background: linear-gradient(135deg, #2b399014, #3b82f614);
    border-radius: 50%;
    animation: 3s ease-in-out infinite commentator-pulse;
    position: absolute;
    inset: -8px
}

@keyframes commentator-pulse {

    0%,
    to {
        opacity: .4;
        transform: scale(1)
    }

    50% {
        opacity: .6;
        transform: scale(1.03)
    }
}

.commentator-detail-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.commentator-detail-info {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    display: flex
}

.commentator-detail-left .commentator-detail-info {
    align-items: center
}

.commentator-detail-name {
    color: #19224a;
    letter-spacing: -.02em;
    margin: 0 0 4px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.3
}

.dark-mode .commentator-detail-name {
    color: #f1f5f9
}

.commentator-detail-badge {
    color: #2b3990;
    background: linear-gradient(135deg, #2b39901a, #3b82f61a);
    border-radius: 18px;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex
}

.dark-mode .commentator-detail-badge {
    color: #b8c5e0;
    background: linear-gradient(135deg, #3b82f633, #60a5fa26)
}

.commentator-detail-badge svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px
}

.commentator-detail-biography {
    margin-top: 0;
    padding-top: 0
}

.dark-mode .commentator-detail-biography {
    border-top-color: #b8c5e026
}

.biography-title {
    color: #19224a;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700
}

.dark-mode .biography-title {
    color: #f1f5f9
}

.biography-content {
    color: #39486d;
    font-size: 15px;
    line-height: 1.7
}

.dark-mode .biography-content {
    color: #cbd5e1
}

.biography-content p {
    margin-bottom: 14px
}

.biography-content p:last-child {
    margin-bottom: 0
}

.biography-content h1,
.biography-content h2,
.biography-content h3,
.biography-content h4 {
    color: #19224a;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 700
}

.dark-mode .biography-content h1,
.dark-mode .biography-content h2,
.dark-mode .biography-content h3,
.dark-mode .biography-content h4 {
    color: #f1f5f9
}

.biography-content ul,
.biography-content ol {
    margin: 14px 0;
    padding-left: 20px
}

.biography-content li {
    margin-bottom: 6px
}

.biography-content a {
    color: #2b3990;
    text-decoration: underline;
    transition: color .3s
}

.dark-mode .biography-content a {
    color: #b8c5e0
}

.biography-content a:hover {
    color: #1e2a66
}

.dark-mode .biography-content a:hover {
    color: #d4e0f5
}

@media (max-width:768px) {
    .commentator-detail {
        padding: 20px
    }

    .commentator-detail-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 24px
    }

    .commentator-detail-left {
        align-items: center;
        width: 100%
    }

    .commentator-detail-right {
        width: 100%
    }

    .commentator-detail-photo {
        width: 120px;
        height: 120px
    }
}

.commentator-nav-buttons {
    gap: 12px;
    margin-bottom: 24px;
    display: flex
}

.commentator-nav-btn {
    color: #64748b;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    transition: all .25s;
    display: flex
}

.commentator-nav-btn:hover {
    color: #2b3990;
    background: #2b39900a;
    border-color: #2b3990
}

.commentator-nav-btn svg {
    width: 18px;
    height: 18px;
    transition: transform .25s
}

.commentator-nav-btn:hover svg {
    transform: scale(1.05)
}

.dark-mode .commentator-nav-btn {
    color: #94a3b8;
    background: #1e293b;
    border-color: #334155
}

.dark-mode .commentator-nav-btn:hover {
    color: #b8c5e0;
    background: #3d4fa81a;
    border-color: #3d4fa8
}

.commentator-nav-btn.active {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990
}

.commentator-nav-btn.active:hover {
    background: #3d4fa8;
    border-color: #3d4fa8
}

.dark-mode .commentator-nav-btn.active {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990
}

.dark-mode .commentator-nav-btn.active:hover {
    background: #3d4fa8;
    border-color: #3d4fa8
}

.commentator-tab-content {
    display: none
}

.commentator-tab-content.active {
    display: block
}

#comments-container {
    flex-direction: column;
    display: flex
}

#coupons-container {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 16px;
    display: grid
}

#coupons-container.showing-empty-state {
    justify-content: center;
    align-items: center;
    min-height: 200px;
    display: flex !important
}

#coupons-container.showing-empty-state .coupon-item-link {
    display: none !important
}

.commentator-empty-state {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(40px, 5vw, 60px) 20px;
    display: flex
}

.commentator-empty-state .empty-icon {
    color: #9ca3af;
    background: linear-gradient(135deg, #2b39901a, #3b82f61a);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    transition: all .3s;
    display: flex
}

.dark-mode .commentator-empty-state .empty-icon {
    color: #64748b;
    background: linear-gradient(135deg, #3b82f626, #60a5fa1a)
}

.commentator-empty-state .empty-icon svg {
    width: 32px;
    height: 32px
}

.commentator-empty-state .empty-text {
    color: #6b7280;
    margin: 0;
    font-size: 15px;
    font-weight: 500
}

.dark-mode .commentator-empty-state .empty-text {
    color: #94a3b8
}

@media (max-width:768px) {
    .commentator-nav-buttons {
        gap: 8px;
        margin-bottom: 20px
    }

    .commentator-nav-btn {
        gap: 8px;
        padding: 12px 16px;
        font-size: 14px
    }

    .commentator-nav-btn svg {
        width: 16px;
        height: 16px
    }
}

.city-filter-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px #0000000a
}

.dark-mode .city-filter-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 12px #0000004d
}

.city-filter-title {
    color: #111827;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 700
}

.dark-mode .city-filter-title {
    color: #fff
}

.city-list {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.city-item {
    text-align: left;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    transition: all .2s;
    display: flex
}

.dark-mode .city-item {
    background: #1e293b;
    border-color: #334155
}

.city-item:hover {
    background: #2b39900d;
    border-color: #2b3990
}

.dark-mode .city-item:hover {
    background: #334155;
    border-color: #3d4fa8
}

.city-item.active {
    background: #2b399014;
    border-color: #2b3990
}

.dark-mode .city-item.active {
    background: #2b399033;
    border-color: #3d4fa8
}

.city-name {
    color: #111827;
    font-weight: 600
}

.dark-mode .city-name {
    color: #fff
}

.city-item.active .city-name {
    color: #2b3990
}

.dark-mode .city-item.active .city-name {
    color: #b8c5e0
}

.comment-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 24px;
    padding: 24px
}

.dark-mode .comment-item {
    background: #1e293b;
    border-color: #334155
}

.comment-header {
    border-bottom: 2px solid #e2e8f080;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    display: flex;
    position: relative
}

.dark-mode .comment-header {
    border-bottom-color: #33415580
}

.comment-city {
    color: #111827;
    margin: 0;
    font-size: 20px;
    font-weight: 700
}

.dark-mode .comment-city {
    color: #fff
}

.comment-date {
    color: #64748b;
    background: #94a3b81a;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500
}

.dark-mode .comment-date {
    color: #94a3b8;
    background: #94a3b826
}

.comment-cards {
    flex-direction: column;
    gap: 16px;
    display: flex
}

.comment-card {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px
}

.dark-mode .comment-card {
    background: #0f172a;
    border-color: #334155
}

.comment-card-title {
    color: #1e293b;
    letter-spacing: -.2px;
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 700
}

.dark-mode .comment-card-title {
    color: #f1f5f9
}

.comment-card-content {
    color: #475569;
    font-size: 15px;
    line-height: 1.7
}

.dark-mode .comment-card-content {
    color: #cbd5e1
}

.comment-card-content p {
    margin-bottom: 8px
}

.comment-card-content p:last-child {
    margin-bottom: 0
}

.comment-card-content ul,
.comment-card-content ol {
    margin-bottom: 8px;
    margin-left: 16px
}

.comment-card-content a {
    color: #2563eb;
    text-decoration: underline
}

.dark-mode .comment-card-content a {
    color: #60a5fa
}

.comment-card-content strong {
    font-weight: 600
}

.comment-card-content em {
    font-style: italic
}

.coupon-item-link {
    color: inherit;
    text-decoration: none;
    display: block
}

.coupon-item {
    cursor: pointer;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    min-width: 0;
    margin-bottom: 0;
    padding: 16px;
    transition: all .25s;
    position: relative
}

.coupon-item-link:hover .coupon-item {
    border-color: #2b3990;
    transform: translateY(-2px)
}

.dark-mode .coupon-item {
    background: #1e293b;
    border-color: #334155
}

.coupon-item:hover {
    border-color: #2b3990;
    transform: translateY(-2px)
}

.dark-mode .coupon-item:hover {
    border-color: #3d4fa8
}

.coupon-header {
    border-bottom: 2px solid #e2e8f080;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    display: flex
}

.dark-mode .coupon-header {
    border-bottom-color: #33415580
}

.coupon-title {
    color: #1e293b;
    letter-spacing: .2px;
    font-size: 16px;
    font-weight: 700
}

.dark-mode .coupon-title {
    color: #f1f5f9
}

.coupon-date {
    color: #64748b;
    letter-spacing: .2px;
    font-size: 13px;
    font-weight: 600
}

.dark-mode .coupon-date {
    color: #94a3b8
}

.coupon-races-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-top: 12px;
    display: grid
}

.race-column {
    border-right: 1px solid #e5e7eb;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 4px;
    display: flex
}

.race-column:last-child {
    border-right: none
}

.dark-mode .race-column {
    border-right-color: #334155
}

.race-label {
    color: #475569;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
    margin-bottom: 4px;
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 700
}

.dark-mode .race-label {
    color: #94a3b8;
    border-bottom-color: #334155
}

.race-numbers-vertical {
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: 5px;
    padding-top: 4px;
    display: flex
}

#coupons-container .coupon-item .race-numbers-vertical,
.all-coupons-item-races .race-numbers-vertical {
    max-height: 185px;
    position: relative;
    overflow: hidden
}

.coupon-races-grid {
    position: relative
}

#coupons-container .coupon-item .race-numbers-vertical {
    max-height: 185px;
    overflow: hidden
}

#coupons-container .coupon-item .coupon-more-indicator {
    text-align: center;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(#fff0, #fffffffa 60%, #fff);
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    padding: 10px 0 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.dark-mode #coupons-container .coupon-item .coupon-more-indicator {
    background: linear-gradient(#1e293b00, #1e293bfa 60%, #1e293b)
}

.coupon-more-text {
    color: #2b3990;
    pointer-events: auto;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s;
    display: inline;
    text-decoration: none !important
}

.coupon-item-link .coupon-more-text,
.all-coupons-item-link .coupon-more-text {
    text-decoration: none !important
}

.dark-mode .coupon-more-text {
    color: #3d4fa8
}

.coupon-item-link:hover .coupon-more-text {
    color: #1e2561
}

.dark-mode .coupon-item-link:hover .coupon-more-text {
    color: #4d63d1
}

.no-numbers {
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    font-weight: 500
}

.dark-mode .no-numbers {
    color: #64748b
}

.number-badge {
    color: #334155;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: 700;
    transition: all .2s;
    display: inline-flex
}

.dark-mode .number-badge {
    color: #cbd5e1;
    background: #1e293b;
    border-color: #334155
}

.number-badge:hover {
    border-color: #2b3990;
    transform: translateY(-1px)
}

.dark-mode .number-badge:hover {
    border-color: #3d4fa8
}

.number-badge.favorite,
.number-badge.highlight {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990;
    font-weight: 800
}

.dark-mode .number-badge.favorite,
.dark-mode .number-badge.highlight {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990
}

.favorite-star {
    color: #fff;
    margin-left: 4px;
    font-size: 11px;
    line-height: 1
}

.dark-mode .favorite-star {
    color: #fff
}

@media (max-width:768px) {
    .city-filter-card {
        margin-bottom: 16px
    }

    .comment-header,
    .coupon-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .coupon-item {
        max-width: 100%;
        padding: 12px
    }

    .coupon-races-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 0
    }

    #coupons-container {
        grid-template-columns: 1fr
    }

    .number-badge {
        width: 28px;
        height: 28px;
        font-size: 11px
    }
}

.coupon-detail-page {
    padding: 40px 0
}

.coupon-commentator-card {
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px
}

.dark-mode .coupon-commentator-card {
    background: #1e293b;
    border-color: #334155
}

.coupon-commentator-photo {
    border: 3px solid #2b3990;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    overflow: hidden
}

.coupon-commentator-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.coupon-commentator-name {
    color: #111827;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 700
}

.dark-mode .coupon-commentator-name {
    color: #fff
}

.coupon-commentator-badge {
    color: #fff;
    background: #2b3990;
    border-radius: 20px;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex
}

.coupon-commentator-bio {
    color: #6b7280;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6
}

.dark-mode .coupon-commentator-bio {
    color: #94a3b8
}

.coupon-commentator-link {
    color: #2b3990;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
    display: inline-flex
}

.coupon-commentator-link:hover {
    color: #3d4fa8
}

.dark-mode .coupon-commentator-link {
    color: #b8c5e0
}

.dark-mode .coupon-commentator-link:hover {
    color: #fff
}

.coupon-detail-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 40px
}

.dark-mode .coupon-detail-card {
    background: #1e293b;
    border-color: #334155
}

.coupon-detail-header {
    border-bottom: 2px solid #e5e7eb;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    display: flex
}

.dark-mode .coupon-detail-header {
    border-bottom-color: #334155
}

.coupon-detail-title {
    color: #111827;
    margin-bottom: 16px;
    font-size: 36px;
    font-weight: 700
}

.dark-mode .coupon-detail-title {
    color: #fff
}

.coupon-detail-meta {
    flex-wrap: wrap;
    gap: 20px;
    display: flex
}

.coupon-detail-city,
.coupon-detail-date {
    color: #4b5563;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex
}

.dark-mode .coupon-detail-city,
.dark-mode .coupon-detail-date {
    color: #94a3b8
}

.coupon-share-buttons {
    gap: 8px;
    display: flex
}

.btn-share {
    color: #4b5563;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    transition: all .2s;
    display: flex
}

.dark-mode .btn-share {
    color: #94a3b8;
    background: #1e293b;
    border-color: #334155
}

.btn-share:hover {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990;
    transform: translateY(-2px)
}

.dark-mode .btn-share:hover {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990
}

.coupon-detail-races {
    margin-bottom: 0
}

.coupon-detail-races .coupon-races-grid {
    gap: 0
}

.coupon-detail-races .race-column {
    padding: 12px 8px
}

.coupon-detail-races .race-label {
    margin-bottom: 12px;
    padding-bottom: 8px;
    font-size: 16px;
    font-weight: 700
}

.coupon-detail-races .number-badge {
    border-radius: 10px;
    width: 48px;
    height: 48px;
    font-size: 18px;
    font-weight: 700
}

.coupon-detail-races .race-numbers-vertical {
    gap: 8px
}

.coupon-detail-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px
}

.dark-mode .coupon-detail-footer {
    border-top-color: #334155
}

.coupon-detail-times {
    flex-wrap: wrap;
    gap: 32px;
    display: flex
}

.coupon-time-item {
    flex-direction: column;
    gap: 4px;
    display: flex
}

.coupon-time-label {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 12px;
    font-weight: 600
}

.dark-mode .coupon-time-label {
    color: #94a3b8
}

.coupon-time-value {
    color: #111827;
    font-size: 14px;
    font-weight: 600
}

.dark-mode .coupon-time-value {
    color: #fff
}

@media (max-width:768px) {
    .coupon-detail-card {
        padding: 24px 16px 0
    }

    .coupon-detail-header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
        padding-bottom: 16px
    }

    .coupon-share-buttons {
        justify-content: flex-start;
        width: 100%
    }

    .coupon-detail-times {
        flex-direction: column;
        gap: 16px
    }

    .coupon-detail-races {
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 16px
    }

    .coupon-detail-races .coupon-races-grid {
        gap: 8px
    }

    .coupon-detail-races .race-column {
        min-width: 0;
        padding: 10px 4px;
        border-right: none !important
    }

    .coupon-detail-races .race-label {
        margin-bottom: 8px;
        padding-bottom: 6px;
        font-size: 14px
    }

    .coupon-detail-races .number-badge {
        width: 40px;
        height: 40px;
        font-size: 16px
    }

    .coupon-detail-races .race-numbers-vertical {
        gap: 6px
    }
}

.all-coupons-page {
    padding: 40px 0
}

.all-coupons-header {
    text-align: center;
    margin-bottom: 40px
}

.all-coupons-title {
    color: #111827;
    margin-bottom: 12px;
    font-size: 36px;
    font-weight: 700
}

.dark-mode .all-coupons-title {
    color: #fff
}

.all-coupons-description {
    color: #6b7280;
    margin: 0;
    font-size: 16px
}

.dark-mode .all-coupons-description {
    color: #94a3b8
}

.all-coupons-empty {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    display: flex
}

.all-coupons-empty .empty-icon {
    color: #9ca3af;
    width: 64px;
    height: 64px;
    margin-bottom: 20px
}

.dark-mode .all-coupons-empty .empty-icon {
    color: #6b7280
}

.all-coupons-empty .empty-text {
    color: #6b7280;
    margin: 0;
    font-size: 18px
}

.dark-mode .all-coupons-empty .empty-text {
    color: #94a3b8
}

.all-coupons-filter {
    justify-content: flex-start;
    margin-bottom: 24px;
    display: flex
}

.all-coupons-filter-form {
    width: 100%;
    max-width: 300px
}

.all-coupons-filter-wrapper {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.all-coupons-filter-label {
    color: #111827;
    font-size: 14px;
    font-weight: 600
}

.dark-mode .all-coupons-filter-label {
    color: #f1f5f9
}

.all-coupons-filter-select {
    color: #111827;
    cursor: pointer;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23334155' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") right 12px center no-repeat;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 100%;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s
}

.dark-mode .all-coupons-filter-select {
    color: #f1f5f9;
    background: #1e293b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") right 12px center no-repeat;
    border-color: #334155
}

.all-coupons-filter-select:hover {
    border-color: #2b3990
}

.dark-mode .all-coupons-filter-select:hover {
    border-color: #3d4fa8
}

.all-coupons-filter-select:focus {
    border-color: #2b3990;
    outline: none;
    box-shadow: 0 0 0 3px #2b39901a
}

.dark-mode .all-coupons-filter-select:focus {
    border-color: #3d4fa8;
    box-shadow: 0 0 0 3px #3d4fa833
}

.all-coupons-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 24px;
    display: grid
}

.all-coupons-item-link {
    color: inherit;
    text-decoration: none;
    display: block
}

.all-coupons-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    transition: all .25s;
    display: flex
}

.dark-mode .all-coupons-item {
    background: #1e293b;
    border-color: #334155
}

.all-coupons-item-link:hover .all-coupons-item {
    border-color: #2b3990;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #2b399026
}

.dark-mode .all-coupons-item-link:hover .all-coupons-item {
    border-color: #3d4fa8;
    box-shadow: 0 4px 12px #2b399040
}

.all-coupons-item-header {
    border-bottom: 1px solid #e5e7eb;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    display: flex
}

.dark-mode .all-coupons-item-header {
    border-bottom-color: #334155
}

.all-coupons-item-city {
    color: #2b3990;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    display: flex
}

.dark-mode .all-coupons-item-city {
    color: #3d4fa8
}

.all-coupons-item-city svg {
    flex-shrink: 0
}

.all-coupons-item-date {
    color: #64748b;
    font-size: 13px;
    font-weight: 600
}

.dark-mode .all-coupons-item-date {
    color: #94a3b8
}

.all-coupons-item-title {
    color: #111827;
    text-align: left;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700
}

.dark-mode .all-coupons-item-title {
    color: #f1f5f9
}

.all-coupons-item-races {
    flex: 1;
    margin-bottom: 16px;
    position: relative
}

.all-coupons-item-races .coupon-races-grid {
    gap: 0;
    position: relative
}

.all-coupons-item-races .race-numbers-vertical {
    max-height: 185px;
    overflow: hidden
}

.all-coupons-item-races .coupon-more-indicator {
    text-align: center;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(#fff0, #fffffffa 60%, #fff);
    padding: 10px 0 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.dark-mode .all-coupons-item-races .coupon-more-indicator {
    background: linear-gradient(#1e293b00, #1e293bfa 60%, #1e293b)
}

.all-coupons-item-races .race-column {
    padding: 8px 4px
}

.all-coupons-item-races .race-label {
    color: #475569;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
    margin-bottom: 4px;
    padding-bottom: 4px;
    font-size: 12px;
    font-weight: 700
}

.dark-mode .all-coupons-item-races .race-label {
    color: #94a3b8;
    border-bottom-color: #334155
}

.all-coupons-item-races .race-column:not(:last-child) {
    border-right: 1px solid #e5e7eb
}

.dark-mode .all-coupons-item-races .race-column:not(:last-child) {
    border-right-color: #334155
}

.all-coupons-item-races .number-badge {
    color: #334155;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 12px;
    font-weight: 700
}

.dark-mode .all-coupons-item-races .number-badge {
    color: #cbd5e1;
    background: #1e293b;
    border-color: #334155
}

.all-coupons-item-races .number-badge.favorite,
.all-coupons-item-races .number-badge.highlight {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990;
    font-weight: 800
}

.dark-mode .all-coupons-item-races .number-badge.favorite,
.dark-mode .all-coupons-item-races .number-badge.highlight {
    color: #fff;
    background: #2b3990;
    border-color: #2b3990
}

.all-coupons-item-footer {
    margin-top: auto
}

.all-coupons-item-divider {
    background: #e5e7eb;
    height: 1px;
    margin-bottom: 12px
}

.dark-mode .all-coupons-item-divider {
    background: #334155
}

.all-coupons-item-commentator {
    align-items: center;
    gap: 10px;
    display: flex
}

.all-coupons-item-commentator-photo {
    border: 2px solid #2b3990;
    border-radius: 50%;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden
}

.dark-mode .all-coupons-item-commentator-photo {
    border-color: #3d4fa8
}

.all-coupons-item-commentator-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.all-coupons-item-commentator-name {
    color: #111827;
    font-size: 14px;
    font-weight: 600
}

.dark-mode .all-coupons-item-commentator-name {
    color: #f1f5f9
}

@media (max-width:1200px) {
    .all-coupons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
    }
}

@media (max-width:1024px) {
    .all-coupons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }

    .all-coupons-filter-form {
        max-width: 100%
    }
}

@media (max-width:768px) {
    .all-coupons-page {
        padding: 24px 0
    }

    .all-coupons-header {
        margin-bottom: 24px
    }

    .all-coupons-title {
        font-size: 28px
    }

    .all-coupons-description {
        font-size: 14px
    }

    .all-coupons-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .all-coupons-item {
        padding: 16px
    }

    .all-coupons-item-races .number-badge {
        width: 28px;
        height: 28px;
        font-size: 11px
    }

    .all-coupons-item-commentator-photo {
        width: 36px;
        height: 36px
    }

    .all-coupons-item-commentator-name {
        font-size: 13px
    }
}

.program-detail-hero {
    position: relative
}

.program-hero-image {
    width: 100%;
    position: relative;
    overflow: hidden
}

.program-hero-desktop {
    aspect-ratio: 1680/720;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: none !important
}

@media (min-width:768px) {
    .program-hero-desktop {
        display: block !important
    }
}

.program-hero-mobile {
    aspect-ratio: 720/1066;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block !important
}

@media (min-width:768px) {
    .program-hero-mobile {
        display: none !important
    }
}

.program-hero-img {
    object-fit: cover;
    width: 100%;
    height: auto
}

.program-hero-overlay {
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(#0000 0%, #0006 40%, #000000b3 70%, #000000f2 100%);
    position: absolute;
    inset: 0
}

.program-hero-content {
    z-index: 2;
    align-items: flex-end;
    padding: 0;
    display: flex;
    position: absolute;
    inset: 0
}

.program-hero-info {
    width: 100%;
    max-width: 42rem;
    padding: 0 1rem
}

@media (min-width:768px) {
    .program-hero-info {
        padding: 0 1.5rem
    }
}

.program-hero-title {
    color: #fff;
    text-shadow: 0 2px 8px #00000080, 0 4px 16px #0000004d;
    margin-bottom: .75rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2
}

@media (min-width:768px) {
    .program-hero-title {
        margin-bottom: 1rem;
        font-size: 2.5rem
    }
}

@media (min-width:1024px) {
    .program-hero-title {
        font-size: 3rem
    }
}

.program-hero-description {
    color: #ffffffe6;
    text-shadow: 0 1px 4px #0006;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 1rem;
    font-size: .875rem;
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden
}

@media (min-width:768px) {
    .program-hero-description {
        -webkit-line-clamp: 4;
        margin-bottom: 1.25rem;
        font-size: 1rem
    }
}

.program-hero-schedule {
    color: #ffffffd9;
    text-shadow: 0 1px 3px #0006;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    display: flex
}

@media (min-width:768px) {
    .program-hero-schedule {
        gap: .625rem;
        font-size: 1rem
    }
}

.program-hero-schedule svg {
    filter: drop-shadow(0 1px 2px #0000004d);
    flex-shrink: 0;
    width: 1rem;
    height: 1rem
}

@media (min-width:768px) {
    .program-hero-schedule svg {
        width: 1.25rem;
        height: 1.25rem
    }
}

.program-watch-button {
    color: #fff;
    cursor: pointer;
    box-shadow: none;
    background-color: #dc2626;
    border: none;
    border-radius: .5rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .3s, transform .3s;
    display: inline-flex;
    transform: scale(1)
}

.program-watch-button * {
    color: #fff;
    text-decoration: none
}

.program-watch-button span {
    color: #fff
}

.program-watch-button svg {
    color: #fff;
    fill: #fff
}

.program-watch-button:hover {
    color: #fff;
    background-color: #b91c1c;
    text-decoration: none;
    transform: scale(1.05)
}

.program-watch-button:hover *,
.program-watch-button:hover span,
.program-watch-button:hover svg {
    color: #fff;
    fill: #fff;
    text-decoration: none
}

.program-watch-button:active,
.program-watch-button:focus,
.program-watch-button:visited {
    color: #fff;
    background-color: #b91c1c;
    outline: none;
    text-decoration: none
}

.program-watch-button:active *,
.program-watch-button:active span,
.program-watch-button:active svg,
.program-watch-button:focus *,
.program-watch-button:focus span,
.program-watch-button:focus svg,
.program-watch-button:visited *,
.program-watch-button:visited span,
.program-watch-button:visited svg {
    color: #fff;
    fill: #fff;
    text-decoration: none
}

.program-watch-button svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem
}

.program-coming-soon {
    color: #fff;
    background: #4b5563cc;
    border-radius: .5rem;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    font-weight: 600;
    display: inline-flex
}

.program-coming-soon svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem
}

.documentary-single-player {
    background: #000;
    width: 100%;
    padding: 2rem 0
}

@media (min-width:768px) {
    .documentary-single-player {
        padding: 3rem 0
    }
}

.documentary-single-player .video-wrapper {
    border-radius: 12px;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px #00000080
}

.documentary-single-player iframe {
    border: 0;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.program-hero-schedule span {
    font-weight: 500
}

.dark-mode .program-hero-overlay {
    background: linear-gradient(#0000 0%, #00000080 40%, #000000bf 70%, #000000fa 100%)
}

@media (max-width:640px) {
    .program-hero-content {
        padding-bottom: 1.5rem
    }

    .program-hero-info {
        padding: 0 1rem
    }

    .program-hero-title {
        margin-bottom: .5rem;
        font-size: 1.75rem
    }

    .program-hero-description {
        -webkit-line-clamp: 2;
        margin-bottom: .75rem;
        font-size: .8125rem
    }

    .program-hero-schedule {
        font-size: .8125rem
    }
}

.episodes-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    display: grid
}

@media (min-width:768px) {
    .episodes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem
    }
}

@media (min-width:1024px) {
    .episodes-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.episode-year-tab {
    cursor: pointer;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    padding: .375rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    transition: all .2s;
    color: #1f2937 !important
}

.episode-year-tab:hover {
    background: #e5e7eb;
    border-color: #2b3990;
    color: #2b3990 !important
}

.episode-year-tab.active {
    background: linear-gradient(135deg, #2b3990, #1f2760);
    border-color: #2b3990;
    color: #fff !important
}

.dark-mode .episode-year-tab {
    color: #e2e8f0;
    background: #1e293b;
    border-color: #374151
}

.dark-mode .episode-year-tab:hover {
    color: #60a5fa;
    border-color: #60a5fa
}

.dark-mode .episode-year-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #3b82f6
}

.year-block {
    margin-bottom: 2rem
}

.year-block-header h4 {
    color: #1f2937
}

.dark-mode .year-block-header h4 {
    color: #f3f4f6
}

.episodes-pagination .page-btn {
    border-radius: 8px;
    min-width: 36px;
    padding: .375rem .75rem;
    font-weight: 500
}

.pagination-item.active .pagination-link,
.pagination-item.active .pagination-link,
.pagination-wrapper .pagination-item.active .pagination-link,
nav.pagination-wrapper .pagination-item.active .pagination-link {
    color: #fff !important
}

.pagination-item.active .pagination-link:focus,
.pagination-item.active .pagination-link:focus-visible,
.pagination-wrapper .pagination-item.active .pagination-link:focus,
.pagination-wrapper .pagination-item.active .pagination-link:focus-visible,
nav.pagination-wrapper .pagination-item.active .pagination-link:focus,
nav.pagination-wrapper .pagination-item.active .pagination-link:focus-visible,
.pagination-modern .pagination-item.active .pagination-link:focus,
.pagination-modern .pagination-item.active .pagination-link:focus-visible,
.pagination-modern .pagination-item.active .page-btn:focus,
.pagination-modern .pagination-item.active .page-btn:focus-visible,
.pagination-item.active .page-btn:focus,
.pagination-item.active .page-btn:focus-visible {
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important
}

.pagination-link:focus,
.pagination-link:focus-visible,
.page-btn:focus,
.page-btn:focus-visible {
    outline-offset: 2px;
    color: inherit;
    outline: 2px solid #2b3990
}

.pagination-item.active .pagination-link:focus,
.pagination-item.active .pagination-link:focus-visible,
.pagination-item.active .page-btn:focus,
.pagination-item.active .page-btn:focus-visible,
.pagination-item.active>a:focus,
.pagination-item.active>a:focus-visible {
    outline-offset: 2px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #2b3990, #3d4fa8) !important;
    outline: 2px solid #ffffff80 !important
}

.year-title {
    color: #1f2937
}

.dark-mode .year-title {
    color: #f3f4f6
}

.episode-card {
    background-color: #f9fafb;
    border-radius: .75rem;
    transition: box-shadow .3s;
    display: block;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f
}

.dark-mode .episode-card {
    background-color: #1e293b
}

.episode-card:hover {
    box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a
}

.episode-card-image {
    aspect-ratio: 16/9;
    background-color: #e5e7eb;
    position: relative;
    overflow: hidden
}

.dark-mode .episode-card-image {
    background-color: #374151
}

.episode-card-image img {
    object-fit: cover;
    will-change: transform;
    width: 100%;
    height: 100%;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1) !important
}

.episode-card:hover .episode-card-image img {
    transform: scale(1.08) !important
}

.episode-card-image>div:first-of-type {
    background-color: #0003;
    justify-content: center;
    align-items: center;
    transition: background-color .6s cubic-bezier(.25, .46, .45, .94);
    display: flex;
    position: absolute;
    inset: 0
}

.episode-card:hover .episode-card-image>div:first-of-type {
    background-color: #0000004d
}

.episode-card-image>div:first-of-type>div {
    will-change: transform;
    background-color: #ffffffe6;
    border-radius: 9999px;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    transition: transform .6s cubic-bezier(.25, .46, .45, .94);
    display: flex
}

.dark-mode .episode-card-image>div:first-of-type>div {
    background-color: #1e293be6
}

.episode-card:hover .episode-card-image>div:first-of-type>div {
    transform: scale(1.05)
}

.episode-card-image>div:last-of-type {
    background: linear-gradient(#0000 0%, #000000b3 50%, #000000e6 100%);
    padding: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.episode-card-image>div:last-of-type h3 {
    color: #fff;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: .25rem;
    font-size: 1rem;
    font-weight: 700;
    display: -webkit-box;
    overflow: hidden
}

@media (min-width:768px) {
    .episode-card-image>div:last-of-type h3 {
        font-size: 1.125rem
    }
}

.episode-card-image>div:last-of-type p {
    color: #fffc;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    display: flex
}

.episode-card-image>div:last-of-type p svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem
}

.comment-form {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 2rem;
    padding: 1.5rem
}

.dark-mode .comment-form {
    background: #1e293b;
    border-color: #334155
}

.comment-form .form-label {
    color: #374151;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 600;
    display: block
}

.dark-mode .comment-form .form-label {
    color: #e2e8f0
}

.comment-form .form-group {
    margin-bottom: 1rem
}

.comment-form .form-group:last-child {
    margin-bottom: 0
}

.comment-form .form-input,
.comment-form .form-textarea {
    box-sizing: border-box;
    color: #111827;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .9375rem;
    transition: all .2s;
    width: 100% !important
}

.comment-form .form-input:focus,
.comment-form .form-textarea:focus {
    border-color: #2b3990;
    outline: none;
    box-shadow: 0 0 0 3px #2b39901a
}

.dark-mode .comment-form .form-input,
.dark-mode .comment-form .form-textarea {
    color: #f1f5f9;
    background: #0f172a;
    border-color: #334155
}

.dark-mode .comment-form .form-input:focus,
.dark-mode .comment-form .form-textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #60a5fa26
}

.comment-form .form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6
}

.section-comments .comment-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.section-comments .comment-list li {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.5rem;
    transition: all .2s;
    display: flex
}

.section-comments .comment-list li:hover {
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #00000014
}

.dark-mode .section-comments .comment-list li {
    background: #1e293b;
    border-color: #334155
}

.dark-mode .section-comments .comment-list li:hover {
    border-color: #475569;
    box-shadow: 0 4px 12px #0000004d
}

.section-comments .comment-list li:last-child {
    margin-bottom: 0
}

.section-comments .comment-list li .left {
    flex-shrink: 0;
    width: 48px;
    height: 48px
}

.section-comments .comment-list li .left img {
    object-fit: cover;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    width: 48px;
    height: 48px
}

.dark-mode .section-comments .comment-list li .left img {
    border-color: #334155
}

.section-comments .comment-list li .right {
    flex: 1;
    min-width: 0
}

.section-comments .comment-list li .right .row-custom {
    margin-bottom: .5rem
}

.section-comments .comment-list li .right .row-custom:last-child {
    margin-bottom: 0
}

.section-comments .comment-list li .right .username {
    color: #111827;
    margin-bottom: .25rem;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block
}

.section-comments .comment-list li .right .username:hover {
    color: #2b3990
}

.dark-mode .section-comments .comment-list li .right .username {
    color: #fff !important
}

.dark-mode .section-comments .comment-list li .right .username:hover {
    color: #60a5fa !important
}

.section-comments .comment-list li .right .comment {
    color: #4b5563;
    margin-bottom: .75rem;
    font-size: .9375rem;
    line-height: 1.6
}

.dark-mode .section-comments .comment-list li .right .comment {
    color: #cbd5e1
}

.section-comments .comment-meta {
    color: #6b7280;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
    display: flex
}

.dark-mode .section-comments .comment-meta {
    color: #94a3b8
}

.section-comments .comment-meta .item {
    align-items: center;
    gap: .375rem;
    display: flex
}

.section-comments .comment-meta .item a {
    color: #6b7280;
    align-items: center;
    gap: .375rem;
    text-decoration: none;
    transition: color .2s;
    display: flex
}

.section-comments .comment-meta .item a:hover {
    color: #2b3990
}

.dark-mode .section-comments .comment-meta .item a {
    color: #94a3b8
}

.dark-mode .section-comments .comment-meta .item a:hover {
    color: #60a5fa
}

.section-comments .comment-meta .item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px
}

.section-comments .comment-meta .item-date {
    color: #9ca3af
}

.dark-mode .section-comments .comment-meta .item-date {
    color: #64748b
}

.section-comments .comment-meta .btn-reply,
.section-comments .comment-meta .btn-comment-like {
    cursor: pointer;
    transition: color .2s
}

.section-comments .comment-meta .btn-comment-like.comment-own,
.section-comments .comment-meta .item-like:has(.btn-comment-like.comment-own) {
    display: none !important
}

.section-comments .comment-meta .btn-comment-like.comment-liked {
    color: #2b3990
}

.dark-mode .section-comments .comment-meta .btn-comment-like.comment-liked {
    color: #60a5fa
}

.section-comments .comment-meta .btn-delete-comment {
    color: #ef4444
}

.section-comments .comment-meta .btn-delete-comment:hover {
    color: #dc2626
}

.section-comments .row-sub-comment {
    margin-top: 1rem;
    padding-left: 2rem
}

.section-comments .row-sub-comment .comment-list {
    margin-top: 1rem
}

.section-comments .row-sub-comment .comment-list li {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: .75rem;
    padding: 1.25rem
}

.dark-mode .section-comments .row-sub-comment .comment-list li {
    background: #0f172a;
    border-color: #334155
}

.section-comments .comment-total {
    margin-bottom: 1.5rem
}

.section-comments .label-comment {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 700
}

.dark-mode .section-comments .label-comment {
    color: #f1f5f9
}

@media (max-width:768px) {
    .comment-form {
        padding: 1rem
    }

    .section-comments .comment-list li {
        gap: .75rem
    }

    .section-comments .comment-list li .left,
    .section-comments .comment-list li .left img {
        width: 40px;
        height: 40px
    }

    .section-comments .row-sub-comment {
        padding-left: 1rem
    }
}

.popup-modal {
    z-index: 9999;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0
}

.popup-overlay {
    -webkit-backdrop-filter: blur(4px);
    background: #000000b3;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.popup-content {
    z-index: 10000;
    background: 0 0;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    position: relative;
    overflow: visible
}

.popup-content.popup-fixed-size {
    max-width: none;
    max-height: none
}

.popup-close {
    cursor: pointer;
    z-index: 10001;
    color: #333;
    background: #fffffff2;
    border: 2px solid #0000001a;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    transition: all .3s;
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0 2px 8px #00000026
}

.popup-close:hover {
    background: #fff;
    border-color: #0003;
    transform: scale(1.1);
    box-shadow: 0 4px 12px #00000040
}

.popup-image {
    border-radius: 12px;
    max-width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 40px #0000004d
}

.popup-image-link {
    text-decoration: none;
    display: block;
    position: relative
}

.popup-content .popup-image {
    position: relative
}

.popup-html-content {
    color: #333;
    background: #fff;
    border-radius: 0;
    max-width: 100%;
    padding: 2rem
}

.dark-mode .popup-html-content {
    color: #e2e8f0;
    background: #1e293b
}

.dark-mode .popup-close {
    color: #e2e8f0;
    background: #1e293be6
}

.dark-mode .popup-close:hover {
    background: #1e293b
}

body.popup-open {
    overflow: hidden
}

@media (max-width:768px) {
    .popup-content {
        max-width: 95%;
        padding: 10px
    }

    .popup-close {
        width: 32px;
        height: 32px;
        top: 8px;
        right: 8px
    }

    .popup-html-content {
        padding: 1.5rem
    }
}

.search-header-content {
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    display: flex
}

.search-page-title {
    color: var(--text-color);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex
}

.search-label {
    color: var(--text-muted);
    font-weight: 500
}

.search-query {
    color: #2b3990;
    background: #2b399014;
    border-left: 3px solid #2b3990;
    border-radius: .5rem;
    padding: .25rem .75rem;
    font-weight: 700;
    position: relative
}

.search-results-badge {
    color: #2b3990;
    background: #2b399014;
    border: 1px solid #2b399033;
    border-radius: 9999px;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    transition: all .3s;
    display: inline-flex;
    box-shadow: 0 1px 2px #0000000d
}

.search-results-badge svg {
    stroke: #2b3990;
    width: 16px;
    height: 16px
}

.search-results-badge-empty {
    color: #dc2626;
    background: #dc262614;
    border-color: #dc262633
}

.search-results-badge-empty svg {
    stroke: #dc2626
}

.search-category-section {
    margin-bottom: 2.5rem
}

.search-category-section:last-child {
    margin-bottom: 0
}

.search-category-title {
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex
}

.search-category-title span {
    color: var(--text-muted);
    background-color: var(--bg-secondary);
    border-radius: 9999px;
    padding: .25rem .75rem;
    font-size: .875rem;
    font-weight: 500
}

@media (prefers-color-scheme:dark) {
    .search-query {
        color: #818cf8;
        background: #6366f126;
        border-color: #6366f166
    }

    .search-results-badge {
        color: #a5b4fc;
        background: #6366f126;
        border-color: #6366f14d
    }

    .search-results-badge svg {
        stroke: #a5b4fc
    }

    .search-results-badge-empty {
        color: #fca5a5;
        background: #f8717126;
        border-color: #f871714d
    }

    .search-results-badge-empty svg {
        stroke: #fca5a5
    }
}

@media (max-width:768px) {
    .search-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem
    }

    .search-page-title,
    .search-query {
        font-size: 1.5rem
    }

    .search-results-badge {
        padding: .375rem .75rem;
        font-size: .75rem
    }

    .search-category-title {
        font-size: 1.25rem
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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