/*! tailwindcss v4.1.17 | 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-border-style: solid;
            --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-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-duration: initial;
            --tw-ease: initial;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-leading: initial;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-space-y-reverse: 0
        }
    }
}

@font-face {
    font-family: IBM Plex Sans Arabic;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/SiteAssets/PortalAssets/css/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf)format("truetype")
}

@font-face {
    font-family: IBM Plex Sans Arabic;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/SiteAssets/PortalAssets/css/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Medium.ttf)format("truetype")
}

@font-face {
    font-family: IBM Plex Sans Arabic;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/SiteAssets/PortalAssets/css/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-SemiBold.ttf)format("truetype")
}

@font-face {
    font-family: IBM Plex Sans Arabic;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/SiteAssets/PortalAssets/css/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Bold.ttf)format("truetype")
}

@layer theme {
    :root, :host {
        --font-sans: "Inter",sans-serif;
        --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        --color-green-700: oklch(52.7% .154 150.069);
        --color-slate-50: oklch(98.4% .003 247.858);
        --color-slate-200: oklch(92.9% .013 255.508);
        --color-slate-300: oklch(86.9% .022 252.894);
        --color-slate-400: oklch(70.4% .04 256.788);
        --color-slate-600: oklch(44.6% .043 257.281);
        --color-slate-700: oklch(37.2% .044 257.287);
        --color-slate-800: oklch(27.9% .041 260.031);
        --color-slate-900: oklch(20.8% .042 265.755);
        --color-gray-100: oklch(96.7% .003 264.542);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-300: oklch(87.2% .01 258.338);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-900: oklch(21% .034 264.665);
        --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: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: 1.2;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --leading-relaxed: 1.625;
        --radius-sm: .25rem;
        --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);
        --color-brand: #1b8354;
        --color-brand-dark: #166534;
        --color-btn-hover: #f3f4f6;
        --color-nav-link: #161616;
        --color-nav-border: #9da4ae
    }
}

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

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

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

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

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

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

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

    b, strong {
        font-weight: bolder
    }

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

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

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

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

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

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

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

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

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

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

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

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

    ::placeholder {
        opacity: 1
    }

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

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

    textarea {
        resize: vertical
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ::file-selector-button {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

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

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

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

    body {
        background-color: var(--color-slate-50);
        color: var(--color-slate-800);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: var(--bs-font-sans-serif);
        flex-direction: column;
        min-height: 100vh;
        display: flex
    }

    *, :before, :after {
        box-sizing: border-box
    }
}

@layer components {
    [main-header] {
        margin-bottom: calc(var(--spacing)*0);
        background-color: var(--color-white);
        padding-block: calc(var(--spacing)*0);
        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color,#0000000d);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
        flex-direction: column;
        display: flex
    }

        [main-header] .header-row {
            align-items: center;
            display: flex
        }

        [main-header] .brand {
            align-items: center;
            margin-inline-end: calc(var(--spacing)*4);
            display: flex
        }

            [main-header] .brand .logo {
                display: block
            }

        [main-header] .navbar {
            align-items: center;
            width: 100%;
            display: flex
        }

            [main-header] .navbar .nav-item .nav-link {
                cursor: pointer;
                justify-content: center;
                align-items: center;
                gap: calc(var(--spacing)*1);
                height: 72px;
                padding-inline: calc(var(--spacing)*4);
                padding-block: calc(var(--spacing)*6);
                font-size: var(--text-base);
                line-height: var(--tw-leading,var(--text-base--line-height));
                --tw-font-weight: var(--font-weight-medium);
                font-weight: var(--font-weight-medium);
                color: var(--color-nav-link);
                display: flex;
                position: relative
            }

    @media(hover:hover) {
        [main-header] .navbar .nav-item .nav-link:hover {
            color: var(--color-nav-link);
            background-color: #f3f4f6
        }
    }

    [main-header] .navbar .nav-item .nav-link.active, [main-header] .navbar .nav-item .nav-link.show {
        background-color: var(--color-brand);
        color: var(--color-white)
    }

    :is([main-header] .navbar .nav-item .nav-link.active,[main-header] .navbar .nav-item .nav-link.show):before {
        opacity: 1;
        background-color: #6ac583
    }

    [main-header] .navbar .nav-item .nav-link:before {
        background-color: var(--color-nav-border);
        content: "";
        z-index: 0;
        opacity: 0;
        border: 0;
        border-radius: 15px;
        width: 80%;
        height: 6px;
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

    [main-header] .navbar .nav-item .nav-link:hover:before {
        opacity: 1
    }

    [main-header] .actions {
        align-items: center;
        margin-inline-start: auto;
        display: flex
    }

        [main-header] .actions .action-item .action-btn {
            cursor: pointer;
            padding-inline: calc(var(--spacing)*4);
            padding-block: calc(var(--spacing)*6);
            align-items: center;
            display: flex
        }

    @media(hover:hover) {
        [main-header] .actions .action-item .action-btn:hover {
            background-color: var(--color-btn-hover)
        }
    }

    [main-header] .actions .action-item .action-btn .inner-btn {
        align-items: center;
        gap: calc(var(--spacing)*2);
        height: 24px;
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        display: flex
    }

    .mobile-only {
        display: none
    }

    @media(max-width:768px) {
        .mobile-only {
            display: block
        }
    }

    .dropdown .dropdown-button {
        align-items: center;
        gap: calc(var(--spacing)*1);
        color: var(--color-slate-600);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        display: flex
    }

    @media(hover:hover) {
        .dropdown .dropdown-button:hover {
            color: var(--color-brand)
        }
    }

    .dropdown .dropdown-icon {
        height: calc(var(--spacing)*4);
        width: calc(var(--spacing)*4);
        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: .3s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .3s;
        transition-timing-function: var(--ease-in-out)
    }

    .dropdown .dropdown-menu {
        margin-top: calc(var(--spacing)*2);
        width: calc(var(--spacing)*48);
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-slate-200);
        background-color: var(--color-white);
        padding-block: calc(var(--spacing)*2);
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
        pointer-events: none;
        visibility: hidden;
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x)var(--tw-scale-y);
        opacity: 0;
        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);
        transform-origin: top;
        position: absolute;
        inset-inline-start: calc(var(--spacing)*0)
    }

        .dropdown .dropdown-menu.mega {
            z-index: 9999;
            margin-top: calc(var(--spacing)*0);
            width: 100%;
            padding-block: calc(var(--spacing)*8);
            border-radius: 0
        }

            .dropdown .dropdown-menu.mega .menu-row {
                gap: calc(var(--spacing)*0);
                display: flex
            }

                .dropdown .dropdown-menu.mega .menu-row .menu-column {
                    width: 25%;
                    padding: calc(var(--spacing)*0)
                }

                    .dropdown .dropdown-menu.mega .menu-row .menu-column .nav-link {
                        border-radius: var(--radius-md);
                        height: auto;
                        padding-inline: calc(var(--spacing)*4);
                        padding-block: calc(var(--spacing)*2);
                        font-size: var(--text-base);
                        line-height: var(--tw-leading,var(--text-base--line-height));
                        --tw-leading: calc(var(--spacing)*6);
                        line-height: calc(var(--spacing)*6);
                        --tw-font-weight: var(--font-weight-medium);
                        font-weight: var(--font-weight-medium);
                        color: var(--color-slate-900);
                        justify-content: flex-start
                    }

                        .dropdown .dropdown-menu.mega .menu-row .menu-column .nav-link:hover {
                            background-color: var(--color-gray-100);
                            text-decoration-line: underline
                        }

                        .dropdown .dropdown-menu.mega .menu-row .menu-column .nav-link:before {
                            content: none
                        }

    .dropdown .dropdown-item {
        padding-inline: calc(var(--spacing)*4);
        padding-block: calc(var(--spacing)*2);
        color: var(--color-slate-600);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        display: block
    }

    @media(hover:hover) {
        .dropdown .dropdown-item:hover {
            background-color: var(--color-slate-50);
            color: var(--color-brand)
        }
    }

    .dropdown.opened .dropdown-menu {
        pointer-events: auto;
        visibility: visible;
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x)var(--tw-scale-y);
        opacity: 1
    }

    .dropdown.opened .dropdown-icon {
        rotate: 180deg
    }

    .dropdown.opened .dropdown-button {
        color: var(--color-brand)
    }

    .dropdown-menu.show {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        z-index: 9999
    }

    [main-footer] {
        padding-block: calc(var(--spacing)*10);
        color: var(--color-white);
        background-color: #074d31;
        margin-top: auto
    }

        [main-footer] .top-footer {
            padding-bottom: calc(var(--spacing)*10)
        }

            [main-footer] .top-footer .row {
                margin-inline: calc(var(--spacing)*-4);
                display: flex
            }

                [main-footer] .top-footer .row .col {
                    flex: none;
                    width: 25%;
                    padding: 0 16px
                }

                    [main-footer] .top-footer .row .col .title {
                        margin-bottom: calc(var(--spacing)*2);
                        border-bottom-style: var(--tw-border-style);
                        padding-bottom: calc(var(--spacing)*2);
                        font-size: var(--text-base);
                        line-height: var(--tw-leading,var(--text-base--line-height));
                        --tw-font-weight: var(--font-weight-medium);
                        font-weight: var(--font-weight-medium);
                        border-color: #ffffff4d;
                        border-bottom-width: 1px
                    }

        [main-footer] .icons_list {
            margin: calc(var(--spacing)*0);
            gap: calc(var(--spacing)*2);
            padding: calc(var(--spacing)*0);
            display: flex
        }

            [main-footer] .icons_list li a {
                border-radius: 4px;
                justify-content: center;
                align-items: center;
                width: 32px;
                height: 32px;
                transition: opacity .3s ease-in-out;
                display: flex;
                border-color: #ffffff4d !important
            }

                [main-footer] .icons_list li a:after {
                    content: none
                }

        [main-footer] .bottom-footer {
            padding-top: calc(var(--spacing)*16)
        }

            [main-footer] .bottom-footer .row {
                margin-inline: calc(var(--spacing)*-4);
                flex-wrap: wrap;
                align-items: center;
                display: flex
            }

            [main-footer] .bottom-footer .col-text {
                width: 100%;
                padding-inline: calc(var(--spacing)*4)
            }

    @media(min-width:40rem) {
        [main-footer] .bottom-footer .col-text {
            width: 100%
        }
    }

    @media(min-width:48rem) {
        [main-footer] .bottom-footer .col-text {
            width: 58.3333%
        }
    }

    @media(min-width:64rem) {
        [main-footer] .bottom-footer .col-text {
            width: 75%
        }
    }

    [main-footer] .bottom-footer .col-brand {
        margin-top: calc(var(--spacing)*5);
        justify-content: flex-start;
        align-items: center;
        gap: calc(var(--spacing)*3);
        width: 100%;
        padding-inline: calc(var(--spacing)*4);
        flex-direction: column;
        display: flex
    }

    @media(min-width:40rem) {
        [main-footer] .bottom-footer .col-brand {
            width: 100%
        }
    }

    @media(min-width:48rem) {
        [main-footer] .bottom-footer .col-brand {
            margin-top: calc(var(--spacing)*0);
            justify-content: flex-end;
            width: 41.6667%
        }
    }

    @media(min-width:64rem) {
        [main-footer] .bottom-footer .col-brand {
            width: 25%
        }
    }

    [main-footer] .bottom-footer .brands-list {
        justify-content: flex-start;
        align-items: center;
        gap: calc(var(--spacing)*3);
        flex-wrap: wrap;
        display: flex
    }

    @media(min-width:64rem) {
        [main-footer] .bottom-footer .brands-list {
            flex-wrap: nowrap;
            justify-content: flex-end
        }
    }

    [main-footer] .bottom-footer .brands-list .footer-logo {
        max-height: 42px
    }

    [main-footer] .bottom-footer .links-list {
        margin-bottom: calc(var(--spacing)*6);
        align-items: center;
        gap: calc(var(--spacing)*4);
        display: flex
    }

        [main-footer] .bottom-footer .links-list .link {
            color: var(--color-white);
            text-decoration-line: underline
        }

    .btn-primary {
        border-radius: var(--radius-lg);
        background-color: var(--color-brand);
        padding-inline: calc(var(--spacing)*6);
        padding-block: calc(var(--spacing)*3);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--color-white);
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
        --tw-shadow-color: #1b83544d
    }

    @supports (color:color-mix(in lab,red,red)) {
        .btn-primary {
            --tw-shadow-color: color-mix(in oklab,color-mix(in oklab,var(--color-brand)30%,transparent)var(--tw-shadow-alpha),transparent)
        }
    }

    .btn-primary {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    @media(hover:hover) {
        .btn-primary:hover {
            background-color: var(--color-brand-dark)
        }
    }

    .btn-secondary {
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-slate-300);
        background-color: var(--color-white);
        padding-inline: calc(var(--spacing)*6);
        padding-block: calc(var(--spacing)*3);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--color-slate-700);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    @media(hover:hover) {
        .btn-secondary:hover {
            background-color: var(--color-slate-50)
        }
    }

    .btn-full {
        border-radius: var(--radius-lg);
        background-color: var(--color-brand);
        width: 100%;
        padding-block: calc(var(--spacing)*3);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        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,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    @media(hover:hover) {
        .btn-full:hover {
            background-color: var(--color-brand-dark)
        }
    }

    .btn-view-all {
        height: calc(var(--spacing)*10);
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing)*1);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-gray-300);
        padding-inline: calc(var(--spacing)*4);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        border-radius: .25rem;
        display: flex
    }

    @media(hover:hover) {
        .btn-view-all:hover {
            background-color: var(--color-gray-200)
        }
    }

    .button-group {
        justify-content: center;
        gap: calc(var(--spacing)*4);
        display: flex
    }

    .hero-section {
        padding: calc(var(--spacing)*0);
        text-align: center
    }

        .hero-section .hero-img {
            aspect-ratio: 21/9;
            object-fit: cover;
            width: 100%;
            min-height: 100%
        }

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

        .section-header .header-top {
            margin-bottom: calc(var(--spacing)*4);
            justify-content: space-between;
            align-items: center;
            display: flex
        }

    .section-title {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading,var(--text-3xl--line-height));
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        color: var(--color-slate-900)
    }

    .section-description {
        font-size: var(--text-lg);
        line-height: var(--tw-leading,var(--text-lg--line-height));
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed);
        color: var(--color-slate-600)
    }

    .sbc-codes-section {
        background-color: var(--color-white);
        padding-block: calc(var(--spacing)*10)
    }

    .image-card {
        border-radius: var(--radius-xl);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-slate-200);
        background-color: var(--color-white);
        padding: calc(var(--spacing)*4);
        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: .3s;
        flex-direction: column;
        transition-duration: .3s;
        display: flex
    }

        .image-card .code-image {
            border-radius: var(--radius-lg);
            object-fit: cover;
            width: 100%;
            height: auto
        }

        .image-card .code-title {
            margin-top: calc(var(--spacing)*6);
            margin-bottom: calc(var(--spacing)*0);
            font-size: var(--text-lg);
            line-height: var(--tw-leading,var(--text-lg--line-height));
            --tw-leading: calc(var(--spacing)*7);
            line-height: calc(var(--spacing)*7);
            --tw-font-weight: var(--font-weight-bold);
            font-weight: var(--font-weight-bold);
            color: #1f2a37
        }

        .image-card .code-description {
            margin-top: calc(var(--spacing)*2);
            margin-bottom: calc(var(--spacing)*6);
            color: var(--color-slate-600)
        }

        .image-card .actions {
            gap: calc(var(--spacing)*4);
            margin-top: auto;
            display: flex
        }

            .image-card .actions .btn-read-more {
                border-radius: var(--radius-sm);
                background-color: var(--color-brand);
                height: 40px;
                padding-inline: calc(var(--spacing)*4);
                font-size: var(--text-base);
                line-height: var(--tw-leading,var(--text-base--line-height));
                --tw-font-weight: var(--font-weight-medium);
                font-weight: var(--font-weight-medium);
                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,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
                transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
                transition-duration: var(--tw-duration,var(--default-transition-duration));
                align-items: center;
                display: flex
            }

    @media(hover:hover) {
        .image-card .actions .btn-read-more:hover {
            background-color: var(--color-brand-dark)
        }
    }

    .image-card .date {
        margin-top: calc(var(--spacing)*6);
        align-items: center;
        gap: calc(var(--spacing)*2);
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
        border-color: var(--color-slate-200);
        padding-top: calc(var(--spacing)*6);
        display: flex
    }

    .accordion .accordion-item {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--color-slate-200);
        border-radius: 0
    }

        .accordion .accordion-item:last-child {
            margin-bottom: calc(var(--spacing)*0)
        }

    .accordion .accordion-button {
        cursor: pointer;
        border-style: var(--tw-border-style);
        width: 100%;
        padding-inline: calc(var(--spacing)*4);
        padding-block: calc(var(--spacing)*4);
        text-align: left;
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        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);
        border-width: 0;
        border-radius: 0;
        align-items: center;
        display: flex;
        position: relative;
        overflow: hidden
    }

        .accordion .accordion-button:after {
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.902478 0.203524C0.983736 0.311106 1.22634 0.632269 1.37083 0.817409C1.66021 1.18822 2.05561 1.68094 2.48215 2.17221C2.91085 2.66595 3.36119 3.14681 3.76126 3.50031C3.96187 3.67756 4.13809 3.81225 4.28351 3.89992C4.42028 3.98237 4.50107 3.99951 4.50107 3.99951C4.50107 3.99951 4.57949 3.98236 4.71625 3.89992C4.86167 3.81225 5.03789 3.67757 5.2385 3.50031C5.63858 3.14682 6.08892 2.66595 6.51761 2.1722C6.94415 1.68093 7.33955 1.1882 7.62894 0.817386C7.77342 0.632244 8.01569 0.311535 8.09695 0.203952C8.2607 -0.0183967 8.57404 -0.0663542 8.79639 0.0974012C9.01874 0.261156 9.06623 0.574155 8.90248 0.796504L8.9013 0.79806C8.81618 0.910765 8.56477 1.24363 8.41729 1.43261C8.12137 1.8118 7.71441 2.31907 7.27271 2.82781C6.83316 3.33406 6.34938 3.85319 5.90064 4.24969C5.67684 4.44744 5.44998 4.62525 5.23253 4.75634C5.02882 4.87915 4.77089 5 4.49988 5C4.22887 5 3.97095 4.87914 3.76723 4.75633C3.54979 4.62525 3.32293 4.44744 3.09913 4.24969C2.65038 3.85319 2.1666 3.33406 1.72705 2.82782C1.28535 2.31909 0.878398 1.81182 0.582479 1.43264C0.434942 1.24359 0.183627 0.910858 0.0985969 0.798282L0.0975196 0.796855C-0.0662368 0.574508 -0.0189732 0.261191 0.203374 0.097435C0.425715 -0.0663161 0.738717 -0.0188055 0.902478 0.203524Z' fill='%23161616'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 9px;
            flex-shrink: 0;
            width: 9px;
            height: 5px;
            margin-inline-start: auto;
            transition: transform .2s ease-in-out
        }

        .accordion .accordion-button:not(.collapsed):after {
            transform: rotate(180deg)
        }

    @media(prefers-reduced-motion:reduce) {
        .accordion .accordion-button:after {
            transition: none
        }
    }

    .accordion .accordion-body {
        padding-inline: calc(var(--spacing)*4);
        padding-top: calc(var(--spacing)*2);
        padding-bottom: calc(var(--spacing)*6);
        font-size: var(--text-base);
        line-height: var(--tw-leading,var(--text-base--line-height));
        --tw-leading: calc(var(--spacing)*6);
        line-height: calc(var(--spacing)*6);
        color: #384250;
        background-color: #f9fafb
    }

    .accordion .collapse {
        visibility: visible !important
    }

        .accordion .collapse:not(.show) {
            display: none
        }

    .accordion .accordion-item:hover .accordion-button {
        background-color: #f3f4f6 !important
    }

    .accordion .accordion-item .accordion-button {
        border: 2px solid #0000;
        transition: all .3s ease-in-out
    }

        .accordion .accordion-item .accordion-button:active, .accordion .accordion-item .accordion-button:focus {
            background-color: #d2d6db !important
        }

        .accordion .accordion-item .accordion-button:focus-visible {
            background-color: #0000 !important;
            border-color: #161616 !important
        }

    .collapsing {
        height: 0;
        transition: height .35s;
        overflow: hidden
    }

    @media(prefers-reduced-motion:reduce) {
        .collapsing {
            transition: none
        }
    }

    .collapsing.collapse-horizontal {
        width: 0;
        height: auto;
        transition: width .35s
    }

    @media(prefers-reduced-motion:reduce) {
        .collapsing.collapse-horizontal {
            transition: none
        }
    }

    .code-implementation-authorities {
        background-color: var(--color-white);
        padding-block: calc(var(--spacing)*10)
    }

        .code-implementation-authorities .authorities-list {
            gap: calc(var(--spacing)*8);
            max-width: 930px;
            padding-top: calc(var(--spacing)*8);
            margin-inline: auto;
            display: flex
        }

            .code-implementation-authorities .authorities-list .authority-item {
                flex: 1
            }

                .code-implementation-authorities .authorities-list .authority-item .authority-card {
                    border-radius: var(--radius-xl);
                    border-style: var(--tw-border-style);
                    border-width: 1px;
                    border-color: var(--color-slate-200);
                    height: 100%;
                    padding: calc(var(--spacing)*4);
                    flex-direction: column;
                    align-items: center;
                    display: flex;
                    overflow: hidden
                }

                    .code-implementation-authorities .authorities-list .authority-item .authority-card .authority-image {
                        object-fit: cover;
                        width: 100%;
                        height: auto
                    }

                    .code-implementation-authorities .authorities-list .authority-item .authority-card .authority-name {
                        margin-top: calc(var(--spacing)*4);
                        text-align: center;
                        font-size: var(--text-base);
                        line-height: var(--tw-leading,var(--text-base--line-height));
                        --tw-leading: calc(var(--spacing)*6);
                        line-height: calc(var(--spacing)*6);
                        --tw-font-weight: var(--font-weight-medium);
                        font-weight: var(--font-weight-medium);
                        color: #161616
                    }

    .e-services-section {
        padding-block: calc(var(--spacing)*10);
        background-color: #f9fafb
    }

    .iconed-slider .iconed-item {
        flex: 1
    }

        .iconed-slider .iconed-item .iconed-card {
            gap: calc(var(--spacing)*6);
            border-radius: var(--radius-xl);
            border-style: var(--tw-border-style);
            border-width: 1px;
            border-color: var(--color-slate-200);
            background-color: var(--color-white);
            height: 100%;
            padding: calc(var(--spacing)*4);
            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: .3s;
            flex-direction: column;
            transition-duration: .3s;
            display: flex
        }

            .iconed-slider .iconed-item .iconed-card .iconed-title {
                margin-bottom: calc(var(--spacing)*2);
                font-size: var(--text-lg);
                line-height: var(--tw-leading,var(--text-lg--line-height));
                --tw-leading: calc(var(--spacing)*7);
                line-height: calc(var(--spacing)*7);
                --tw-font-weight: var(--font-weight-bold);
                font-weight: var(--font-weight-bold);
                color: #1f2a37
            }

            .iconed-slider .iconed-item .iconed-card .actions {
                gap: calc(var(--spacing)*4);
                margin-top: auto;
                display: flex
            }

                .iconed-slider .iconed-item .iconed-card .actions .btn-read-more {
                    border-radius: var(--radius-sm);
                    background-color: var(--color-brand);
                    height: 40px;
                    padding-inline: calc(var(--spacing)*4);
                    font-size: var(--text-base);
                    line-height: var(--tw-leading,var(--text-base--line-height));
                    --tw-font-weight: var(--font-weight-medium);
                    font-weight: var(--font-weight-medium);
                    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,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
                    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
                    transition-duration: var(--tw-duration,var(--default-transition-duration));
                    align-items: center;
                    display: flex
                }

    @media(hover:hover) {
        .iconed-slider .iconed-item .iconed-card .actions .btn-read-more:hover {
            background-color: var(--color-brand-dark)
        }
    }

    .sbc-media-center-section {
        background-color: var(--color-white);
        padding-block: calc(var(--spacing)*10)
    }

    .sbc-FAQ-section {
        padding-block: calc(var(--spacing)*10);
        background-color: #f9fafb
    }

    .sbc-partners-section {
        background-color: var(--color-white);
        padding-block: calc(var(--spacing)*10)
    }

        .sbc-partners-section .partners-slider .slide-item {
            height: 100px
        }

            .sbc-partners-section .partners-slider .slide-item .image-card {
                height: 100px;
                padding: calc(var(--spacing)*2)
            }

                .sbc-partners-section .partners-slider .slide-item .image-card .code-image {
                    object-fit: contain;
                    height: 100%
                }

    .sbc-references-section {
        padding-block: calc(var(--spacing)*10);
        background-color: #f9fafb
    }

        .sbc-references-section .slide-item {
            height: 143px
        }

            .sbc-references-section .slide-item .image-card {
                height: 143px;
                padding: calc(var(--spacing)*2)
            }

                .sbc-references-section .slide-item .image-card .code-image {
                    object-fit: contain;
                    height: 100%
                }

    .sbc-address-section {
        background-color: var(--color-white);
        padding-block: calc(var(--spacing)*10);
        background-image: url(/imgs/subscribe_bg.png);
        background-repeat: no-repeat;
        background-size: contain
    }

        .sbc-address-section .address-continer .address-title {
            margin-bottom: calc(var(--spacing)*6);
            font-size: var(--text-3xl);
            line-height: var(--tw-leading,var(--text-3xl--line-height));
            --tw-font-weight: var(--font-weight-bold);
            font-weight: var(--font-weight-bold);
            color: #1f2a37
        }

        .sbc-address-section .address-continer .address-list {
            margin: calc(var(--spacing)*0);
            padding: calc(var(--spacing)*0);
            list-style-type: none
        }

            .sbc-address-section .address-continer .address-list li {
                margin-bottom: calc(var(--spacing)*1);
                font-size: var(--text-base);
                line-height: var(--tw-leading,var(--text-base--line-height));
                --tw-leading: calc(var(--spacing)*6);
                line-height: calc(var(--spacing)*6);
                list-style-type: disc;
                list-style-position: inside
            }

    .nav-tabs {
        gap: calc(var(--spacing)*0);
        border-style: var(--tw-border-style);
        border-width: 0;
        display: flex
    }

        .nav-tabs .nav-link {
            cursor: pointer;
            border-style: var(--tw-border-style);
            border-width: 0;
            border-left-style: var(--tw-border-style);
            border-left-width: 1px;
            border-left-color: var(--color-slate-200);
            padding-inline: calc(var(--spacing)*4);
            padding-block: calc(var(--spacing)*2);
            transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;
            transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
            transition-duration: var(--tw-duration,var(--default-transition-duration));
            --tw-duration: .2s;
            color: #0d121c;
            background-color: #f3f4f6;
            transition-duration: .2s
        }

            .nav-tabs .nav-link:last-of-type {
                border-top-left-radius: var(--radius-lg);
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: var(--radius-lg)
            }

            .nav-tabs .nav-link:first-of-type {
                border-top-left-radius: 0;
                border-top-right-radius: var(--radius-lg);
                border-bottom-right-radius: var(--radius-lg);
                border-bottom-left-radius: 0
            }

            .nav-tabs .nav-link.active {
                color: #fff;
                background-color: #0d121c
            }

            .nav-tabs .nav-link:hover:not(.active) {
                opacity: .8;
                color: #0d121c;
                background-color: #f3f4f6
            }

            .nav-tabs .nav-link:focus {
                --tw-outline-style: none;
                outline-style: none
            }

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

        .tab-content .tab-pane {
            display: none
        }

            .tab-content .tab-pane.fade {
                transition: opacity .1s linear
            }

                .tab-content .tab-pane.fade:not(.show) {
                    opacity: 0
                }

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

    [auto-height] .image-card, [auto-height] .iconed-card {
        height: 100%
    }

    .owl-carousel-wrapper {
        position: relative
    }

        .owl-carousel-wrapper .owl-carousel .owl-nav {
            margin: calc(var(--spacing)*0) !important
        }

            .owl-carousel-wrapper .owl-carousel .owl-nav button.owl-prev, .owl-carousel-wrapper .owl-carousel .owl-nav button.owl-next {
                height: calc(var(--spacing)*12);
                width: calc(var(--spacing)*12);
                --tw-translate-y: -50%;
                translate: var(--tw-translate-x)var(--tw-translate-y);
                cursor: pointer;
                border-style: var(--tw-border-style);
                padding: calc(var(--spacing)*0);
                font-size: var(--text-lg);
                line-height: var(--tw-leading,var(--text-lg--line-height));
                color: var(--color-black);
                transition-property: all;
                transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
                transition-duration: var(--tw-duration,var(--default-transition-duration));
                border-width: 0;
                border-radius: .25rem;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 50%;
                background-color: var(--color-gray-100) !important;
                display: flex !important
            }

    @media(hover:hover) {
        :is(.owl-carousel-wrapper .owl-carousel .owl-nav button.owl-prev,.owl-carousel-wrapper .owl-carousel .owl-nav button.owl-next):hover {
            background-color: var(--color-brand);
            color: var(--color-white)
        }
    }

    :is(.owl-carousel-wrapper .owl-carousel .owl-nav button.owl-prev,.owl-carousel-wrapper .owl-carousel .owl-nav button.owl-next).disabled {
        cursor: not-allowed;
        opacity: .5
    }

    .owl-carousel-wrapper .owl-carousel .owl-nav button.owl-prev {
        right: calc(var(--spacing)*-6)
    }

    .owl-carousel-wrapper .owl-carousel .owl-nav button.owl-next {
        left: calc(var(--spacing)*-6)
    }

    .owl-carousel-wrapper .owl-carousel.owl-rtl .owl-nav button {
        rotate: 180deg
    }

    .owl-carousel-wrapper .owl-carousel .owl-dots {
        bottom: calc(var(--spacing)*-12);
        margin: calc(var(--spacing)*0);
        text-align: center;
        width: 100%;
        position: absolute
    }

        .owl-carousel-wrapper .owl-carousel .owl-dots .owl-dot {
            padding: calc(var(--spacing)*1) !important
        }

            .owl-carousel-wrapper .owl-carousel .owl-dots .owl-dot span {
                background-color: var(--color-slate-300);
                transition-property: all;
                transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
                transition-duration: var(--tw-duration,var(--default-transition-duration));
                border-radius: 3.40282e38px;
                display: block;
                margin: calc(var(--spacing)*0) !important;
                height: calc(var(--spacing)*3) !important;
                width: calc(var(--spacing)*3) !important
            }

            .owl-carousel-wrapper .owl-carousel .owl-dots .owl-dot.active span {
                width: calc(var(--spacing)*8);
                background-color: var(--color-brand) !important
            }

    .naved-slider-wrapper {
        padding-bottom: 56px;
        position: relative;
        overflow: hidden
    }

        .naved-slider-wrapper .owl-carousel {
            padding-inline: calc(var(--spacing)*16)
        }

    @media not all and (min-width:900px) {
        .naved-slider-wrapper .owl-carousel {
            padding-inline: calc(var(--spacing)*8)
        }
    }

    @media not all and (min-width:768px) {
        .naved-slider-wrapper .owl-carousel {
            padding-inline: calc(var(--spacing)*4)
        }
    }

    @media not all and (min-width:640px) {
        .naved-slider-wrapper .owl-carousel {
            padding-inline: calc(var(--spacing)*0)
        }
    }

    .naved-slider-wrapper .owl-carousel .owl-stage-outer {
        padding-block: calc(var(--spacing)*2)
    }

    .naved-slider-wrapper .owl-carousel .owl-nav button.owl-prev {
        right: calc(var(--spacing)*0)
    }

    .naved-slider-wrapper .owl-carousel .owl-nav button.owl-next {
        left: calc(var(--spacing)*0)
    }

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

    .form .form-label {
        margin-bottom: calc(var(--spacing)*2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--color-slate-700);
        display: block
    }

    .form .form-input {
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-slate-300);
        width: 100%;
        padding-inline: calc(var(--spacing)*4);
        padding-block: calc(var(--spacing)*3);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-outline-style: none;
        outline-style: none
    }

        .form .form-input:focus {
            --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + 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-ring-color: var(--color-brand);
            border-color: #0000
        }

    .form .form-textarea {
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-slate-300);
        width: 100%;
        padding-inline: calc(var(--spacing)*4);
        padding-block: calc(var(--spacing)*3);
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration));
        --tw-outline-style: none;
        outline-style: none
    }

        .form .form-textarea:focus {
            --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(2px + 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-ring-color: var(--color-brand);
            border-color: #0000
        }

    .grid-2col {
        align-items: center;
        gap: calc(var(--spacing)*12);
        display: grid
    }

    @media(min-width:48rem) {
        .grid-2col {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }
    }

    .placeholder-image {
        height: calc(var(--spacing)*64);
        border-radius: var(--radius-xl);
        background-color: var(--color-slate-200);
        color: var(--color-slate-400);
        justify-content: center;
        align-items: center;
        display: flex
    }

    .digital-stamp-card {
        background-color: var(--color-gray-100);
        padding-inline: calc(var(--spacing)*8);
        padding-block: calc(var(--spacing)*2)
    }

        .digital-stamp-card .digital-stamp-header {
            align-items: center;
            gap: calc(var(--spacing)*2.5);
            display: flex
        }

            .digital-stamp-card .digital-stamp-header h6 {
                margin: calc(var(--spacing)*0);
                font-size: var(--text-sm);
                line-height: var(--tw-leading,var(--text-sm--line-height));
                color: var(--color-gray-900)
            }

            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
                cursor: pointer;
                align-items: center;
                gap: calc(var(--spacing)*1.5);
                display: flex
            }

                .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span {
                    font-size: var(--text-sm);
                    line-height: var(--tw-leading,var(--text-sm--line-height));
                    color: var(--color-green-700)
                }

                .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card svg, .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img {
                    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: .3s;
                    transition-duration: .3s
                }

                .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img {
                    margin-inline: calc(var(--spacing)*1)
                }

            .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card svg, .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card img {
                rotate: 180deg
            }

        .digital-stamp-card .digital-stamp-body {
            padding-top: calc(var(--spacing)*10);
            padding-bottom: calc(var(--spacing)*8);
            display: none
        }

            .digital-stamp-card .digital-stamp-body .digital-stamp-container {
                margin-bottom: calc(var(--spacing)*8);
                gap: calc(var(--spacing)*8);
                display: flex
            }

                .digital-stamp-card .digital-stamp-body .digital-stamp-container .box {
                    align-items: flex-start;
                    gap: calc(var(--spacing)*4.5);
                    display: flex
                }

                    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .img-border-rounded {
                        border-style: var(--tw-border-style);
                        border-width: 1px;
                        border-color: var(--color-green-700);
                        padding: calc(var(--spacing)*3.5);
                        border-radius: 3.40282e38px;
                        justify-content: center;
                        align-items: center;
                        display: flex
                    }

                    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box h6 {
                        margin-top: calc(var(--spacing)*0);
                        margin-bottom: calc(var(--spacing)*2);
                        font-size: var(--text-lg);
                        line-height: var(--tw-leading,var(--text-lg--line-height));
                        color: var(--color-gray-900)
                    }

                    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .green-text {
                        color: var(--color-green-700)
                    }

                    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box p {
                        margin: calc(var(--spacing)*0);
                        font-size: var(--text-base);
                        line-height: var(--tw-leading,var(--text-base--line-height));
                        color: var(--color-gray-700)
                    }

            .digital-stamp-card .digital-stamp-body .stamp-link-box {
                align-items: center;
                gap: calc(var(--spacing)*3);
                border-radius: var(--radius-lg);
                background-color: var(--color-white);
                padding-inline: calc(var(--spacing)*7);
                padding-block: calc(var(--spacing)*2);
                display: flex
            }

                .digital-stamp-card .digital-stamp-body .stamp-link-box p {
                    margin: calc(var(--spacing)*0);
                    font-size: var(--text-base);
                    line-height: var(--tw-leading,var(--text-base--line-height));
                    color: var(--color-gray-900)
                }

                .digital-stamp-card .digital-stamp-body .stamp-link-box a {
                    font-size: var(--text-base);
                    line-height: var(--tw-leading,var(--text-base--line-height));
                    color: var(--color-green-700);
                    text-decoration-line: underline
                }

    .stamp-ar {
        direction: rtl
    }

    .stamp-en {
        direction: ltr
    }

    @media(max-width:768px) {
        .digital-stamp-card {
            padding-inline: calc(var(--spacing)*4)
        }

            .digital-stamp-card .digital-stamp-header {
                flex-wrap: wrap
            }

                .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
                    margin-right: calc(var(--spacing)*8);
                    width: 100%
                }

            .digital-stamp-card .digital-stamp-body .digital-stamp-container {
                flex-direction: column
            }

        [dir=ltr] .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
            margin-right: calc(var(--spacing)*0);
            margin-left: calc(var(--spacing)*8)
        }
    }
}

@layer utilities {
    .collapse {
        visibility: collapse
    }

    .visible {
        visibility: visible
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .container {
        width: 100%
    }

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

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

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

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

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

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

    .ms-2 {
        margin-inline-start: calc(var(--spacing)*2)
    }

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

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

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

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

    .block {
        display: block
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline-block {
        display: inline-block
    }

    .table {
        display: table
    }

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

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

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

    .resize {
        resize: both
    }

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

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

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

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

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

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

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

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

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }

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

    .transition {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform,translate,scale,rotate;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }
}

.owl-carousel, .owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-carousel {
    z-index: 1;
    width: 100%;
    display: none
}

    .owl-carousel .owl-stage {
        -ms-touch-action: pan-Y;
        touch-action: manipulation;
        -moz-backface-visibility: hidden;
        position: relative
    }

        .owl-carousel .owl-stage:after {
            content: ".";
            clear: both;
            visibility: hidden;
            height: 0;
            line-height: 0;
            display: block
        }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        -webkit-transform: translate(0)
    }

    .owl-carousel .owl-item, .owl-carousel .owl-wrapper {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0)
    }

    .owl-carousel .owl-item {
        float: left;
        -webkit-backface-visibility: hidden;
        -webkit-touch-callout: none;
        min-height: 1px
    }

        .owl-carousel .owl-item img {
            width: 100%;
            display: block
        }

    .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
        display: none
    }

    .no-js .owl-carousel, .owl-carousel.owl-loaded {
        display: block
    }

    .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        -khtml-user-select: none
    }

    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
        color: inherit;
        font: inherit;
        background: 0 0;
        border: none;
        padding: 0 !important
    }

    .owl-carousel.owl-loading {
        opacity: 0;
        display: block
    }

    .owl-carousel.owl-hidden {
        opacity: 0
    }

    .owl-carousel.owl-refresh .owl-item {
        visibility: hidden
    }

    .owl-carousel.owl-drag .owl-item {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none
    }

    .owl-carousel.owl-grab {
        cursor: move;
        cursor: grab
    }

    .owl-carousel.owl-rtl {
        direction: rtl
    }

        .owl-carousel.owl-rtl .owl-item {
            float: right
        }

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

    .owl-carousel .owl-animated-in {
        z-index: 0
    }

    .owl-carousel .owl-animated-out {
        z-index: 1
    }

    .owl-carousel .fadeOut {
        animation-name: fadeOut
    }

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s
}

    .owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {
        max-height: 0
    }

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    background: #000;
    height: 100%;
    position: relative
}

.owl-carousel .owl-video-play-icon {
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    background: url(/imgs/owl.video.play.png) no-repeat;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    transition: transform .1s;
    position: absolute;
    top: 50%;
    left: 50%
}

    .owl-carousel .owl-video-play-icon:hover {
        transform: scale(1.3)
    }

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    transition: opacity .4s
}

.owl-carousel .owl-video-frame {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: relative
}

.owl-theme .owl-dots, .owl-theme .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-nav {
    margin-top: 10px
}

    .owl-theme .owl-nav [class*=owl-] {
        color: #fff;
        cursor: pointer;
        background: #d6d6d6;
        border-radius: 3px;
        margin: 5px;
        padding: 4px 7px;
        font-size: 14px;
        display: inline-block
    }

        .owl-theme .owl-nav [class*=owl-]:hover {
            color: #fff;
            background: #869791;
            text-decoration: none
        }

    .owl-theme .owl-nav .disabled {
        opacity: .5;
        cursor: default
    }

        .owl-theme .owl-nav.disabled + .owl-dots {
            margin-top: 10px
        }

.owl-theme .owl-dots .owl-dot {
    zoom: 1;
    display: inline-block
}

    .owl-theme .owl-dots .owl-dot span {
        -webkit-backface-visibility: visible;
        background: #d6d6d6;
        border-radius: 30px;
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        transition: opacity .2s;
        display: block
    }

    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #869791
    }

:root {
    --bs-font-sans-serif: "IBM Plex Sans Arabic",system-ui,-apple-system,"Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}

.container {
    max-width: 100%;
    padding-inline: calc(var(--spacing)*8);
    margin-inline: auto
}

@media(min-width:40rem) {
    .container {
        padding-inline: calc(var(--spacing)*6)
    }
}

@media(min-width:64rem) {
    .container {
        padding-inline: calc(var(--spacing)*8)
    }
}

@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-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@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-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-duration {
    syntax: "*";
    inherits: false
}

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

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

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

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

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

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

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

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

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