/*! tailwindcss v4.3.3 | 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-x-reverse: 0;
            --tw-border-style: solid;
            --tw-leading: initial;
            --tw-font-weight: 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-content: "";
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-red-200: oklch(88.5% .062 18.334);
        --color-yellow-200: oklch(94.5% .129 101.54);
        --color-green-200: oklch(92.5% .084 155.995);
        --color-blue-200: oklch(88.2% .059 254.128);
        --color-pink-200: oklch(89.9% .061 343.231);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --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-5xl: 3rem;
        --text-5xl--line-height: 1;
        --font-weight-normal: 400;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --leading-tight: 1.25;
        --leading-relaxed: 1.625;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --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)
    }
}

@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
    }

body{
    overflow-x: hidden;
}
    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

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

    abbr:where([title]) {
        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:where(:not(iframe)) {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

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



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

        img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        /* vertical-align: middle; */
        display: block;
    }
    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-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
    }

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

    body {
        background-color: var(--color-body);
        font-family: var(--font-primary);
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed);
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
        color: var(--color-text)
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-primary);
        --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-text-dark)
    }

    h1,
    .h1 {
        font-size: var(--text-h1-sm)
    }

    @media (width>=48rem) {

        h1,
        .h1 {
            font-size: var(--text-h1)
        }
    }

    h2,
    .h2 {
        font-size: var(--text-h2-sm)
    }

    @media (width>=48rem) {

        h2,
        .h2 {
            font-size: var(--text-h2)
        }
    }

    h3,
    .h3 {
        font-size: var(--text-h3-sm)
    }

    @media (width>=48rem) {

        h3,
        .h3 {
            font-size: var(--text-h3)
        }
    }

    h4,
    .h4 {
        font-size: var(--text-h4)
    }

    h5,
    .h5 {
        font-size: var(--text-h5)
    }

    h6,
    .h6 {
        font-size: var(--text-h6)
    }

    b,
    strong {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    code:after {
        content: var(--tw-content);
        --tw-border-style: none;
        border-style: none
    }

    :root {
        --text-h6: 1.2rem;
        --text-h6-sm: .96rem;
        --text-h5: 1.44rem;
        --text-h5-sm: 1.152rem;
        --text-h4: 1.728rem;
        --text-h4-sm: 1.3824rem;
        --text-h3: 2.0736rem;
        --text-h3-sm: 1.65888rem;
        --text-h2: 2.48832rem;
        --text-h2-sm: 1.99066rem;
        --text-h1: 2.98598rem;
        --text-h1-sm: 2.38879rem;
        --text-base: 16px;
        --text-base-sm: 12.8px;
        --font-primary: Lato, sans-serif;
        --color-primary: #f86923;
        --color-body: #fff;
        --color-border: #e9e9e9;
        --color-light: #edf6f5;
        --color-text: #555;
        --color-text-dark: #222
    }

    input:where([type=text]),
    input:where(:not([type])),
    input:where([type=email]),
    input:where([type=url]),
    input:where([type=password]),
    input:where([type=number]),
    input:where([type=date]),
    input:where([type=datetime-local]),
    input:where([type=month]),
    input:where([type=search]),
    input:where([type=tel]),
    input:where([type=time]),
    input:where([type=week]),
    select:where([multiple]),
    textarea,
    select {
        appearance: none;
        --tw-shadow: 0 0 #0000;
        background-color: #fff;
        border-width: 1px;
        border-color: oklch(55.1% .027 264.364);
        border-radius: 0;
        padding: .5rem .75rem;
        font-size: 1rem;
        line-height: 1.5rem
    }

    :is(input:where([type=text]), input:where(:not([type])), input:where([type=email]), input:where([type=url]), input:where([type=password]), input:where([type=number]), input:where([type=date]), input:where([type=datetime-local]), input:where([type=month]), input:where([type=search]), input:where([type=tel]), input:where([type=time]), input:where([type=week]), select:where([multiple]), textarea, select):focus {
        outline-offset: 2px;
        --tw-ring-inset: var(--tw-empty, );
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: oklch(54.6% .245 262.881);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-color: oklch(54.6% .245 262.881);
        outline: 2px solid #0000
    }

    input::placeholder,
    textarea::placeholder {
        color: oklch(55.1% .027 264.364);
        opacity: 1
    }

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

    ::-webkit-date-and-time-value {
        min-height: 1.5em;
        text-align: inherit
    }

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

    ::-webkit-datetime-edit {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-top: 0;
        padding-bottom: 0
    }

    select {
        print-color-adjust: exact;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right .5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem
    }

    select:where([multiple]),
    select:where([size]:not([size="1"])) {
        background-image: initial;
        background-position: initial;
        background-repeat: unset;
        background-size: initial;
        print-color-adjust: unset;
        padding-right: .75rem
    }

    input:where([type=checkbox]),
    input:where([type=radio]) {
        appearance: none;
        print-color-adjust: exact;
        vertical-align: middle;
        user-select: none;
        color: oklch(54.6% .245 262.881);
        --tw-shadow: 0 0 #0000;
        background-color: #fff;
        background-origin: border-box;
        border-width: 1px;
        border-color: oklch(55.1% .027 264.364);
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        padding: 0;
        display: inline-block
    }

    input:where([type=checkbox]) {
        border-radius: 0
    }

    input:where([type=radio]) {
        border-radius: 100%
    }

    input:where([type=checkbox]):focus,
    input:where([type=radio]):focus {
        outline-offset: 2px;
        --tw-ring-inset: var(--tw-empty, );
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: oklch(54.6% .245 262.881);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        outline: 2px solid #0000
    }

    input:where([type=checkbox]):checked,
    input:where([type=radio]):checked {
        background-color: currentColor;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-color: #0000
    }

    input:where([type=checkbox]):checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
    }

    @media (forced-colors:active) {
        input:where([type=checkbox]):checked {
            appearance: auto
        }
    }

    input:where([type=radio]):checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")
    }

    @media (forced-colors:active) {
        input:where([type=radio]):checked {
            appearance: auto
        }
    }

    input:where([type=checkbox]):checked:hover,
    input:where([type=checkbox]):checked:focus,
    input:where([type=radio]):checked:hover,
    input:where([type=radio]):checked:focus {
        background-color: currentColor;
        border-color: #0000
    }

    input:where([type=checkbox]):indeterminate {
        background-color: currentColor;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-color: #0000
    }

    @media (forced-colors:active) {
        input:where([type=checkbox]):indeterminate {
            appearance: auto
        }
    }

    input:where([type=checkbox]):indeterminate:hover,
    input:where([type=checkbox]):indeterminate:focus {
        background-color: currentColor;
        border-color: #0000
    }

    input:where([type=file]) {
        background: unset;
        border-color: inherit;
        font-size: unset;
        line-height: inherit;
        border-width: 0;
        border-radius: 0;
        padding: 0
    }

    input:where([type=file]):focus {
        outline: 1px solid buttontext;
        outline: 1px auto -webkit-focus-ring-color
    }
}

@layer components {
    .section {
        padding-top: 70px;
        padding-bottom: 70px
    }

    .container {
        max-width: 1140px !important;
        padding-inline: calc(var(--spacing) * 4) !important;
        margin-inline: auto !important
    }

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

    .social-icons li {
        display: inline-block
    }

    .social-icons li a {
        height: calc(var(--spacing) * 9);
        width: calc(var(--spacing) * 9);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-primary);
        text-align: center;
        color: var(--color-white);
        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, 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));
        border-radius: 3.40282e38px;
        display: block
    }

    @media (hover:hover) {
        .social-icons li a:hover {
            background-color: var(--color-primary)
        }
    }

    .social-icons li a svg {
        height: calc(var(--spacing) * 9);
        fill: var(--color-primary);
        margin: auto
    }

    .social-icons li a:hover svg {
        fill: var(--color-white)
    }

    .content :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~=not-prose], [class~=not-prose] *)) {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .content :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-bottom: calc(var(--spacing) * 4);
        font-size: var(--text-h1-sm)
    }

    @media (width>=48rem) {
        .content :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
            font-size: var(--text-h1)
        }
    }

    .content :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        font-size: var(--text-h2-sm)
    }

    @media (width>=48rem) {
        .content :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
            font-size: var(--text-h2)
        }
    }

    .content :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: calc(var(--spacing) * 4);
        font-size: var(--text-h3-sm)
    }

    @media (width>=48rem) {
        .content :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
            font-size: var(--text-h3)
        }
    }

    .content :where(h4):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: calc(var(--spacing) * 4)
    }

    .content :where(h5):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-bottom: calc(var(--spacing) * 4);
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        font-size: var(--text-base)
    }

    .content :where(h6):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-bottom: calc(var(--spacing) * 6);
        font-size: 15px
    }

    .content :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
        text-decoration-line: none
    }

    @media (hover:hover) {
        .content:hover :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
            color: var(--color-primary)
        }
    }

    .content :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-color: var(--color-primary);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: var(--spacing)
    }

    .content :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-left: calc(var(--spacing) * 4)
    }

    .content :where(ul):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-left: 0;
        list-style-type: none
    }

    .content :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-block: calc(var(--spacing) * 5)
    }

    .content ul {
        padding-left: calc(var(--spacing) * 2)
    }

    .content ul li {
        padding-left: calc(var(--spacing) * 5);
        list-style-type: none;
        position: relative
    }

    .content ul li:before {
        content: var(--tw-content);
        content: var(--tw-content);
        content: var(--tw-content);
        content: var(--tw-content);
        height: calc(var(--spacing) * 2);
        content: var(--tw-content);
        width: calc(var(--spacing) * 2);
        content: var(--tw-content);
        content: var(--tw-content);
        background-color: var(--color-primary);
        content: var(--tw-content);
        --tw-content: "";
        content: var(--tw-content);
        border-radius: 3.40282e38px;
        position: absolute;
        top: 10px;
        left: 0
    }

    .feature-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: .2s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .2s;
        transition-timing-function: var(--ease-in-out)
    }

    @media (hover:hover) {
        .feature-card:hover {
            --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);
            box-shadow: 0 12px 24px -6px #2d43791a
        }
    }

    .cta-link img {
        transition: margin .3s
    }

    .cta-link:hover img {
        margin-left: calc(var(--spacing) * 2)
    }

    .card {
        margin-top: calc(var(--spacing) * 10);
        border-style: var(--tw-border-style);
        background-color: var(--color-white);
        padding-inline: calc(var(--spacing) * 5);
        padding-block: calc(var(--spacing) * 12);
        --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);
        border-width: 1px;
        border-color: #00000020;
        border-radius: 4px;
        box-shadow: 0 12px 24px -6px #2d43791a
    }

    @media (width>=48rem) {
        .card {
            margin-top: 0
        }
    }

    .col-recommended {
        z-index: 10;
        position: relative
    }

    @media (width>=48rem) {
        .col-recommended {
            margin-inline: calc(var(--spacing) * -8) !important;
            margin-block: calc(var(--spacing) * -6) !important
        }
    }

    .col-recommended .card {
        border-style: var(--tw-border-style);
        --tw-shadow: 0 1rem 3rem var(--tw-shadow-color, #0000002d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-width: 0
    }

    .faq-head:before {
        top: var(--spacing);
        left: calc(var(--spacing) * -8);
        height: calc(var(--spacing) * 6);
        width: calc(var(--spacing) * 6);
        --tw-content: "";
        content: var(--tw-content);
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='342.508px' height='342.508px' viewBox='0 0 342.508 342.508' style='enable-background:new 0 0 342.508 342.508;' xml:space='preserve'%3E%3Cpath fill='%230aa8a7' d='M171.254,0C76.837,0,0.003,76.819,0.003,171.248c0,94.428,76.829,171.26,171.251,171.26 c94.438,0,171.251-76.826,171.251-171.26C342.505,76.819,265.697,0,171.254,0z M245.371,136.161l-89.69,89.69 c-2.693,2.69-6.242,4.048-9.758,4.048c-3.543,0-7.059-1.357-9.761-4.048l-39.007-39.007c-5.393-5.398-5.393-14.129,0-19.521 c5.392-5.392,14.123-5.392,19.516,0l29.252,29.262l79.944-79.948c5.381-5.386,14.111-5.386,19.504,0 C250.764,122.038,250.764,130.769,245.371,136.161z'/%3E%3C/svg%3E");
        background-size: 24px;
        position: absolute
    }

    .faq-body a {
        color: #f86923
    }

    .contact-list a {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-dark)
    }

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

    .pagination {
        text-align: center
    }

    .swiper-pagination-bullet {
        height: calc(var(--spacing) * 2.5);
        width: calc(var(--spacing) * 2.5);
        cursor: pointer;
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-primary);
        border-radius: 3.40282e38px;
        display: inline-block
    }

    .swiper-pagination-bullet-active {
        background-color: var(--color-primary)
    }

    .notice {
        margin-bottom: calc(var(--spacing) * 6);
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        padding-inline: calc(var(--spacing) * 8);
        padding-block: calc(var(--spacing) * 6);
        border-width: 1px
    }

    .notice-head {
        align-items: center;
        display: flex
    }

    .notice-head svg {
        margin-right: calc(var(--spacing) * 3)
    }

    .notice-head p {
        font-family: var(--font-primary);
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-dark)
    }

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

    .notice-body p {
        margin-block: 0
    }

    .notice.note {
        color: #1b83e2;
        border-color: currentColor
    }

    .notice.tip {
        color: #40d294;
        border-color: currentColor
    }

    .notice.info {
        color: #e3a72c;
        border-color: currentColor
    }

    .notice.warning {
        color: #db2c23;
        border-color: currentColor
    }

    .tab {
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-border);
        overflow: hidden
    }

    .tab-nav {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--color-border);
        background-color: var(--color-light);
        list-style-type: none;
        display: flex;
        margin: 0 !important
    }

    .tab-nav-item {
        cursor: pointer;
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 3px;
        border-color: var(--color-border);
        padding-inline: calc(var(--spacing) * 8);
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
        color: var(--color-text-dark);
        opacity: .8;
        padding-block: calc(var(--spacing) * 2) !important;
        margin-block: 0 !important
    }

    .tab-nav-item:before {
        display: none
    }

    .tab-nav-item.active {
        border-bottom-style: var(--tw-border-style);
        border-color: #000000e6;
        border-bottom-width: 3px
    }

    @supports (color:color-mix(in lab, red, red)) {
        .tab-nav-item.active {
            border-color: color-mix(in oklab, var(--color-black) 90%, transparent)
        }
    }

    .tab-nav-item.active {
        opacity: 1
    }

    .tab-content-panel {
        padding: calc(var(--spacing) * 8)
    }

    .tab-content-panel p {
        margin-bottom: 0
    }

    .tab-content-panel.active {
        display: block
    }

    .accordion {
        margin-bottom: calc(var(--spacing) * 6);
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-border);
        background-color: var(--color-light);
        overflow: hidden
    }

    .accordion-header {
        cursor: pointer;
        width: 100%;
        padding-inline: calc(var(--spacing) * 8);
        padding-block: calc(var(--spacing) * 4);
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
        color: var(--color-text-dark);
        justify-content: space-between;
        align-items: center;
        display: flex;
        
    }

    .accordion-icon {
        width: .8em;
        height: .8em;
        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));
        --tw-duration: .2s;
        margin-left: auto;
        transition-duration: .2s;
        rotate: -90deg
    }

    .accordion-content {
        max-height: 0;
        padding-inline: calc(var(--spacing) * 8);
        padding-block: 0;
        overflow: hidden
    }

    .accordion.active .accordion-icon {
        rotate: 0deg
    }

    .accordion.active .accordion-content {
        max-height: 100vh
    }

    .content {
        color: var(--tw-prose-body);
        max-width: 65ch
    }

    .content :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25em
    }

    .content :where([class~=lead]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-lead);
        margin-top: 1.2em;
        margin-bottom: 1.2em;
        font-size: 1.25em;
        line-height: 1.6
    }

    .content :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-links);
        font-weight: 500;
        text-decoration: underline
    }

    .content :where(strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-bold);
        font-weight: 600
    }

    .content :where(a strong):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(blockquote strong):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(thead th strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit
    }

    .content :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-inline-start: 1.625em;
        list-style-type: decimal
    }

    .content :where(ol[type=A]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: upper-alpha
    }

    .content :where(ol[type=a]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: lower-alpha
    }

    .content :where(ol[type=A s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: upper-alpha
    }

    .content :where(ol[type=a s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: lower-alpha
    }

    .content :where(ol[type=I]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: upper-roman
    }

    .content :where(ol[type=i]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: lower-roman
    }

    .content :where(ol[type=I s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: upper-roman
    }

    .content :where(ol[type=i s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: lower-roman
    }

    .content :where(ol[type="1"]):not(:where([class~=not-prose], [class~=not-prose] *)) {
        list-style-type: decimal
    }

    .content :where(ul):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-inline-start: 1.625em;
        list-style-type: disc
    }

    .content :where(ol>li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
        color: var(--tw-prose-counters);
        font-weight: 400
    }

    .content :where(ul>li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
        color: var(--tw-prose-bullets)
    }

    .content :where(dt):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-headings);
        margin-top: 1.25em;
        font-weight: 600
    }

    .content :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-color: var(--tw-prose-hr);
        border-top-width: 1px;
        margin-top: 3em;
        margin-bottom: 3em
    }

    .content :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-quotes);
        border-inline-start-width: .25rem;
        border-inline-start-color: var(--tw-prose-quote-borders);
        quotes: "“" "”" "‘" "’";
        margin-top: 1.6em;
        margin-bottom: 1.6em;
        padding-inline-start: 1em;
        font-style: italic;
        font-weight: 500
    }

    .content :where(blockquote p:first-of-type):not(:where([class~=not-prose], [class~=not-prose] *)):before {
        content: open-quote
    }

    .content :where(blockquote p:last-of-type):not(:where([class~=not-prose], [class~=not-prose] *)):after {
        content: close-quote
    }

    .content :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-headings);
        margin-top: 0;
        margin-bottom: .888889em;
        font-size: 2.25em;
        font-weight: 800;
        line-height: 1.11111
    }

    .content :where(h1 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit;
        font-weight: 900
    }

    .content :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-headings);
        margin-top: 2em;
        margin-bottom: 1em;
        font-size: 1.5em;
        font-weight: 700;
        line-height: 1.33333
    }

    .content :where(h2 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit;
        font-weight: 800
    }

    .content :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-headings);
        margin-top: 1.6em;
        margin-bottom: .6em;
        font-size: 1.25em;
        font-weight: 600;
        line-height: 1.6
    }

    .content :where(h3 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit;
        font-weight: 700
    }

    .content :where(h4):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-headings);
        margin-top: 1.5em;
        margin-bottom: .5em;
        font-weight: 600;
        line-height: 1.5
    }

    .content :where(h4 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit;
        font-weight: 700
    }

    .content :where(img):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 2em;
        margin-bottom: 2em
    }

    .content :where(picture):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 2em;
        margin-bottom: 2em;
        display: block
    }

    .content :where(video):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 2em;
        margin-bottom: 2em
    }

    .content :where(kbd):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-kbd);
        box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
        padding-top: .1875em;
        padding-inline-end: .375em;
        padding-bottom: .1875em;
        border-radius: .3125rem;
        padding-inline-start: .375em;
        font-family: inherit;
        font-size: .875em;
        font-weight: 500
    }

    .content :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-code);
        font-size: .875em;
        font-weight: 600
    }

    .content :where(code):not(:where([class~=not-prose], [class~=not-prose] *)):before,
    .content :where(code):not(:where([class~=not-prose], [class~=not-prose] *)):after {
        content: "`"
    }

    .content :where(a code):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(h1 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit
    }

    .content :where(h2 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit;
        font-size: .875em
    }

    .content :where(h3 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit;
        font-size: .9em
    }

    .content :where(h4 code):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(blockquote code):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(thead th code):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: inherit
    }

    .content :where(pre):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-pre-code);
        background-color: var(--tw-prose-pre-bg);
        padding-top: .857143em;
        padding-inline-end: 1.14286em;
        padding-bottom: .857143em;
        border-radius: .375rem;
        margin-top: 1.71429em;
        margin-bottom: 1.71429em;
        padding-inline-start: 1.14286em;
        font-size: .875em;
        font-weight: 400;
        line-height: 1.71429;
        overflow-x: auto
    }

    .content :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)) {
        font-weight: inherit;
        color: inherit;
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
        background-color: #0000;
        border-width: 0;
        border-radius: 0;
        padding: 0
    }

    .content :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)):before,
    .content :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)):after {
        content: none
    }

    .content :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
        table-layout: auto;
        width: 100%;
        margin-top: 2em;
        margin-bottom: 2em;
        font-size: .875em;
        line-height: 1.71429
    }

    .content :where(thead):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-bottom-width: 1px;
        border-bottom-color: var(--tw-prose-th-borders)
    }

    .content :where(thead th):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-headings);
        vertical-align: bottom;
        padding-inline-end: .571429em;
        padding-bottom: .571429em;
        padding-inline-start: .571429em;
        font-weight: 600
    }

    .content :where(tbody tr):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-bottom-width: 1px;
        border-bottom-color: var(--tw-prose-td-borders)
    }

    .content :where(tbody tr:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-bottom-width: 0
    }

    .content :where(tbody td):not(:where([class~=not-prose], [class~=not-prose] *)) {
        vertical-align: baseline
    }

    .content :where(tfoot):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-top-width: 1px;
        border-top-color: var(--tw-prose-th-borders)
    }

    .content :where(tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
        vertical-align: top
    }

    .content :where(th, td):not(:where([class~=not-prose], [class~=not-prose] *)) {
        text-align: start
    }

    .content :where(figure>*):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 0;
        margin-bottom: 0
    }

    .content :where(figcaption):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--tw-prose-captions);
        margin-top: .857143em;
        font-size: .875em;
        line-height: 1.42857
    }

    .content {
        --tw-prose-body: oklch(37.3% .034 259.733);
        --tw-prose-headings: oklch(21% .034 264.665);
        --tw-prose-lead: oklch(44.6% .03 256.802);
        --tw-prose-links: oklch(21% .034 264.665);
        --tw-prose-bold: oklch(21% .034 264.665);
        --tw-prose-counters: oklch(55.1% .027 264.364);
        --tw-prose-bullets: oklch(87.2% .01 258.338);
        --tw-prose-hr: oklch(92.8% .006 264.531);
        --tw-prose-quotes: oklch(21% .034 264.665);
        --tw-prose-quote-borders: oklch(92.8% .006 264.531);
        --tw-prose-captions: oklch(55.1% .027 264.364);
        --tw-prose-kbd: oklch(21% .034 264.665);
        --tw-prose-kbd-shadows: oklab(21% -.00316127 -.0338527/.1);
        --tw-prose-code: oklch(21% .034 264.665);
        --tw-prose-pre-code: oklch(92.8% .006 264.531);
        --tw-prose-pre-bg: oklch(27.8% .033 256.848);
        --tw-prose-th-borders: oklch(87.2% .01 258.338);
        --tw-prose-td-borders: oklch(92.8% .006 264.531);
        --tw-prose-invert-body: oklch(87.2% .01 258.338);
        --tw-prose-invert-headings: #fff;
        --tw-prose-invert-lead: oklch(70.7% .022 261.325);
        --tw-prose-invert-links: #fff;
        --tw-prose-invert-bold: #fff;
        --tw-prose-invert-counters: oklch(70.7% .022 261.325);
        --tw-prose-invert-bullets: oklch(44.6% .03 256.802);
        --tw-prose-invert-hr: oklch(37.3% .034 259.733);
        --tw-prose-invert-quotes: oklch(96.7% .003 264.542);
        --tw-prose-invert-quote-borders: oklch(37.3% .034 259.733);
        --tw-prose-invert-captions: oklch(70.7% .022 261.325);
        --tw-prose-invert-kbd: #fff;
        --tw-prose-invert-kbd-shadows: #ffffff1a;
        --tw-prose-invert-code: #fff;
        --tw-prose-invert-pre-code: oklch(87.2% .01 258.338);
        --tw-prose-invert-pre-bg: #00000080;
        --tw-prose-invert-th-borders: oklch(44.6% .03 256.802);
        --tw-prose-invert-td-borders: oklch(37.3% .034 259.733);
        font-size: 1rem;
        line-height: 1.75
    }

    .content :where(picture>img):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 0;
        margin-bottom: 0
    }

    .content :where(li):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: .5em;
        margin-bottom: .5em
    }

    .content :where(ol>li):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(ul>li):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-inline-start: .375em
    }

    .content :where(.prose>ul>li p):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: .75em;
        margin-bottom: .75em
    }

    .content :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 1.25em
    }

    .content :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-bottom: 1.25em
    }

    .content :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 1.25em
    }

    .content :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-bottom: 1.25em
    }

    .content :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: .75em;
        margin-bottom: .75em
    }

    .content :where(dl):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25em
    }

    .content :where(dd):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: .5em;
        padding-inline-start: 1.625em
    }

    .content :where(hr+*):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(h2+*):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(h3+*):not(:where([class~=not-prose], [class~=not-prose] *)),
    .content :where(h4+*):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 0
    }

    .content :where(thead th:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-inline-start: 0
    }

    .content :where(thead th:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-inline-end: 0
    }

    .content :where(tbody td, tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-top: .571429em;
        padding-inline-end: .571429em;
        padding-bottom: .571429em;
        padding-inline-start: .571429em
    }

    .content :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-inline-start: 0
    }

    .content :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-inline-end: 0
    }

    .content :where(figure):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 2em;
        margin-bottom: 2em
    }

    .content :where(.prose>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-top: 0
    }

    .content :where(.prose>:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
        margin-bottom: 0
    }

    .content {
        max-width: none
    }

    .content :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~=not-prose], [class~=not-prose] *)) {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-dark);
        margin-top: .5em;
        margin-bottom: .9em
    }

    .content :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
        font-size: var(--text-h1-sm)
    }

    @media (width>=48rem) {
        .content :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
            font-size: var(--text-h1)
        }
    }

    .content :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
        font-size: var(--text-h2-sm)
    }

    @media (width>=48rem) {
        .content :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
            font-size: var(--text-h2)
        }
    }

    .content :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
        font-size: var(--text-h3-sm)
    }

    @media (width>=48rem) {
        .content :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
            font-size: var(--text-h3)
        }
    }

    .content :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-color: var(--color-border)
    }

    .content :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        font-size: var(--text-base);
        color: var(--color-text)
    }

    .content :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-color: var(--color-primary);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: var(--spacing);
        border-radius: .25rem
    }

    .content :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) {
        padding-inline: var(--spacing);
        color: var(--color-primary)
    }

    .content :where(pre):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-radius: .25rem
    }

    .content :where(strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--color-text-dark)
    }

    .content :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--color-primary);
        text-decoration-line: none
    }

    @media (hover:hover) {
        .content:hover :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
            text-decoration-line: underline
        }
    }

    .content :where(img):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-radius: var(--radius-lg);
        max-width: 100%
    }

    .content :where(li):not(:where([class~=not-prose], [class~=not-prose] *)) {
        color: var(--color-text)
    }

    .content :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-radius: var(--radius-lg);
        position: relative;
        overflow: hidden
    }

    .content :where(table):not(:where([class~=not-prose], [class~=not-prose] *)):before {
        content: var(--tw-content);
        content: var(--tw-content);
        content: var(--tw-content);
        content: var(--tw-content);
        content: var(--tw-content);
        content: var(--tw-content);
        border-radius: inherit;
        content: var(--tw-content);
        border-style: var(--tw-border-style);
        content: var(--tw-content);
        border-width: 1px;
        border-color: var(--color-border);
        content: var(--tw-content);
        --tw-content: "";
        content: var(--tw-content);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .content :where(thead):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-color: var(--color-border);
        background-color: var(--color-light)
    }

    .content :where(th):not(:where([class~=not-prose], [class~=not-prose] *)) {
        z-index: 10;
        padding-inline: calc(var(--spacing) * 4);
        color: var(--color-text-dark);
        padding-block: 18px;
        position: relative
    }

    .content :where(tr):not(:where([class~=not-prose], [class~=not-prose] *)) {
        border-color: var(--color-border)
    }

    .content :where(td):not(:where([class~=not-prose], [class~=not-prose] *)) {
        z-index: 10;
        padding-inline: calc(var(--spacing) * 3);
        padding-block: 18px;
        position: relative
    }

    .header {
        background-color: var(--color-white);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: 14px
    }

    @media (width>=48rem) {
        .header {
            padding-block: 9px;
            padding-inline: 0
        }
    }

    .navbar {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        display: flex;
        position: relative;
    }
@media (min-width: 768px) {
    .navbar {
        margin-top: -10px;
        padding-top: 5px;
        height: 60px;
    }
}
    .navbar-brand {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-dark)
    }

    .navbar-brand img {
        object-fit: contain;
        max-width: 100%;
        max-height: 100%
    }

   .navbar-nav { 
    text-align: center; 
    position: relative; 
    right: 0; /* Na mobitelu nema pomicanja u stranu */
}
/* Primjenjuje se samo na ekranima širim od 992px (računala) */
@media (min-width: 992px) {
    .navbar-nav { 
        right: 10em; /* Tvoje savršeno pomicanje radi samo na računalu */
    }
}


    @media (width>=48rem) {
        .navbar-nav {
            text-align: left;
        }
    }

    #nav-menu {
        width: 100%;
        overflow: hidden;
    }

    @media (width>=48rem) {
        #nav-menu {
            width: auto;
            max-height: 100%
        }
    }

    .nav-item select:focus:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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);
        --tw-outline-style: none;
        outline-style: none
    }

    .nav-link {
        padding-inline: calc(var(--spacing) * 2);
        padding-block: calc(var(--spacing) * 3);
        font-family: var(--font-primary);
        line-height: var(--tw-leading, var(--text-base--line-height));
        font-size: var(--text-base);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        color: white;
        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, 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))
    }

    @media (hover:hover) {
        .nav-link:hover {
            color: #f86923
        }
    }

    @media (width>=48rem) {
        .nav-link {
            padding-block: calc(var(--spacing) * 4)
        }
    }

    @media (width>=64rem) {
        .nav-link {
            padding-inline: calc(var(--spacing) * 3)
        }
    }

    .nav-link-active {
        color: white;
        background-color: #964923;
        height: 40px;
        margin-top: 10px;
        padding-top: 5px;
    }

    .btn {
        border-style: var(--tw-border-style);
        padding-inline: calc(var(--spacing) * 7);
        font-family: var(--font-primary);
        --tw-leading: 18px;
        --tw-font-weight: var(--font-weight-bold);
        line-height: 18px;
        font-weight: var(--font-weight-bold);
        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, 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));
        border-width: 1px;
        padding-block: 17px;
        display: inline-block
    }

    .btn-primary {
        z-index: 1;
        background-color: white;
        color: white;
        text-transform: capitalize;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        border-color: #0000;
        border-radius: 30px;
        position: relative
    }

    @media (hover:hover) {
        .btn-primary:hover {
            --tw-shadow: 0 12px 24px -6px var(--tw-shadow-color, #2d43791a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    .btn-primary:after {
        z-index: calc(1 * -1);
        --tw-translate-x: -50%;
        width: 100%;
        height: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        background-color: var(--color-primary);
        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;
        --tw-ease: var(--ease-in-out);
        transition-duration: .3s;
        transition-timing-function: var(--ease-in-out);
        --tw-content: "";
        content: var(--tw-content);
        border-radius: 30px;
        position: absolute;
        top: 50%;
        left: 50%
    }

    .btn-primary:hover:after {
        width: 110%;
        height: 110%
    }

    .btn-outline-primary {
        border-style: var(--tw-border-style);
        color: var(--color-text);
        background-color: #0000;
        border-width: 0;
        border-radius: 30px;
        position: relative
    }

    @media (hover:hover) {
        .btn-outline-primary:hover {
            color: var(--color-primary);
            border-color: #0000
        }
    }

    .btn-outline-primary:after {
        z-index: 0;
        --tw-translate-x: -50%;
        width: 100%;
        height: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-primary);
        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;
        --tw-ease: var(--ease-in-out);
        transition-duration: .3s;
        transition-timing-function: var(--ease-in-out);
        --tw-content: "";
        content: var(--tw-content);
        background-color: #0000;
        border-radius: 30px;
        position: absolute;
        top: 50%;
        left: 50%
    }

    .btn-outline-primary:hover:after {
        width: 110%;
        height: 110%
    }
}

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

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .top-0 {
        top: 0
    }

    .left-0 {
        left: 0
    }

    .z-0 {
        z-index: 0
    }

    .z-50 {
        z-index: 50
    }

    .order-0 {
        order: 0
    }
    .order-0 h2{
    color: white;
    }

    .order-0 .dio_1_loga {
        font-size: 2em;
    }
    .order-0 .dio_2_loga{

        font-size: 1em;
    }
    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .order-3 {
        order: 3
    }

    .order-first {
        order: -9999
    }

    .order-last {
        order: 9999
    }

    .col-12 {
        grid-column: 12
    }

    .col-auto {
        grid-column: auto
    }

    .container {
        width: 100%
    }

    @media (width>=40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (width>=48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (width>=64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (width>=80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (width>=96rem) {
        .container {
            max-width: 96rem
        }
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-0 {
        margin-block: 0
    }

    .my-6 {
        margin-block: calc(var(--spacing) * 6)
    }

    .me-4 {
        margin-inline-end: calc(var(--spacing) * 4)
    }

    .row {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 0;
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) / -2);
        margin-left: calc(var(--bs-gutter-x) / -2);
        flex-wrap: wrap;
        display: flex
    }

    .row>* {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) / 2);
        padding-left: calc(var(--bs-gutter-x) / 2);
        margin-top: var(--bs-gutter-y);
        flex-shrink: 0
    }

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

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

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

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

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

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

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

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

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

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

    .mb-\[10px\] {
        margin-bottom: 10px
    }

    .ml-1 {
        margin-left: var(--spacing)
    }

    .ml-1\.5 {
        margin-left: calc(var(--spacing) * 1.5)
    }

    .ml-auto {
        margin-left: auto
    }

    .form-input {
        appearance: none;
        --tw-shadow: 0 0 #0000;
        background-color: #fff;
        border-width: 1px;
        border-color: oklch(55.1% .027 264.364);
        border-radius: 0;
        padding: .5rem .75rem;
        font-size: 1rem;
        line-height: 1.5rem
    }

    .form-input:focus {
        outline-offset: 2px;
        --tw-ring-inset: var(--tw-empty, );
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: oklch(54.6% .245 262.881);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-color: oklch(54.6% .245 262.881);
        outline: 2px solid #0000
    }

    .form-input::placeholder {
        color: oklch(55.1% .027 264.364);
        opacity: 1
    }

    .form-input::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    .form-input::-webkit-date-and-time-value {
        min-height: 1.5em
    }

    .form-input::-webkit-date-and-time-value {
        text-align: inherit
    }

    .form-input::-webkit-datetime-edit {
        display: inline-flex
    }

    .form-input::-webkit-datetime-edit {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-year-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-month-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-day-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-hour-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-minute-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-second-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-millisecond-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-meridiem-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

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

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

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

    .h-\[40vh\] {
        height: 40vh
    }

    .h-\[42px\] {
        height: 42px
    }

    .col-12 {
        flex: none;
        width: 100%
    }

    .col-auto,
    .row-cols-auto>* {
        flex: none;
        width: auto
    }

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

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

    .w-\[30px\] {
        width: 30px
    }

    .w-\[42px\] {
        width: 42px
    }

    .w-full {
        width: 100%
    }

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

    .col {
        flex: 1 0
    }

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

    .cursor-pointer {
        cursor: pointer
    }

    .list-none {
        list-style-type: none
    }

    .form-textarea {
        appearance: none;
        --tw-shadow: 0 0 #0000;
        background-color: #fff;
        border-width: 1px;
        border-color: oklch(55.1% .027 264.364);
        border-radius: 0;
        padding: .5rem .75rem;
        font-size: 1rem;
        line-height: 1.5rem
    }

    .form-textarea:focus {
        outline-offset: 2px;
        --tw-ring-inset: var(--tw-empty, );
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: oklch(54.6% .245 262.881);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-color: oklch(54.6% .245 262.881);
        outline: 2px solid #0000
    }

    .form-textarea::placeholder {
        color: oklch(55.1% .027 264.364);
        opacity: 1
    }

    .items-center {
        align-items: center
    }

    .justify-center {
        justify-content: center
    }

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

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

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

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

    .overflow-hidden {
        overflow: hidden
    }

    .rounded {
        border-radius: .25rem
    }

    .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-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

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

    .bg-gray-200 {
        background-color: var(--color-gray-200)
    }

    .bg-light {
        background-color: #EAECEE;
    }

    .bg-light a{
        opacity: 1 !important;
    }

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

    .bg-white {
        background-color: var(--color-white)
    }

    .fill-current {
        fill: currentColor
    }

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

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

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

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

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

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

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

    .py-\[2\.5px\] {
        padding-block: 2.5px
    }

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

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

    .pb-0 {
        padding-bottom: 0
    }

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

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

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

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

    .pl-0 {
        padding-left: 0
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .font-primary {
        font-family: var(--font-primary)
    }

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

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

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

    .leading-5 {
        --tw-leading: calc(var(--spacing) * 5);
        line-height: calc(var(--spacing) * 5)
    }

    .leading-\[40px\] {
        --tw-leading: 40px;
        line-height: 40px
    }

    .leading-\[44px\] {
        --tw-leading: 44px;
        line-height: 44px
    }

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

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

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

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

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

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

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

    .uppercase {
        text-transform: uppercase
    }

    .no-underline {
        text-decoration-line: none
    }

    .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);
        box-shadow: 0 12px 24px -6px #2d43791a
    }

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

    .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, )
    }

    @media (hover:hover) {
        .group-hover\:block:is(:where(.group):hover *) {
            display: block
        }

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

    @media (width>=40rem) {
        .sm\:col-4 {
            grid-column: 4
        }

        .sm\:col-6 {
            grid-column: 6
        }

        .sm\:block {
            display: block
        }

        .sm\:hidden {
            display: none
        }

        .sm\:col-4 {
            flex: none;
            width: 33.3333%
        }

        .sm\:col-6 {
            flex: none;
            width: 50%
        }

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

        .sm\:bg-red-200 {
            background-color: var(--color-red-200)
        }
    }

    @media (width>=48rem) {
        .md\:invisible {
            visibility: hidden
        }

        .md\:absolute {
            position: absolute
        }

        .md\:order-1 {
            order: 1
        }

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

        .md\:col-4 {
            grid-column: 4
        }

        .md\:col-5 {
            grid-column: 5
        }

        .md\:col-6 {
            grid-column: 6
        }

        .md\:col-8 {
            grid-column: 8
        }

        .md\:mt-0 {
            margin-top: 0
        }

        .md\:ml-0 {
            margin-left: 0
        }

        .md\:block {
            display: block
        }

        .md\:flex {
            display: flex
        }

        .md\:grid {
            display: grid
        }

        .md\:hidden {
            display: none
        }

        .md\:col-4 {
            flex: none;
            width: 33.3333%
        }

        .md\:col-5 {
            flex: none;
            width: 41.6667%
        }

        .md\:col-6 {
            flex: none;
            width: 50%
        }

        .md\:col-8 {
            flex: none;
            width: 66.6667%
        }

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

        .md\:w-auto {
            width: auto
        }

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

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

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

        .md\:bg-yellow-200 {
            background-color: var(--color-yellow-200)
        }

        .md\:text-left {
            text-align: left
        }

        .md\:opacity-0 {
            opacity: 0
        }

        @media (hover:hover) {
            .md\:group-hover\:visible:is(:where(.group):hover *) {
                visibility: visible
            }

            .md\:group-hover\:opacity-100:is(:where(.group):hover *) {
                opacity: 1
            }
        }
    }

    @media (width>=64rem) {
        .lg\:col-3 {
            grid-column: 3
        }

        .lg\:col-4 {
            grid-column: 4
        }

        .lg\:col-5 {
            grid-column: 5
        }

        .lg\:col-7 {
            grid-column: 7
        }

        .lg\:col-10 {
            grid-column: 10
        }

        .lg\:block {
            display: block
        }

        .lg\:hidden {
            display: none
        }

        .lg\:col-3 {
            flex: none;
            width: 25%
        }

        .lg\:col-4 {
            flex: none;
            width: 33.3333%
        }

        .lg\:col-5 {
            flex: none;
            width: 41.6667%
        }

        .lg\:col-7 {
            flex: none;
            width: 58.3333%
        }

        .lg\:col-10 {
            flex: none;
            width: 83.3333%
        }

        .lg\:w-auto {
            width: auto
        }

        .lg\:min-w-\[200px\] {
            min-width: 200px
        }

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

        .lg\:bg-green-200 {
            background-color: var(--color-green-200)
        }

        .lg\:px-0 {
            padding-inline: 0
        }

        .lg\:text-\[56px\] {
            font-size: 56px
        }
    }

    @media (width>=80rem) {
        .xl\:block {
            display: block
        }

        .xl\:hidden {
            display: none
        }

        .xl\:bg-blue-200 {
            background-color: var(--color-blue-200)
        }
    }

    @media (width>=96rem) {
        .\32 xl\:block {
            display: block
        }

        .\32 xl\:hidden {
            display: none
        }

        .\32 xl\:bg-pink-200 {
            background-color: var(--color-pink-200)
        }
    }
}

#hide-button,
#nav-toggle:checked~#show-button {
    display: none
}

#nav-toggle:checked~#hide-button {
    display: block
}

@media (width>=48rem) {
    #nav-toggle:checked~#hide-button {
        display: none
    }
}

#nav-toggle:checked~#nav-menu {
    display: block
}

@media (width>=48rem) {
    #nav-toggle:checked~#nav-menu {
        display: flex
    }
}

.form-inputs * {
    margin-bottom: calc(var(--spacing) * 5);
    --tw-leading: calc(var(--spacing) * 10);
    line-height: calc(var(--spacing) * 10)
}

.form-input,
.form-textarea {
    border-color: var(--color-border);
    padding-block: calc(var(--spacing) * 3)
}

:is(.form-input, .form-textarea):focus {
    border-color: var(--color-primary);
    --tw-ring-color: transparent
}

.service-carousel .pagination {
    justify-content: center;
    display: flex
}

.service-carousel .pagination span {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-primary);
    border-radius: 3.40282e38px;
    width: 10px;
    height: 10px;
    margin-inline: 5px;
    display: inline-block
}

.service-carousel .pagination span.swiper-pagination-bullet-active {
    background-color: var(--color-primary)
}

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

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

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

@property --tw-font-weight {
    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-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@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
}

.astro-route-announcer {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}



.dozvola_za_rad{
    display: flex;
    float: left;
}


.pravno-slika{
    width: 100px;
    height: 100px;
}

.pravno{
    display: flex;
    flex: right;
    width: 100px;
    height: 100px;
    
}

/* 1. Vanjska sekcija - ide preko cijele širine ekrana */
.pravna-sekcija-punasirina {
  width: 100%;
  background-color: #f8f9fa; /* Svijetlo siva pozadina koja ide od ruba do ruba */
  padding: 60px 0; /* Razmak na vrhu i dnu sekcije */
  box-sizing: border-box;
}

/* 2. Unutarnji grid - ograničen na 1200px i centriran */
.pravna-grid-kontejner {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tri stupca */
  gap: 30px; /* Razmak između kartica */
  max-width: 1200px; /* Maksimalna širinu sadržaja */
  margin: 0 auto; /* Centrira cijeli grid na sredinu ekrana */
  padding: 0 20px; /* Sigurnosni razmak na malim ekranima */
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- KARTICE (Ostale netaknute kao u prvom dizajnu) --- */
.pravna-kartica {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pravna-kartica:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.slika-kontejner {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.slika-kontejner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sadrzaj-kartice {
  padding: 25px;
}

.sadrzaj-kartice h3 {
  margin-top: 0;
  color: #1a252f;
  font-size: 22px;
  margin-bottom: 12px;
}

.sadrzaj-kartice p {
  color: #555555;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.procitaj-vise {
  color: #b38f4f;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.procitaj-vise:hover {
  text-decoration: underline;
  color:#f86923;
}

/* Prilagodba za mobitele */
@media (max-width: 992px) {
  .pravna-grid-kontejner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .pravna-grid-kontejner {
    grid-template-columns: 1fr;
  }
}

.radno_vrijeme ul li{
    line-height: 20px;
    margin-bottom: 20px;
}

.fiskalne_kase{
    position: relative;
    left: 110%;
    right: auto;
    display: inline;
}

footer a:hover{
    color: var(--color-primary);
}

.besplatan_broj{
    width: 100%;
    height: 50px;
    background-color: var(--color-primary);
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 1. Glavni kontejner sekcije */
.container.net {
  width: 100%;
  padding-bottom: 20px;
}

/* 2. DESKTOP RASPPORED (4 u redu sa skalom) */
.skalirane-kartice {
  display: flex;
  flex-wrap: nowrap; /* Drži ih u jednom redu na desktopu */
  justify-content: center;
  gap: 20px;
  width: 120%; /* Proširenje za bolji scale */
  margin-left: -10%; /* Centriranje */
  
  /* Skaliranje za desktop */
  transform: scale(0.90); 
  transform-origin: top center;
}

/* Širina pojedinačne kartice na desktopu */
.kartica-stupac {
  flex: 0 0 320px;
}


/* 3. STRATEŠKI MOBILNI I TABLET RASPPORED (Okomito) */
@media (max-width: 1024px) {
  .skalirane-kartice {
    display: flex;
    flex-direction: column; /* OKREĆE KARTICE OKOMITO (jedna ispod druge) */
    flex-wrap: wrap;
    align-items: center; /* Centrira kartice na ekranu mobilnog */
    gap: 24px; /* Razmak između kartica kada su jedna ispod druge */
    
    /* POTPUNO GASIMO SCALE NA MOBITELU - kartice se vraćaju u prirodnu, punu veličinu */
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important; 
    padding: 0 15px;
  }

  /* Na mobitelu kartice zauzimaju punu širinu ekrana (s maksimalnim limitom da ne budu preširoke) */
  .kartica-stupac {
    flex: 0 1 100%;
    width: 100%;
    max-width: 360px; /* Idealna širina za karticu na telefonu da tekst lijepo "diše" */
  }
}

.besplatan_broj {
  height: auto !important; /* Dozvoljava širenje prema dole */
  min-height: 40px;
  overflow: visible !important; /* Poništava hidden i prikazuje sav tekst */
  padding: 8px 15px;
}

.besplatan_broj p {
  white-space: normal; /* Dozvoljava prelamanje teksta */
  word-wrap: break-word;
  text-align: center;
}


.jedna-tv-kartica{
    transform: scale(1.0) !important;
}

main{
    margin-bottom: 5em;
}

.tv_img{
    width: 80%;
    height: 30em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5em;
}

/* --- STILOVI ZA STRANICU TELEVIZIJA --- */

/* 1. Slika televizije */
.tv_img {
  max-width: 100%;
  width: 600px; /* Optimalna širina za desktop */
  height: auto;
  border-radius: 8px; /* Elegantni blago zaobljeni rubovi */
  display: block;
}

/* 2. Pozicioniranje samo jedne kartice na sredini */
.jedna-tv-kartica {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Osiguravamo da kartica zadrži originalne proporcije i širinu */
.jedna-tv-kartica .card {
  width: 100%;
  max-width: 360px; /* Širina usklađena sa vašim prošlim cjenovnikom */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Blaga moderna sjena */
  background: #ffffff;
}

/* 3. Lista pogodnosti ispod kartice */
.tv-beneficije {
  list-style: none; /* Uklanja stare crne tačke */
  padding: 0;
}

.tv-beneficije li {
  display: flex;
  align-items: flex-start; /* Drži kvačicu na vrhu ako se tekst prelomi u 2 reda */
  margin-bottom: 16px;
}

/* Stil za emoji kvačicu */
.tv-beneficije .kvacica {
  margin-right: 12px;
  font-size: 1.2rem;
  line-height: 1.4;
  flex-shrink: 0; /* Ne dozvoljava kvačici da se zgnječi */
}

/* Stil za tekst pogodnosti */
.tv-beneficije .tekst-pogodnosti {
  font-size: 1.1rem;
  color: #333333;
  line-height: 1.5;
}

/* 4. Prilagođavanje za manje ekrane (Mobitele) */
@media (max-width: 768px) {
  .tv-beneficije .tekst-pogodnosti {
    font-size: 1rem; /* Blago manji tekst na mobitelu radi bolje čitljivosti */
  }
  .tv-beneficije {
    max-width: 90%; /* Da lista ne lijepi skroz uz rubove ekrana na telefonu */
  }
}
  

.pogodnosti-sekcija h2{
    margin-bottom: 2em;
}
/* Kontejner koji gura cijeli blok udesno */
.cjenovnik-kontejner {
  text-align: left;
  width: 100%;
}

/* Stil za obični tekst rečenice */
.tekst-desno {
  font-size: 1.1rem;
  color: #333333;
  margin: 0;
  margin-top: 1em;
  display: inline-block;
}

/* Stil isključivo za riječ "ovdje" koja je link */
.link-rijec {
  color: #f86923; /* Plava boja za link (prilagodite svom brendu) */
  font-weight: bold; /* Podebljano da odmah privuče pažnju */
  transition: color 0.2s ease;
}

/* Efekat kada se pređe mišem preko riječi "ovdje" */
.link-rijec:hover {
  color: #0056b3; /* Tamnija plava boja na hover */
}

.map{
    width: 100%;
    height: 100%;
}


.fiskalne{
    margin-bottom: 18em;
}

.kase_tekst{
    margin-left: 42%;
    margin-top: 7em;
}

.nase_usluge_kartica{
    background-color: var(--color-light);
    width: 15em;
    height: 15em;
   display: grid;
   grid-template-rows: auto;
}

/* Stilovi za cijelu sekciju */
.nase-usluge {
    background-color: #f3f4f6; /* Svijetlo siva pozadina sa slike */
    padding: 60px 20px;
    font-family: sans-serif;
    text-align: center;
}

.nase-usluge h2 {
    font-size: 2rem;
    color: #1a202c;
    margin-bottom: 40px;
}

/* Flexbox kontejner */
.usluge-grid {
    display: flex;
    flex-direction: row;       /* Po zadanim postavkama slaže vodoravno */
    flex-wrap: wrap;           /* KLJUČNO: Omogućuje karticama da prijeđu u novi red na manjim ekranima */
    justify-content: center;   
    gap: 20px;                 /* Razmak između kartica */
    width: 100%;
    max-width: 1200px;         
    margin: 0 auto;
}

/* Stilovi za pojedinačnu bijelu karticu */
.kartica {
    background-color: #ffffff; 
    border-radius: 8px;        
    padding: 30px 20px;
    
    /* KLJUČNO ZA RESPONZIVNOST: */
    /* Izračunava širinu: (100% - ukupni razmaci između 4 kartice) podijeljeno sa 4 kartice */
    flex: 1 1 calc(25% - 15px); 
    box-sizing: border-box;    /* Osigurava da padding ne širi karticu izvan zadanih postotaka */
    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
    display: flex;
    flex-direction: column;    
    align-items: center;       
}

/* Stilovi unutar kartice (ikone, naslovi, tekst) */
.ikona {
    color: #00a896;            
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.kartica h3 {
    color: #333333;
    font-size: 1.25rem;
    margin: 0 0 15px 0;
}

.kartica p {
    color: #666666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   RESPONZIVNI PRILAGODBENI PRAGOVI (MEDIA QUERIES)
   ========================================================================== */

/* 1. Srednji ekrani (Tableti - širina manja od 992px) */
@media (max-width: 992px) {
    .kartica {
        /* Kartice zauzimaju cca 50% širine, što stvara urednu 2x2 mrežu */
        flex: 1 1 calc(50% - 20px); 
    }
}

/* 2. Mali ekrani (Mobiteli - širina manja od 576px) */
@media (max-width: 576px) {
    .usluge-grid {
        flex-direction: column; /* Prebacuje slaganje iz vodoravnog u okomito */
    }
    
    .kartica {
        /* Svaka kartica sada zauzima punu širinu ekrana u svom redu */
        flex: 1 1 100%; 
        padding: 25px 15px; /* Blago smanjen padding za uske ekrane telefona */
    }
    
    .nase-usluge h2 {
        font-size: 1.6rem; /* Malo manji naslov sekcije na mobitelima */
    }
}

/* Efekt kada korisnik prijeđe mišem preko kartice */
.kartica {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Omogućuje glatku animaciju */
}

.kartica:hover {
    transform: translateY(-5px); /* Lagano podiže karticu prema gore */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Pojačava sjenu za efekt dubine */
}


header{
    background-color: #181818;
}

/* ZAJEDNIČKI STILOVI */
.kontejner {
  display: flex;
  box-sizing: border-box;
}

.kontejner h3 {
  margin: 0;
  font-size: 1.5em;
  text-align: center;
}

/* 1. ZA MOBITELE I TABLETE (Sve do 1024px širine) */
@media (max-width: 1024px) {
  .kontejner {
    flex-direction: column; 
    align-items: center;    
    gap: 30px; 
    width: 100%;
    padding: 0 15px; 
  }

  .kontejner h3 {
    white-space: normal; /* Dozvoljava tekstu da se prelomi ako nema mjesta */
  }

  /* Centriramo unutrašnje omotače */
  .kontejner .service-content, 
  .kontejner div {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* KLJUČNI POPRAVAK: Poništavamo ml-auto sa linka da ne bježi udesno */
  .kontejner div a.privatnost-btn {
    margin-left: 0 !important; 
  }
}

/* 2. ZA VEĆE EKRANE / RAČUNARE (Sve iznad 1024px) */
@media (min-width: 1025px) {
  .kontejner {
    flex-direction: row;    
    align-items: center;    
    gap: 50px; 
    margin-left: 38%; 
  }

  .kontejner h3 {
    white-space: nowrap; 
  }
}


/* Svi stilovi sada utječu ISKLJUČIVO na elemente unutar .hero-slider-section */

.hero-slider-section,
.hero-slider-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Glavni kontejner slidera */
.hero-slider-section .slider-container {
    position: relative;
    width: 100%;
    height: 68vh; /* Visina hero sekcije (80% ekrana) */
    overflow: hidden;
    background-color: #000;
}

/* Pojedinačni slide */
.hero-slider-section .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slider-section .slide.active {
    opacity: 1;
    z-index: 1;
}

/* Slike unutar slidera */
.hero-slider-section .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sprečava distorziju slike */
    position: absolute;
    filter: brightness(50%); /* Zatamnjuje sliku kako bi se tekst bolje vidio */
}

/* Sadržaj (Tekst i gumb) */
.hero-slider-section .slide-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;
    transform: translateY(20px);
    transition: transform 0.8s ease-in-out;
}

.hero-slider-section .slide.active .slide-content {
    transform: translateY(0);
}

.hero-slider-section .slide-content h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    font-family: sans-serif;
    color: #fff;
    line-height: 1.2;
}

.hero-slider-section .slide-content p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    font-family: sans-serif;
    color: #eee;
}

.hero-slider-section .slider-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff4757;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s;
    font-family: sans-serif;
}

.hero-slider-section .slider-btn:hover {
    background-color: #e84118;
}

/* Strelice za navigaciju */
.hero-slider-section .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    transition: background 0.3s;
    line-height: 1;
}

.hero-slider-section .arrow:hover {
    background: rgba(255, 255, 255, 0.5);
}

.hero-slider-section .prev { left: 20px; }
.hero-slider-section .next { right: 20px; }

/* Točkice na dnu */
.hero-slider-section .dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.hero-slider-section .dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.hero-slider-section .dot.active {
    background: #fff;
    transform: scale(1.2);
}

/* RESPONSIVENESS (Prilagodba za mobitele) */
@media (max-width: 768px) {
    .hero-slider-section .slider-container { height: 60vh; } 
    .hero-slider-section .slide-content h1 { font-size: 1.8rem; }
    .hero-slider-section .slide-content p { font-size: 1rem; }
    .hero-slider-section .arrow { padding: 10px; font-size: 18px; }
}

/* Precizno podešavanje za jako male ekrane (Phablets & Phones) */
@media (max-width: 480px) {
    .hero-slider-section .slider-container { 
        height: 55vh; /* Malo niža sekcija da sve stane bez skrolanja */
    } 
    .hero-slider-section .slide-content h1 { 
        font-size: 1.4rem; /* Manji naslov */
        margin-bottom: 8px;
    }
    .hero-slider-section .slide-content p { 
        font-size: 0.9rem; /* Manji tekst */
        margin-bottom: 15px;
    }
    .hero-slider-section .slider-btn { 
        padding: 8px 20px; /* Manji gumb */
        font-size: 0.9rem;
    }
    /* Sakrivamo strelice na mobitelu jer smetaju tekstu, korisnik klika točkice */
    .hero-slider-section .arrow { 
        display: none; 
    }
    .hero-slider-section .dots-container {
        bottom: 10px; /* Približavamo točkice dnu */
    }
}

/* Svi stilovi su sada izolirani unutar ove klase i ne utječu na ostatak stranice */
.lista-kanala-sekcija {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    padding: 20px;
}

/* Kontejner za tabelu */
.lista-kanala-sekcija .table-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Naslov tabele */
.lista-kanala-sekcija .table-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #2c3e50;
    font-size: 24px;
}

/* Stilovi tabele */
.lista-kanala-sekcija .responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    box-sizing: border-box;
}

.lista-kanala-sekcija .responsive-table th, 
.lista-kanala-sekcija .responsive-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.lista-kanala-sekcija .responsive-table th {
    background-color: #2c3e50;
    color: #ffffff;
    font-weight: 600;
}

/* Efekat prelaza mišem i alternirajuće boje redova */
.lista-kanala-sekcija .responsive-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.lista-kanala-sekcija .responsive-table tbody tr:hover {
    background-color: #f1f3f5;
}

/* Ograničavanje i centriranje logotipa */
.lista-kanala-sekcija .responsive-table img {
    max-height: 40px;
    max-width: 80px;
    object-fit: contain;
    display: block;
    background-color: #eee; 
    border-radius: 4px;
    box-sizing: border-box;
}

/* Širina stupaca */
.lista-kanala-sekcija .responsive-table th:nth-child(1),
.lista-kanala-sekcija .responsive-table td:nth-child(1) {
    width: 15%;
    text-align: center;
}

.lista-kanala-sekcija .responsive-table th:nth-child(2),
.lista-kanala-sekcija .responsive-table td:nth-child(2) {
    width: 25%;
}

/* Responzivnost za mobilne uređaje */
@media screen and (max-width: 600px) {
    .lista-kanala-sekcija {
        padding: 10px;
    }

    .lista-kanala-sekcija .table-container {
        padding: 10px;
    }
    
    .lista-kanala-sekcija .responsive-table th, 
    .lista-kanala-sekcija .responsive-table td {
        padding: 8px 10px;
        font-size: 14px;
    }
    
    .lista-kanala-sekcija .responsive-table img {
        max-height: 30px;
        max-width: 60px;
    }
}


.lista_kanala_tekst{
    display: block;
    margin-top: -1px;
}
link_bez_mijenjanja{
    color: var(--color-primary) !important;
}

.kartica-stupac{
    height: 400px !important;
}
.kartica-stupac img{
    margin-top: 20px;
}
.k20 img{
     width: 600px !important;
     height: 300px;
     margin-top: 10px;
}

.tring img{
     width: 600px;
     height: 300px;
     margin-top: 10px;
}

.mep100 img{
    margin-top: 33px;
}

/* Osnovni stilovi za tabelu */
.kase-container {
  width: 100%;
  margin: 20px 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: auto;
}

.kase-tabela {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.kase-tabela th {
  background-color: #0f4c81; /* Config plava nijansa */
  color: #ffffff;
  text-align: left;
  padding: 15px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.kase-tabela td {
  padding: 15px;
  border-bottom: 1px solid #eeeeee;
  vertical-align: middle;
}

.kase-tabela tbody tr:last-child td {
  border-bottom: none;
}

.kase-tabela tbody tr:hover {
  background-color: #f8f9fa;
}

/* Stilovi elemenata unutar tabele */
.kasa-img {
  width: 130px;
  height: auto;
  object-fit: contain;
  display: block;
}

.kasa-naziv {
  font-weight: 600;
  color: #333333;
  font-size: 16px;
}

.kasa-cijena {
  font-weight: 700;
  color: #e63946; /* Istaknuta cijena */
  font-size: 16px;
}

/* Potpuna responzivnost za mobilne uređaje (ekrani manji od 768px) */
@media screen and (max-width: 768px) {
  .kase-tabela thead {
    display: none; /* Sakriva zaglavlje tabele */
  }

  .kase-tabela, .kase-tabela tbody, .kase-tabela tr, .kase-tabela td {
    display: block;
    width: 100%;
  }

  .kase-tabela tr {
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    padding: 10px;
  }

  .kase-tabela td {
    text-align: right;
    padding-left: 50%;
    position: relative;
    border-bottom: 1px dashed #eeeeee;
  }

  .kase-tabela td:last-child {
    border-bottom: none;
  }

  /* Ubacivanje naziva kolone ispred vrijednosti preko data-label atributa */
  .kase-tabela td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: #666666;
    text-transform: uppercase;
    font-size: 12px;
  }

  /* Centriranje slike na mobilnom prikazu radi ljepšeg izgleda karte */
  .kasa-img {
    margin-left: auto;
    width: 70px;
  }
}

.email{
    display: flex;
    flex-direction: column;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Glavni kontejner koji drži sva 4 logotipa */
.logo-container {
  display: flex;
  flex-direction: row;         /* Reda elemente vodoravno */
  justify-content: space-around; /* Pravi jednak razmak između njih */
  align-items: flex-end;       /* Poravnava logotipe po dnu ako nisu iste visine */
  gap: 20px;                   /* Razmak između kolona */
  width: 100%;
  max-width: 1200px;           /* Maksimalna širina na velikim ekranima */
  margin: 0 auto;              /* Centrira cijelu sekciju na stranici */
  padding: 20px;
}

/* Pojedinačni kontejner za jedno ime i jedan logo */
.logo-item {
  display: flex;
  flex-direction: column;      /* Slaže ime iznad logotipa */
  align-items: center;         /* Centrira ime u odnosu na logo */
  text-align: center;
  flex: 1;                     /* Daje svim elementima jednaku širinu */
  min-width: 150px;            /* Sprječava da se previše stisnu */
}

/* Stil za ime kompanije iznad logotipa */
.company-name {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;         /* Razmak između imena i logotipa */
  color: #333;
}

/* Stil za logotipe koji osigurava responzivnost slika */
.company-logo {
  max-width: 100%;             /* Logo se smanjuje ako je ekran mali */
  height: auto;                /* Zadržava originalne proporcije slike */
  max-height: 80px;            /* Ograničava maksimalnu visinu logotipa */
  object-fit: contain;         /* Sprječava izobličenje slike */
}

/* --- RESPOND_TO_MOBILE: Prilagodba za mobitele (ekrani manji od 768px) --- */
@media (max-width: 768px) {
  .logo-container {
    flex-direction: column;    /* Prebacuje raspored iz vodoravnog u okomiti */
    align-items: center;       /* Centrira elemente na mobitelu */
    gap: 40px;                 /* Povećava razmak između različitih kompanija */
  }
}


.main-content{
    margin-top: -5em;
}

#section-spremni{
    margin-top: -7em !important;
}

.spremni_kartica{
    margin-top: -50px;
}

.kontejner_dozvola{
    height: 0px;
}

@media (max-width: 768px) {
    .kontejner_dozvola {
        height: 120px ;
    }
}

.kartica {
    cursor: pointer; /* Pretvara miš u ručicu za klik */
}