@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-divide-x-reverse: 0;
            --tw-border-style: solid;
            --tw-divide-y-reverse: 0;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: 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-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {
     :root,
     :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-amber-200: oklch(92.4% .12 95.746);
        --color-amber-300: oklch(87.9% .169 91.605);
        --color-amber-500: oklch(76.9% .188 70.08);
        --color-amber-600: oklch(66.6% .179 58.318);
        --color-amber-800: oklch(47.3% .137 46.201);
        --color-amber-900: oklch(41.4% .112 45.904);
        --color-amber-950: oklch(27.9% .077 45.635);
        --color-emerald-200: oklch(90.5% .093 164.15);
        --color-emerald-400: oklch(76.5% .177 163.223);
        --color-emerald-500: oklch(69.6% .17 162.48);
        --color-emerald-600: oklch(59.6% .145 163.225);
        --color-emerald-900: oklch(37.8% .077 168.94);
        --color-blue-100: oklch(93.2% .032 255.585);
        --color-blue-300: oklch(80.9% .105 251.813);
        --color-blue-500: oklch(62.3% .214 259.815);
        --color-blue-600: oklch(54.6% .245 262.881);
        --color-blue-700: oklch(48.8% .243 264.376);
        --color-blue-800: oklch(42.4% .199 265.638);
        --color-blue-900: oklch(37.9% .146 265.522);
        --color-blue-950: oklch(28.2% .091 267.935);
        --color-rose-100: oklch(94.1% .03 12.58);
        --color-rose-200: oklch(89.2% .058 10.001);
        --color-rose-500: oklch(64.5% .246 16.439);
        --color-rose-600: oklch(58.6% .253 17.585);
        --color-rose-900: oklch(41% .159 10.272);
        --color-rose-950: oklch(27.1% .105 12.094);
        --color-gray-100: oklch(96.7% .003 264.542);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-300: oklch(87.2% .01 258.338);
        --color-gray-400: oklch(70.7% .022 261.325);
        --color-gray-500: oklch(55.1% .027 264.364);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-800: oklch(27.8% .033 256.848);
        --color-gray-900: oklch(21% .034 264.665);
        --color-neutral-50: oklch(98.5% 0 0);
        --color-neutral-100: oklch(97% 0 0);
        --color-neutral-200: oklch(92.2% 0 0);
        --color-neutral-300: oklch(87% 0 0);
        --color-neutral-400: oklch(70.8% 0 0);
        --color-neutral-500: oklch(55.6% 0 0);
        --color-neutral-600: oklch(43.9% 0 0);
        --color-neutral-700: oklch(37.1% 0 0);
        --color-neutral-800: oklch(26.9% 0 0);
        --color-neutral-900: oklch(20.5% 0 0);
        --color-neutral-950: oklch(14.5% 0 0);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-xl: 36rem;
        --container-6xl: 72rem;
        --container-7xl: 80rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --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-3xl: 1.875rem;
        --text-3xl--line-height: 1.2;
        --font-weight-light: 300;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --tracking-wider: .05em;
        --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
    }
    html,
     :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }
    b,
    strong {
        font-weight: bolder
    }
    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }
    small {
        font-size: 80%
    }
    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }
    sub {
        bottom: -.25em
    }
    sup {
        top: -.5em
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }
     :-moz-focusring {
        outline: auto
    }
    progress {
        vertical-align: baseline
    }
    summary {
        display: list-item
    }
    ol,
    ul,
    menu {
        list-style: none
    }
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }
    img,
    video {
        max-width: 100%;
        height: auto
    }
    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }
     ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }
     :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }
     :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }
     ::file-selector-button {
        margin-inline-end: 4px
    }
     ::placeholder {
        opacity: 1
    }
    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
         ::placeholder {
            color: currentColor
        }
        @supports (color:color-mix(in lab, red, red)) {
             ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }
    textarea {
        resize: vertical
    }
     ::-webkit-search-decoration {
        -webkit-appearance: none
    }
     ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }
     ::-webkit-datetime-edit {
        display: inline-flex
    }
     ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }
     ::-webkit-datetime-edit {
        padding-block: 0
    }
     ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }
     ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }
     ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }
     ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }
     ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }
     ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }
     ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }
     ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }
     ::-webkit-calendar-picker-indicator {
        line-height: 1
    }
     :-moz-ui-invalid {
        box-shadow: none
    }
    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }
     ::file-selector-button {
        appearance: button
    }
     ::-webkit-inner-spin-button {
        height: auto
    }
     ::-webkit-outer-spin-button {
        height: auto
    }
    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;
@layer utilities {
    .invisible {
        visibility: hidden
    }
    .visible {
        visibility: visible
    }
    .absolute {
        position: absolute
    }
    .fixed {
        position: fixed
    }
    .relative {
        position: relative
    }
    .static {
        position: static
    }
    .sticky {
        position: sticky
    }
    .top-0 {
        top: calc(var(--spacing)*0)
    }
    .top-\[-1px\] {
        top: -1px
    }
    .right-0 {
        right: calc(var(--spacing)*0)
    }
    .bottom-0 {
        bottom: calc(var(--spacing)*0)
    }
    .left-0 {
        left: calc(var(--spacing)*0)
    }
    .-z-10 {
        z-index: -10
    }
    .z-50 {
        z-index: 50
    }
    .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
        }
    }
    .mx-auto {
        margin-inline: auto
    }
    .-mt-3 {
        margin-top: calc(var(--spacing)*-3)
    }
    .-mt-5 {
        margin-top: calc(var(--spacing)*-5)
    }
    .-mt-px {
        margin-top: -1px
    }
    .mt-2 {
        margin-top: calc(var(--spacing)*2)
    }
    .mt-4 {
        margin-top: calc(var(--spacing)*4)
    }
    .mt-8 {
        margin-top: calc(var(--spacing)*8)
    }
    .mr-2 {
        margin-right: calc(var(--spacing)*2)
    }
    .mr-6 {
        margin-right: calc(var(--spacing)*6)
    }
    .mb-8 {
        margin-bottom: calc(var(--spacing)*8)
    }
    .-ml-px {
        margin-left: -1px
    }
    .ml-1 {
        margin-left: calc(var(--spacing)*1)
    }
    .ml-2 {
        margin-left: calc(var(--spacing)*2)
    }
    .ml-4 {
        margin-left: calc(var(--spacing)*4)
    }
    .ml-12 {
        margin-left: calc(var(--spacing)*12)
    }
    .block {
        display: block
    }
    .flex {
        display: flex
    }
    .grid {
        display: grid
    }
    .hidden {
        display: none
    }
    .inline {
        display: inline
    }
    .inline-flex {
        display: inline-flex
    }
    .table {
        display: table
    }
    .size-2 {
        width: calc(var(--spacing)*2);
        height: calc(var(--spacing)*2)
    }
    .size-3 {
        width: calc(var(--spacing)*3);
        height: calc(var(--spacing)*3)
    }
    .h-0 {
        height: calc(var(--spacing)*0)
    }
    .h-2\.5 {
        height: calc(var(--spacing)*2.5)
    }
    .h-3 {
        height: calc(var(--spacing)*3)
    }
    .h-5 {
        height: calc(var(--spacing)*5)
    }
    .h-6 {
        height: calc(var(--spacing)*6)
    }
    .h-7 {
        height: calc(var(--spacing)*7)
    }
    .h-8 {
        height: calc(var(--spacing)*8)
    }
    .h-10 {
        height: calc(var(--spacing)*10)
    }
    .h-11 {
        height: calc(var(--spacing)*11)
    }
    .h-16 {
        height: calc(var(--spacing)*16)
    }
    .h-\[18px\] {
        height: 18px
    }
    .h-\[56px\] {
        height: 56px
    }
    .min-h-dvh {
        min-height: 100dvh
    }
    .min-h-screen {
        min-height: 100vh
    }
    .w-2\.5 {
        width: calc(var(--spacing)*2.5)
    }
    .w-3 {
        width: calc(var(--spacing)*3)
    }
    .w-5 {
        width: calc(var(--spacing)*5)
    }
    .w-6 {
        width: calc(var(--spacing)*6)
    }
    .w-8 {
        width: calc(var(--spacing)*8)
    }
    .w-\[18px\] {
        width: 18px
    }
    .w-\[23px\] {
        width: 23px
    }
    .w-\[50px\] {
        width: 50px
    }
    .w-\[135px\] {
        width: 135px
    }
    .w-auto {
        width: auto
    }
    .w-fit {
        width: fit-content
    }
    .w-full {
        width: 100%
    }
    .max-w-6xl {
        max-width: var(--container-6xl)
    }
    .max-w-7xl {
        max-width: var(--container-7xl)
    }
    .max-w-full {
        max-width: 100%
    }
    .max-w-xl {
        max-width: var(--container-xl)
    }
    .min-w-0 {
        min-width: calc(var(--spacing)*0)
    }
    .min-w-5 {
        min-width: calc(var(--spacing)*5)
    }
    .min-w-6 {
        min-width: calc(var(--spacing)*6)
    }
    .min-w-\[240px\] {
        min-width: 240px
    }
    .flex-1 {
        flex: 1
    }
    .flex-shrink-0,
    .shrink-0 {
        flex-shrink: 0
    }
    .grow {
        flex-grow: 1
    }
    .transform {
        transform: var(--tw-rotate-x, )var(--tw-rotate-y, )var(--tw-rotate-z, )var(--tw-skew-x, )var(--tw-skew-y, )
    }
    .cursor-default {
        cursor: default
    }
    .cursor-not-allowed {
        cursor: not-allowed
    }
    .cursor-not-allowed\! {
        cursor: not-allowed !important
    }
    .cursor-pointer {
        cursor: pointer
    }
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }
    .flex-col {
        flex-direction: column
    }
    .items-baseline {
        align-items: baseline
    }
    .items-center {
        align-items: center
    }
    .items-start {
        align-items: flex-start
    }
    .justify-between {
        justify-content: space-between
    }
    .justify-center {
        justify-content: center
    }
    .justify-items-center {
        justify-items: center
    }
    .gap-0\.5 {
        gap: calc(var(--spacing)*.5)
    }
    .gap-1 {
        gap: calc(var(--spacing)*1)
    }
    .gap-1\.5 {
        gap: calc(var(--spacing)*1.5)
    }
    .gap-2 {
        gap: calc(var(--spacing)*2)
    }
    .gap-2\.5 {
        gap: calc(var(--spacing)*2.5)
    }
    .gap-3 {
        gap: calc(var(--spacing)*3)
    }
    .gap-4 {
        gap: calc(var(--spacing)*4)
    }
    .gap-5 {
        gap: calc(var(--spacing)*5)
    }
    .gap-6 {
        gap: calc(var(--spacing)*6)
    }
    .gap-8 {
        gap: calc(var(--spacing)*8)
    }
    .gap-12 {
        gap: calc(var(--spacing)*12)
    }
     :where(.divide-x>:not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px*var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px*calc(1 - var(--tw-divide-x-reverse)))
    }
     :where(.divide-y>:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px*var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px*calc(1 - var(--tw-divide-y-reverse)))
    }
     :where(.divide-neutral-200>:not(:last-child)) {
        border-color: var(--color-neutral-200)
    }
    .truncate {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }
    .overflow-hidden {
        overflow: hidden
    }
    .overflow-x-auto {
        overflow-x: auto
    }
    .overflow-x-hidden {
        overflow-x: hidden
    }
    .rounded-full {
        border-radius: 3.40282e38px
    }
    .rounded-lg {
        border-radius: var(--radius-lg)
    }
    .rounded-md {
        border-radius: var(--radius-md)
    }
    .rounded-xl {
        border-radius: var(--radius-xl)
    }
    .rounded-t-lg {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg)
    }
    .rounded-l-md {
        border-top-left-radius: var(--radius-md);
        border-bottom-left-radius: var(--radius-md)
    }
    .rounded-r-md {
        border-top-right-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md)
    }
    .rounded-b-lg {
        border-bottom-right-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg)
    }
    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }
    .border-x {
        border-inline-style: var(--tw-border-style);
        border-inline-width: 1px
    }
    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }
    .border-r {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px
    }
    .border-b-2 {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 2px
    }
    .border-dashed {
        --tw-border-style: dashed;
        border-style: dashed
    }
    .border-dotted {
        --tw-border-style: dotted;
        border-style: dotted
    }
    .border-gray-200 {
        border-color: var(--color-gray-200)
    }
    .border-gray-300 {
        border-color: var(--color-gray-300)
    }
    .border-gray-400 {
        border-color: var(--color-gray-400)
    }
    .border-neutral-100 {
        border-color: var(--color-neutral-100)
    }
    .border-neutral-200 {
        border-color: var(--color-neutral-200)
    }
    .border-neutral-300 {
        border-color: var(--color-neutral-300)
    }
    .bg-amber-200 {
        background-color: var(--color-amber-200)
    }
    .bg-amber-600 {
        background-color: var(--color-amber-600)
    }
    .bg-black\/8 {
        background-color: #00000014
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/8 {
            background-color: color-mix(in oklab, var(--color-black)8%, transparent)
        }
    }
    .bg-black\/10 {
        background-color: #0000001a
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/10 {
            background-color: color-mix(in oklab, var(--color-black)10%, transparent)
        }
    }
    .bg-blue-100 {
        background-color: var(--color-blue-100)
    }
    .bg-blue-600 {
        background-color: var(--color-blue-600)
    }
    .bg-blue-700 {
        background-color: var(--color-blue-700)
    }
    .bg-emerald-200 {
        background-color: var(--color-emerald-200)
    }
    .bg-emerald-600 {
        background-color: var(--color-emerald-600)
    }
    .bg-gray-100 {
        background-color: var(--color-gray-100)
    }
    .bg-gray-200 {
        background-color: var(--color-gray-200)
    }
    .bg-neutral-50 {
        background-color: var(--color-neutral-50)
    }
    .bg-neutral-600 {
        background-color: var(--color-neutral-600)
    }
    .bg-rose-200 {
        background-color: var(--color-rose-200)
    }
    .bg-rose-200\! {
        background-color: var(--color-rose-200) !important
    }
    .bg-rose-500 {
        background-color: var(--color-rose-500)
    }
    .bg-rose-600 {
        background-color: var(--color-rose-600)
    }
    .bg-white {
        background-color: var(--color-white)
    }
    .bg-white\/5 {
        background-color: #ffffff0d
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/5 {
            background-color: color-mix(in oklab, var(--color-white)5%, transparent)
        }
    }
    .bg-white\/\[2\%\] {
        background-color: #ffffff05
    }
    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/\[2\%\] {
            background-color: color-mix(in oklab, var(--color-white)2%, transparent)
        }
    }
    .p-1 {
        padding: calc(var(--spacing)*1)
    }
    .p-2 {
        padding: calc(var(--spacing)*2)
    }
    .p-2\.5 {
        padding: calc(var(--spacing)*2.5)
    }
    .p-4 {
        padding: calc(var(--spacing)*4)
    }
    .p-5 {
        padding: calc(var(--spacing)*5)
    }
    .p-6 {
        padding: calc(var(--spacing)*6)
    }
    .px-1\.5 {
        padding-inline: calc(var(--spacing)*1.5)
    }
    .px-2 {
        padding-inline: calc(var(--spacing)*2)
    }
    .px-3 {
        padding-inline: calc(var(--spacing)*3)
    }
    .px-4 {
        padding-inline: calc(var(--spacing)*4)
    }
    .px-6 {
        padding-inline: calc(var(--spacing)*6)
    }
    .px-\[6px\] {
        padding-inline: 6px
    }
    .py-0 {
        padding-block: calc(var(--spacing)*0)
    }
    .py-1 {
        padding-block: calc(var(--spacing)*1)
    }
    .py-2 {
        padding-block: calc(var(--spacing)*2)
    }
    .py-4 {
        padding-block: calc(var(--spacing)*4)
    }
    .pt-8 {
        padding-top: calc(var(--spacing)*8)
    }
    .pt-14 {
        padding-top: calc(var(--spacing)*14)
    }
    .pr-2\.5 {
        padding-right: calc(var(--spacing)*2.5)
    }
    .pb-0 {
        padding-bottom: calc(var(--spacing)*0)
    }
    .pl-4 {
        padding-left: calc(var(--spacing)*4)
    }
    .text-center {
        text-align: center
    }
    .text-right {
        text-align: right
    }
    .font-mono {
        font-family: var(--font-mono)
    }
    .font-sans {
        font-family: var(--font-sans)
    }
    .text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }
    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }
    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }
    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }
    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height))
    }
    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }
    .text-xs\/none {
        font-size: var(--text-xs);
        line-height: 1
    }
    .text-\[13px\] {
        font-size: 13px
    }
    .leading-3 {
        --tw-leading: calc(var(--spacing)*3);
        line-height: calc(var(--spacing)*3)
    }
    .leading-5 {
        --tw-leading: calc(var(--spacing)*5);
        line-height: calc(var(--spacing)*5)
    }
    .leading-7 {
        --tw-leading: calc(var(--spacing)*7);
        line-height: calc(var(--spacing)*7)
    }
    .font-light {
        --tw-font-weight: var(--font-weight-light);
        font-weight: var(--font-weight-light)
    }
    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }
    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }
    .tracking-wider {
        --tw-tracking: var(--tracking-wider);
        letter-spacing: var(--tracking-wider)
    }
    .text-amber-900 {
        color: var(--color-amber-900)
    }
    .text-blue-500 {
        color: var(--color-blue-500)
    }
    .text-blue-900 {
        color: var(--color-blue-900)
    }
    .text-emerald-500 {
        color: var(--color-emerald-500)
    }
    .text-emerald-900 {
        color: var(--color-emerald-900)
    }
    .text-gray-200 {
        color: var(--color-gray-200)
    }
    .text-gray-300 {
        color: var(--color-gray-300)
    }
    .text-gray-400 {
        color: var(--color-gray-400)
    }
    .text-gray-500 {
        color: var(--color-gray-500)
    }
    .text-gray-600 {
        color: var(--color-gray-600)
    }
    .text-gray-700 {
        color: var(--color-gray-700)
    }
    .text-gray-800 {
        color: var(--color-gray-800)
    }
    .text-gray-900 {
        color: var(--color-gray-900)
    }
    .text-neutral-100 {
        color: var(--color-neutral-100)
    }
    .text-neutral-400 {
        color: var(--color-neutral-400)
    }
    .text-neutral-500 {
        color: var(--color-neutral-500)
    }
    .text-neutral-500\! {
        color: var(--color-neutral-500) !important
    }
    .text-neutral-600 {
        color: var(--color-neutral-600)
    }
    .text-neutral-800 {
        color: var(--color-neutral-800)
    }
    .text-neutral-900 {
        color: var(--color-neutral-900)
    }
    .text-neutral-950 {
        color: var(--color-neutral-950)
    }
    .text-rose-900 {
        color: var(--color-rose-900)
    }
    .text-white {
        color: var(--color-white)
    }
    .lowercase {
        text-transform: lowercase
    }
    .uppercase {
        text-transform: uppercase
    }
    .italic {
        font-style: italic
    }
    .underline {
        text-decoration-line: underline
    }
    .decoration-neutral-400 {
        -webkit-text-decoration-color: var(--color-neutral-400);
        text-decoration-color: var(--color-neutral-400)
    }
    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }
    .scheme-light-dark {
        color-scheme: light dark
    }
    .opacity-90 {
        opacity: .9
    }
    .shadow,
    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .shadow-xs {
        --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)
    }
    .ring-gray-300 {
        --tw-ring-color: var(--color-gray-300)
    }
    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }
    .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, )
    }
    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }
    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }
    .duration-150 {
        --tw-duration: .15s;
        transition-duration: .15s
    }
    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }
    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }
    @media(hover:hover) {
        .group-hover\:text-blue-500:is(:where(.group): hover *) {
            color: var(--color-blue-500)
        }
    }
    .odd\:bg-white\/2:nth-child(odd) {
        background-color: #ffffff05
    }
    @supports (color:color-mix(in lab, red, red)) {
        .odd\:bg-white\/2:nth-child(odd) {
            background-color: color-mix(in oklab, var(--color-white)2%, transparent)
        }
    }
    .even\:bg-white:nth-child(2n) {
        background-color: var(--color-white)
    }
    @media(hover:hover) {
        .hover\:bg-gray-100:hover {
            background-color: var(--color-gray-100)
        }
        .hover\:bg-neutral-100:hover {
            background-color: var(--color-neutral-100)
        }
        .hover\:bg-neutral-200:hover {
            background-color: var(--color-neutral-200)
        }
        .hover\:bg-white\/50:hover {
            background-color: #ffffff80
        }
        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-white\/50:hover {
                background-color: color-mix(in oklab, var(--color-white)50%, transparent)
            }
        }
        .hover\:text-gray-400:hover {
            color: var(--color-gray-400)
        }
        .hover\:text-gray-700:hover {
            color: var(--color-gray-700)
        }
        .hover\:underline:hover {
            text-decoration-line: underline
        }
    }
    .focus\:border-blue-300:focus {
        border-color: var(--color-blue-300)
    }
    .focus\:ring:focus {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }
    .active\:bg-gray-100:active {
        background-color: var(--color-gray-100)
    }
    .active\:text-gray-500:active {
        color: var(--color-gray-500)
    }
    .active\:text-gray-700:active {
        color: var(--color-gray-700)
    }
    .active\:text-gray-800:active {
        color: var(--color-gray-800)
    }
    @media(min-width:40rem) {
        .sm\:mb-16 {
            margin-bottom: calc(var(--spacing)*16)
        }
        .sm\:flex {
            display: flex
        }
        .sm\:hidden {
            display: none
        }
        .sm\:flex-1 {
            flex: 1
        }
        .sm\:items-center {
            align-items: center
        }
        .sm\:justify-between {
            justify-content: space-between
        }
        .sm\:justify-start {
            justify-content: flex-start
        }
        .sm\:gap-2 {
            gap: calc(var(--spacing)*2)
        }
        .sm\:p-14 {
            padding: calc(var(--spacing)*14)
        }
        .sm\:px-6 {
            padding-inline: calc(var(--spacing)*6)
        }
        .sm\:py-0 {
            padding-block: calc(var(--spacing)*0)
        }
        .sm\:pt-0 {
            padding-top: calc(var(--spacing)*0)
        }
        .sm\:pt-16 {
            padding-top: calc(var(--spacing)*16)
        }
        .sm\:pb-0 {
            padding-bottom: calc(var(--spacing)*0)
        }
    }
    @media(min-width:64rem) {
        .lg\:px-8 {
            padding-inline: calc(var(--spacing)*8)
        }
    }
    .rtl\:flex-row-reverse:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        flex-direction: row-reverse
    }
    @media(prefers-color-scheme:dark) {
         :where(.dark\: divide-white\/5>: not(:last-child)) {
            border-color: #ffffff0d
        }
        @supports (color:color-mix(in lab, red, red)) {
             :where(.dark\: divide-white\/5>: not(:last-child)) {
                border-color: color-mix(in oklab, var(--color-white)5%, transparent)
            }
        }
         :where(.dark\:divide-white\/10>:not(:last-child)) {
            border-color: #ffffff1a
        }
        @supports (color:color-mix(in lab, red, red)) {
             :where(.dark\: divide-white\/10>: not(:last-child)) {
                border-color: color-mix(in oklab, var(--color-white)10%, transparent)
            }
        }
        .dark\:border {
            border-style: var(--tw-border-style);
            border-width: 1px
        }
        .dark\:border-none {
            --tw-border-style: none;
            border-style: none
        }
        .dark\:border-amber-500 {
            border-color: var(--color-amber-500)
        }
        .dark\:border-amber-800 {
            border-color: var(--color-amber-800)
        }
        .dark\:border-blue-600 {
            border-color: var(--color-blue-600)
        }
        .dark\:border-blue-800 {
            border-color: var(--color-blue-800)
        }
        .dark\:border-emerald-500 {
            border-color: var(--color-emerald-500)
        }
        .dark\:border-emerald-600 {
            border-color: var(--color-emerald-600)
        }
        .dark\:border-gray-600 {
            border-color: var(--color-gray-600)
        }
        .dark\:border-neutral-500 {
            border-color: var(--color-neutral-500)
        }
        .dark\:border-neutral-700 {
            border-color: var(--color-neutral-700)
        }
        .dark\:border-neutral-800 {
            border-color: var(--color-neutral-800)
        }
        .dark\:border-rose-500 {
            border-color: var(--color-rose-500)
        }
        .dark\:border-rose-900 {
            border-color: var(--color-rose-900)
        }
        .dark\:border-white\/5 {
            border-color: #ffffff0d
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:border-white\/5 {
                border-color: color-mix(in oklab, var(--color-white)5%, transparent)
            }
        }
        .dark\:border-white\/8 {
            border-color: #ffffff14
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:border-white\/8 {
                border-color: color-mix(in oklab, var(--color-white)8%, transparent)
            }
        }
        .dark\:border-white\/10 {
            border-color: #ffffff1a
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:border-white\/10 {
                border-color: color-mix(in oklab, var(--color-white)10%, transparent)
            }
        }
        .dark\:border-white\/20 {
            border-color: #fff3
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:border-white\/20 {
                border-color: color-mix(in oklab, var(--color-white)20%, transparent)
            }
        }
        .dark\:border-white\/\[9\%\] {
            border-color: #ffffff17
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:border-white\/\[9\%\] {
                border-color: color-mix(in oklab, var(--color-white)9%, transparent)
            }
        }
        .dark\:bg-\[\#1a1a1a\] {
            background-color: #1a1a1a
        }
        .dark\:bg-amber-600 {
            background-color: var(--color-amber-600)
        }
        .dark\:bg-amber-950 {
            background-color: var(--color-amber-950)
        }
        .dark\:bg-blue-700 {
            background-color: var(--color-blue-700)
        }
        .dark\:bg-blue-950 {
            background-color: var(--color-blue-950)
        }
        .dark\:bg-emerald-600 {
            background-color: var(--color-emerald-600)
        }
        .dark\:bg-emerald-900\/70 {
            background-color: #004e3bb3
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-emerald-900\/70 {
                background-color: color-mix(in oklab, var(--color-emerald-900)70%, transparent)
            }
        }
        .dark\:bg-gray-700 {
            background-color: var(--color-gray-700)
        }
        .dark\:bg-gray-800 {
            background-color: var(--color-gray-800)
        }
        .dark\:bg-gray-900 {
            background-color: var(--color-gray-900)
        }
        .dark\:bg-neutral-400 {
            background-color: var(--color-neutral-400)
        }
        .dark\:bg-neutral-600 {
            background-color: var(--color-neutral-600)
        }
        .dark\:bg-neutral-700 {
            background-color: var(--color-neutral-700)
        }
        .dark\:bg-neutral-800 {
            background-color: var(--color-neutral-800)
        }
        .dark\:bg-neutral-900 {
            background-color: var(--color-neutral-900)
        }
        .dark\:bg-rose-600 {
            background-color: var(--color-rose-600)
        }
        .dark\:bg-rose-900\! {
            background-color: var(--color-rose-900) !important
        }
        .dark\:bg-rose-950 {
            background-color: var(--color-rose-950)
        }
        .dark\:bg-transparent {
            background-color: #0000
        }
        .dark\:bg-white {
            background-color: var(--color-white)
        }
        .dark\:bg-white\/1 {
            background-color: #ffffff03
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-white\/1 {
                background-color: color-mix(in oklab, var(--color-white)1%, transparent)
            }
        }
        .dark\:bg-white\/3 {
            background-color: #ffffff08
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-white\/3 {
                background-color: color-mix(in oklab, var(--color-white)3%, transparent)
            }
        }
        .dark\:bg-white\/5 {
            background-color: #ffffff0d
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-white\/5 {
                background-color: color-mix(in oklab, var(--color-white)5%, transparent)
            }
        }
        .dark\:bg-white\/10 {
            background-color: #ffffff1a
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-white\/10 {
                background-color: color-mix(in oklab, var(--color-white)10%, transparent)
            }
        }
        .dark\:bg-white\/\[2\%\] {
            background-color: #ffffff05
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-white\/\[2\%\] {
                background-color: color-mix(in oklab, var(--color-white)2%, transparent)
            }
        }
        .dark\:bg-white\/\[3\%\] {
            background-color: #ffffff08
        }
        @supports (color:color-mix(in lab, red, red)) {
            .dark\:bg-white\/\[3\%\] {
                background-color: color-mix(in oklab, var(--color-white)3%, transparent)
            }
        }
        .dark\:text-amber-300 {
            color: var(--color-amber-300)
        }
        .dark\:text-blue-300 {
            color: var(--color-blue-300)
        }
        .dark\:text-emerald-400 {
            color: var(--color-emerald-400)
        }
        .dark\:text-emerald-500 {
            color: var(--color-emerald-500)
        }
        .dark\:text-gray-200 {
            color: var(--color-gray-200)
        }
        .dark\:text-gray-300 {
            color: var(--color-gray-300)
        }
        .dark\:text-gray-400 {
            color: var(--color-gray-400)
        }
        .dark\:text-gray-600 {
            color: var(--color-gray-600)
        }
        .dark\:text-neutral-100 {
            color: var(--color-neutral-100)
        }
        .dark\:text-neutral-200 {
            color: var(--color-neutral-200)
        }
        .dark\:text-neutral-300 {
            color: var(--color-neutral-300)
        }
        .dark\:text-neutral-400 {
            color: var(--color-neutral-400)
        }
        .dark\:text-neutral-500 {
            color: var(--color-neutral-500)
        }
        .dark\:text-neutral-600 {
            color: var(--color-neutral-600)
        }
        .dark\:text-neutral-600\! {
            color: var(--color-neutral-600) !important
        }
        .dark\:text-neutral-900 {
            color: var(--color-neutral-900)
        }
        .dark\:text-rose-100 {
            color: var(--color-rose-100)
        }
        .dark\:text-white {
            color: var(--color-white)
        }
        .dark\:text-white\! {
            color: var(--color-white) !important
        }
    }
    @media(hover:hover) {
        @media(prefers-color-scheme: dark) {
            .group-hover\:dark\:text-emerald-500:is(:where(.group): hover *) {
                color: var(--color-emerald-500)
            }
        }
    }
    @media(prefers-color-scheme:dark) {
        .odd\:dark\:bg-white\/4:nth-child(odd) {
            background-color: #ffffff0a
        }
        @supports (color:color-mix(in lab, red, red)) {
            .odd\:dark\:bg-white\/4:nth-child(odd) {
                background-color: color-mix(in oklab, var(--color-white)4%, transparent)
            }
        }
        .even\:dark\:bg-white\/2:nth-child(2n) {
            background-color: #ffffff05
        }
        @supports (color:color-mix(in lab, red, red)) {
            .even\:dark\:bg-white\/2:nth-child(2n) {
                background-color: color-mix(in oklab, var(--color-white)2%, transparent)
            }
        }
        @media(hover:hover) {
            .dark\:hover\:bg-gray-900:hover {
                background-color: var(--color-gray-900)
            }
            .dark\:hover\:bg-white\/2:hover {
                background-color: #ffffff05
            }
            @supports (color:color-mix(in lab, red, red)) {
                .dark\:hover\:bg-white\/2:hover {
                    background-color: color-mix(in oklab, var(--color-white)2%, transparent)
                }
            }
            .dark\:hover\:bg-white\/5:hover {
                background-color: #ffffff0d
            }
            @supports (color:color-mix(in lab, red, red)) {
                .dark\:hover\:bg-white\/5:hover {
                    background-color: color-mix(in oklab, var(--color-white)5%, transparent)
                }
            }
            .dark\:hover\:bg-white\/10:hover {
                background-color: #ffffff1a
            }
            @supports (color:color-mix(in lab, red, red)) {
                .dark\:hover\:bg-white\/10:hover {
                    background-color: color-mix(in oklab, var(--color-white)10%, transparent)
                }
            }
        }
    }
    @media(hover:hover) {
        @media(prefers-color-scheme: dark) {
            .hover\:dark\:bg-white\/5:hover {
                background-color: #ffffff0d
            }
            @supports (color:color-mix(in lab, red, red)) {
                .hover\:dark\:bg-white\/5:hover {
                    background-color: color-mix(in oklab, var(--color-white)5%, transparent)
                }
            }
        }
    }
    @media(prefers-color-scheme:dark) {
        @media(hover: hover) {
            .dark\:hover\:text-gray-200:hover {
                color: var(--color-gray-200)
            }
            .dark\:hover\:text-gray-300:hover {
                color: var(--color-gray-300)
            }
        }
    }
    @media(hover:hover) {
        @media(prefers-color-scheme: dark) {
            .hover\:dark\:text-white:hover {
                color: var(--color-white)
            }
        }
    }
    @media(prefers-color-scheme:dark) {
        .dark\:focus\:border-blue-700:focus {
            border-color: var(--color-blue-700)
        }
        .dark\:focus\:border-blue-800:focus {
            border-color: var(--color-blue-800)
        }
        .dark\:active\:bg-gray-700:active {
            background-color: var(--color-gray-700)
        }
        .dark\:active\:text-gray-300:active {
            color: var(--color-gray-300)
        }
    }
    .\[\&_svg\]\:size-2\.5 svg {
        width: calc(var(--spacing)*2.5);
        height: calc(var(--spacing)*2.5)
    }
    .\[\&_svg\]\:\!text-white svg {
        color: var(--color-white) !important
    }
    @media(hover:hover) {
        .hover\:\[\&_svg\]\:stroke-emerald-500:hover svg {
            stroke: var(--color-emerald-500)
        }
    }
    @media(prefers-color-scheme:dark) {
        .dark\:\[\&_svg\]\:\!text-white svg {
            color: var(--color-white) !important
        }
    }
}

header {
    z-index: 1000;
    padding: 16px 25px 0;
    transition: background-color .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.header-container {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.header-left {
    align-items: center;
    gap: 20px;
    display: flex
}

.menu-icon {
    cursor: pointer
}

.logo {
    cursor: pointer;
    border-right: 1px solid #fff;
    padding: 5px 7px
}

.logo img {
    width: 40px
}

.lang-switcher {
    color: #fff;
    gap: 10px;
    display: flex
}

.lang-switcher a {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0%;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    line-height: 27px
}

.lang-switcher a:hover {
    text-underline-offset: 5px;
    text-decoration: underline;
    transition: all .3s
}

.lang-switcher a.active {
    color: #fff;
    text-underline-offset: 5px;
    text-decoration: underline
}

.book-session {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    background: #ff5c2f;
    padding: 7px 30px;
    font-size: 14px;
    line-height: 22px;
    transition: all .3s
}

.book-session:hover {
    color: #fff;
    background: #9b391e
}

.panel-backdrop {
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999999;
    opacity: 0;
    background: #0006;
    transition: opacity .3s;
    display: none;
    position: fixed;
    inset: 0
}

.panel-backdrop.active {
    opacity: 1;
    display: block
}

.side-panel {
    z-index: 2147483647;
    background: #001d22;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    width: 32%;
    height: 100vh;
    padding: 16px 25px 75px;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    transform: translate(-100%)
}

[dir=rtl] .side-panel {
    left: auto;
    right: 0;
    transform: translate(100%)
}

[dir=rtl] .side-panel.active,
.side-panel.active {
    transform: translate(0)
}

.panel-close {
    color: #fff;
    cursor: pointer;
    opacity: .7;
    background: 0 0;
    border: none;
    padding: .25rem .5rem;
    font-size: 1.2rem;
    transition: opacity .2s
}

.panel-close img {
    width: 25px;
    height: 15px
}

.sph {
    align-items: center;
    gap: 20px;
    display: flex
}

.sp-header {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex
}

.panel-close:hover {
    opacity: 1
}

.panel-nav {
    flex-direction: column;
    gap: 1rem;
    margin-top: 75px;
    display: flex
}

.panel-nav a {
    font-family: SourceSerifPro;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #fff;
    border-bottom: 1px solid #eaebec61;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 21px;
    font-size: 18px;
    line-height: 100%;
    transition: all .3s;
    display: flex
}

.panel-nav a:hover {
    color: #ff5c2f
}

.panel-nav a:last-child {
    border-bottom: none
}

.panel-cta a {
    z-index: 9999;
    width: 100%;
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    background: #ff5c2f;
    margin-top: 45px;
    padding: 12px;
    font-size: 16px;
    line-height: 22px;
    transition: all .3s;
    display: block
}

.panel-cta:hover {
    background: #9b391e
}

.sph-w {
    width: 100%
}

.panel-footer p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #d0d8da;
    font-size: 14px;
    line-height: 17px
}

.panel-footer-in {
    border-bottom: 1px solid #eaebec61;
    margin-bottom: 30px;
    padding-bottom: 30px
}

.hero-solutions {
    background-image: url(https://b2g-consulting.com/solutions/branding/hero-imgs/cyber-digital-resilience.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    height: 70vh;
    max-height: 416px;
    display: flex;
    position: relative
}

.hero-saudi-industrial {
    background-image: url(https://b2g-consulting.com/solutions/branding/hero-imgs/b2g-saudi-industrial-localization-hero.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    height: 70vh;
    max-height: 416px;
    display: flex;
    position: relative
}

.hero-solutions .hero-content {
    z-index: 1;
    position: relative
}

.hero-h1 {
    letter-spacing: -.02em;
    color: #fff;
    max-width: 800px;
    margin-bottom: 23px;
    font-family: SourceSerifPro, serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px
}

.hero-h1-saudi-industrial {
    letter-spacing: -.02em;
    color: #fff;
    max-width: 950px;
    margin-bottom: 23px;
    font-family: SourceSerifPro, serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px
}

[dir=rtl] .hero-h1-saudi-industrial {
    max-width: 800px
}

.hero-h3 {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #ff5c2f;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 27px
}

.hero-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #c5cdd3;
    max-width: 740px;
    font-size: 16px;
    line-height: 21px
}

.overview-section {
    padding: 77px 0
}

.overview-section-content {
    gap: 50px;
    display: flex;
    position: relative
}

.overview-section-left {
    flex-direction: column;
    width: 60%;
    display: flex
}

.oh2 {
    letter-spacing: -2%;
    color: #001e23;
    max-width: 90%;
    margin-bottom: 8px;
    font-family: SourceSerifPro, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 34px
}

.oh2-o {
    margin-bottom: 25px;
    font-weight: 400
}

.overview-p-div {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    display: flex
}

.overview-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 16px;
    line-height: 22px
}

.ovh3 {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    letter-spacing: 0%;
    color: #001e23;
    align-items: center;
    gap: 30px;
    margin-bottom: 5px;
    font-size: 20px;
    line-height: 27px;
    display: flex
}

.mm {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #ff5c2f;
    font-size: 50px;
    line-height: 100%
}

.exp-p-div {
    flex-direction: column;
    margin-bottom: 27px;
    display: flex
}

.exp-p {
    font-family: SourceSerifPro, serif;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    border-bottom: 1px solid #dfdddb;
    padding: 20px 50px;
    font-size: 18px;
    line-height: 24px
}

.exp-p:last-child {
    border-bottom: none
}

.o-sec {
    background: #f9f0e7;
    padding: 32px 50px
}

.o-sec p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    flex-direction: column;
    gap: 7px;
    font-size: 18px;
    line-height: 22px;
    display: flex
}

.o-sec p span {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 18px;
    line-height: 22px
}

.ov-sec-sticky {
    background: #f4f4f4;
    flex-direction: column;
    gap: 20px;
    width: 40%;
    height: fit-content;
    padding: 45px 28px;
    display: flex;
    position: sticky;
    top: 100px
}

.os-item {
    align-items: center;
    gap: 20px;
    display: flex
}

.os-item p {
    font-family: SourceSerifPro, serif;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 16px;
    line-height: 22px
}

.os-t {
    background-color: #001e23;
    width: 26px;
    min-width: 26px;
    height: 1px;
    margin-bottom: 13px
}

.solutions-cdr {
    background: #f2f6f7;
    padding: 77px 0
}

.body-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 16px;
    line-height: 22px
}

.solutions-cards {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 46px;
    display: grid
}

.solution-card {
    background: #fefcfa;
    padding: 38px 56px
}

.s-h4 {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #ff5c2f;
    margin-bottom: 3px;
    font-size: 14px;
    line-height: 27px
}

.s-h4-g {
    color: #838e88
}

.s-h3 {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 27px
}

.s-items {
    flex-direction: column;
    gap: 20px;
    display: flex
}

.s-item {
    align-items: start;
    gap: 15px;
    display: flex
}

.s-item img {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px
}

.s-item p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 16px;
    line-height: 22px
}

.cdr-pillars {
    background: #fefcfa;
    padding: 80px 0
}

.p-content {
    gap: 30px;
    margin-top: 48px;
    display: flex
}

.p-items {
    flex-direction: column;
    gap: 20px;
    width: 40%;
    padding-top: 22px;
    display: flex
}

.p-item {
    cursor: pointer;
    align-items: center;
    gap: 15px;
    display: flex
}

.p-num {
    font-family: Merriweather;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #dbdbdb;
    min-width: 40px;
    padding-bottom: 12px;
    font-size: 32px;
    line-height: 100%
}

.p-desc {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #b2b2b2;
    border-bottom: 1px solid #dfdddb;
    width: 100%;
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 24px
}

.details-p {
    background: #f9f1ea;
    width: 60%;
    padding: 48px 48px 34px
}

.d-h3 {
    font-family: SourceSerifPro, serif;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 24px
}

.closing-h3 {
    font-family: SourceSerifPro, serif;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 18px;
    line-height: 24px
}

.d-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #596668;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 19px
}

.d-h4 {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 16px;
    line-height: 100%
}

.d-items {
    background: #fefcfa;
    grid-template-columns: 1fr 1fr;
    margin-top: 23px;
    margin-bottom: 29px;
    padding: 10px;
    display: grid;
    position: relative
}

.d-item-1 {
    border: 1px solid #fff;
    min-height: 160px;
    padding: 25px
}

.d-item-2 {
    border: 1px solid #fff;
    border-left-color: #dbdbdb;
    min-height: 160px;
    padding: 25px
}

.d-item-3 {
    border: 1px solid #fff;
    border-top-color: #dbdbdb;
    min-height: 160px;
    padding: 25px
}

.d-item-4 {
    border: 1px solid #fff;
    border-color: #dbdbdb #fff #fff #dbdbdb;
    min-height: 160px;
    padding: 25px
}

.d-item-1 p,
.d-item-2 p,
.d-item-3 p,
.d-item-4 p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 16px;
    line-height: 22px
}

.d-item-1 p span,
.d-item-2 p span,
.d-item-3 p span,
.d-item-4 p span {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 16px;
    line-height: 22px
}

.p-item.active .p-num {
    color: #001e23
}

.details-p {
    transition: opacity .35s
}

.details-p.fade-in {
    opacity: 1
}

.p-item.active .p-desc {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    border-bottom: 1px solid #ff5c2f;
    width: 100%;
    padding-bottom: 19px;
    font-size: 18px;
    line-height: 24px
}

.w-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.or-items {
    flex-direction: column;
    gap: 44px;
    margin-top: 44px;
    display: flex
}

.or-item {
    flex-direction: column;
    gap: 11px;
    display: flex
}

.or-item-card {
    background: #fff;
    align-items: start;
    gap: 57px;
    padding: 38px;
    display: flex
}

.or-b-items {
    flex-wrap: wrap;
    gap: 11px;
    display: flex
}

.or-b-items span {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    border-radius: 0;
    padding: 5px 15px;
    font-size: 12px;
    line-height: 19px
}

.or-s-o:hover {
    color: #ff5c2f;
    background-color: #f3eae1
}

.or-s-g:hover {
    color: #5e6364;
    background-color: #e9e6e3
}

.or-h2 {
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    width: 100%;
    max-width: 172px;
    font-size: 18px;
    line-height: 24px
}

.or-h3 {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    margin-bottom: 13px;
    font-size: 16px;
    line-height: 19px
}

.roles-pressures {
    background: #fefcfa;
    padding: 0 0 70px
}

.roles-pressures-container {
    border-top: 1px solid #dfdddb;
    padding-top: 77px
}

.roles-pressures-items {
    gap: 32px;
    margin-top: 39px;
    display: flex
}

.roles-pressures-item {
    background: #f9f1ea;
    width: 100%;
    height: fit-content;
    padding: 30px 20px 20px
}

.roles-pressures-item img {
    margin-bottom: 20px
}

.rp-h3 {
    font-family: SourceSerifPro, serif;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    border-bottom: 1px solid #dfdddb;
    margin-bottom: 9px;
    padding-bottom: 27px;
    font-size: 16px;
    line-height: 24px
}

.rp-p-d {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 12px;
    line-height: 22px
}

.rp-content {
    background-color: #fefcfa;
    flex-direction: column;
    margin-top: 25px;
    padding: 18px;
    display: flex
}

.rp-content img {
    object-fit: cover;
    width: 321px;
    height: 149px
}

.rp-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 20px
}

.rp-p-n {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 14px;
    line-height: 20px
}

.rp-p-n span {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium
}

.team-cdr {
    background: #fefcfa;
    padding: 80px 0
}

.team-cdr-content {
    grid-template-columns: 1fr 2fr;
    justify-content: space-between;
    align-items: start;
    display: grid
}

.team-cdr-header {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    display: flex
}

.team-members {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    width: 100%;
    display: grid
}

.team-cdr-header p,
.team-cdr-header h2 {
    max-width: 290px
}

.team-member {
    gap: 20px;
    display: flex
}

.tm-img-c {
    background: #000;
    width: 124px
}

.team-member h3 {
    font-family: SourceSerifPro, serif;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 100%
}

.team-member p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    max-width: 140px;
    font-size: 12px;
    line-height: 17px
}

.team-member a {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    border-bottom: 1px solid #efefef;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: fit-content;
    padding-bottom: 12px;
    font-size: 14px;
    line-height: 100%;
    display: flex
}

.team-member a img {
    width: 16px;
    height: 10px
}

.tmm {
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    display: flex
}

.organisations-sec {
    background: #f2f6f7;
    padding: 88px 0 140px
}

.ob2g-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 57px;
    display: grid
}

.ob2g-item {
    -webkit-backdrop-filter: blur(5.7px);
    backdrop-filter: blur(5.7px);
    background: #e4e8eb4d;
    padding: 30px
}

.ob2g-item h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    border-bottom: 1px solid #001d2252;
    margin-bottom: 15px;
    padding-bottom: 16px;
    font-size: 18px;
    line-height: 100%
}

.ob2g-item p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001d22;
    font-size: 16px;
    line-height: 22px
}

.solution-card {
    cursor: pointer;
    border: 1px solid #0000
}

.solution-card:hover {
    border: 1px solid #d2d3d3;
    transition: all .3s
}

.p-item:hover .p-desc,
.p-item:hover .p-num {
    color: #969696
}

.p-desc {
    position: relative
}

.p-desc:after {
    content: "";
    background-color: #ff5c2f;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: 0
}

.p-desc:hover:after {
    width: 100%
}

.team-member a {
    position: relative
}

[dir=ltr] .p-desc:after,
[dir=ltr] .team-member a:after {
    content: "";
    background-color: #ff5c2f;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: auto
}

[dir=ltr] .team-member a:hover:after,
[dir=ltr] .p-desc:hover:after {
    width: 100%
}

[dir=rtl] .team-member a:after,
[dir=rtl] .p-desc:after {
    content: "";
    background-color: #ff5c2f;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: auto;
    right: 0
}

[dir=rtl] .team-member a:hover:after,
[dir=rtl] .p-desc:hover:after {
    width: 100%
}

.nav-links {
    z-index: 999999;
    background-color: #fefcfa;
    border-bottom: 1px solid #c9d8db;
    padding: 12px 25px;
    position: sticky;
    top: 0
}

.nav-links nav ul {
    align-items: center;
    gap: 30px;
    display: flex
}

.nav-links nav ul li a {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #4f595a;
    cursor: pointer;
    border-bottom: 2px solid #0000;
    padding: 16px 0;
    font-size: 14px;
    line-height: 27px;
    text-decoration: none
}

.nav-links nav ul li a.active {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    border-bottom: 2px solid #e2714c;
    font-size: 14px;
    line-height: 27px
}

.nav-links nav ul li a:hover {
    border-bottom: 2px solid #e2714c
}

.book-session-ng {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    background: #ff5c2f;
    border: 1px solid #0000;
    padding: 7px 30px;
    font-size: 14px;
    line-height: 22px
}

.book-session-ng:hover {
    color: #fff;
    background: #9b391e
}

.flex,
.book-session-ng {
    visibility: visible
}

.flex.hidden-when-sticky,
.book-session-ng.hidden-when-sticky {
    visibility: hidden;
    pointer-events: none
}

.ll {
    margin-right: 27px;
    position: absolute;
    top: 9px;
    left: 25px
}

.book-session-ng {
    position: absolute;
    top: 12%;
    right: 25px
}

footer {
    background: #001d22;
    padding: 77px 0 31px
}

.f-cta {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.f-mail-adress {
    border-bottom: 1px solid #043038;
    padding: 81px 0 25px
}

.f-a-d-m p,
.f-a-d-m a {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0%;
    color: #fff;
    font-size: 16px;
    line-height: 22px
}

.f-a-d-m {
    border-left: 1px solid #ff5c2f;
    flex-direction: column;
    gap: 5px;
    width: fit-content;
    padding-left: 20px;
    display: flex
}

.f-a-d-m a:hover {
    color: #ff5c2f
}

.f-cta-c h2 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    letter-spacing: -2%;
    color: #fff;
    margin-bottom: 7px;
    font-size: 28px;
    line-height: 100%
}

.f-cta-c .body-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0%;
    color: #a7b5b7;
    font-size: 16px;
    line-height: 22px
}

.f-cta a {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    color: #fff;
    background: #ff5c2f;
    padding: 10px 30px;
    font-size: 14px;
    line-height: 22px;
    transition: all .3s
}

.f-cta a:hover {
    color: #fff;
    background: #9b391e
}

.f-b {
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    display: flex
}

.f-b-l {
    align-items: center;
    gap: 10px;
    display: flex
}

.f-b-l p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #fff;
    font-size: 14px;
    line-height: 15px
}

.in-icon img {
    transition: all .3s
}

.in-icon:hover img {
    opacity: .5
}

.hs-mobile,
.osmobile,
.pm-mobile,
.roles-pressures-mobile,
.sm-mobile-sec,
.fm,
.org-mobile,
.rp-mobile-list,
.hm {
    display: none
}

.use-case-m {
    margin-top: 35px
}

@media(max-width:1024px) {
    .solutions-cdr,
    .cdr-pillars,
    .roles-pressures,
    .nav-links,
    .hw,
    .fw,
    .hero-solutions,
    .organisations-sec,
    .overview-section {
        display: none
    }
    .hm {
        background-color: #fff;
        width: 100%;
        display: block
    }
    .hmc {
        justify-content: space-between;
        align-items: center;
        display: flex
    }
    .hmcc {
        align-items: center;
        gap: 12px;
        display: flex
    }
    .hmcc p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        letter-spacing: 0%;
        color: #ff5c2f;
        font-size: 12px;
        line-height: 100%
    }
    .lang-switcher-mobile {
        align-items: center;
        gap: 7px;
        display: flex
    }
    .lang-switcher-mobile a {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #9ea5aa;
        border-bottom: 1px solid #0000;
        padding-bottom: 3px;
        font-size: 12px;
        line-height: 27px
    }
    .lang-switcher-mobile a.active {
        color: #001d22;
        border-bottom: 1px solid #001d22
    }
    .hs-mobile {
        flex-direction: column;
        width: 100%;
        display: flex
    }
    .hs-mobile-content {
        padding: 34px 25px 0
    }
    .hs-mobile-content h2 {
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001d22;
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 30px
    }
    .rp-mobile-list {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 45px;
        padding-inline: 25px;
        display: flex
    }
    .rp-p-n {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #001e23;
        background: #f9f1ea;
        width: 100%;
        min-width: fit-content;
        margin-bottom: 25px;
        padding: 25px;
        font-size: 14px;
        line-height: 20px
    }
    .rp-desc-m {
        font-family: Roboto;
        font-weight: 500;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #001e23;
        border-top: 1px solid #f4f4f4;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-top: 15px;
        font-size: 14px;
        line-height: 22px
    }
    .rp-h3-m {
        font-family: SourceSerifPro;
        font-weight: 500;
        font-style: Medium;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #001e23;
        max-width: 300px;
        font-size: 14px;
        line-height: 22px
    }
    .hs-mobile-content p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #68777a;
        font-size: 14px;
        line-height: 19px
    }
    .hs-mobile img {
        width: 100%;
        margin-top: 40px
    }
    .team-cdr {
        padding: 34px 0
    }
    .oh2m {
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        margin-bottom: 11px;
        font-size: 20px;
        line-height: 24px
    }
    .oh2pm {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #68777a;
        width: 100%;
        min-width: fit-content;
        font-size: 12px;
        line-height: 17px
    }
    .team-cdr-content {
        flex-direction: column;
        gap: 32px;
        display: flex
    }
    .team-cdr-header {
        gap: 8px
    }
    .team-members {
        grid-template-columns: unset;
        flex-direction: column;
        gap: 0;
        display: flex
    }
    .team-member {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 15px 0;
        display: flex
    }
    .team-member img {
        object-fit: cover;
        object-position: top;
        border-radius: 1000000000px;
        flex-shrink: 0;
        width: 100px;
        height: 100px
    }
    .tmm {
        flex-direction: column;
        gap: 16px;
        display: flex
    }
    .tmm h3 {
        color: #001e23;
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 600
    }
    .tmm p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        max-width: 150px;
        font-size: 12px;
        line-height: 17px
    }
    .tmm a {
        color: #001e23;
        background: #f5f5f5;
        align-items: center;
        gap: 8px;
        width: fit-content;
        padding: 8px 16px;
        font-size: 13px;
        text-decoration: none;
        display: inline-flex
    }
    .tmm a img {
        object-fit: unset;
        object-position: unset;
        flex-shrink: 0;
        width: 16px;
        height: 16px
    }
    .osmobile {
        flex-direction: column;
        gap: 0;
        margin-top: 35px;
        padding: 0 25px;
        display: flex
    }
    .os-div-m {
        background: #f4f4f4;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 25px;
        padding: 35px 25px;
        display: flex
    }
    .os-div-m .os-item p {
        font-family: SourceSerifPro;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        font-size: 14px;
        line-height: 19px
    }
    .overview-p-div {
        margin-bottom: 20px
    }
    .overview-p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        font-size: 14px;
        line-height: 19px
    }
    .h2-m {
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        margin-bottom: 23px;
        font-size: 20px;
        line-height: 24px
    }
    .mm {
        font-family: Roboto;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        font-size: 45px;
        line-height: 100%
    }
    .exp-p-div {
        flex-direction: column;
        margin-bottom: 0;
        display: flex
    }
    .h3-m {
        font-family: Roboto;
        font-weight: 500;
        font-style: Medium;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #001e23;
        font-size: 16px;
        line-height: 22px
    }
    .exp-p {
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        padding: 20px 0;
        font-size: 14px;
        line-height: 19px
    }
    .o-sec {
        background: #f4f4f4;
        margin-bottom: 44px;
        padding: 25px
    }
    .o-sec p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        font-size: 14px;
        line-height: 24px
    }
    .o-sec p span {
        font-family: Roboto;
        font-weight: 500;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #001e23;
        font-size: 14px;
        line-height: 20px
    }
    .sm-mobile-sec {
        background: #f2f6f7;
        flex-direction: column;
        gap: 0;
        margin-bottom: 35px;
        padding: 45px 25px;
        display: flex
    }
    .challenges-m,
    .organisation-section-mobile,
    .ov-mobile {
        margin-bottom: 0
    }
    .sm-mobile-sec h2 {
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        margin-bottom: 11px;
        font-size: 20px;
        line-height: 24px
    }
    .sm-mobile-sec p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #68777a;
        font-size: 12px;
        line-height: 17px
    }
    .b2g-steps-m {
        flex-direction: column;
        gap: 12px;
        margin-top: 35px;
        display: flex
    }
    .b2g-step-m {
        background: #fff;
        justify-content: space-between;
        align-items: center;
        padding: 19px 14px;
        display: flex
    }
    .b2g-challenge-m {
        background: #fefcfa;
        justify-content: space-between;
        align-items: center;
        padding: 19px 14px;
        display: flex
    }
    .b2g-step-m-h3 {
        font-family: SourceSerifPro;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: -2%;
        font-size: 16px;
        line-height: 21px
    }
    .b2g-step-m-content {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        font-size: 12px;
        line-height: 100%
    }
    .b2g-step-m-content h2 {
        background: #000
    }
    .b2g-step-m-content p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        font-size: 12px;
        line-height: 100%
    }
    .c-plus,
    .c-plus-challenge {
        background: #f2f6f7;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 41px;
        height: 41px;
        padding: 10px;
        display: flex
    }
    .b2g-steps-m h3 {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #001e23;
        font-size: 14px;
        line-height: 19px
    }
    .b2g-step-m-content .bsc-o {
        color: #ff5c2f;
        margin-bottom: 8px
    }
    .b2g-step-m-content .bsc-g {
        color: #838e88;
        margin-bottom: 8px
    }
    .pm-mobile {
        flex-direction: column;
        gap: 0;
        padding: 45px 25px 0;
        display: flex
    }
    .roles-pressures-mobile {
        flex-direction: column;
        padding: 35px 25px;
        display: flex
    }
    .org-mobile {
        background: #f2f6f7;
        flex-direction: column;
        padding: 35px 25px 59px;
        display: flex
    }
    .org-mobile-header h2 {
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        margin-bottom: 11px;
        font-size: 20px;
        line-height: 24px
    }
    .org-mobile-header p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #68777a;
        margin-top: 7px;
        font-size: 12px;
        line-height: 17px
    }
    .org-m-i {
        flex-direction: column;
        gap: 12px;
        margin-top: 35px;
        display: flex
    }
    .fm {
        background: #001d22;
        flex-direction: column;
        padding: 29px 25px;
        display: flex
    }
    .fm-c {
        border-top: 1px solid #8a8a8a3f;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 15px;
        padding-top: 15px;
        display: flex
    }
    .fm-mail {
        border-left: 1px solid #ff5c2f;
        flex-direction: column;
        padding-left: 15px;
        display: flex
    }
    .fm-mail a,
    .fm-mail p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #fff;
        font-size: 12px;
        line-height: 17px
    }
    .fm-c-c {
        align-items: center;
        gap: 12px;
        display: flex
    }
    .fm-c-c p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #fff;
        font-size: 12px;
        line-height: 17px
    }
    .fm-c-c a img {
        width: 30px
    }
    .fm-c-c .in-icon {
        background: #f2f6f7;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 41px;
        height: 41px;
        padding: 10px;
        display: flex
    }
}

.rpm-h2 {
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 24px
}

.rpm-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 12px;
    line-height: 17px
}

.rpm-c-mobile {
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    display: flex
}

.rpm-c-mobile-i {
    background: #f9f1ea;
    flex-direction: column;
    padding: 26px 20px;
    display: flex
}

.steps-backdrop {
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
    background: #00000059;
    display: none;
    position: fixed;
    inset: 0
}

.steps-modal {
    z-index: 9999;
    background: #fff;
    width: 100%;
    height: fit-content;
    max-height: 100vh;
    padding: 35px 25px 110px;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    position: fixed;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    transform: translateY(100%)
}

.steps-modal.open {
    transform: translateY(0)
}

.steps-backdrop.open {
    display: block
}

.steps-modal-close {
    cursor: pointer;
    color: #001e23;
    background: 0 0;
    border: none;
    font-size: 28px;
    line-height: 1;
    position: absolute;
    top: 27px;
    right: 24px
}

.steps-modal-body h3 {
    max-width: 250px;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    font-size: 20px;
    line-height: 24px
}

.steps-modal-body ul {
    color: #001e23;
    flex-direction: column;
    gap: 14px;
    margin-top: 25px;
    padding: 0;
    display: flex
}

.steps-modal-body ul li img {
    margin-top: 5px
}

.steps-modal-body ul li:before {
    color: #e2714c;
    position: absolute;
    left: 0
}

.pm-mobile-list {
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    display: flex
}

.pm-mobile-item {
    background: #f9f1ea;
    justify-content: space-between;
    align-items: center;
    padding: 19px 14px;
    display: flex
}

.pm-mobile-item:hover {
    opacity: .7
}

.pm-mobile-item-left {
    align-items: center;
    gap: 16px;
    display: flex
}

.pm-num {
    color: #e2714c;
    min-width: 24px;
    font-size: 13px;
    font-weight: 500
}

.pm-title {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 14px;
    line-height: 19px
}

.pm-plus {
    color: #001e23;
    font-size: 22px;
    font-weight: 300;
    line-height: 1
}

.pm-mobile-header h2 {
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 20px;
    line-height: 24px
}

.pm-mobile-header p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-top: 7px;
    font-size: 12px;
    line-height: 17px
}

.rp-mobile-header h2 {
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    margin-bottom: 11px;
    font-size: 20px;
    line-height: 24px
}

.rp-mobile-header p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-top: 7px;
    font-size: 12px;
    line-height: 17px
}

.c-plus-p {
    background: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    padding: 10px;
    display: flex
}

.pps-p {
    border-top: 1px solid #cfcfcf;
    flex-direction: column;
    gap: 7px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
    display: flex
}

.pps-p p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 12px;
    line-height: 17px
}

.steps-modal-body h4 {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 14px;
    line-height: 20px
}

.steps-modal-sub {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 19px
}

.ddh3 {
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    max-width: 300px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 22px
}

.ddh33 {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 22px
}

.ddp {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 19px
}

.steps-modal-tags {
    gap: 16px;
    margin-top: 12px;
    display: flex
}

.tags-left,
.tags-right {
    flex-direction: column;
    flex: 1;
    gap: 8px;
    display: flex
}

.or-s-g {
    background: #f0f0f0;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px
}

.or-s-o {
    color: #fff;
    background: #ff5c2f;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px
}

.steps-modal-tags span {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: left;
    width: fit-content;
    padding: 7px;
    font-size: 12px;
    line-height: 19px
}

.or-b-items span {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    padding: 5px 15px;
    font-size: 12px;
    line-height: 19px
}

.or-s-o {
    color: #ff5c2f;
    background-color: #fff8f1
}

.or-s-g {
    color: #5e6364;
    background-color: #fbfaf8
}

.ob2g-item-mobile {
    background: #fff;
    padding: 25px
}

.ob2g-item-mobile h3 {
    font-family: Source Serif Pro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    border-bottom: 1px solid #e1e6e9;
    margin-bottom: 17px;
    padding-bottom: 17px;
    font-size: 16px;
    line-height: 100%
}

.ob2g-item-mobile p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 14px;
    line-height: 22px
}

.ppmpr {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #596668;
    background: #f9f1ea;
    width: 100%;
    min-width: fit-content;
    padding: 25px 25px 0;
    font-size: 14px;
    line-height: 20px
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0
}

[dir=rtl] body {
    font-family: Tajawal, sans-serif
}

[dir=rtl] .rp-h-mobile-q {
    rotate: 180deg
}

[dir=rtl] .hero-solutions {
    background-image: url(https://b2g-consulting.com/solutions/branding/hero-imgs/cyber-digital-resilience-ar.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    height: 70vh;
    max-height: 416px;
    display: flex;
    position: relative
}

[dir=rtl] .header-left {
    display: flex
}

[dir=rtl] .steps-modal {
    right: unset;
    left: 0
}

[dir=rtl] .f-a-d-m {
    border-left: 0;
    border-right: 1px solid #ff5c2f;
    flex-direction: column;
    gap: 5px;
    width: fit-content;
    padding-right: 20px;
    display: flex
}

[dir=rtl] .o-sec p span {
    font-weight: 600
}

@font-face {
    font-family: SourceSerifPro;
    src: url(/solutions/fonts/SourceSerifPro-Regular.otf)format("opentype"), url(/solutions/fonts/SourceSerifPro-Regular.ttf)format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: SourceSerifPro;
    src: url(/solutions/fonts/SourceSerifPro-Semibold.otf)format("opentype"), url(/solutions/fonts/SourceSerifPro-Semibold.ttf)format("truetype");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: SourceSerifPro;
    src: url(/solutions/fonts/SourceSerifPro-Bold.otf)format("opentype"), url(/solutions/fonts/SourceSerifPro-Bold.ttf)format("truetype");
    font-weight: 700;
    font-style: normal
}

body {
    background: #fefcfa
}

.container {
    max-width: 1140px;
    margin: 0 auto
}

h2,
h1 {
    font-family: SourceSerifPro, serif
}

@media(max-width:1280px) {
    .container {
        padding: 0 25px
    }
    .overview-section {
        padding: 77px 25px
    }
}

::selection {
    color: #fff;
    background-color: #ff5c2f
}

.rp-mobile-sec {
    padding: 40px 25px 0;
    display: none
}

.rp-mobile-sec h2 {
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 24px
}

.rp-mobile-sec p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-bottom: 35px;
    font-size: 12px;
    line-height: 17px
}

.rp-mobile-item {
    background: #f9f1ea;
    justify-content: space-between;
    align-items: center;
    padding: 19px 14px;
    display: flex
}

.rp-mobile-item-content {
    flex-direction: column;
    gap: 6px;
    display: flex
}

.rp-mobile-role {
    color: #e2714c;
    text-transform: uppercase;
    letter-spacing: .04em;
    max-width: 250px;
    margin: 0;
    font-size: 12px;
    font-weight: 500
}

.rp-mobile-item-content h3 {
    color: #001e23;
    max-width: 200px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5
}

.rp-mobile-item .c-plus img {
    width: 20px;
    height: 20px
}

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

@media(max-width:1600px) {
    .ll {
        margin-right: 27px;
        position: absolute;
        top: 34%;
        left: 25px
    }
    [dir=rtl] .ll {
        top: 18px
    }
    .nav-links {
        padding: 12px 25px
    }
    .www {
        display: none
    }
}

.minus-icon {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    padding: 10px
}

.mod-title {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 16px;
    line-height: 100%
}

.mod-title-org {
    font-family: SourceSerifPro;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    max-width: 300px;
    font-size: 14px;
    line-height: 22px
}

.subtitle-org {
    font-family: Roboto;
    font-weight: 500;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #4f595a;
    border-top: 1px solid #f4f4f4;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    font-size: 14px;
    line-height: 18px
}

.mod-subtitle {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 18px
}

.mod-subtitle-immediate {
    color: #ff5c2f
}

.mod-subtitle-sustainable {
    color: #838e88
}

.mod-items li {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 10px;
    font-size: 14px;
    line-height: 20px
}

.rp-mobile-p {
    background: #f9f1ea;
    flex-direction: column;
    display: flex
}

.rp-mobile-p-img {
    border: 10px solid #fefcfa;
    margin-top: 27px;
    margin-bottom: 5px
}

.rp-h-mobile {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 27px;
    padding: 5px;
    display: flex
}

.rp-h-mobile a {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #056473;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 18px;
    display: flex
}

.rp-mobile-p h3 {
    font-family: SourceSerifPro;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    border-bottom: 1px solid #dfdddb;
    margin-bottom: 15px;
    padding-bottom: 30px;
    font-size: 16px;
    line-height: 22px
}

.rp-mobile-p p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 12px;
    line-height: 17px
}

.rp-mobile-p {
    background: #f9f1ea;
    height: fit-content;
    padding: 20px 26px
}

.h3-p-m {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    max-width: 310px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 22px
}

.bi-h4-m {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 14px;
    line-height: 100%
}

.pps-p-m {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #596668;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 19px
}

.ul-bi-m {
    background: #f9f1ea;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 25px 13px;
    display: flex
}

.bi-m-item {
    align-items: start;
    gap: 10px;
    width: 100%;
    display: flex
}

.bi-m-item .os-t {
    margin-top: 9px
}

.bi-m-keyword {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 14px;
    line-height: 20px
}

.bi-m-item p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 14px;
    line-height: 20px
}

.steps-modal-closing {
    font-family: SourceSerifPro;
    font-weight: 500;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    font-size: 18px;
    line-height: 22px
}

.nav-links-list {
    width: 100%
}

.rp-mobile-header {
    padding-bottom: 35px
}

[dir=ltr] .hero-h1,
[dir=ltr] .f-cta-c h2,
[dir=ltr] .oh2,
[dir=ltr] .or-h2,
[dir=ltr] .exp-p,
[dir=ltr] .o-sec p span,
[dir=ltr] .os-item p,
[dir=ltr] .rp-h3,
[dir=ltr] .d-h3,
[dir=ltr] .ob2g-item-mobile h3,
[dir=ltr] .rp-mobile-p h3,
[dir=ltr] .ob2g-item h3,
[dir=ltr] .closing-h3,
[dir=ltr] .tmm div h3 {
    font-family: SourceSerifPro, serif
}

[dir=ltr] p,
[dir=ltr] .o-sec p,
[dir=ltr] .o-sec p span,
[dir=ltr] .or-h3,
[dir=ltr] .or-b-items span,
[dir=ltr] .ob2g-item p,
[dir=ltr] .f-cta a,
[dir=ltr] .f-cta-c .body-p,
[dir=ltr] .tmm a,
[dir=ltr] .p-item.active .p-desc,
[dir=ltr] .s-h4,
[dir=ltr] .s-h3,
[dir=ltr] .hero-h3,
[dir=ltr] .s-item p {
    font-family: Roboto, sans-serif
}

[dir=rtl] p,
[dir=rtl] h3,
[dir=rtl] .rp-h3,
[dir=rtl] .or-h3,
[dir=rtl] .or-b-items span,
[dir=rtl] .ob2g-item h3,
[dir=rtl] .ob2g-item p,
[dir=rtl] .f-cta a,
[dir=rtl] .f-cta-c .body-p,
[dir=rtl] .tmm a,
[dir=rtl] .p-item.active .p-desc,
[dir=rtl] .s-h4,
[dir=rtl] .s-h3,
[dir=rtl] .d-h4,
[dir=rtl] .hero-h3,
[dir=rtl] .pm-title,
[dir=rtl] .eq-res-wrap-mobile h3,
[dir=rtl] .os-item p,
[dir=rtl] .rp-p-n span,
[dir=rtl] .or-s-g,
[dir=rtl] .book-session,
[dir=rtl] .latest-news-row-1-content-1-mobile span,
[dir=rtl] .or-s-o,
[dir=rtl] .bi-m-keyword,
[dir=rtl] .nav-links-list ul li a,
[dir=rtl] .nav-links-list ul li a.active,
[dir=rtl] .mod-items li,
[dir=rtl] .cta-footer a,
[dir=rtl] .rp-h-mobile a,
[dir=rtl] .sil-kpi-container-item-mobile-content h4,
[dir=rtl] .p-num,
[dir=rtl] .latest-news-row-1-content-1 span,
[dir=rtl] .latest-news-row-1-content-1 p,
[dir=rtl] .latest-news-row-1-content-1 a,
[dir=rtl] .latest-news-row-2-item-1-content span,
[dir=rtl] .latest-news-row-2-item-1-content p,
[dir=rtl] .latest-news-row-2-item-1-content a,
[dir=rtl] .tm-a,
[dir=rtl] .bi-h4-m,
[dir=rtl] .sil-kpi-container-item-content p,
[dir=rtl] .tp-mail p,
[dir=rtl] .tp-mail a,
[dir=rtl] .closing-p-sil,
[dir=rtl] .challenges-section__item-description_2,
[dir=rtl] .sil-kpi-container-item-content h4,
[dir=rtl] .eq-res-wrap h3,
[dir=rtl] .highlight_closing,
[dir=rtl] .challenges-section__result-description,
[dir=rtl] .challenges-section__result-title,
[dir=rtl] .eq-label,
[dir=rtl] .circle-center,
[dir=rtl] .kpis-title-desc p,
[dir=rtl] .latest-news-row-3-item-1-content p,
[dir=rtl] .latest-news-row-3-item-2-content p,
[dir=rtl] .latest-news-row-3-item-1-content span,
[dir=rtl] .latest-news-row-3-item-2-content span,
[dir=rtl] .latest-news-row-3-item-1 a,
[dir=rtl] .latest-news-row-3-item-2 a,
[dir=rtl] .approach-sil-item-total-content h3,
[dir=rtl] .approach-sil-item-total-content p,
[dir=rtl] .approach-sil-item-total-content h4,
[dir=rtl] .tm-header-content p,
[dir=rtl] .approach-sil-item p,
[dir=rtl] .approach-mobile-item-h h4,
[dir=rtl] .approach-mobile-item-h p,
[dir=rtl] .clients-content-1 p:first-child,
[dir=rtl] .clients-content-2 p:first-child,
[dir=rtl] .approach-mobile-item-b h3,
[dir=rtl] .approach-mobile-item-b h4,
[dir=rtl] .approach-mobile-item-total h3,
[dir=rtl] .approach-mobile-item-total p,
[dir=rtl] .approach-mobile-item-total h4,
[dir=rtl] .latest-news-row-2-mobile-date,
[dir=rtl] .panel-nav a,
[dir=rtl] .panel-cta a,
[dir=rtl] .approach-sil-item h3,
[dir=rtl] .case-studies-content h4,
[dir=rtl] .sil-clients-mobile h2,
[dir=rtl] .cs-h4,
[dir=rtl] .cs-panel-bullet,
[dir=rtl] .approach-sil-item h4,
[dir=rtl] .latest-news-row-1-content-1-mobile p,
[dir=rtl] .case-studies-sil-mobile-item h4,
[dir=rtl] .latest-news-row-1-content-1-mobile a,
[dir=rtl] .latest-news-row-1-content-1-mobile h3,
[dir=rtl] .case-studies-content a,
[dir=rtl] .case-studies-sil-mobile-item a,
[dir=rtl] .latest-news-row-2-mobile-read-more,
[dir=rtl] .why-us-section .why-us-p,
[dir=rtl] .s-item p {
    font-family: Tajawal, sans-serif
}

[dir=rtl] .case-studies-content h4 {
    color: #ff5c2f
}

[dir=rtl] .case-studies-sil-mobile-item a img,
[dir=rtl] .latest-news-row-2-item-1-content img {
    transform: rotate(180deg)
}

[dir=rtl] .challenges-section__result-title {
    font-weight: 600
}

[dir=rtl] .sil-kpi-container-item-mobile-content {
    border-left: 0;
    border-right: 1px solid #dfdddb
}

[dir=rtl] .sil-kpi-container-item-mobile-content:first-child {
    border-right: 0
}

[dir=rtl] .eq-res-wrap h3 {
    font-weight: 500
}

[dir=rtl] .eq-item {
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    margin-bottom: 55px;
    display: flex
}

[dir=rtl] .eq-plus-2,
[dir=rtl] .eq-plus-1 {
    top: 21%
}

[dir=rtl] .nav-links-list ul li a {
    padding: 15px 0
}

[dir=rtl] .logo {
    border-right: 0
}

[dir=rtl] .sil-kpi-container-item {
    border: none;
    border-left: 1px solid #dfdddb;
    width: 100%
}

[dir=rtl] .sil-kpi-container-item:last-child {
    border: none
}

[dir=rtl] .pm-title {
    max-width: 280px;
    line-height: 20px
}

[dir=rtl] .d-item-1 p span,
[dir=rtl] .d-item-2 p span,
[dir=rtl] .d-item-3 p span,
[dir=rtl] .d-item-4 p span {
    font-family: Tajawal, sans-serif;
    font-weight: 500
}

[dir=rtl] .team-panel-content .pbio {
    font-family: Tajawal, sans-serif
}

[dir=rtl] .hero-h1,
[dir=rtl] .f-cta-c h2,
[dir=rtl] .mm,
[dir=rtl] .oh2,
[dir=rtl] .or-h2,
[dir=rtl] .ov-mobile h2,
[dir=rtl] .panel-bio,
[dir=rtl] .h2-m,
[dir=rtl] .kpis-title-desc h3,
[dir=rtl] .sm-mobile-sec h2,
[dir=rtl] .sil-clients-mobile h2,
[dir=rtl] .team-panel-footer h3,
[dir=rtl] .cs-panel-closing,
[dir=rtl] .latest-news-row-1-content-1 h3,
[dir=rtl] .latest-news-row-2-item-1-content h3,
[dir=rtl] .case-studies-sil-mobile-item h3,
[dir=rtl] .h3-m,
[dir=rtl] .pm-mobile-header h2,
[dir=rtl] .sil-kpi-container-item-mobile-content p,
[dir=rtl] .org-mobile-header H2,
[dir=rtl] .approach-mobile h2,
[dir=rtl] .o-sec p,
[dir=rtl] .hs-mobile-content h2,
[dir=rtl] .rp-mobile-header h2,
[dir=rtl] .latest-news-row-1-content-1-mobile h3,
[dir=rtl] .latest-news-mobile h2,
[dir=rtl] .ovh3,
[dir=rtl] .latest-news-row-3-item-2-content h3,
[dir=rtl] .latest-news-row-3-item-1-content h3,
[dir=rtl] .tm-header-content h3,
[dir=rtl] .d-h3,
[dir=rtl] .o-sec p span,
[dir=rtl] .sil-clients h2,
[dir=rtl] .clients-content-1 span,
[dir=rtl] .p-3-closing,
[dir=rtl] .p-2-closing,
[dir=rtl] .p-1-closing,
[dir=rtl] .closing-h3,
[dir=rtl] .clients-content-1 h4,
[dir=rtl] .clients-content-2 h4,
[dir=rtl] .cs-title-tag .cs-panel-title,
[dir=rtl] .challenges-section__title,
[dir=rtl] .case-studies-content h3,
[dir=rtl] .tmm div h3 {
    font-family: Fustat, sans-serif
}

[dir=rtl] .d-item-1 {
    border: 1px solid #fff;
    min-height: 105px;
    padding: 15px 15px 0
}

[dir=rtl] .d-item-3 {
    border: 1px solid #fff;
    border-top-color: #dbdbdb;
    min-height: 105px;
    padding: 15px 15px 0
}

[dir=rtl] .clients-content-1 h4,
[dir=rtl] .clients-content-2 h4 {
    font-weight: 700
}

[dir=rtl] .d-item-4 {
    border: 1px solid #dbdbdb;
    border-color: #dbdbdb #dbdbdb #fff #fff;
    min-height: 105px;
    padding: 15px 15px 0
}

[dir=rtl] .d-item-2 {
    border: 1px solid #fff;
    border-right-color: #dbdbdb;
    min-height: 105px;
    padding: 15px 15px 0
}

[dir=rtl] .ll {
    position: absolute;
    top: 9px;
    right: 25px
}

[dir=rtl] .book-session-ng {
    font-family: Tajawal, sans-serif;
    position: absolute;
    top: 12%;
    left: 25px
}

[dir=rtl] .nav-links-list {
    justify-content: start;
    align-items: center;
    display: flex
}

[dir=rtl] .rp-p-n span,
[dir=rtl] .d-h4,
[dir=rtl] .ovh3 {
    font-weight: 600
}

[dir=ltr] .oh2 span {
    font-family: SourceSerifPro, serif
}

@media(max-width:1024px) {
    [dir=rtl] .hero-solutions {
        display: none
    }
}

[dir=rtl] .steps-modal-close {
    right: unset;
    left: 24px
}

[dir=rtl] .ll {
    left: auto;
    right: 0
}

[dir=rtl] header {
    padding: 14px 25px
}

[dir=rtl] .book-session-ng {
    left: 25px;
    right: auto
}

[dir=rtl] .fm-mail,
[dir=rtl] .tp-mail {
    border-left: 0;
    border-right: 1px solid #ff5c2f;
    flex-direction: column;
    padding-left: 0;
    padding-right: 15px;
    display: flex
}

.team-backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999999;
    background: #0006;
    transition: opacity .6s;
    display: none;
    position: fixed;
    inset: 0
}

.team-backdrop.open {
    display: block
}

.team-panel {
    z-index: 2147483647;
    background: #fff;
    width: 40%;
    height: 100vh;
    transition: right .3s;
    position: fixed;
    top: 0;
    right: -50%;
    overflow-y: auto;
    box-shadow: -4px 0 30px #00000026
}

.team-panel.open {
    right: 0
}

.team-panel-close {
    cursor: pointer;
    z-index: 2147483647;
    border: none;
    font-size: 20px
}

.team-panel-body {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    display: flex
}

.team-panel-body h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 20px;
    line-height: 27px
}

.team-panel-body .panel-role {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #ff5c2f;
    font-size: 16px;
    line-height: 22.18px
}

.team-panel-header {
    justify-content: space-between;
    align-items: start;
    margin-bottom: 25px;
    padding: 41px 59px 0;
    display: flex
}

.team-panel-header-content {
    border-bottom: 1px solid #eaebec;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    padding-bottom: 25px;
    display: flex
}

.team-panel-footer img {
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin-bottom: -57px;
    position: relative;
    bottom: 77px;
    left: 0
}

.team-panel-body .panel-bio {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    padding: 0 59px;
    font-size: 16px;
    line-height: 22px
}

.team-panel-footer {
    height: fi;
    background: #001d22;
    padding: 0 59px 76px;
    position: relative
}

.team-panel-footer h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #fff;
    margin-bottom: 40px;
    font-size: 28px;
    line-height: 32px
}

.tp-mail {
    border-left: 1px solid #ff5c2f;
    flex-direction: column;
    width: 100%;
    padding-left: 15px;
    display: flex
}

.tp-mail p,
.tp-mail a {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #fff;
    font-size: 14px;
    line-height: 22px
}

.tp-mail a:hover {
    color: #ff5c2f
}

.tm-a {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #fff;
    background: #ff5c2f;
    width: fit-content;
    padding: 12px 50px;
    font-size: 16px;
    line-height: 22px;
    transition: all .3s
}

.tm-a-div {
    margin-top: 40px
}

.tm-a:hover {
    color: #fff;
    background: #9b391e
}

.tm-header-content {
    flex-direction: column;
    gap: 5px;
    display: flex
}

@media(max-width:1340px) {
    .team-panel {
        width: 50%
    }
    .side-panel {
        width: 45%
    }
}

@media(max-width:1024px) {
    .team-panel {
        width: 100%;
        height: 100vh;
        right: -100%;
        overflow-y: scroll
    }
    .team-panel-header {
        margin-bottom: 0;
        padding: 25px
    }
    .tm-header-content {
        gap: 5px
    }
    .tm-header-content h3 {
        font-size: 20px;
        line-height: 24px
    }
    .team-panel-body .panel-role {
        font-size: 16px;
        line-height: 18px
    }
    .team-panel-body .panel-bio {
        padding: 0 25px;
        font-size: 14px;
        line-height: 20px
    }
    .team-panel-footer {
        padding: 0 25px 76px
    }
    .team-panel-footer h3 {
        font-size: 20px;
        line-height: 24px
    }
    .team-panel-mail {
        border-left: 1px solid #ff5c2f;
        padding-left: 15px
    }
    .team-panel-mail p,
    .team-panel-mail a {
        font-size: 14px;
        line-height: 22px
    }
    .tm-a {
        white-space: nowrap;
        width: 100%;
        padding: 12px 18px;
        font-size: 14px;
        line-height: 22px
    }
    .tm-a-div {
        margin-top: 40px
    }
    .team-panel-footer img {
        object-fit: cover;
        border: 3px solid #fff;
        border-radius: 50%;
        width: 150px;
        height: 150px;
        margin-bottom: -97px;
        position: relative;
        bottom: 131px;
        left: 0
    }
    .team-panel-footer {
        margin-top: 190px;
        padding: 50px 25px
    }
    header {
        padding: 16px 25px
    }
}

.kpis-title-desc p {
    width: 100%
}

@media(max-width:1024px) {
    .side-panel {
        width: 100%
    }
    header {
        padding: 16px 25px
    }
}

@media(max-width:1230px) {
    .nav-links-list {
        margin-left: 15px
    }
}

.team-img-profile {
    width: 124px;
    height: 124px
}

.quote-text {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #ff5c2f;
    font-size: 45px;
    line-height: 100%
}

.kpis-title-desc {
    gap: 25px;
    display: flex
}

.kpis-title-desc h3 {
    width: 45%;
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    font-size: 20px;
    line-height: 25px
}

.kpis-title-desc p {
    width: 55%;
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    font-size: 14px;
    line-height: 20px
}

.sil-kpi-container {
    justify-content: space-between;
    gap: 60px;
    margin-top: 62px;
    display: flex
}

.sil-kpi-container-item {
    border-right: 1px solid #dfdddb;
    width: 100%
}

.sil-kpi-container-item:last-child {
    border-right: none
}

.sil-kpi-container-item-content h4 {
    font-family: Merriweather;
    font-weight: 700;
    font-style: Bold;
    leading-trim: NONE;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #001e23;
    font-size: 52.36px;
    line-height: 100%
}

.sil-kpi-container-item-content p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 14.64px;
    line-height: 26.84px
}

.sil-kpi-value-4-since {
    font-family: Tajawal;
    font-weight: 700;
    font-style: Bold;
    leading-trim: NONE;
    letter-spacing: 0%;
    font-size: 33.42px;
    line-height: 100%
}

@media(max-width:1024px) {
    .kpis-title-desc {
        flex-direction: column;
        display: flex
    }
    .kpis-title-desc h3 {
        width: 100%;
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        font-size: 20px;
        line-height: 25px
    }
    .kpis-title-desc p {
        width: 100%
    }
    .sil-kpi-container-mobile {
        flex-direction: column;
        margin-top: 37px;
        display: flex
    }
    .sil-kpi-container-item-mobile {
        border-bottom: 1px solid #dfdddb;
        justify-content: space-between;
        width: 100%;
        display: flex
    }
    .sil-kpi-container-item-mobile:last-child {
        border: none;
        margin-bottom: 0;
        padding-bottom: 0
    }
    .sil-kpi-container-item-mobile-content {
        text-align: center;
        border-left: 1px solid #dfdddb;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 100%;
        padding: 25px;
        display: flex
    }
    .sil-kpi-container-item-mobile-content:first-child {
        border-left: none
    }
    .sil-kpi-container-item-mobile-content h4 {
        font-family: Merriweather;
        font-weight: 700;
        font-style: Bold;
        leading-trim: NONE;
        letter-spacing: 0%;
        vertical-align: middle;
        color: #001e23;
        font-size: 45px;
        line-height: 48px
    }
    .sil-kpi-container-item-mobile-content p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        text-align: center;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #68777a;
        max-width: 116px;
        font-size: 14px;
        line-height: 22px;
        width: 100% !important
    }
}

.challenges-section {
    background: #f4f4f4;
    padding: 80px 0
}

.challenges-section__header h2 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 28px;
    line-height: 100%
}

.challenges-section__content {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 55px;
    display: grid
}

.challenges-section__results {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 18px;
    display: grid
}

.challenges-section__item {
    background: #fff;
    padding: 37px 28px
}

.challenges-section__result {
    background: #fff;
    padding: 24px 28px
}

.challenges-section__item-title {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    margin-bottom: 11px;
    font-size: 20px;
    line-height: 27px
}

.challenges-section__item-description {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    border-bottom: 1px solid #dfdddb;
    max-width: 270px;
    margin-bottom: 21px;
    padding-bottom: 22px;
    font-size: 14px;
    line-height: 19px
}

.challenges-section__item-description_2 {
    font-family: SourceSerifPro;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 16px;
    line-height: 20px
}

.challenges-section__result-title {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 20px
}

.challenges-section__result-description {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    font-size: 14px;
    line-height: 20px
}

.eq-wrap {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 53px;
    display: grid;
    position: relative
}

.eq-item {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    display: flex
}

.eq-label {
    font-family: Roboto;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    font-size: 24px;
    line-height: 31.5px
}

.eq-plus-1 {
    color: #aaa;
    margin-top: 32px;
    font-size: 22px;
    position: absolute;
    top: 38%;
    left: 31%
}

.eq-plus-2 {
    color: #aaa;
    margin-top: 32px;
    font-size: 22px;
    position: absolute;
    top: 38%;
    left: 65.5%
}

.circle-wrap {
    width: 280px;
    height: 280px;
    position: relative
}

.circle-wrap svg {
    transform: rotate(-90deg)
}

.circle-center {
    font-family: Roboto;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    color: #001e23;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20.16px;
    line-height: 26.46px;
    display: flex;
    position: absolute;
    inset: 0
}

.pct {
    color: #888;
    margin-top: 4px;
    font-size: 11px
}

.eq-orange {
    color: #ff5c2f
}

.eq-yellow {
    color: #e2b44c
}

.equations-results {
    background: #fefcfa;
    justify-content: center;
    align-items: center;
    padding: 31px 25px;
    display: flex
}

.eq-res-wrap {
    align-items: center;
    gap: 104px;
    display: flex
}

.eq-res-wrap h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    text-align: center;
    color: #001e23;
    font-size: 24px;
    line-height: 27px
}

.closing-p-sil {
    font-family: SourceSerifPro;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    text-align: center;
    color: #001e23;
    gap: 0;
    max-width: 412px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 22px
}

.p-3-closing,
.p-2-closing,
.p-1-closing {
    font-family: SourceSerifPro, serif;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 18px;
    line-height: 24px
}

.p-2-closing {
    color: #ff5c2f
}

.closing-p-cdr {
    font-family: SourceSerifPro;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    gap: 0;
    margin: 0 auto;
    font-size: 16px;
    line-height: 22px
}

.highlight_closing {
    color: #ff5c2f;
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    font-size: 16px;
    line-height: 100%
}

.approach-sil {
    background: #f2f6f7;
    padding: 80px 0
}

.approach-sil-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 33px;
    margin-top: 49px;
    display: grid
}

.approach-sil-item {
    background: #fff;
    border: 1px solid #0000;
    padding: 35px 30px;
    position: relative
}

.approach-sil-item:hover {
    border: 1px solid #dfdddb
}

.approach-sil-item-total {
    background: #fff;
    border: 1px solid #0000;
    padding: 10px;
    position: relative
}

.approach-sil-item-total:hover .approach-sil-item-total-content {
    border: 1px solid #ff5c2f42
}

.approach-sil-item-total-content {
    background: #f9f1ea;
    border: 1px solid #0000;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 27px 21px;
    display: flex
}

.approach-sil-item-total-content h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    margin-bottom: 5px;
    font-size: 26px;
    line-height: 100%
}

.approach-sil-item-total-content h4 {
    font-family: Roboto;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #ff5c2f;
    font-size: 16.04px;
    line-height: 22.06px
}

.approach-sil-item-total-content p {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #1f2425;
    border-bottom: 1px solid #e9e4e1;
    margin-bottom: 15px;
    padding-bottom: 35px;
    font-size: 16px;
    line-height: 22.06px
}

.approach-sil-item h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    z-index: 3;
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 100%;
    position: relative
}

.approach-sil-item p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    z-index: 3;
    border-bottom: 1px solid #e1e6e9;
    max-width: 165px;
    margin-bottom: 17px;
    padding-bottom: 17px;
    font-size: 16px;
    line-height: 22px;
    position: relative
}

.approach-d {
    font-family: Roboto;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 16px;
    line-height: 22px
}

.a-sil-num {
    font-family: Merriweather;
    font-weight: 700;
    font-style: Bold;
    leading-trim: NONE;
    letter-spacing: -2%;
    text-align: right;
    vertical-align: middle;
    color: #f2f6f7;
    z-index: 2;
    font-size: 90px;
    line-height: 100%;
    position: absolute;
    top: 15px;
    right: 28px
}

.case-studies-sil {
    padding: 80px 0
}

.case-studies-sil-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
    margin-top: 49px;
    display: grid
}

.case-studies-sil-item {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
    display: grid
}

.case-studies-content {
    flex-direction: column;
    justify-content: space-between;
    display: flex
}

.case-studies-content h4 {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 17.18px
}

.case-studies-content h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 18px;
    line-height: 21.7px
}

[dir=rtl] .case-studies-content a:after {
    content: "";
    background-color: #ff5c2f;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: auto;
    right: 0
}

.case-studies-content a {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    border-bottom: 1px solid #efefef;
    align-items: center;
    gap: 13px;
    width: fit-content;
    padding-bottom: 11px;
    font-size: 14px;
    line-height: 100%;
    display: flex;
    position: relative
}

.case-studies-content a:after {
    content: "";
    background-color: #f26940;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: 0
}

.case-studies-content a:hover:after {
    width: 100%
}

[dir=rtl] .approach-sil-item {
    position: relative
}

[dir=rtl] .a-sil-num {
    color: #f2f6f7;
    z-index: 2;
    font-family: Tajawal, sans-serif;
    font-size: 90px;
    font-weight: 700;
    line-height: 100%;
    position: absolute;
    top: 15px;
    left: 15px;
    right: auto
}

.latest-news {
    border-top: 1px solid #dfdddb;
    margin-bottom: 62px;
    padding-top: 80px
}

.latest-news-header h2 {
    margin-bottom: 52px
}

.latest-news-grid {
    flex-direction: column;
    gap: 22px;
    display: flex
}

.latest-news-row-1,
.latest-news-row-2 {
    gap: 22px;
    display: flex
}

.latest-news-row-1-img-1 {
    width: 55%
}

.latest-news-row-1-content-1 {
    background: #001d22;
    width: 45%;
    padding: 41px 39px
}

.latest-news-row-1-content-1 span {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #f26940;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 26px
}

.latest-news-row-1-content-1 h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #fff;
    margin-bottom: 20px;
    font-size: 22px;
    line-height: 26px
}

.latest-news-row-1-content-1 p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #a0aeb1;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 19px
}

.latest-news-row-1-content-1 a {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #fff;
    border-bottom: 1px solid #f7f7f721;
    align-items: center;
    gap: 13px;
    width: fit-content;
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 100%;
    display: flex;
    position: relative
}

.latest-news-row-1-content-1 a:after {
    content: "";
    background-color: #fff;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: 0
}

[dir=rtl] .latest-news-row-1-content-1 a:after {
    content: "";
    background-color: #fff;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: auto;
    right: 0
}

.latest-news-row-1-content-1 a:hover:after {
    width: 100%
}

.latest-news-row-2-item-1 {
    gap: 22px;
    width: 55%;
    display: flex
}

.latest-news-row-2-item-1-img {
    width: 50%;
    height: 100%
}

.latest-news-row-2-item-1-img img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.latest-news-row-2-item-1-content {
    color: #001e23;
    background: #ffb19a;
    width: 50%;
    padding: 32px 31px
}

.latest-news-row-2-item-1-content span {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 26px
}

.latest-news-row-2-item-1-content h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    margin-bottom: 17px;
    font-size: 22px;
    line-height: 26px
}

.latest-news-row-2-item-1-content p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    margin-bottom: 21px;
    font-size: 14px;
    line-height: 19px
}

.latest-news-row-2-item-1-content a {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    color: #001e23;
    letter-spacing: 0%;
    border-bottom: 1px solid #f7f7f721;
    align-items: center;
    gap: 13px;
    width: fit-content;
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 100%;
    display: flex;
    position: relative
}

[dir=rtl] .latest-news-row-2-item-1-content a:after {
    content: "";
    background-color: #001e23;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: auto;
    right: 0
}

.latest-news-row-2-item-1-content a:after {
    content: "";
    background-color: #001e23;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: 0
}

.latest-news-row-2-item-1-content a:hover:after {
    width: 100%
}

.latest-news-row-2-item-2 {
    width: 45%
}

.latest-news-row-2-item-2 img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.latest-news-row-3 {
    gap: 22px;
    display: flex
}

.latest-news-row-3-item-1 {
    flex-direction: column;
    justify-content: space-between;
    width: 55%;
    display: flex
}

.latest-news-row-3-item-2 {
    flex-direction: column;
    justify-content: space-between;
    width: 45%;
    display: flex
}

.latest-news-row-3-item-2 span,
.latest-news-row-3-item-1 span {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 26px
}

.latest-news-row-3-item-2 h3,
.latest-news-row-3-item-1 h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    margin-bottom: 17px;
    font-size: 22px;
    line-height: 26px
}

.latest-news-row-3-item-2 p,
.latest-news-row-3-item-1 p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 19px
}

.latest-news-row-3-item-2 a,
.latest-news-row-3-item-1 a {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    border-bottom: 1px solid #efefef;
    align-items: center;
    gap: 13px;
    width: fit-content;
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 100%;
    display: flex;
    position: relative
}

[dir=rtl] .latest-news-row-3-item-2 a:after,
.latest-news-row-3-item-1 a:after {
    content: "";
    background-color: #ff5c2f;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: auto;
    right: 0
}

.latest-news-row-3-item-2 a:after,
.latest-news-row-3-item-1 a:after {
    content: "";
    background-color: #ff5c2f;
    width: 0;
    height: 1px;
    transition: width .5s;
    position: absolute;
    bottom: -1px;
    left: 0
}

.latest-news-row-3-item-2 a:hover:after,
.latest-news-row-3-item-1 a:hover:after {
    width: 100%
}

.sil-clients {
    background: #f2f6f7;
    padding: 80px 0 93px
}

.sil-clients h2 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    margin-bottom: 52px;
    font-size: 28px;
    line-height: 100%
}

.clients-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 18px;
    display: grid
}

.clients-grid img {
    border: 1px solid #0000;
    width: 150px;
    height: 75px
}

.clients-grid img:hover {
    border: 1px solid #dfdddb
}

.clients-content-1 span {
    font-family: Source Serif Pro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #ff5c2f;
    max-width: 21px;
    font-size: 50px;
    line-height: 100%
}

.clients-content-2 span {
    width: 100%;
    max-width: 21px
}

.clients-content-2 p:first-child,
.clients-content-1 p:first-child {
    font-family: SourceSerifPro;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 26px
}

.clients-content-1 p:first-child {
    margin-top: 20px
}

.clients-content-2 p:last-child,
.clients-content-1 p:last-child {
    font-family: Roboto;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 14px;
    line-height: 20px
}

.clients-content-1 {
    border-bottom: 1px solid #dfdddb;
    gap: 34px;
    margin-top: 46px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    display: flex
}

.clients-content-2 {
    gap: 34px;
    display: flex
}

.approach-mobile,
.approach-mobile-total {
    display: none
}

@media(max-width:1024px) {
    .our-solutions,
    .case-studies-sil,
    .latest-news,
    .sil-clients,
    .approach-sil,
    .challenges-section {
        display: none
    }
    .challenge-equation-img {
        width: 100%;
        margin: 32px auto 41px
    }
    .challenge-equation-img img {
        width: 50%;
        margin: 0 auto
    }
    .equations-results-mobile {
        background: #fefcfa;
        padding: 31px 46px
    }
    .eq-res-wrap-mobile {
        align-items: center;
        gap: 26px;
        display: flex
    }
    .eq-res-wrap-mobile h3 {
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        text-align: center;
        color: #001e23;
        font-size: 20px;
        line-height: 24px
    }
    .approach-mobile {
        background: #f2f6f7;
        margin-top: 38px;
        padding: 45px 27px;
        display: block
    }
    .approach-mobile h2 {
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        margin-bottom: 38px;
        font-size: 20px;
        line-height: 24px
    }
    .approach-mobile-content {
        flex-direction: column;
        gap: 24px;
        display: flex
    }
    .approach-mobile-item {
        background: #fefcfa;
        flex-direction: column;
        padding: 16px 18px;
        display: flex;
        position: relative
    }
    .approach-mobile-item-h {
        justify-content: space-between;
        align-items: center;
        display: flex
    }
    .approach-mobile-item-h h4 {
        font-family: Merriweather;
        font-weight: 700;
        font-style: Bold;
        leading-trim: NONE;
        letter-spacing: -2%;
        vertical-align: middle;
        color: #001e23;
        font-size: 64px;
        line-height: 100%
    }
    .approach-mobile-item-h p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        text-align: right;
        color: #68777a;
        border-bottom: 1px solid #e1e6e9;
        max-width: 151px;
        padding-bottom: 25px;
        font-size: 14px;
        line-height: 22px
    }
    .approach-mobile-item-b {
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        display: flex
    }
    .approach-mobile-item-b h3 {
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        font-size: 16px;
        line-height: 100%
    }
    .approach-mobile-item-b h4 {
        font-family: Roboto;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: 0%;
        text-align: right;
        vertical-align: middle;
        color: #001e23;
        font-size: 14px;
        line-height: 22px
    }
    .approach-mobile-total {
        padding: 30px 27px;
        display: block
    }
    .approach-mobile-item-total {
        background: #f9f1ea;
        padding: 22px 21px
    }
    .approach-mobile-item-total h3 {
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        margin-bottom: 9px;
        font-size: 26px;
        line-height: 100%
    }
    .approach-mobile-item-total p {
        font-family: Roboto;
        font-weight: 500;
        font-style: Medium;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #1f2425;
        border-bottom: 1px solid #e9e4e1;
        margin-bottom: 14px;
        padding-bottom: 31px;
        font-size: 16px;
        line-height: 22.06px
    }
    .approach-mobile-item-total h4 {
        font-family: Roboto;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: 0%;
        text-align: right;
        color: #ff5c2f;
        font-size: 16.04px;
        line-height: 22.06px
    }
}

.clients-content-p h4 {
    color: #001e23;
    font-family: Roboto;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: 0%;
    font-size: 14px;
    line-height: 20px
}

.cs-backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999999;
    background: #0006;
    transition: opacity .6s;
    display: none;
    position: fixed;
    inset: 0
}

.cs-backdrop.open {
    opacity: 1;
    display: block
}

.cs-panel {
    z-index: 99999999;
    background: #fff;
    flex-direction: column;
    width: 42%;
    height: 100vh;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    overflow-y: auto;
    transform: translate(100%)
}

.cs-panel.open {
    transform: translate(0)
}

.cs-panel-inner {
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    padding: 41px 59px;
    display: flex
}

.cs-panel-close {
    color: #fff9;
    cursor: pointer;
    background: 0 0;
    border: none;
    align-self: flex-end;
    margin-top: 8px;
    font-size: 20px;
    line-height: 1
}

.cs-panel-close:hover {
    color: #fff
}

.cs-panel-img {
    object-fit: cover;
    width: 100%;
    height: auto
}

.cs-panel-tag {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #ff5c2f;
    font-size: 16px;
    line-height: 22.18px
}

.cs-panel-header .cs-panel-title {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    font-size: 20px;
    line-height: 27px
}

.cs-panel-desc {
    letter-spacing: 0%;
    color: #68777a;
    border-bottom: 1px solid #eaebec;
    padding-bottom: 21px;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px
}

.cs-panel-bullets {
    background: #f4f4f4;
    flex-direction: column;
    gap: 12px;
    padding: 36px 25px;
    display: flex
}

.cs-panel-header {
    flex-direction: column;
    gap: 25px;
    margin-bottom: 25px;
    display: flex
}

.cs-panel-bullet {
    font-family: SourceSerifPro;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: -2%;
    align-items: center;
    gap: 22px;
    font-size: 16px;
    line-height: 19px;
    display: flex
}

.cs-t {
    background-color: #001e23;
    width: 26px;
    min-width: 26px;
    height: 1px
}

.cs-title-tag {
    flex-direction: column;
    display: flex
}

.cs-title-tag .cs-panel-tag {
    margin-bottom: 7px
}

.cs-h4 {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001e23;
    font-size: 16px;
    line-height: 22px
}

.cs-closing-highlight {
    color: #e8501a;
    font-style: normal;
    font-weight: 500
}

.cs-panel-closing {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    font-size: 18px;
    line-height: 25px
}

.case-studies-mobile {
    margin-top: 29px
}

.case-studies-sil-container-mobile {
    flex-direction: column;
    gap: 60px;
    margin-top: 26px;
    display: flex
}

.case-studies-sil-mobile-item {
    width: 100%
}

.case-studies-sil-mobile-item img {
    width: 100%;
    height: 200px
}

.case-studies-sil-mobile-item h4 {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    margin: 21px 0 10px;
    font-size: 14px;
    line-height: 17.18px
}

.case-studies-sil-mobile-item h3 {
    font-family: SourceSerifPro;
    font-weight: 600;
    font-style: SemiBold;
    leading-trim: NONE;
    letter-spacing: -2%;
    color: #001e23;
    margin-bottom: 23px;
    font-size: 18px;
    line-height: 21.7px
}

.case-studies-sil-mobile-item a {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    width: fit-content;
    letter-spacing: 0%;
    color: #001e23;
    background: #f5f5f5;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 10px 15px;
    font-size: 12px;
    line-height: 100%;
    display: flex
}

.case-studies-sil-mobile-item a img {
    width: 16px;
    height: 10px;
    margin-top: 0
}

.latest-news-mobile,
.sil-clients-mobile,
.case-studies-mobile {
    display: none
}

@media(max-width:1024px) {
    .cs-panel {
        width: 100%
    }
    .cs-panel-tag {
        font-family: Roboto;
        font-weight: 500;
        font-style: Medium;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #ff5c2f;
        font-size: 16px;
        line-height: 22px
    }
    .cs-panel-header .cs-panel-title {
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        font-size: 24px;
        line-height: 26px
    }
    .cs-panel-inner {
        flex-direction: column;
        gap: 10px;
        height: 100%;
        padding: 25px;
        display: flex
    }
    .cs-h4 {
        font-family: Roboto;
        font-weight: 400;
        font-style: Medium;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #001e23;
        margin-top: 20px;
        font-size: 16px;
        line-height: 26px
    }
    .cs-panel-bullets {
        background: #f4f4f4;
        flex-direction: column;
        gap: 12px;
        padding: 25px;
        display: flex
    }
    .case-studies-mobile {
        margin-bottom: 35px;
        display: block
    }
    .latest-news-mobile {
        z-index: 999999;
        background: #001d22;
        margin-top: 55px;
        padding: 52px 25px;
        display: block;
        position: relative
    }
    .latest-news-mobile h2 {
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #fff;
        margin-bottom: 38px;
        font-size: 20px;
        line-height: 24px
    }
    .team-cdr-header h2 {
        max-width: none
    }
    .case-studies-mobile h2 {
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        font-size: 20px;
        line-height: 24px
    }
    .latest-news-row-1-content-1-mobile {
        margin-top: 27px
    }
    .latest-news-row-2-mobile-date,
    .latest-news-row-1-content-1-mobile span {
        font-family: Roboto;
        font-weight: 500;
        font-style: Medium;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #f26940;
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 26px
    }
    .latest-news-row-2-mobile-title,
    .latest-news-row-1-content-1-mobile h3 {
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #fff;
        margin-bottom: 12px;
        font-size: 18px;
        line-height: 23px
    }
    .latest-news-row-2-mobile-desc,
    .latest-news-row-1-content-1-mobile p {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #a0aeb1;
        margin-bottom: 33px;
        font-size: 14px;
        line-height: 19px
    }
    .latest-news-row-2-mobile-read-more,
    .latest-news-row-1-content-1-mobile a {
        width: fit-content;
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        leading-trim: NONE;
        letter-spacing: 0%;
        color: #fff;
        background: #f5f5f52e;
        justify-content: center;
        align-items: center;
        gap: 18px;
        padding: 16px 32px;
        font-size: 12px;
        line-height: 100%;
        display: flex
    }
    .latest-news-row-2-mobile-img {
        margin-bottom: 32px
    }
    .latest-news-row-2-mobile {
        margin-top: 68px
    }
    .latest-news-row-2-mobile-3 {
        border-top: 1px solid #dfdddb36;
        margin-top: 32px;
        margin-bottom: 68px;
        padding-top: 32px
    }
    .latest-news-row-2-mobile-4-img {
        margin-bottom: 26px
    }
    .sil-clients-mobile {
        background: #f2f6f7;
        padding: 57px 27px;
        display: block
    }
    .sil-clients-mobile h2 {
        font-family: SourceSerifPro;
        font-weight: 600;
        font-style: SemiBold;
        leading-trim: NONE;
        letter-spacing: -2%;
        color: #001e23;
        font-size: 20px;
        line-height: 24px
    }
    .clients-grid-mobile {
        grid-template-columns: repeat(2, 1fr);
        gap: 17px;
        margin-top: 49px;
        display: grid
    }
    .clients-content-1 {
        flex-direction: column;
        gap: 0;
        display: flex
    }
    .clients-content-2 {
        flex-direction: column;
        display: flex
    }
    .clients-content-p p {
        border-bottom: 1px solid #dfdddb;
        margin-bottom: 25px;
        padding-bottom: 25px
    }
    .clients-content-2 span {
        display: none
    }
    .clients-content-1 {
        border: none;
        margin-bottom: 0
    }
}

.why-us-section {
    position: relative;
    overflow: hidden
}

.why-us-section .why-us-p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #001d22;
    font-size: 16px;
    line-height: 22px
}

.why-us-section video {
    object-fit: cover;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.why-us-section .container {
    z-index: 1;
    position: relative
}

.why-us-section:after {
    content: "";
    z-index: 0;
    background: linear-gradient(#fefcfabf, #001d22bf);
    position: absolute;
    inset: 0
}

.why-us-section .container {
    z-index: 2
}

[dir=rtl] .hero-saudi-industrial {
    background-image: url(https://b2g-consulting.com/solutions/branding/hero-imgs/b2g-saudi-industrial-localization-ar-hero.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    height: 70vh;
    max-height: 416px;
    display: flex;
    position: relative
}

@media(max-width:1024px) {
    [dir=rtl] .hero-saudi-industrial {
        display: none
    }
}

@media(max-width:1280px) {
    .roles-pressures-left {
        padding-top: 35px
    }
}

.oh2-o-weight {
    font-weight: 600
}

.oh2-o-weight-400 {
    font-weight: 400
}

.oh2-o-weight-600 {
    font-weight: 600
}

.ov-mobile-li {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #68777a;
    align-items: start;
    gap: 15px;
    font-size: 14px;
    line-height: 22px;
    display: flex
}

.video-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden
}

.video-wrapper video {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.video-fade {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    background: #fff;
    transition: opacity 50ms linear;
    position: absolute;
    inset: 0
}

@media(max-width:1600px) {
    [dir=rtl] .ll {
        top: 18px
    }
}

.pm-mobile {
    display: none
}

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

.sil-mobile-panel {
    display: none
}

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

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

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

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

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

@property --tw-tracking {
    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-backdrop-blur {
    syntax: "*";
    inherits: false
}

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

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

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

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

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

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

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

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

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

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