/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *,:before,:after,::backdrop {
            --tw-translate-x:0;
            --tw-translate-y:0;
            --tw-translate-z:0;
            --tw-rotate-x:initial;
            --tw-rotate-y:initial;
            --tw-rotate-z:initial;
            --tw-skew-x:initial;
            --tw-skew-y:initial;
            --tw-border-style:solid;
            --tw-font-weight:initial;
            --tw-shadow:0 0 #0000;
            --tw-shadow-color:initial;
            --tw-shadow-alpha:100%;
            --tw-inset-shadow:0 0 #0000;
            --tw-inset-shadow-color:initial;
            --tw-inset-shadow-alpha:100%;
            --tw-ring-color:initial;
            --tw-ring-shadow:0 0 #0000;
            --tw-inset-ring-color:initial;
            --tw-inset-ring-shadow:0 0 #0000;
            --tw-ring-inset:initial;
            --tw-ring-offset-width:0px;
            --tw-ring-offset-color:#fff;
            --tw-ring-offset-shadow:0 0 #0000;
            --tw-blur:initial;
            --tw-brightness:initial;
            --tw-contrast:initial;
            --tw-grayscale:initial;
            --tw-hue-rotate:initial;
            --tw-invert:initial;
            --tw-opacity:initial;
            --tw-saturate:initial;
            --tw-sepia:initial;
            --tw-drop-shadow:initial;
            --tw-drop-shadow-color:initial;
            --tw-drop-shadow-alpha:100%;
            --tw-drop-shadow-size:initial;
            --tw-content:"";
            --tw-duration: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-gray-800:oklch(27.8% .033 256.848);
        --color-white:#fff;
        --spacing:.25rem;
        --container-4xl:56rem;
        --text-xs:.75rem;
        --text-xs--line-height:calc(1/.75);
        --text-sm:.875rem;
        --text-sm--line-height:calc(1.25/.875);
        --text-base:1rem;
        --text-base--line-height:calc(1.5/1);
        --text-lg:1.125rem;
        --text-lg--line-height:calc(1.75/1.125);
        --text-xl:1.25rem;
        --text-xl--line-height:calc(1.75/1.25);
        --text-2xl:1.5rem;
        --text-2xl--line-height:calc(2/1.5);
        --font-weight-light:300;
        --font-weight-normal:400;
        --font-weight-medium:500;
        --font-weight-semibold:600;
        --font-weight-bold:700;
        --radius-sm:.25rem;
        --radius-xl:.75rem;
        --radius-3xl:1.5rem;
        --radius-4xl:2rem;
        --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;
        -webkit-text-decoration:inherit;
        -webkit-text-decoration:inherit;
        text-decoration:inherit
    }
    b,strong {
        font-weight:bolder
    }
    code,kbd,samp,pre {
        font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
        font-feature-settings:var(--default-mono-font-feature-settings,normal);
        font-variation-settings:var(--default-mono-font-variation-settings,normal);
        font-size:1em
    }
    small {
        font-size:80%
    }
    sub,sup {
        vertical-align:baseline;
        font-size:75%;
        line-height:0;
        position:relative
    }
    sub {
        bottom:-.25em
    }
    sup {
        top:-.5em
    }
    table {
        text-indent:0;
        border-color:inherit;
        border-collapse:collapse
    }
    :-moz-focusring {
        outline:auto
    }
    progress {
        vertical-align:baseline
    }
    summary {
        display:list-item
    }
    ol,ul,menu {
        list-style:none
    }
    img,svg,video,canvas,audio,iframe,embed,object {
        vertical-align:middle;
        display:block
    }
    img,video {
        max-width:100%;
        height:auto
    }
    button,input,select,optgroup,textarea {
        font:inherit;
        font-feature-settings:inherit;
        font-variation-settings:inherit;
        letter-spacing:inherit;
        color:inherit;
        opacity:1;
        background-color:#0000;
        border-radius:0
    }
    ::file-selector-button {
        font:inherit;
        font-feature-settings:inherit;
        font-variation-settings:inherit;
        letter-spacing:inherit;
        color:inherit;
        opacity:1;
        background-color:#0000;
        border-radius:0
    }
    :where(select:is([multiple],[size])) optgroup {
        font-weight:bolder
    }
    :where(select:is([multiple],[size])) optgroup option {
        padding-inline-start:20px
    }
    ::file-selector-button {
        margin-inline-end:4px
    }
    ::placeholder {
        opacity:1
    }
    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color:currentColor
        }
        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color:color-mix(in oklab,currentcolor 50%,transparent)
            }

        }

    }
    textarea {
        resize:vertical
    }
    ::-webkit-search-decoration {
        -webkit-appearance:none
    }
    ::-webkit-date-and-time-value {
        min-height:1lh;
        text-align:inherit
    }
    ::-webkit-datetime-edit {
        display:inline-flex
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding:0
    }
    ::-webkit-datetime-edit {
        padding-block:0
    }
    ::-webkit-datetime-edit-year-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-month-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-day-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-hour-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-minute-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-second-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0
    }
    :-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 {
    .visible {
        visibility:visible
    }
    .absolute {
        position:absolute
    }
    .relative {
        position:relative
    }
    .inset-0 {
        inset:calc(var(--spacing)*0)
    }
    .inset-5 {
        inset:calc(var(--spacing)*5)
    }
    .-top-11 {
        top:calc(var(--spacing)*-11)
    }
    .top-9 {
        top:calc(var(--spacing)*9)
    }
    .top-\[calc\(100\%\+18px\)\] {
        top:calc(100% + 18px)
    }
    .top-full {
        top:100%
    }
    .right-0 {
        right:calc(var(--spacing)*0)
    }
    .right-3 {
        right:calc(var(--spacing)*3)
    }
    .bottom-15 {
        bottom:calc(var(--spacing)*15)
    }
    .-left-\[7px\] {
        left:-7px
    }
    .left-0 {
        left:calc(var(--spacing)*0)
    }
    .left-7 {
        left:calc(var(--spacing)*7)
    }
    .z-10 {
        z-index:10
    }
    .order-1 {
        order:1
    }
    .container {
        width:100%
    }
    @media (min-width:40rem) {
        .container {
            max-width:40rem
        }

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

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

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

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

    }
    .m-auto {
        margin:auto
    }
    .mx-auto {
        margin-inline:auto
    }
    .my-\[2px\] {
        margin-block:2px
    }
    .mt-1 {
        margin-top:calc(var(--spacing)*1)
    }
    .mt-3 {
        margin-top:calc(var(--spacing)*3)
    }
    .mt-4 {
        margin-top:calc(var(--spacing)*4)
    }
    .mt-5 {
        margin-top:calc(var(--spacing)*5)
    }
    .mt-6 {
        margin-top:calc(var(--spacing)*6)
    }
    .mt-8 {
        margin-top:calc(var(--spacing)*8)
    }
    .mt-10 {
        margin-top:calc(var(--spacing)*10)
    }
    .mt-14 {
        margin-top:calc(var(--spacing)*14)
    }
    .mt-15 {
        margin-top:calc(var(--spacing)*15)
    }
    .mt-\[26px\] {
        margin-top:26px
    }
    .mt-\[30px\] {
        margin-top:30px
    }
    .mt-auto {
        margin-top:auto
    }
    .mb-1 {
        margin-bottom:calc(var(--spacing)*1)
    }
    .mb-2 {
        margin-bottom:calc(var(--spacing)*2)
    }
    .mb-3 {
        margin-bottom:calc(var(--spacing)*3)
    }
    .mb-3\.5 {
        margin-bottom:calc(var(--spacing)*3.5)
    }
    .mb-4 {
        margin-bottom:calc(var(--spacing)*4)
    }
    .mb-5 {
        margin-bottom:calc(var(--spacing)*5)
    }
    .mb-6 {
        margin-bottom:calc(var(--spacing)*6)
    }
    .mb-7 {
        margin-bottom:calc(var(--spacing)*7)
    }
    .mb-8 {
        margin-bottom:calc(var(--spacing)*8)
    }
    .mb-9 {
        margin-bottom:calc(var(--spacing)*9)
    }
    .mb-10 {
        margin-bottom:calc(var(--spacing)*10)
    }
    .mb-13 {
        margin-bottom:calc(var(--spacing)*13)
    }
    .mb-15 {
        margin-bottom:calc(var(--spacing)*15)
    }
    .mb-\[30px\] {
        margin-bottom:30px
    }
    .ml-auto {
        margin-left:auto
    }
    .block {
        display:block
    }
    .flex {
        display:flex
    }
    .grid {
        display:grid
    }
    .hidden {
        display:none
    }
    .inline-block {
        display:inline-block
    }
    .inline-flex {
        display:inline-flex
    }
    .aspect-\[1\.36\/1\] {
        aspect-ratio:1.36
    }
    .aspect-\[511\/385\] {
        aspect-ratio:511/385
    }
    .aspect-square {
        aspect-ratio:1
    }
    .h-2 {
        height:calc(var(--spacing)*2)
    }
    .h-3\.5 {
        height:calc(var(--spacing)*3.5)
    }
   .h-4 {
        height:calc(var(--spacing)*4)
    }
    .h-5 {
        height:calc(var(--spacing)*5)
    }
    .h-8 {
        height:calc(var(--spacing)*8)
    }
    .h-8\.5 {
        height:calc(var(--spacing)*8.5)
    }
    .h-10 {
        height:calc(var(--spacing)*10)
    }
    .h-\[19px\] {
        height:19px
    }
    .h-auto {
        height:auto
    }
    .h-fit {
        height:fit-content
    }
    .h-full {
        height:100%
    }
    .min-h-5 {
        min-height:calc(var(--spacing)*5)
    }
    .min-h-\[calc\(100vh-95px\)\] {
        min-height:calc(100vh - 95px)
    }
    .w-2 {
        width:calc(var(--spacing)*2)
    }
    .w-5 {
        width:calc(var(--spacing)*5)
    }
    .w-8 {
        width:calc(var(--spacing)*8)
    }
    .w-10 {
        width:calc(var(--spacing)*10)
    }
    .w-15 {
        width:calc(var(--spacing)*15)
    }
    .w-41\.5 {
        width:calc(var(--spacing)*41.5)
    }
    .w-\[17px\] {
        width:17px
    }
    .w-\[110px\] {
        width:110px
    }
    .w-\[min\(560px\,100\%\)\] {
        width:min(560px,100%)
    }
    .w-fit {
        width:fit-content
    }
    .w-full {
        width:100%
    }
    .max-w-4xl {
        max-width:var(--container-4xl)
    }
    .max-w-30 {
        max-width:calc(var(--spacing)*30)
    }
    .max-w-39 {
        max-width:calc(var(--spacing)*39)
    }
    .max-w-90 {
        max-width:calc(var(--spacing)*90)
    }
    .max-w-115 {
        max-width:calc(var(--spacing)*115)
    }
    .max-w-\[95\%\] {
        max-width:95%
    }
    .max-w-\[166px\] {
        max-width:166px
    }
    .max-w-\[254px\] {
        max-width:254px
    }
    .max-w-\[308px\] {
        max-width:308px
    }
    .max-w-\[340px\] {
        max-width:340px
    }
    .max-w-\[376px\] {
        max-width:376px
    }
    .max-w-\[413px\] {
        max-width:413px
    }
    .max-w-\[460px\] {
        max-width:460px
    }
    .max-w-\[500px\] {
        max-width:500px
    }
    .max-w-\[511px\] {
        max-width:511px
    }
    .max-w-\[517px\] {
        max-width:517px
    }
    .max-w-\[628px\] {
        max-width:628px
    }
    .max-w-\[652px\] {
        max-width:652px
    }
    .max-w-\[856px\] {
        max-width:856px
    }
    .max-w-\[866px\] {
        max-width:866px
    }
    .max-w-\[986px\] {
        max-width:986px
    }
    .max-w-\[1053px\] {
        max-width:1053px
    }
    .max-w-\[1153px\] {
        max-width:1153px
    }
    .max-w-\[1217px\] {
        max-width:1217px
    }
    .max-w-\[1304px\] {
        max-width:1304px
    }
    .max-w-\[1308px\] {
        max-width:1308px
    }
    .max-w-\[1470px\] {
        max-width:1470px
    }
    .max-w-\[min\(100\%\,400px\)\] {
        max-width:min(100%,400px)
    }
    .max-w-\[min\(100\%\,500px\)\] {
        max-width:min(100%,500px)
    }
    .max-w-\[min\(190px\,100\%\)\] {
        max-width:min(190px,100%)
    }
    .max-w-\[min\(291px\,100\%\)\] {
        max-width:min(291px,100%)
    }
    .max-w-\[min\(477px\,100\%\)\] {
        max-width:min(477px,100%)
    }
    .max-w-\[min\(511px\,100\%\)\] {
        max-width:min(511px,100%)
    }
    .max-w-\[min\(550px\,100\%\)\] {
        max-width:min(550px,100%)
    }
    .max-w-\[min\(570px\,100\%\)\] {
        max-width:min(570px,100%)
    }
    .max-w-\[min\(616px\,100\%\)\] {
        max-width:min(616px,100%)
    }
    .max-w-\[min\(631px\,100\%\)\] {
        max-width:min(631px,100%)
    }
    .max-w-\[min\(655px\,100\%\)\] {
        max-width:min(655px,100%)
    }
    .max-w-\[min\(664px\,100\%\)\] {
        max-width:min(664px,100%)
    }
    .max-w-fit {
        max-width:fit-content
    }
    .max-w-full {
        max-width:100%
    }
    .min-w-5 {
        min-width:calc(var(--spacing)*5)
    }
    .min-w-\[39px\] {
        min-width:39px
    }
    .min-w-\[260px\] {
        min-width:260px
    }
    .min-w-\[289px\] {
        min-width:289px
    }
    .min-w-\[308px\] {
        min-width:308px
    }
    .flex-1 {
        flex:1
    }
    .flex-2 {
        flex:2
    }
    .flex-3 {
        flex:3
    }
    .grow {
        flex-grow:1
    }
    .basis-full {
        flex-basis:100%
    }
    .border-collapse {
        border-collapse:collapse
    }
    .translate-x-full {
        --tw-translate-x:100%;
        translate:var(--tw-translate-x)var(--tw-translate-y)
    }
    .translate-y-\[-50\%\] {
        --tw-translate-y:-50%;
        translate:var(--tw-translate-x)var(--tw-translate-y)
    }
    .transform {
        transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)
    }
    .cursor-pointer {
        cursor:pointer
    }
    .list-disc {
        list-style-type:disc
    }
    .grid-cols-1 {
        grid-template-columns:repeat(1,minmax(0,1fr))
    }
    .grid-cols-2 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .grid-cols-3 {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .grid-cols-\[362fr_327fr_457fr\] {
        grid-template-columns:362fr 327fr 457fr
    }
    .grid-cols-\[457fr_327fr_362fr\] {
        grid-template-columns:457fr 327fr 362fr
    }
    .grid-rows-\[0fr\] {
        grid-template-rows:0fr
    }
    .flex-col {
        flex-direction:column
    }
    .flex-wrap {
        flex-wrap:wrap
    }
    .items-center {
        align-items:center
    }
    .items-end {
        align-items:flex-end
    }
    .justify-between {
        justify-content:space-between
    }
    .justify-center {
        justify-content:center
    }
    .justify-end {
        justify-content:flex-end
    }
    .gap-1 {
        gap:calc(var(--spacing)*1)
    }
    .gap-2 {
        gap:calc(var(--spacing)*2)
    }
    .gap-3 {
        gap:calc(var(--spacing)*3)
    }
    .gap-4 {
        gap:calc(var(--spacing)*4)
    }
    .gap-5 {
        gap:calc(var(--spacing)*5)
    }
    .gap-6 {
        gap:calc(var(--spacing)*6)
    }
    .gap-8 {
        gap:calc(var(--spacing)*8)
    }
    .gap-10 {
        gap:calc(var(--spacing)*10)
    }
    .gap-15 {
        gap:calc(var(--spacing)*15)
    }
    .gap-16 {
        gap:calc(var(--spacing)*16)
    }
    .gap-\[6px\] {
        gap:6px
    }
    .gap-\[10px\] {
        gap:10px
    }
    .gap-x-8 {
        column-gap:calc(var(--spacing)*8)
    }
    .gap-y-2 {
        row-gap:calc(var(--spacing)*2)
    }
    .gap-y-3 {
        row-gap:calc(var(--spacing)*3)
    }
    .self-start {
        align-self:flex-start
    }
    .overflow-auto {
        overflow:auto
    }
    .overflow-hidden {
        overflow:hidden
    }
    .rounded-3xl {
        border-radius:var(--radius-3xl)
    }
    .rounded-4xl {
        border-radius:var(--radius-4xl)
    }
    .rounded-\[10px\] {
        border-radius:10px
    }
    .rounded-\[20px\] {
        border-radius:20px
    }
    .rounded-full {
        border-radius:3.40282e38px
    }
    .rounded-sm {
        border-radius:var(--radius-sm)
    }
    .rounded-xl {
        border-radius:var(--radius-xl)
    }
    .border,.border-1 {
        border-style:var(--tw-border-style);
        border-width:1px
    }
    .border-t-1 {
        border-top-style:var(--tw-border-style);
        border-top-width:1px
    }
    .border-b-1 {
        border-bottom-style:var(--tw-border-style);
        border-bottom-width:1px
    }
    .border-solid {
        --tw-border-style:solid;
        border-style:solid
    }
    .border-\[\#0B2F9F52\] {
        border-color:#0b2f9f52
    }
    .border-\[\#1F1B2433\] {
        border-color:#1f1b2433
    }
    .border-\[\#00000029\] {
        border-color:#00000029
    }
    .border-\[\#00000033\] {
        border-color:#0003
    }
    .border-\[\#00000047\] {
        border-color:#00000047
    }
    .border-\[\#1433D63D\] {
        border-color:#1433d63d
    }
    .border-\[\#1433D633\] {
        border-color:#1433d633
    }
    .border-\[\#D9D9D9\] {
        border-color:#d9d9d9
    }
    .border-\[\#E8E9EB\] {
        border-color:#e8e9eb
    }
    .border-\[\#FAFAFACC\] {
        border-color:#fafafacc
    }
    .border-white {
        border-color:var(--color-white)
    }
    .bg-\[\#0B2F9F99\] {
        background-color:#0b2f9f99
    }
    .bg-\[\#0BAA75\] {
        background-color:#0baa75
    }
    .bg-\[\#0069FF1A\] {
        background-color:#0069ff1a
    }
    .bg-\[\#0069FF1F\] {
        background-color:#0069ff1f
    }
    .bg-\[\#0069FF4D\] {
        background-color:#0069ff4d
    }
    .bg-\[\#0069FF33\] {
        background-color:#0069ff33
    }
    .bg-\[\#0069FF61\] {
        background-color:#0069ff61
    }
    .bg-\[\#0069FF\] {
        background-color:#0069ff
    }
    .bg-\[\#1433D6\] {
        background-color:#1433d6
    }
    .bg-\[\#1433D61A\] {
        background-color:#1433d61a
    }
    .bg-\[\#4379F2\] {
        background-color:#4379f2
    }
    .bg-\[\#B0D0FD\] {
        background-color:#b0d0fd
    }
    .bg-\[\#D39A1E\] {
        background-color:#d39a1e
    }
    .bg-\[\#DB6060\] {
        background-color:#db6060
    }
    .bg-\[\#ECEFFF\] {
        background-color:#ecefff
    }
    .bg-\[\#F1F3FF\] {
        background-color:#f1f3ff
    }
    .bg-\[\#F9F9F9\] {
        background-color:#f9f9f9
    }
    .bg-\[\#F9FAFF\] {
        background-color:#f9faff
    }
    .bg-white {
        background-color:var(--color-white)
    }
    .bg-\[url\(\.\/img\/general-bg\.webp\)\] {
        background-image:url(./img/general-bg.webp)
    }
    .bg-\[url\(\.\/img\/static-blue-bg\.webp\)\] {
        background-image:url(./img/static-blue-bg.webp)
    }
    .bg-\[url\(\.\/img\/vps-hosting-bg\.webp\)\] {
        background-image:url(./img/vps-hosting-bg.webp)
    }
    .bg-\[url\(\.\/img\/web-hosting-bg\.webp\)\] {
        background-image:url(./img/web-hosting-bg.webp)
    }
    .bg-\[url\(\.\/img\/wordpress-hosting-bg\.webp\)\] {
        background-image:url(./img/wordpress-hosting-bg.webp)
    }
    .bg-cover {
        background-size:cover
    }
    .object-contain {
        object-fit:contain
    }
    .object-cover {
        object-fit:cover
    }
    .p-3 {
        padding:calc(var(--spacing)*3)
    }
    .p-4 {
        padding:calc(var(--spacing)*4)
    }
    .p-5 {
        padding:calc(var(--spacing)*5)
    }
    .p-6 {
        padding:calc(var(--spacing)*6)
    }
    .p-7 {
        padding:calc(var(--spacing)*7)
    }
    .p-\[9px\] {
        padding:9px
    }
    .p-\[50\%-568px\] {
        padding:50% -568px
    }
    .px-3 {
        padding-inline:calc(var(--spacing)*3)
    }
    .px-4 {
        padding-inline:calc(var(--spacing)*4)
    }
    .px-5 {
        padding-inline:calc(var(--spacing)*5)
    }
    .px-6 {
        padding-inline:calc(var(--spacing)*6)
    }
    .px-7 {
        padding-inline:calc(var(--spacing)*7)
    }
    .px-8 {
        padding-inline:calc(var(--spacing)*8)
    }
    .px-\[10\.8px\] {
        padding-inline:10.8px
    }
    .px-\[20px\] {
        padding-inline:20px
    }
    .px-\[25px\] {
        padding-inline:25px
    }
    .px-\[30px\] {
        padding-inline:30px
    }
    .px-\[41\.5px\] {
        padding-inline:41.5px
    }
    .px-\[57\.5px\] {
        padding-inline:57.5px
    }
    .px-\[64\.5px\] {
        padding-inline:64.5px
    }
    .py-2 {
        padding-block:calc(var(--spacing)*2)
    }
    .py-2\.5 {
        padding-block:calc(var(--spacing)*2.5)
    }
    .py-3 {
        padding-block:calc(var(--spacing)*3)
    }
    .py-4 {
        padding-block:calc(var(--spacing)*4)
    }
    .py-5 {
        padding-block:calc(var(--spacing)*5)
    }
    .py-8 {
        padding-block:calc(var(--spacing)*8)
    }
    .py-10 {
        padding-block:calc(var(--spacing)*10)
    }
    .py-12 {
        padding-block:calc(var(--spacing)*12)
    }
    .py-13 {
        padding-block:calc(var(--spacing)*13)
    }
    .py-15 {
        padding-block:calc(var(--spacing)*15)
    }
    .py-\[5\.4px\] {
        padding-block:5.4px
    }
    .py-\[8px\] {
        padding-block:8px
    }
    .py-\[10px\] {
        padding-block:10px
    }
    .py-\[14px\] {
        padding-block:14px
    }
    .py-\[18px\] {
        padding-block:18px
    }
    .pt-2 {
        padding-top:calc(var(--spacing)*2)
    }
    .pt-4 {
        padding-top:calc(var(--spacing)*4)
    }
    .pt-5 {
        padding-top:calc(var(--spacing)*5)
    }
    .pt-6 {
        padding-top:calc(var(--spacing)*6)
    }
    .pt-8 {
        padding-top:calc(var(--spacing)*8)
    }
    .pt-10 {
        padding-top:calc(var(--spacing)*10)
    }
    .pt-15 {
        padding-top:calc(var(--spacing)*15)
    }
    .pt-25 {
        padding-top:calc(var(--spacing)*25)
    }
    .pt-\[5px\] {
        padding-top:5px
    }
    .pr-2 {
        padding-right:calc(var(--spacing)*2)
    }
    .pr-3 {
        padding-right:calc(var(--spacing)*3)
    }
    .pb-2 {
        padding-bottom:calc(var(--spacing)*2)
    }
    .pb-3 {
        padding-bottom:calc(var(--spacing)*3)
    }
    .pb-7 {
        padding-bottom:calc(var(--spacing)*7)
    }
    .pb-10 {
        padding-bottom:calc(var(--spacing)*10)
    }
    .pb-13 {
        padding-bottom:calc(var(--spacing)*13)
    }
    .pb-15 {
        padding-bottom:calc(var(--spacing)*15)
    }
    .pb-20 {
        padding-bottom:calc(var(--spacing)*20)
    }
    .pl-1 {
        padding-left:calc(var(--spacing)*1)
    }
    .pl-2 {
        padding-left:calc(var(--spacing)*2)
    }
    .pl-6 {
        padding-left:calc(var(--spacing)*6)
    }
    .text-center {
        text-align:center
    }
    .text-end {
        text-align:end
    }
    .text-2xl {
        font-size:var(--text-2xl);
        line-height:var(--tw-leading,var(--text-2xl--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-\[8px\] {
        font-size:8px
    }
    .text-\[9px\] {
        font-size:9px
    }
    .text-\[10px\] {
        font-size:10px
    }
    .text-\[12px\] {
        font-size:12px
    }
    .text-\[13px\] {
        font-size:13px
    }
    .text-\[15px\] {
        font-size:15px
    }
    .text-\[32px\] {
        font-size:32px
    }
    .text-\[40px\] {
        font-size:40px
    }
    .\[line-height\:131\.579\%\] {
        line-height:131.579%
    }
    .font-bold {
        --tw-font-weight:var(--font-weight-bold);
        font-weight:var(--font-weight-bold)
    }
    .font-light {
        --tw-font-weight:var(--font-weight-light);
        font-weight:var(--font-weight-light)
    }
    .font-medium {
        --tw-font-weight:var(--font-weight-medium);
        font-weight:var(--font-weight-medium)
    }
    .font-normal {
        --tw-font-weight:var(--font-weight-normal);
        font-weight:var(--font-weight-normal)
    }
    .font-semibold {
        --tw-font-weight:var(--font-weight-semibold);
        font-weight:var(--font-weight-semibold)
    }
    .text-balance {
        text-wrap:balance
    }
    .whitespace-nowrap {
        white-space:nowrap
    }
    .text-\[\#0B2F9F\] {
        color:#0b2f9f
    }
    .text-\[\#0BAA75\] {
        color:#0baa75
    }
    .text-\[\#000C2A\] {
        color:#000c2a
    }
    .text-\[\#1D1D1D\] {
        color:#1d1d1d
    }
    .text-\[\#1F1B24\] {
        color:#1f1b24
    }
    .text-\[\#2C2C2D\] {
        color:#2c2c2d
    }
    .text-\[\#0069FF\] {
        color:#0069ff
    }
    .text-\[\#1433D6\] {
        color:#1433d6
    }
    .text-\[\#002447\] {
        color:#002447
    }
    .text-\[\#4379F2\] {
        color:#4379f2
    }
    .text-\[\#212121\] {
        color:#212121
    }
    .text-\[\#474747\] {
        color:#474747
    }
    .text-\[\#FAAA0B\] {
        color:#faaa0b
    }
    .text-gray-800 {
        color:var(--color-gray-800)
    }
    .text-white {
        color:var(--color-white)
    }
    .uppercase {
        text-transform:uppercase
    }
    .line-through {
        text-decoration-line:line-through
    }
    .underline {
        text-decoration-line:underline
    }
    .underline-offset-2 {
        text-underline-offset:2px
    }
    .shadow-\[2px_2px_24px_rgba\(0\,0\,0\,0\.08\)\] {
        --tw-shadow:2px 2px 24px var(--tw-shadow-color,#00000014);
        box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }
    .shadow-\[4px_4px_10px_0px_rgba\(0\,0\,0\,0\.08\)\] {
        --tw-shadow:4px 4px 10px 0px var(--tw-shadow-color,#00000014);
        box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }
    .shadow-sm {
        --tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);
        box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }
    .filter {
        filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }
    .transition {
        transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,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))
    }
    .\[background\:linear-gradient\(213deg\,_\#F1F3FF_-13\.21\%\,_\#FFF_101\.76\%\)\] {
        background:linear-gradient(213deg,#f1f3ff -13.21%,#fff 101.76%)
    }
    .before\:brightness-0:before {
        content:var(--tw-content);
        --tw-brightness:brightness(0%);
        filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }
    .before\:invert-\[1\]:before {
        content:var(--tw-content);
        --tw-invert:invert(1);
        filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)
    }
    .after\:bg-\[\#E0F2FC\]:after {
        content:var(--tw-content);
        background-color:#e0f2fc
    }
    @media (hover:hover) {
        .hover\:text-\[\#0069FF\]:hover {
            color:#0069ff
        }

    }
    @media (min-width:40rem) {
        .sm\:col-end-\[span_2\] {
            grid-column-end:span 2
        }
        .sm\:mt-0 {
            margin-top:calc(var(--spacing)*0)
        }
        .sm\:mb-0 {
            margin-bottom:calc(var(--spacing)*0)
        }
        .sm\:mb-\[30px\] {
            margin-bottom:30px
        }
        .sm\:mb-\[50px\] {
            margin-bottom:50px
        }
        .sm\:h-9 {
            height:calc(var(--spacing)*9)
        }
        .sm\:min-h-9 {
            min-height:calc(var(--spacing)*9)
        }
        .sm\:w-9 {
            width:calc(var(--spacing)*9)
        }
        .sm\:w-\[32px\] {
            width:32px
        }
        .sm\:max-w-full {
            max-width:100%
        }
        .sm\:min-w-9 {
            min-width:calc(var(--spacing)*9)
        }
        .sm\:min-w-\[320px\] {
            min-width:320px
        }
        .sm\:grid-cols-2 {
            grid-template-columns:repeat(2,minmax(0,1fr))
        }
        .sm\:flex-row {
            flex-direction:row
        }
        .sm\:gap-3 {
            gap:calc(var(--spacing)*3)
        }
        .sm\:gap-4 {
            gap:calc(var(--spacing)*4)
        }
        .sm\:gap-7 {
            gap:calc(var(--spacing)*7)
        }
        .sm\:gap-10 {
            gap:calc(var(--spacing)*10)
        }
        .sm\:gap-x-6 {
            column-gap:calc(var(--spacing)*6)
        }
        .sm\:gap-y-8 {
            row-gap:calc(var(--spacing)*8)
        }
        .sm\:px-4 {
            padding-inline:calc(var(--spacing)*4)
        }
        .sm\:px-10 {
            padding-inline:calc(var(--spacing)*10)
        }
        .sm\:px-\[41\.5px\] {
            padding-inline:41.5px
        }
        .sm\:py-13 {
            padding-block:calc(var(--spacing)*13)
        }
        .sm\:py-\[14px\] {
            padding-block:14px
        }
        .sm\:text-2xl {
            font-size:var(--text-2xl);
            line-height:var(--tw-leading,var(--text-2xl--line-height))
        }
        .sm\:text-base {
            font-size:var(--text-base);
            line-height:var(--tw-leading,var(--text-base--line-height))
        }
        .sm\:text-lg {
            font-size:var(--text-lg);
            line-height:var(--tw-leading,var(--text-lg--line-height))
        }
        .sm\:text-sm {
            font-size:var(--text-sm);
            line-height:var(--tw-leading,var(--text-sm--line-height))
        }
        .sm\:text-xs {
            font-size:var(--text-xs);
            line-height:var(--tw-leading,var(--text-xs--line-height))
        }
        .sm\:text-\[10px\] {
            font-size:10px
        }
        .sm\:text-\[32px\] {
            font-size:32px
        }
        .sm\:text-\[38px\] {
            font-size:38px
        }

    }
    @media (min-width:48rem) {
        .md\:inset-9 {
            inset:calc(var(--spacing)*9)
        }
        .md\:order-0,.md\:order-none {
            order:0
        }
        .md\:col-span-4 {
            grid-column:span 4/span 4
        }
        .md\:col-span-6 {
            grid-column:span 6/span 6
        }
        .md\:mx-0 {
            margin-inline:calc(var(--spacing)*0)
        }
        .md\:mt-0 {
            margin-top:calc(var(--spacing)*0)
        }
        .md\:mb-5 {
            margin-bottom:calc(var(--spacing)*5)
        }
        .md\:block {
            display:block
        }
        .md\:flex {
            display:flex
        }
        .md\:grid {
            display:grid
        }
        .md\:grid-cols-2 {
            grid-template-columns:repeat(2,minmax(0,1fr))
        }
        .md\:grid-cols-3 {
            grid-template-columns:repeat(3,minmax(0,1fr))
        }
        .md\:grid-cols-10 {
            grid-template-columns:repeat(10,minmax(0,1fr))
        }
        .md\:grid-cols-\[1\.19fr_1fr\] {
            grid-template-columns:1.19fr 1fr
        }
        .md\:grid-cols-\[1fr_1\.19fr\] {
            grid-template-columns:1fr 1.19fr
        }
        .md\:flex-row {
            flex-direction:row
        }
        .md\:justify-end {
            justify-content:flex-end
        }
        .md\:gap-5 {
            gap:calc(var(--spacing)*5)
        }
        .md\:gap-8 {
            gap:calc(var(--spacing)*8)
        }
        .md\:gap-20 {
            gap:calc(var(--spacing)*20)
        }
        .md\:p-0 {
            padding:calc(var(--spacing)*0)
        }
        .md\:p-7 {
            padding:calc(var(--spacing)*7)
        }
        .md\:px-5 {
            padding-inline:calc(var(--spacing)*5)
        }
        .md\:px-10 {
            padding-inline:calc(var(--spacing)*10)
        }
        .md\:py-\[26px\] {
            padding-block:26px
        }
        .md\:text-center {
            text-align:center
        }
        .md\:text-start {
            text-align:start
        }
        .md\:text-2xl {
            font-size:var(--text-2xl);
            line-height:var(--tw-leading,var(--text-2xl--line-height))
        }
        .md\:text-base {
            font-size:var(--text-base);
            line-height:var(--tw-leading,var(--text-base--line-height))
        }
        .md\:text-lg {
            font-size:var(--text-lg);
            line-height:var(--tw-leading,var(--text-lg--line-height))
        }
        .md\:text-sm {
            font-size:var(--text-sm);
            line-height:var(--tw-leading,var(--text-sm--line-height))
        }
        .md\:text-xl {
            font-size:var(--text-xl);
            line-height:var(--tw-leading,var(--text-xl--line-height))
        }
        .md\:text-\[26px\] {
            font-size:26px
        }
        .md\:text-\[32px\] {
            font-size:32px
        }

    }
    @media (min-width:64rem) {
        .lg\:absolute {
            position:absolute
        }
        .lg\:static {
            position:static
        }
        .lg\:top-auto {
            top:auto
        }
        .lg\:top-full {
            top:100%
        }
        .lg\:right-auto {
            right:auto
        }
        .lg\:bottom-20 {
            bottom:calc(var(--spacing)*20)
        }
        .lg\:bottom-auto {
            bottom:auto
        }
        .lg\:-left-6 {
            left:calc(var(--spacing)*-6)
        }
        .lg\:-left-\[30px\] {
            left:-30px
        }
        .lg\:left-11 {
            left:calc(var(--spacing)*11)
        }
        .lg\:left-full {
            left:100%
        }
        .lg\:mx-0 {
            margin-inline:calc(var(--spacing)*0)
        }
        .lg\:mt-6 {
            margin-top:calc(var(--spacing)*6)
        }
        .lg\:mb-0 {
            margin-bottom:calc(var(--spacing)*0)
        }
        .lg\:mb-3 {
            margin-bottom:calc(var(--spacing)*3)
        }
        .lg\:mb-5 {
            margin-bottom:calc(var(--spacing)*5)
        }
        .lg\:mb-10 {
            margin-bottom:calc(var(--spacing)*10)
        }
        .lg\:mb-15 {
            margin-bottom:calc(var(--spacing)*15)
        }
        .lg\:ml-20 {
            margin-left:calc(var(--spacing)*20)
        }
        .lg\:block {
            display:block
        }
        .lg\:contents {
            display:contents
        }
        .lg\:flex {
            display:flex
        }
        .lg\:grid {
            display:grid
        }
        .lg\:hidden {
            display:none
        }
        .lg\:h-10\.5 {
            height:calc(var(--spacing)*10.5)
        }
        .lg\:h-11\.5 {
            height:calc(var(--spacing)*11.5)
        }
        .lg\:h-15 {
            height:calc(var(--spacing)*15)
        }
        .lg\:h-full {
            height:100%
        }
        .lg\:w-11\.5 {
            width:calc(var(--spacing)*11.5)
        }
        .lg\:w-15 {
            width:calc(var(--spacing)*15)
        }
        .lg\:w-51 {
            width:calc(var(--spacing)*51)
        }
        .lg\:w-\[43\.803\%\] {
            width:43.803%
        }
        .lg\:w-\[56\.197\%\] {
            width:56.197%
        }
        .lg\:w-\[149px\] {
            width:149px
        }
        .lg\:w-fit {
            width:fit-content
        }
        .lg\:max-w-129 {
            max-width:calc(var(--spacing)*129)
        }
        .lg\:max-w-146 {
            max-width:calc(var(--spacing)*146)
        }
        .lg\:max-w-\[357px\] {
            max-width:357px
        }
        .lg\:max-w-\[511px\] {
            max-width:511px
        }
        .lg\:max-w-full {
            max-width:100%
        }
        .lg\:flex-none {
            flex:none
        }
        .lg\:translate-x-0 {
            --tw-translate-x:calc(var(--spacing)*0);
            translate:var(--tw-translate-x)var(--tw-translate-y)
        }
        .lg\:translate-x-\[-105\%\] {
            --tw-translate-x:-105%;
            translate:var(--tw-translate-x)var(--tw-translate-y)
        }
        .lg\:translate-y-\[-50\%\] {
            --tw-translate-y:-50%;
            translate:var(--tw-translate-x)var(--tw-translate-y)
        }
        .lg\:grid-cols-2 {
            grid-template-columns:repeat(2,minmax(0,1fr))
        }
        .lg\:grid-cols-\[392fr_768fr\] {
            grid-template-columns:392fr 768fr
        }
        .lg\:grid-rows-1 {
            grid-template-rows:repeat(1,minmax(0,1fr))
        }
        .lg\:flex-row {
            flex-direction:row
        }
        .lg\:flex-nowrap {
            flex-wrap:nowrap
        }
        .lg\:flex-wrap {
            flex-wrap:wrap
        }
        .lg\:items-center {
            align-items:center
        }
        .lg\:justify-center {
            justify-content:center
        }
        .lg\:justify-start {
            justify-content:flex-start
        }
        .lg\:gap-5 {
            gap:calc(var(--spacing)*5)
        }
        .lg\:gap-6 {
            gap:calc(var(--spacing)*6)
        }
        .lg\:gap-7 {
            gap:calc(var(--spacing)*7)
        }
        .lg\:gap-8 {
            gap:calc(var(--spacing)*8)
        }
        .lg\:gap-10 {
            gap:calc(var(--spacing)*10)
        }
        .lg\:border {
            border-style:var(--tw-border-style);
            border-width:1px
        }
        .lg\:border-b-0 {
            border-bottom-style:var(--tw-border-style);
            border-bottom-width:0
        }
        .lg\:border-none {
            --tw-border-style:none;
            border-style:none
        }
        .lg\:bg-\[\#0069FF1A\] {
            background-color:#0069ff1a
        }
        .lg\:bg-\[\#1433D61A\] {
            background-color:#1433d61a
        }
        .lg\:bg-transparent {
            background-color:#0000
        }
        .lg\:bg-none {
            background-image:none
        }
        .lg\:p-5 {
            padding:calc(var(--spacing)*5)
        }
        .lg\:p-8 {
            padding:calc(var(--spacing)*8)
        }
        .lg\:p-15 {
            padding:calc(var(--spacing)*15)
        }
        .lg\:px-0 {
            padding-inline:calc(var(--spacing)*0)
        }
        .lg\:px-4 {
            padding-inline:calc(var(--spacing)*4)
        }
        .lg\:px-5 {
            padding-inline:calc(var(--spacing)*5)
        }
        .lg\:px-11 {
            padding-inline:calc(var(--spacing)*11)
        }
        .lg\:px-12 {
            padding-inline:calc(var(--spacing)*12)
        }
        .lg\:px-\[max\(calc\(50\%-400px\)\,44px\)\] {
            padding-inline:max(50% - 400px,44px)
        }
        .lg\:py-0 {
            padding-block:calc(var(--spacing)*0)
        }
        .lg\:py-3 {
            padding-block:calc(var(--spacing)*3)
        }
        .lg\:py-7 {
            padding-block:calc(var(--spacing)*7)
        }
        .lg\:py-10 {
            padding-block:calc(var(--spacing)*10)
        }
        .lg\:py-17 {
            padding-block:calc(var(--spacing)*17)
        }
        .lg\:py-20 {
            padding-block:calc(var(--spacing)*20)
        }
        .lg\:py-21 {
            padding-block:calc(var(--spacing)*21)
        }
        .lg\:py-25 {
            padding-block:calc(var(--spacing)*25)
        }
        .lg\:py-26 {
            padding-block:calc(var(--spacing)*26)
        }
        .lg\:py-30 {
            padding-block:calc(var(--spacing)*30)
        }
        .lg\:py-\[26px\] {
            padding-block:26px
        }
        .lg\:py-\[90px\] {
            padding-block:90px
        }
        .lg\:pt-0 {
            padding-top:calc(var(--spacing)*0)
        }
        .lg\:pt-15 {
            padding-top:calc(var(--spacing)*15)
        }
        .lg\:pt-18 {
            padding-top:calc(var(--spacing)*18)
        }
        .lg\:pt-30 {
            padding-top:calc(var(--spacing)*30)
        }
        .lg\:pt-34 {
            padding-top:calc(var(--spacing)*34)
        }
        .lg\:pr-17 {
            padding-right:calc(var(--spacing)*17)
        }
        .lg\:pb-20 {
            padding-bottom:calc(var(--spacing)*20)
        }
        .lg\:pb-23 {
            padding-bottom:calc(var(--spacing)*23)
        }
        .lg\:pb-24 {
            padding-bottom:calc(var(--spacing)*24)
        }
        .lg\:pb-25 {
            padding-bottom:calc(var(--spacing)*25)
        }
        .lg\:pb-27 {
            padding-bottom:calc(var(--spacing)*27)
        }
        .lg\:pb-30 {
            padding-bottom:calc(var(--spacing)*30)
        }
        .lg\:pb-32 {
            padding-bottom:calc(var(--spacing)*32)
        }
        .lg\:pb-38 {
            padding-bottom:calc(var(--spacing)*38)
        }
        .lg\:pb-\[100px\] {
            padding-bottom:100px
        }
        .lg\:pl-3 {
            padding-left:calc(var(--spacing)*3)
        }
        .lg\:pl-\[calc\(50\%-594px\)\] {
            padding-left:calc(50% - 594px)
        }
        .lg\:text-start {
            text-align:start
        }
        .lg\:text-2xl {
            font-size:var(--text-2xl);
            line-height:var(--tw-leading,var(--text-2xl--line-height))
        }
        .lg\:text-base {
            font-size:var(--text-base);
            line-height:var(--tw-leading,var(--text-base--line-height))
        }
        .lg\:text-lg {
            font-size:var(--text-lg);
            line-height:var(--tw-leading,var(--text-lg--line-height))
        }
        .lg\:text-sm {
            font-size:var(--text-sm);
            line-height:var(--tw-leading,var(--text-sm--line-height))
        }
        .lg\:text-xl {
            font-size:var(--text-xl);
            line-height:var(--tw-leading,var(--text-xl--line-height))
        }
        .lg\:text-xs {
            font-size:var(--text-xs);
            line-height:var(--tw-leading,var(--text-xs--line-height))
        }
        .lg\:text-\[13px\] {
            font-size:13px
        }
        .lg\:text-\[15px\] {
            font-size:15px
        }
       .lg\:text-\[22px\] {
            font-size:22px
        }
        .lg\:text-\[26px\] {
            font-size:26px
        }
        .lg\:text-\[32px\] {
            font-size:32px
        }
        .lg\:text-\[40px\] {
            font-size:40px
        }
        .lg\:font-medium {
            --tw-font-weight:var(--font-weight-medium);
            font-weight:var(--font-weight-medium)
        }
        .lg\:font-semibold {
            --tw-font-weight:var(--font-weight-semibold);
            font-weight:var(--font-weight-semibold)
        }
        .lg\:shadow-\[0_0_12px_0px_rgba\(0\,0\,0\,0\.10\)\] {
            --tw-shadow:0 0 12px 0px 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)
        }
        .lg\:\[background\:linear-gradient\(213deg\,_\#F1F3FF_-13\.21\%\,_\#FFF_101\.76\%\)\] {
            background:linear-gradient(213deg,#f1f3ff -13.21%,#fff 101.76%)
        }

    }
    @media (min-width:80rem) {
        .xl\:-left-\[90px\] {
            left:-90px
        }
        .xl\:translate-x-\[-50\%\] {
            --tw-translate-x:-50%;
            translate:var(--tw-translate-x)var(--tw-translate-y)
        }
        .xl\:flex-wrap {
            flex-wrap:wrap
        }
        .xl\:gap-6 {
            gap:calc(var(--spacing)*6)
        }
        .xl\:gap-16 {
            gap:calc(var(--spacing)*16)
        }

    }

}
:root {
    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M5 7L0.23686 0.25H9.76314L5 7Z' fill='%2339B1ED'/%3E%3C/svg%3E");
    --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='3' viewBox='0 0 14 3' fill='none'%3E%3Cline x1='-7.86805e-08' y1='1.51211' x2='14' y2='1.51211' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
    --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7.43085 0L7.43128 14' stroke='black' stroke-width='1.8'/%3E%3Cline x1='-7.86805e-08' y1='6.51211' x2='14' y2='6.51211' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E")
}
html {
    color:#1f1b24;
    scroll-behavior:smooth;
    font-family:Poppins,sans-serif
}
.header {
    z-index:1
}
.pagewrapper {
    z-index:0;
    position:relative
}
.scrolling-text {
    white-space:nowrap;
    box-sizing:border-box;
    overflow:hidden
}
.scrolling-text p {
    padding-left:100%;
    animation:10s linear infinite scroll;
    display:inline-block
}
@keyframes scroll {
    0% {
        transform:translate(0%)
    }
    to {
        transform:translate(-100%)
    }

}
.transition-variant-1 {
    transition-property:all;
    transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--default-transition-duration));
    --tw-duration:.3s;
    transition-duration:.3s
}
.transition-variant-2 {
    transition-property:all;
    transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--default-transition-duration));
    --tw-duration:.6s;
    transition-duration:.6s
}
.header-item.has-children:after {
    content:var(--tw-content);
    pointer-events:none;
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    height:calc(var(--spacing)*4);
    content:var(--tw-content);
    width:calc(var(--spacing)*4);
    content:var(--tw-content);
    padding:calc(var(--spacing)*7);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    content:var(--tw-content);
    display:block;
    position:absolute;
    inset:0 0 0 auto
}
@media (min-width:64rem) {
    .header-item.has-children:after {
        position:static
    }

}
@media (min-width:64rem) {
    .header-item.has-children:after {
        margin-block:calc(var(--spacing)*0);
        content:var(--tw-content);
        height:9px
    }

}
.header-item.has-children:after {
    content:var(--tw-content)
}
@media (min-width:64rem) {
    .header-item.has-children:after {
        padding:calc(var(--spacing)*0)
    }

}
.header-item.has-children>.header-link:before {
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    width:100%;
    height:18px;
    display:none;
    position:absolute;
    top:100%
}
@media (hover:hover) {
    .header-item.has-children>.header-link:hover:before {
        content:var(--tw-content);
        display:block
    }

}
.header-item.has-children:after {
    background-image:var(--icon-chevron);
    background-position:50%;
    background-repeat:no-repeat;
    background-size:10px 7px
}
@media (max-width:64rem) {
    .header-item.has-children:after {
        background-size:14px 14px;
        background-image:var(--icon-plus)
    }
    .header-item.has-children:has(.active):after {
        background-image:var(--icon-minus)
    }

}
.footer-menu-toggler:after {
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    width:14px;
    height:14px;
    display:block
}
@media (min-width:64rem) {
    .footer-menu-toggler:after {
        content:var(--tw-content);
        display:none
    }

}
.footer-menu-toggler:after {
    background-image:var(--icon-chevron);
    background-position:50%;
    background-repeat:no-repeat;
    background-size:10px 7px
}
@media (max-width:64rem) {
    .footer-menu-toggler:after {
        background-size:14px 14px;
        background-image:var(--icon-plus)
    }
    .footer-menu-toggler.active:after {
        background-image:var(--icon-minus)
    }
    .footer-menu-toggler.active+div {
        grid-template-rows:1fr
    }

}
@media (min-width:64rem) {
    .header-item.has-children>div>ul {
        visibility:hidden;
        --tw-translate-y:calc(var(--spacing)*-3);
        translate:var(--tw-translate-x)var(--tw-translate-y);
        opacity:0
    }
    @media (hover:hover) {
        .header-item.has-children>div>ul:is(:where(.group):hover *) {
            visibility:visible;
            --tw-translate-y:calc(var(--spacing)*0);
            translate:var(--tw-translate-x)var(--tw-translate-y);
            opacity:1
        }
        .header-link:is(:where(.group):hover *) {
            color:#0069ff
        }

    }

}
.hamburger img:last-child {
    display:none
}
.header-dropdown.active+.hamburger img:last-child {
    display:block
}
.header-dropdown.active+.hamburger img:first-child {
    display:none
}
.header-dropdown.active {
    --tw-translate-x:calc(var(--spacing)*0);
    translate:var(--tw-translate-x)var(--tw-translate-y)
}
.header-item.has-children>div.active {
    grid-template-rows:1fr
}
.header-item.has-children>div.active>ul {
    padding-inline:calc(var(--spacing)*1);
    padding-block:calc(var(--spacing)*3)
}
.hero-border:after {
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='8' viewBox='0 0 156 8' fill='none'%3E%3Cline y1='-1' x2='155.005' y2='-1' transform='matrix(0.99997 0.00772848 -0.00403816 0.999992 1 2)' stroke='%230069FF' stroke-width='2'/%3E%3Cline y1='-1' x2='155.043' y2='-1' transform='matrix(0.999718 -0.023744 0.0120945 0.999927 1 6.79999)' stroke='%230069FF' stroke-width='2'/%3E%3Cline x1='1' y1='7' x2='156' y2='7' stroke='%230069FF' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    width:155px;
    height:6px;
    display:inline-block
}
.hero-bg {
    background-image:url("data:image/svg+xml,%3Csvg width='841' height='714' viewBox='0 0 841 714' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='84.9251' width='841' height='629.075' fill='%230069FF'/%3E%3Cg clip-path='url(%23clip0_1110_1286)'%3E%3Crect width='841' height='714' fill='%230069FF'/%3E%3Cmask id='mask0_1110_1286' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='-194' width='841' height='908'%3E%3Cpath d='M0 -194H841V714H0V-194Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1110_1286)'%3E%3Cmask id='mask1_1110_1286' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='-952' y='-955' width='2488' height='2056'%3E%3Cpath d='M-951.838 -954.966H1535.12V1100.4H-951.838V-954.966Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1110_1286)'%3E%3Cpath d='M676.971 -677.745C828.089 -537.482 872.858 -259.575 693.174 -120.563C538.366 -0.794678 588.198 244.057 1300.88 107.315C1403.91 90.9352 1825.68 17.0313 1195.28 58.6523C1195.28 58.6523 619.117 110.061 830.441 -89.8393C1350.93 -548.922 1310.16 -856.841 1030.74 -912.611C738.743 -970.909 307.64 -1020.54 676.971 -677.745Z' fill='url(%23paint0_linear_1110_1286)'/%3E%3Cpath d='M580.862 -208.135C580.862 -208.135 88.3741 -176.11 -274.319 444.916C-637.011 1065.94 -1324.05 -459.64 -697.858 -242.404C-71.6672 -25.1675 175.559 57.2361 380.233 -345.341C584.907 -747.917 950.948 -257.069 580.862 -208.135Z' fill='url(%23paint1_linear_1110_1286)'/%3E%3Cpath d='M859.053 316.412C734.503 547.346 569.068 661.426 271.245 712.759C0.0679092 759.501 -77.7589 937.876 331.601 1029.37C740.96 1120.87 992.231 1187.2 1089.51 800.631C1186.78 414.061 1053.69 -44.4664 859.053 316.412Z' fill='url(%23paint2_linear_1110_1286)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1110_1286' x1='633.607' y1='-70.1831' x2='840.883' y2='98.8503' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231433D6'/%3E%3Cstop offset='1' stop-color='%231433D6' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1110_1286' x1='362.225' y1='-202.382' x2='-49.2901' y2='80.689' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231433D6'/%3E%3Cstop offset='1' stop-color='%231433D6' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_1110_1286' x1='389.636' y1='991.061' x2='1179.79' y2='218.805' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230069FF'/%3E%3Cstop offset='1' stop-color='%231433D6' stop-opacity='0'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1110_1286'%3E%3Crect width='841' height='714' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size:cover
}
.tick-item:before {
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    background-image:url("./svg/check-mark-circle.svg");
    background-repeat:no-repeat;
    background-size:contain;
    width:16px;
    min-width:16px;
    height:16px;
    display:block
}
.tick-item-white:before {
    content:var(--tw-content);
    --tw-brightness:brightness(0%);
    filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,);
    content:var(--tw-content);
    --tw-invert:invert(1)
}
.tick-item.cross-item:before {
    content:var(--tw-content);
    margin-top:calc(var(--spacing)*1);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    background-image:url("./svg/cross-mark.svg");
    width:22px;
    min-width:22px;
    height:22px;
    display:block
}
.tick-item-sm:before {
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    background-image:url("./svg/check-mark-circle.svg");
    width:18px;
    min-width:18px;
    height:18px
}
.tick-item-xs:before {
    content:var(--tw-content);
    margin-top:calc(var(--spacing)*1);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    background-image:url("./svg/check-mark-circle.svg");
    width:14px;
    min-width:14px;
    height:14px
}
.hosting-bg {
    background-image:url(./img/dot-bg.webp);
    background-size:cover
}
.hosting-title-border {
    z-index:calc(1*-1)
}
.hosting-title-border:after {
    content:var(--tw-content);
    margin-top:calc(var(--spacing)*-2);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    background-color:#0069ff;
    width:100%;
    height:5px;
    display:inline-block
}
@media (min-width:64rem) {
    .hosting-title-border:after {
        content:var(--tw-content);
        height:4px
    }

}
.hosting-title-border-var-2:after {
    content:var(--tw-content);
    margin-top:calc(var(--spacing)*-1);
    content:var(--tw-content);
    content:var(--tw-content);
    background-color:#e0f2fc;
    height:4px
}
@media (min-width:64rem) {
    .hosting-title-border-var-2:after {
        content:var(--tw-content);
        margin-top:calc(var(--spacing)*-2);
        content:var(--tw-content);
        height:8px
    }

}
.circle-item:before {
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    content:var(--tw-content);
    --tw-content:"";
    content:var(--tw-content);
    width:14px;
    min-width:14px;
    height:14px;
    display:block
}
@media (min-width:48rem) {
    .circle-item:before {
        content:var(--tw-content);
        content:var(--tw-content);
        content:var(--tw-content);
        width:24px;
        min-width:24px;
        height:24px
    }

}
.circle-item:before {
    background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.3333 12C21.3333 6.84534 17.1547 2.66667 12 2.66667C6.84534 2.66667 2.66667 6.84534 2.66667 12C2.66667 17.1547 6.84534 21.3333 12 21.3333V24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24V21.3333C17.1547 21.3333 21.3333 17.1547 21.3333 12Z' fill='%230069FF'/%3E%3Ccircle cx='11.9974' cy='12.0003' r='5.33333' fill='%230069FF'/%3E%3C/svg%3E%0A");
    background-repeat:no-repeat;
    background-size:contain
}
.blue-bg {
    background-image:url(./img/blue-bg.webp);
    background-size:cover
}
.blue-bg-2 {
    background-image:url(./img/blue-bg-2.webp);
    background-size:cover
}
.accordion img:first-child {
    display:block
}
.accordion.active img:first-child,.accordion img:last-child {
    display:none
}
.accordion.active img:last-child {
    display:block
}
.accordion.active .accordion-content {
    padding-bottom:calc(var(--spacing)*4);
    grid-template-rows:1fr
}
@media (hover:hover) {
    .unordered-item:hover {
        color:#1433d6
    }

}
.carousel-slider {
    overflow:auto
}
@property --tw-translate-x {
    syntax:"*";
    inherits:false;
    initial-value:0
}
@property --tw-translate-y {
    syntax:"*";
    inherits:false;
    initial-value:0
}
@property --tw-translate-z {
    syntax:"*";
    inherits:false;
    initial-value:0
}
@property --tw-rotate-x {
    syntax:"*";
    inherits:false
}
@property --tw-rotate-y {
    syntax:"*";
    inherits:false
}
@property --tw-rotate-z {
    syntax:"*";
    inherits:false
}
@property --tw-skew-x {
    syntax:"*";
    inherits:false
}
@property --tw-skew-y {
    syntax:"*";
    inherits:false
}
@property --tw-border-style {
    syntax:"*";
    inherits:false;
    initial-value:solid
}
@property --tw-font-weight {
    syntax:"*";
    inherits:false
}
@property --tw-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-shadow-color {
    syntax:"*";
    inherits:false
}
@property --tw-shadow-alpha {
    syntax:"<percentage>";
    inherits:false;
    initial-value:100%
}
@property --tw-inset-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-inset-shadow-color {
    syntax:"*";
    inherits:false
}
@property --tw-inset-shadow-alpha {
    syntax:"<percentage>";
    inherits:false;
    initial-value:100%
}
@property --tw-ring-color {
    syntax:"*";
    inherits:false
}
@property --tw-ring-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-inset-ring-color {
    syntax:"*";
    inherits:false
}
@property --tw-inset-ring-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-ring-inset {
    syntax:"*";
    inherits:false
}
@property --tw-ring-offset-width {
    syntax:"<length>";
    inherits:false;
    initial-value:0
}
@property --tw-ring-offset-color {
    syntax:"*";
    inherits:false;
    initial-value:#fff
}
@property --tw-ring-offset-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-blur {
    syntax:"*";
    inherits:false
}
@property --tw-brightness {
    syntax:"*";
    inherits:false
}
@property --tw-contrast {
    syntax:"*";
    inherits:false
}
@property --tw-grayscale {
    syntax:"*";
    inherits:false
}
@property --tw-hue-rotate {
    syntax:"*";
    inherits:false
}
@property --tw-invert {
    syntax:"*";
    inherits:false
}
@property --tw-opacity {
    syntax:"*";
    inherits:false
}
@property --tw-saturate {
    syntax:"*";
    inherits:false
}
@property --tw-sepia {
    syntax:"*";
    inherits:false
}
@property --tw-drop-shadow {
    syntax:"*";
    inherits:false
}
@property --tw-drop-shadow-color {
    syntax:"*";
    inherits:false
}
@property --tw-drop-shadow-alpha {
    syntax:"<percentage>";
    inherits:false;
    initial-value:100%
}
@property --tw-drop-shadow-size {
    syntax:"*";
    inherits:false
}
@property --tw-content {
    syntax:"*";
    inherits:false;
    initial-value:""
}
@property --tw-duration {
    syntax:"*";
    inherits:false
}


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

}

.sm\:text-\[37px\]  {
    
    font-size: 37px

}

.text-\[20px\]  {
    
    font-size: 20px

}

        .lg\:bottom-60  {
    
            bottom: calc(var(--spacing)*45)
        
}


.bg-special-discount  { 
  background-color: #6D28D9;
 }

/* ---------- New Trustbadge Placement Line ---------- */

.hero-rating-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
}

.hero-rating-line:hover {
  text-decoration: none;
}

.hero-rating-line__label {
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: #171725;
}

.hero-rating-line__stars {
  display: inline-block;
  width: 106px;
  height: 22px;
  line-height: 1;
  flex: 0 0 auto;
  position: relative;
}

.hero-rating-line__stars::before {
  content: "";
  display: block;
  width: 106px;
  height: 22px;
  background-image:
    url("./svg/star-gray.svg"),
    url("./svg/star-gray.svg"),
    url("./svg/star-gray.svg"),
    url("./svg/star-gray.svg"),
    url("./svg/star-gray.svg");
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position:
    0 0,
    21px 0,
    42px 0,
    63px 0,
    84px 0;
  filter: brightness(0) saturate(100%) invert(72%) sepia(95%) saturate(1642%) hue-rotate(350deg) brightness(101%) contrast(103%);
}

.hero-rating-line__text {
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: #171725;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.hero-rating-line__brand {
  height: 32px;
  width: auto;
  display: block;
}

/* Light version for blue/dark hero sections */
.hero-rating-line--light {
  color: #ffffff;
}

.hero-rating-line--light .hero-rating-line__label,
.hero-rating-line--light .hero-rating-line__text {
  color: #ffffff;
}

.hero-rating-line--light .hero-rating-line__text {
  text-decoration-color: rgba(255, 255, 255, 0.85);
}

.hero-rating-line--light:hover .hero-rating-line__label,
.hero-rating-line--light:hover .hero-rating-line__text {
  color: #ffffff;
}

/* Smaller version if needed */
.hero-rating-line--sm {
  gap: 7px;
}

.hero-rating-line--sm .hero-rating-line__label,
.hero-rating-line--sm .hero-rating-line__text {
  font-size: 14px;
}

.hero-rating-line--sm .hero-rating-line__stars {
  width: 91px;
  height: 19px;
}

.hero-rating-line--sm .hero-rating-line__stars::before {
  width: 91px;
  height: 19px;
  background-size: 19px 19px;
  background-position:
    0 0,
    18px 0,
    36px 0,
    54px 0,
    72px 0;
}

.hero-rating-line--sm .hero-rating-line__brand {
  height: 20px;
}

/* ---------- Testimonials Page Hero Rating Placement ---------- */

.zynoo-review-hero {
  position: relative;
  overflow: hidden;
}

.zynoo-review-hero__rating {
  position: absolute;
  left: 50%;
  bottom: 52px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: min(100% - 32px, 620px);
  pointer-events: auto;
}

/* Mobile */
@media (max-width: 640px) {
  .hero-rating-line {
    gap: 7px;
    justify-content: center;
  }

  .hero-rating-line__label,
  .hero-rating-line__text {
    font-size: 14px;
  }

  .hero-rating-line__stars {
    width: 91px;
    height: 19px;
  }

  .hero-rating-line__stars::before {
    width: 91px;
    height: 19px;
    background-size: 19px 19px;
    background-position:
      0 0,
      18px 0,
      36px 0,
      54px 0,
      72px 0;
  }

  .hero-rating-line__brand {
    height: 20px;
  }

  .zynoo-review-hero__rating {
    bottom: 34px;
  }
}
 
/* ---------- Custom Chat Card ---------- */

#custom-chat-card {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 280px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 24px;
  padding: 18px 18px 20px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.10),
    0 6px 20px rgba(0, 0, 0, 0.06);
  z-index: 999998;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

#custom-chat-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

#custom-chat-card button {
  font-family: inherit;
}

#custom-chat-card-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

#custom-chat-card-close:hover {
  color: #111827;
}

.custom-chat-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 18px;
}

.custom-chat-card__status-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #22c55e;
  flex-shrink: 0;
}

.custom-chat-card__avatar {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto 18px;
  background: #f1f3ff;
}

.custom-chat-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-chat-card__title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: #1f2937;
}

.custom-chat-card__text {
  margin: 0 auto 18px;
  max-width: 220px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: #4b5563;
}

#custom-chat-card-cta {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: #00B67A;
  color: #ffffff;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

#custom-chat-card-cta:active {
  transform: translateY(0);
}

#custom-chat-card.is-hidden {
  display: none;
}

@media (max-width: 600px) {
  #custom-chat-card {
    right: 12px;
    left: 12px;
    bottom: 92px;
    width: auto;
    max-width: none;
    padding: 18px 16px 18px;
    border-radius: 22px;
  }

  .custom-chat-card__brand {
    font-size: 17px;
    margin-bottom: 16px;
  }

  .custom-chat-card__avatar {
    width: 88px;
    height: 88px;
    margin-bottom: 16px;
  }

  .custom-chat-card__title {
    font-size: 22px;
  }

  .custom-chat-card__text {
    font-size: 14px;
    margin-bottom: 16px;
    max-width: 210px;
  }

  #custom-chat-card-cta {
    padding: 13px 16px;
    font-size: 14px;
  }
}


/* ---------- Dedicated server Filter ---------- */

/* =========================
   Dedicated Server Finder
   ========================= */

/* --- Finder Layout --- */
.ds-filter-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1304px;
  margin: 40px auto 0;
}

.ds-filter-backdrop {
  display: none;
}

.ds-filter-sidebar {
  position: sticky;
  top: 20px;
  background: #ffffff;
  border: 1px solid rgba(11, 47, 159, 0.12);
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05);
  z-index: 5;
}

/* --- Filter Topbar --- */
.ds-filter-topbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ds-filter-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827;
}

.ds-filter-reset {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: #1433D6;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.ds-filter-reset:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-filter-reset:focus-visible {
  outline: 2px solid rgba(20, 51, 214, 0.22);
  outline-offset: 4px;
  border-radius: 4px;
}

.ds-mobile-filter-close {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: #1433D6;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

/* --- Filter Groups --- */
.ds-filter-group + .ds-filter-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.ds-filter-group-title {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: #2c2c2d;
}

.ds-filter-options {
  display: grid;
  gap: 12px;
}

/* --- Filter Options --- */
.ds-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: #1f2937;
  cursor: pointer;
}

.ds-filter-option input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: #0069ff;
  flex-shrink: 0;
}

.ds-filter-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ds-filter-option small {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.01em;
}

/* --- Catalog Header --- */
.ds-catalog-main {
  min-width: 0;
}

.ds-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ds-results-count {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.ds-sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds-sort-wrap label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.ds-sort-select {
  min-width: 190px;
  min-height: 42px;
  border: 1px solid rgba(11, 47, 159, 0.18);
  border-radius: 12px;
  background: #ffffff;
  padding: 0 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
}

.ds-sort-select:focus {
  border-color: #1433D6;
  box-shadow: 0 0 0 3px rgba(20, 51, 214, 0.10);
}

/* --- Active Filters --- */
.ds-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.ds-active-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #EEF2FF;
  color: #1433D6;
  padding: 7px 11px;
  font-size: 14px;
  font-weight: 700;
}

/* --- Card Meta Row --- */
.ds-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}


/* --- Hard-coded Type Badge --- */
.ds-plan-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: #0b2f9f99;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}

.ds-plan-type-badge.ds-delivery-badge.ds-delivery-badge--outline {
  background: transparent;
  border-color: rgba(31, 27, 36, 0.28);
  color: #474747;
}

.ds-plan-type-badge.ds-delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eefaf1;
  border: 1px solid rgba(22, 163, 74, 0.55);
  color: #15803d;
}

.ds-plan-type-badge.ds-delivery-badge::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8.515%201.019A7%207%200%200%200%208%201V0a8%208%200%200%201%20.589.022l-.074.997zm2.004.45a7.003%207.003%200%200%200-.985-.299l.219-.976c.383.086.76.2%201.126.342l-.36.933zm1.37.71a7.01%207.01%200%200%200-.439-.27l.493-.87a8.025%208.025%200%200%201%20.979.654l-.615.789a6.996%206.996%200%200%200-.418-.302zm1.834%201.79a6.99%206.99%200%200%200-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744%201.352a7.08%207.08%200%200%200-.214-.468l.893-.45a7.976%207.976%200%200%201%20.45%201.088l-.95.313a7.023%207.023%200%200%200-.179-.483zm.53%202.507a6.991%206.991%200%200%200-.1-1.025l.985-.17c.067.386.106.778.116%201.17l-1%20.025zm-.131%201.538c.033-.17.06-.339.081-.51l.993.123a7.957%207.957%200%200%201-.23%201.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952%202.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555%201.038l-.845-.535zm-.964%201.205c.122-.122.239-.248.35-.378l.758.653a8.073%208.073%200%200%201-.401.432l-.707-.707z%22%2F%3E%3Cpath%20d%3D%22M8%201a7%207%200%201%200%204.95%2011.95l.707.707A8.001%208.001%200%201%201%208%200v1z%22%2F%3E%3Cpath%20d%3D%22M7.5%203a.5.5%200%200%201%20.5.5v5.21l3.248%201.856a.5.5%200%200%201-.496.868l-3.5-2A.5.5%200%200%201%207%209V3.5a.5.5%200%200%201%20.5-.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8.515%201.019A7%207%200%200%200%208%201V0a8%208%200%200%201%20.589.022l-.074.997zm2.004.45a7.003%207.003%200%200%200-.985-.299l.219-.976c.383.086.76.2%201.126.342l-.36.933zm1.37.71a7.01%207.01%200%200%200-.439-.27l.493-.87a8.025%208.025%200%200%201%20.979.654l-.615.789a6.996%206.996%200%200%200-.418-.302zm1.834%201.79a6.99%206.99%200%200%200-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744%201.352a7.08%207.08%200%200%200-.214-.468l.893-.45a7.976%207.976%200%200%201%20.45%201.088l-.95.313a7.023%207.023%200%200%200-.179-.483zm.53%202.507a6.991%206.991%200%200%200-.1-1.025l.985-.17c.067.386.106.778.116%201.17l-1%20.025zm-.131%201.538c.033-.17.06-.339.081-.51l.993.123a7.957%207.957%200%200%201-.23%201.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952%202.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555%201.038l-.845-.535zm-.964%201.205c.122-.122.239-.248.35-.378l.758.653a8.073%208.073%200%200%201-.401.432l-.707-.707z%22%2F%3E%3Cpath%20d%3D%22M8%201a7%207%200%201%200%204.95%2011.95l.707.707A8.001%208.001%200%201%201%208%200v1z%22%2F%3E%3Cpath%20d%3D%22M7.5%203a.5.5%200%200%201%20.5.5v5.21l3.248%201.856a.5.5%200%200%201-.496.868l-3.5-2A.5.5%200%200%201%207%209V3.5a.5.5%200%200%201%20.5-.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* --- Rounded Flag Chip with Text --- */
.ds-card-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: #f3f5fb;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
  white-space: nowrap;
}

.ds-card-flag img {
  display: block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.ds-card-flag-text {
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
}

/* --- Grid Hook ---
   Keep minimal so existing card layout and mobile horizontal scroll remain unchanged.
*/
#ds-cards-grid,
.ds-cards-grid {
  width: 100%;
  min-width: 0;
}

/* --- Load More / Empty State --- */
.ds-load-more-wrap {
  margin-top: 28px;
  text-align: center;
}

#ds-load-more {
  min-width: 180px;
  box-shadow: 0 10px 24px rgba(0, 105, 255, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ds-load-more:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 105, 255, 0.24);
}

.ds-no-results {
  display: none;
  margin-top: 16px;
  padding: 22px 18px;
  border: 1px dashed rgba(11, 47, 159, 0.24);
  border-radius: 16px;
  background: #F9FAFF;
  color: #111827;
}

.ds-no-results.is-visible {
  display: block;
}

.ds-no-results h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

.ds-no-results p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* --- Mobile Filter Toggle --- */
.ds-mobile-filter-toggle {
  display: none;
  appearance: none;
  border: 1px solid rgba(20, 51, 214, 0.18);
  border-radius: 14px;
  background: #ffffff;
  color: #1433D6;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ds-mobile-filter-toggle::before {
  content: "\2630";
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.ds-mobile-filter-toggle:hover {
  background: #f8faff;
  border-color: rgba(20, 51, 214, 0.28);
}

.ds-mobile-filter-toggle:active {
  transform: translateY(1px);
}

body.ds-filter-open {
  overflow: hidden;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .ds-filter-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 991px) {
  .ds-filter-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }

  .ds-catalog-head {
    align-items: stretch;
    margin-top: 8px;
  }

  .ds-mobile-filter-toggle {
    display: inline-flex;
    width: auto;
    min-width: 160px;
    max-width: 100%;
    order: 1;
  }

  .ds-results-count {
    order: 2;
  }

  .ds-sort-wrap {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

  .ds-filter-topbar {
    grid-template-columns: 1fr auto auto;
  }

  .ds-filter-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 360px);
    max-width: 360px;
    height: 100dvh;
    overflow-y: auto;
    border-radius: 0 18px 18px 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    z-index: 1001;
  }

  .ds-filter-sidebar.is-open {
    transform: translateX(0);
  }

  .ds-mobile-filter-close {
    display: inline-block;
  }

  .ds-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .ds-filter-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  .ds-mobile-filter-toggle {
    display: flex;
    width: 100%;
    min-width: 100%;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
  }

  .ds-mobile-filter-toggle::before {
    font-size: 13px;
  }

  .ds-sort-wrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .ds-sort-select {
    width: 100%;
    min-width: 100%;
  }

  .ds-card-meta {
    margin-bottom: 16px;
  }

  .ds-plan-type-badge {
    min-height: 30px;
    padding: 0 14px;
    font-size: 11px;
  }

  .ds-card-flag {
    min-height: 30px;
    padding: 0 9px 0 7px;
    gap: 7px;
  }

  .ds-card-flag img {
    width: 17px;
    height: 17px;
    min-width: 17px;
  }

  .ds-card-flag-text {
    font-size: 11px;
  }

  .ds-filter-title {
    font-size: 17px;
  }

  .ds-filter-reset {
    font-size: 14px;
  }

  #ds-load-more {
    width: 100%;
    min-width: 100%;
  }
}

.ds-filter-group {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 18px;
  margin-top: 18px;
}

.ds-filter-group:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.ds-filter-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.ds-filter-group-content {
  display: none;
  margin-top: 12px;
}

.ds-filter-group.is-open .ds-filter-group-content {
  display: block;
}

.ds-filter-group-icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
}

.ds-filter-group-icon::before,
.ds-filter-group-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #111827;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.ds-filter-group-icon::before {
  width: 14px;
  height: 2px;
}

.ds-filter-group-icon::after {
  width: 2px;
  height: 14px;
}

.ds-filter-group.is-open .ds-filter-group-icon::after {
  display: none;
}

/* =========================================
   ZYNOO Mega Menu Navigation
   ========================================= */

.zynoo-main-nav {
  --zynoo-primary: #0069FF;
  --zynoo-deep-blue: #1433D6;
  --zynoo-ink: #1F1B24;
  --zynoo-muted: #474747;
  --zynoo-border: #E8E9EB;
  --zynoo-card-bg: #FFFFFF;
  --zynoo-card-hover: #F5F8FF;
  --zynoo-featured-hover: #F4F7FF;
  --zynoo-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.zynoo-main-nav,
.zynoo-main-nav * {
  box-sizing: border-box;
}

.zynoo-main-nav .header-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  font-size: 15px;
}

/* Remove the smaller/generated arrow and keep the original static blue arrow */
.zynoo-main-nav .header-item.has-children > .header-link::after {
  content: none !important;
  display: none !important;
}

.zynoo-main-nav .header-link:focus-visible,
.zynoo-menu-card:focus-visible,
.zynoo-support-card a:focus-visible {
  outline: 3px solid rgba(0, 105, 255, 0.28);
  outline-offset: 4px;
  border-radius: 10px;
}

/* =========================
   SVG File Icons
   Files should be inside assets/svg/
   Path is relative to assets/style.css
   ========================= */

.zynoo-icon {
  position: relative;
}

.zynoo-icon::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background-color: currentColor;

  -webkit-mask-image: var(--zynoo-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 28px 28px;

  mask-image: var(--zynoo-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 28px 28px;
}

.zynoo-icon--shared {
  --zynoo-icon-url: url("svg/shared-hosting.svg");
}

.zynoo-icon--wordpress {
  --zynoo-icon-url: url("svg/wordpress.svg");
}

.zynoo-icon--woocommerce {
  --zynoo-icon-url: url("svg/woocommerce.svg");
}

.zynoo-icon--linux-vps {
  --zynoo-icon-url: url("svg/linux-vps.svg");
}

.zynoo-icon--windows-vps {
  --zynoo-icon-url: url("svg/windows-vps.svg");
}

.zynoo-icon--forex-vps {
  --zynoo-icon-url: url("svg/forex-vps.svg");
}

.zynoo-icon--cloud-vps {
  --zynoo-icon-url: url("svg/cloud-vps.svg");
}

.zynoo-icon--cloud-server {
  --zynoo-icon-url: url("svg/cloud-server.svg");
}

.zynoo-icon--dedicated {
  --zynoo-icon-url: url("svg/dedicated-server.svg");
}

.zynoo-icon--location {
  --zynoo-icon-url: url("svg/location.svg");
}

/* =========================
   Desktop Mega Menu
   ========================= */

@media (min-width: 64rem) {
  .topbar,
  .header {
    position: relative;
    z-index: 1000001;
  }

  .header {
    background: #fff;
    isolation: isolate;
  }

  .header-dropdown {
    overflow: visible !important;
  }

  .zynoo-main-nav {
    position: static;
  }

  .zynoo-main-nav > ul {
    gap: 36px;
  }

  .zynoo-main-nav .header-item.has-children {
    position: static;
  }

  /* Invisible hover bridge between nav item and dropdown */
  .zynoo-main-nav .header-item.has-children > .header-link::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 100%;
    width: calc(100% + 40px);
    height: 42px;
    display: block;
  }

  .zynoo-main-nav .header-item.has-children > div > ul.zynoo-mega {
    position: absolute;
    left: 50% !important;
    right: auto !important;
    top: calc(100% - 12px) !important;
    width: min(1120px, calc(100vw - 32px));
    min-height: 330px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    padding: 22px;
    border: 1px solid var(--zynoo-border);
    border-radius: 22px;
    background: #fff;
    box-shadow:
      0 30px 78px rgba(0, 12, 42, 0.18),
      0 9px 24px rgba(0, 12, 42, 0.09);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px) scale(0.985);

    /*
      Important fix:
      This makes the dropdown animation open from the correct menu item,
      not from the center / VPS area.
    */
    transform-origin: var(--zynoo-arrow-x, 50%) top;

    translate: none !important;
    overflow: visible;
    z-index: 1000002;
    will-change: opacity, transform;
    transition:
      opacity 0.30s var(--zynoo-ease),
      transform 0.30s var(--zynoo-ease),
      visibility 0s linear 0.30s;
  }

  .zynoo-main-nav .header-item.has-children:hover > div > ul.zynoo-mega,
  .zynoo-main-nav .header-item.has-children.is-mega-open > div > ul.zynoo-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transform-origin: var(--zynoo-arrow-x, 50%) top;
    transition:
      opacity 0.30s var(--zynoo-ease),
      transform 0.30s var(--zynoo-ease),
      visibility 0s linear 0s;
  }

  .zynoo-main-nav .header-item.has-children > div > ul.zynoo-mega::before {
    content: "";
    position: absolute;
    top: -8px;
    left: var(--zynoo-arrow-x, 50%);
    width: 16px;
    height: 16px;
    background: #fff;
    border-left: 1px solid var(--zynoo-border);
    border-top: 1px solid var(--zynoo-border);
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
  }

  /*
    Dropdown notch / opening position fix.
    These values align the white dropdown notch with each relevant menu item.
  */

  .zynoo-mega--web {
    --zynoo-arrow-x: 29%;
  }

  .zynoo-mega--vps {
    --zynoo-arrow-x: 42%;
  }

  .zynoo-mega--dedicated {
    --zynoo-arrow-x: 57%;
  }

  .zynoo-main-nav .header-item.has-children:hover > .header-link,
  .zynoo-main-nav .header-item.has-children.is-mega-open > .header-link {
    color: var(--zynoo-primary) !important;
  }

  .zynoo-mega__main {
    min-width: 0;
  }

  .zynoo-mega__main--web,
  .zynoo-mega__main--vps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
  }

  .zynoo-mega__main--dedicated {
    display: block;
  }

  .zynoo-mega__group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .zynoo-mega__main--web > .zynoo-mega__group:not(.zynoo-mega__group--featured),
  .zynoo-mega__main--vps > .zynoo-mega__group:not(.zynoo-mega__group--featured) {
    padding-top: 16px;
  }

  .zynoo-mega__group--featured {
    padding: 16px;
    border: 1px solid rgba(20, 51, 214, 0.22);
    border-radius: 18px;
    background:
      radial-gradient(circle at top right, rgba(0, 105, 255, 0.08), transparent 38%),
      linear-gradient(180deg, #F9FAFF 0%, #FFFFFF 100%);
  }

  .zynoo-mega__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 22px;
    color: var(--zynoo-deep-blue);
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  .zynoo-mega__title em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--zynoo-primary);
    color: #fff;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .zynoo-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .zynoo-menu-grid--two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }

  .zynoo-menu-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 13px 16px;
    border: 1px solid var(--zynoo-border);
    border-radius: 16px;
    background: var(--zynoo-card-bg);
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    transition:
      background-color 0.24s var(--zynoo-ease),
      border-color 0.24s var(--zynoo-ease),
      color 0.24s var(--zynoo-ease);
  }

  .zynoo-mega--dedicated .zynoo-menu-card {
    min-height: 88px;
  }

  .zynoo-menu-card:hover,
  .zynoo-menu-card:focus-visible {
    background: var(--zynoo-card-hover);
    border-color: rgba(0, 105, 255, 0.22);
    box-shadow: none;
    transform: none;
  }

  .zynoo-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border: 1px solid rgba(0, 105, 255, 0.20);
    border-radius: 16px;
    background: transparent;
    color: var(--zynoo-primary);
    transition:
      background-color 0.24s var(--zynoo-ease),
      border-color 0.24s var(--zynoo-ease),
      color 0.24s var(--zynoo-ease);
  }

  .zynoo-icon::before {
    width: 34px;
    height: 34px;
    flex-basis: 34px;

    -webkit-mask-size: 34px 34px;
    mask-size: 34px 34px;
  }

  .zynoo-menu-card:hover .zynoo-menu-icon,
  .zynoo-menu-card:focus-visible .zynoo-menu-icon {
    background: var(--zynoo-primary);
    border-color: var(--zynoo-primary);
    color: #fff;
    transform: none;
  }

  .zynoo-mega__group--featured .zynoo-menu-icon {
    background: transparent;
    color: var(--zynoo-deep-blue);
    border-color: rgba(20, 51, 214, 0.22);
  }

  .zynoo-mega__group--featured .zynoo-menu-card:hover,
  .zynoo-mega__group--featured .zynoo-menu-card:focus-visible {
    background: var(--zynoo-featured-hover);
    border-color: rgba(20, 51, 214, 0.24);
  }

  .zynoo-mega__group--featured .zynoo-menu-card:hover .zynoo-menu-icon,
  .zynoo-mega__group--featured .zynoo-menu-card:focus-visible .zynoo-menu-icon {
    background: var(--zynoo-deep-blue);
    border-color: var(--zynoo-deep-blue);
    color: #fff;
  }

  .zynoo-menu-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
  }

  .zynoo-menu-text strong {
    color: var(--zynoo-ink);
    font-size: 14px;
    font-weight: 600 !important;
    line-height: 1.35;
    white-space: nowrap;
  }

  .zynoo-menu-text small {
    color: var(--zynoo-muted);
    font-size: 12px;
    font-weight: 400 !important;
    line-height: 1.85;
    white-space: nowrap;
  }

  .zynoo-menu-card:hover .zynoo-menu-text strong,
  .zynoo-menu-card:focus-visible .zynoo-menu-text strong {
    color: #111827;
  }

  .zynoo-menu-card:hover .zynoo-menu-text small,
  .zynoo-menu-card:focus-visible .zynoo-menu-text small {
    color: #3F4654;
  }

  .zynoo-menu-arrow {
    color: var(--zynoo-primary);
    font-size: 18px;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-3px);
    transition:
      opacity 0.24s var(--zynoo-ease),
      transform 0.24s var(--zynoo-ease);
  }

  .zynoo-menu-card:hover .zynoo-menu-arrow,
  .zynoo-menu-card:focus-visible .zynoo-menu-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .zynoo-mega__support {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: var(--zynoo-deep-blue);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }

  .zynoo-mega__support-img {
    width: 100%;
    height: 148px;
    min-height: 148px;
    object-fit: cover;
    object-position: center;
    flex: 0 0 auto;
  }

  .zynoo-support-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(180deg, var(--zynoo-deep-blue) 0%, var(--zynoo-primary) 100%);
  }

  .zynoo-support-card strong {
    color: #fff;
    font-size: 18px;
    font-weight: 700 !important;
    line-height: 1.2;
  }

  .zynoo-support-card span {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 400 !important;
    line-height: 1.42;
  }

  .zynoo-support-card a {
    display: inline-flex;
    width: fit-content;
    margin-top: auto;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999000;
    pointer-events: none;
    background: rgba(0, 12, 42, 0);
    backdrop-filter: blur(0);
    transition:
      background 0.34s var(--zynoo-ease),
      backdrop-filter 0.34s var(--zynoo-ease);
  }

  body:has(.zynoo-main-nav .header-item.has-children:hover)::before,
  body:has(.zynoo-main-nav .header-item.has-children.is-mega-open)::before {
    background: rgba(0, 12, 42, 0.18);
    backdrop-filter: blur(2px);
  }

  body:has(.zynoo-main-nav .header-item.has-children:hover) #custom-chat-card,
  body:has(.zynoo-main-nav .header-item.has-children.is-mega-open) #custom-chat-card {
    opacity: 0;
    pointer-events: none;
  }

  main {
    position: relative;
  }
}

/* =========================
   Desktop Medium Screens
   ========================= */

@media (min-width: 64rem) and (max-width: 75rem) {
  .zynoo-main-nav .header-item.has-children > div > ul.zynoo-mega {
    width: min(1040px, calc(100vw - 28px));
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    padding: 20px;
  }

  .zynoo-menu-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 80px;
    padding: 12px 14px;
  }

  .zynoo-menu-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 15px;
  }

  .zynoo-icon::before {
    width: 31px;
    height: 31px;
    flex-basis: 31px;

    -webkit-mask-size: 31px 31px;
    mask-size: 31px 31px;
  }

  .zynoo-mega__main--web > .zynoo-mega__group:not(.zynoo-mega__group--featured),
  .zynoo-mega__main--vps > .zynoo-mega__group:not(.zynoo-mega__group--featured) {
    padding-top: 15px;
  }

  .zynoo-mega__support-img {
    height: 138px;
    min-height: 138px;
  }

  .zynoo-support-card {
    min-height: 126px;
    padding: 18px 20px;
  }
}

/* =========================
   Mobile Navigation
   ========================= */

@media (max-width: 63.99rem) {
  #header-dropdown {
    max-height: calc(100dvh - 95px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .zynoo-main-nav,
  .zynoo-main-nav > ul,
  .zynoo-main-nav .header-item.has-children {
    width: 100%;
  }

  .zynoo-main-nav .header-link {
    width: 100%;
    font-weight: 500 !important;
  }

  .zynoo-main-nav .header-item.has-children > div {
    width: 100%;
    overflow: hidden;
  }

  .zynoo-main-nav .header-item.has-children > div > ul.zynoo-mega {
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition:
      max-height 0.34s var(--zynoo-ease),
      opacity 0.28s var(--zynoo-ease),
      padding 0.28s var(--zynoo-ease);
  }

  .zynoo-main-nav .header-item.has-children > div.active > ul.zynoo-mega,
  .zynoo-main-nav .header-item.has-children.is-mobile-open > div > ul.zynoo-mega {
    max-height: 2400px;
    padding-top: 12px !important;
    padding-bottom: 16px !important;
    opacity: 1;
    pointer-events: auto;
  }

  .zynoo-mega {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .zynoo-mega__main,
  .zynoo-mega__main--web,
  .zynoo-mega__main--vps,
  .zynoo-mega__main--dedicated {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .zynoo-mega__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .zynoo-mega__group--featured {
    padding: 13px;
    border: 1px solid rgba(20, 51, 214, 0.18);
    border-radius: 14px;
    background: #F9FAFF;
  }

  .zynoo-mega__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--zynoo-deep-blue);
    font-size: clamp(11px, 3.3vw, 13px);
    font-weight: 700 !important;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .zynoo-mega__title em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--zynoo-primary);
    color: #fff;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
  }

  .zynoo-menu-grid,
  .zynoo-menu-grid--two {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .zynoo-menu-card {
    display: grid;
    grid-template-columns: clamp(40px, 10vw, 52px) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(10px, 3vw, 14px);
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: inherit;
    text-decoration: none;
  }

  .zynoo-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 10vw, 52px);
    height: clamp(40px, 10vw, 52px);
    min-width: clamp(40px, 10vw, 52px);
    border: 1px solid rgba(0, 105, 255, 0.20);
    border-radius: 13px;
    background: transparent;
    color: var(--zynoo-primary);
  }

  .zynoo-icon::before {
    width: 30px;
    height: 30px;
    flex-basis: 30px;

    -webkit-mask-size: 30px 30px;
    mask-size: 30px 30px;
  }

  .zynoo-menu-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .zynoo-menu-text strong,
  .zynoo-menu-text small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .zynoo-menu-text strong {
    color: var(--zynoo-ink);
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 600 !important;
    line-height: 1.25;
  }

  .zynoo-menu-text small {
    color: var(--zynoo-muted);
    font-size: clamp(11px, 3.2vw, 13px);
    font-weight: 400 !important;
    line-height: 1.35;
  }

  .zynoo-menu-arrow {
    color: var(--zynoo-primary);
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 700;
  }

  .zynoo-mega__support {
    display: none;
  }
}

/* =========================
   Small Mobile
   ========================= */

@media (max-width: 420px) {
  #header-dropdown {
    max-height: calc(100dvh - 88px);
  }

  .zynoo-main-nav .header-link {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .zynoo-menu-card {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  .zynoo-mega__group--featured {
    padding: 12px !important;
  }
}

/* =========================
   Very Small Mobile
   ========================= */

@media (max-width: 360px) {
  .zynoo-menu-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .zynoo-menu-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
  }

  .zynoo-icon::before {
    width: 23px;
    height: 23px;
    flex-basis: 23px;

    -webkit-mask-size: 23px 23px;
    mask-size: 23px 23px;
  }
}

/* =========================
   Reduced Motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
  .zynoo-main-nav *,
  .zynoo-main-nav .header-item.has-children > div > ul.zynoo-mega,
  body::before {
    transition: none !important;
  }
}


/* =========================================
   ZYNOO Testimonials
   Used on homepage and testimonials page
   ========================================= */

.zynoo-home-testimonials {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 100%, rgba(0, 105, 255, 0.07), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(20, 51, 214, 0.06), transparent 24%),
    #ffffff;
  padding-top: 110px;
  padding-bottom: 110px;
}

.zynoo-home-testimonials::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(0, 105, 255, 0.06),
    0 0 0 36px rgba(0, 105, 255, 0.03),
    0 0 0 72px rgba(0, 105, 255, 0.02);
  pointer-events: none;
}

.zynoo-home-testimonials::after {
  content: "";
  position: absolute;
  right: 56px;
  top: 56px;
  width: 86px;
  height: 86px;
  background-image: radial-gradient(rgba(0, 105, 255, 0.18) 2px, transparent 2px);
  background-size: 18px 18px;
  pointer-events: none;
}

.zynoo-home-testimonials__head {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 58px;
  text-align: center;
}

.zynoo-home-testimonials__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1433d6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.zynoo-home-testimonials__eyebrow::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin-left: 12px;
  background: #0069ff;
}

.zynoo-home-testimonials__head h2 {
  color: #1f1b24;
  line-height: 1.2;
  margin-bottom: 18px;
}

.zynoo-home-testimonials__head p {
  color: #474747;
  font-size: 17px;
  line-height: 1.7;
}

.zynoo-home-testimonials__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.zynoo-home-review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 34px 28px 28px;
  border: 1px solid rgba(0, 105, 255, 0.16);
  border-radius: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 18px 50px rgba(0, 12, 42, 0.05);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.zynoo-home-review-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 105, 255, 0.3);
  box-shadow: 0 22px 60px rgba(0, 12, 42, 0.1);
}

.zynoo-home-review-card__quote-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 105, 255, 0.12), rgba(0, 105, 255, 0.04));
  color: #0069ff;
  box-shadow: inset 0 0 0 1px rgba(0, 105, 255, 0.1);
}

.zynoo-home-review-card__quote-badge svg {
  width: 26px;
  height: 26px;
  display: block;
}

.zynoo-home-review-card__text {
  color: #1f1b24;
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 28px;
}

.zynoo-home-review-card__line {
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: #0069ff;
  margin-top: auto;
  margin-bottom: 20px;
}

.zynoo-home-review-card__meta {
  margin-bottom: 16px;
}

.zynoo-home-review-card__meta strong {
  display: block;
  color: #1f1b24;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.zynoo-home-review-card__meta span {
  display: block;
  color: #6a6a6a;
  font-size: 14px;
  line-height: 1.5;
}

.zynoo-home-review-stars {
  display: flex;
  align-items: center;
  gap: 1px;
  line-height: 0;
  margin-top: 2px;
}

.zynoo-home-review-stars img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(77%) sepia(92%) saturate(1866%)
          hue-rotate(357deg) brightness(101%) contrast(101%);
}

.zynoo-home-testimonials__action {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.zynoo-home-testimonials__action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 42px;
  border-radius: 999px;
  background: #0069ff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 16px 34px rgba(0, 105, 255, 0.22);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.zynoo-home-testimonials__action a:hover {
  transform: translateY(-2px);
  background: #1433d6;
  box-shadow: 0 20px 44px rgba(0, 105, 255, 0.28);
}

/* =========================================
   ZYNOO Universal Review Rating Badge
   Can be used in hero, testimonials, and service sections
   ========================================= */

.zynoo-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  max-width: 100%;
  padding: 13px 22px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 105, 255, 0.14);
  box-shadow: 0 18px 45px rgba(0, 12, 42, 0.08);
  text-decoration: none;
  margin-top: 15px;
}

.zynoo-rating-badge img {
  display: block;
  width: 178px;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}

.zynoo-rating-badge__text {
  display: block;
  color: #474747;
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
}

.zynoo-rating-badge__text strong {
  color: #1f1b24;
  font-weight: 800;
}

.text-white .zynoo-rating-badge,
.blue-bg .zynoo-rating-badge {
  background: #ffffff;
  color: #474747;
}

/* Compact version for hero sections */
.zynoo-rating-badge--hero {
  gap: 16px;
  padding: 12px 20px;
  border-radius: 16px;
}

.zynoo-rating-badge--hero img {
  width: 170px;
}

.zynoo-rating-badge--hero .zynoo-rating-badge__text {
  font-size: 14px;
}

/* Smaller version for centered testimonial heading */
.zynoo-rating-badge--compact {
  gap: 14px;
  padding: 11px 18px;
  border-radius: 16px;
}

.zynoo-rating-badge--compact img {
  width: 155px;
}

.zynoo-rating-badge--compact .zynoo-rating-badge__text {
  font-size: 13px;
}

.zynoo-rating-badge--center {
  margin-left: auto;
  margin-right: auto;
}

/* Tablet */
@media (max-width: 63.99rem) {
  .zynoo-home-testimonials {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .zynoo-home-testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .zynoo-home-review-card {
    min-height: 400px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .zynoo-home-testimonials {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .zynoo-home-testimonials__head {
    margin-bottom: 42px;
  }

  .zynoo-home-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .zynoo-home-review-card {
    min-height: auto;
    padding: 28px 22px 24px;
  }

  .zynoo-home-testimonials__action {
    margin-top: 42px;
  }

  .zynoo-rating-badge,
  .zynoo-rating-badge--hero,
  .zynoo-rating-badge--compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 18px;
  }

  .zynoo-rating-badge img,
  .zynoo-rating-badge--hero img,
  .zynoo-rating-badge--compact img {
    width: 165px;
    max-width: 100%;
  }

  .zynoo-rating-badge__text,
  .zynoo-rating-badge--hero .zynoo-rating-badge__text,
  .zynoo-rating-badge--compact .zynoo-rating-badge__text {
    white-space: normal;
    font-size: 14px;
  }

  .zynoo-rating-badge--center {
    align-items: center;
    text-align: center;
  }
}