/* general.css */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert
}

input,
button,
textarea,
select {
    font: inherit
}

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

a,
button {
    cursor: revert
}

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

img {
    max-width: 100%
}

table {
    border-collapse: collapse;
    width: 100%
}

input,
textarea {
    -webkit-user-select: auto
}

textarea {
    white-space: revert
}

meter {
    -webkit-appearance: revert;
    -moz-appearance: revert;
    appearance: revert
}

::-webkit-input-placeholder {
    color: unset
}

::-moz-placeholder {
    color: unset
}

:-ms-input-placeholder {
    color: unset
}

::-ms-input-placeholder {
    color: unset
}

::placeholder {
    color: unset
}

:where([hidden]) {
    display: none
}

:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto
}

:where([draggable="true"]) {
    -webkit-user-drag: element
}

:after,
:before {
    text-decoration: inherit;
    vertical-align: inherit
}


/* Bundled homepage styles */
/* grids.css */
.container,
.container-fluid {
    width: 100%;
    padding-left: calc(var(--gutter-x) * 0.5);
    padding-right: calc(var(--gutter-x) * 0.5);
    margin-left: auto;
    margin-right: auto
}

@media (min-width:0) {
    :root {
        --width-container: 540px
    }
}

@media (min-width:48em) {
    :root {
        --width-container: 72rem
    }
}

@media (min-width:62em) {
    :root {
        --width-container: 960px
    }
}

@media (min-width:75em) {
    :root {
        --width-container: 1140px
    }
}

@media (min-width:87.5em) {
    :root {
        --width-container: 1350px
    }
}

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

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-0.5 * var(--gutter-x));
    margin-right: calc(-0.5 * var(--gutter-x))
}

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

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}

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

@media (min-width:36em) {
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width:48em) {
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width:62em) {
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width:75em) {
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width:87.5em) {
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

/* icons.css */
[class^="icon-"],
[class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-play:before {
    margin-left: .5rem
}

.icon-signup:before {
    content: "\e957"
}

.icon-login:before {
    content: "\e959"
}

.icon-leaf:before {
    content: "\e951"
}

.icon-medal:before {
    content: "\e952"
}

.icon-star:before {
    content: "\e953"
}

.icon-award:before {
    content: "\e954"
}

.icon-aparat:before {
    content: "\e950"
}

.icon-faq:before {
    content: "\e94d"
}

.icon-monitor:before {
    content: "\e94e"
}

.icon-dl:before {
    content: "\e94c"
}

.icon-linedot:before {
    content: "\e94b"
}

.icon-digits:before {
    content: "\e93d"
}

.icon-percentage:before {
    content: "\e93e"
}

.icon-code-circle:before {
    content: "\e93f"
}

.icon-doc-code:before {
    content: "\e940"
}

.icon-dropbox:before {
    content: "\e941"
}

.icon-hint:before {
    content: "\e942"
}

.icon-git:before {
    content: "\e944"
}

.icon-form:before {
    content: "\e945"
}

.icon-headphone:before {
    content: "\e946"
}

.icon-woocommerce:before {
    content: "\e947"
}

.icon-message2:before {
    content: "\e948"
}

.icon-mirroring-screen:before {
    content: "\e949"
}

.icon-mobile:before {
    content: "\e94a"
}

.icon-calendar:before {
    content: "\e93a"
}

.icon-message:before {
    content: "\e93b"
}

.icon-search:before {
    content: "\e93c"
}

.icon-category:before {
    content: "\e92a"
}

.icon-widget:before {
    content: "\e902"
}

.icon-diamonds:before {
    content: "\e92b"
}

.icon-chat:before {
    content: "\e92c"
}

.icon-tag:before {
    content: "\e92d"
}

.icon-eye:before {
    content: "\e92e"
}

.icon-target:before {
    content: "\e92f"
}

.icon-eye2:before {
    content: "\e930"
}

.icon-share:before {
    content: "\e931"
}

.icon-text:before {
    content: "\e932"
}

.icon-news:before {
    content: "\e933"
}

.icon-info-circle:before {
    content: "\e94f"
}

.icon-info:before {
    content: "\e934"
}

.icon-sim:before {
    content: "\e935"
}

.icon-hash:before {
    content: "\e936"
}

.icon-menu:before {
    content: "\e91f"
}

.icon-list:before {
    content: "\e937"
}

.icon-pause:before {
    content: "\e928"
}

.icon-play:before {
    content: "\e90f"
}

.icon-shield:before {
    content: "\e920"
}

.icon-bell:before {
    content: "\e921"
}

.icon-letter:before {
    content: "\e922"
}

.icon-map:before {
    content: "\e923"
}

.icon-more:before {
    content: "\e924"
}

.icon-post:before {
    content: "\e925"
}

.icon-phone:before {
    content: "\e915"
}

.icon-usergroup:before {
    content: "\e900"
}

.icon-user:before {
    content: "\e905"
}

.icon-stopwatch:before {
    content: "\e901"
}

.icon-time:before {
    content: "\e908"
}

.icon-clock:before {
    content: "\e938"
}

.icon-star-shine:before {
    content: "\e903"
}

.icon-sun:before {
    content: "\e906";
    color: #fff;
}

.icon-moon:before {
    content: "\e91c";
    color: #fff;
}

.icon-discuss:before {
    content: "\e907"
}

.icon-brochure:before {
    content: "\e909"
}

.icon-comment:before {
    content: "\e90a"
}

.icon-spaceship:before {
    content: "\e90b"
}

.icon-rocket:before {
    content: "\e90c"
}

.icon-plane:before {
    content: "\e90d"
}

.icon-baloon:before {
    content: "\e90e"
}

.icon-scrollup:before {
    content: "\e91a"
}

.icon-long-arrow-r:before {
    content: "\e927"
}

.icon-long-arrow-l:before {
    content: "\e929"
}

.icon-simple-arrow-left:before {
    content: "\e916"
}

.icon-circle-arrow2-t:before {
    content: "\e939"
}

.icon-circle-arrow-down:before {
    content: "\e917"
}

.icon-circle-arrow-up:before {
    content: "\e918"
}

.icon-circle-arrow-l:before {
    content: "\e91b"
}

.icon-circle-arrow-r:before {
    content: "\e919"
}

.icon-close-circle1:before {
    content: "\e91d"
}

.icon-close:before {
    content: "\e91e"
}

.icon-tick-circle:before {
    content: "\e943"
}

.icon-twitter:before {
    content: "\e926"
}

.icon-linkedin:before {
    content: "\e913"
}

.icon-pinterest:before {
    content: "\e958"
}

.icon-instagram:before {
    content: "\e910"
}

.icon-whatsapp:before {
    content: "\e911"
}

.icon-telegram:before {
    content: "\e912"
}

.icon-facebook:before {
    content: "\e904"
}

.icon-youtube:before {
    content: "\e95f"
}

.icon-tiktok:before {
    content: "\e961"
}

.icon-threads:before {
    content: "\e960"
}

.icon-check:before {
    content: "\e967"
}

.icon-attach:before {
    content: "\e95c"
}

.icon-quot:before {
    content: "\e972"
}

.icon-close-circle:before {
    content: "\e914"
}

.icon-global:before {
    content: "\e956"
}

.icon-copy:before {
    content: "\e955"
}

.icon-done:before {
    content: "\e968"
}


:root,
[data-theme="light"] {
    --c-primary: #1c49bc;
    --c-primary-100: #fff;
    --c-secondary: #1c49bc;
    --c-secondary-100: #f5f7fa;
    --c-secondary-200: #edeff2;
    --c-secondary-300: #e2e9fa;
    --c-white: #fff;
    --c-black: #000000;
    --c-neutral-100: #f5f5f5;
    --c-neutral-200: #e6e6e6;
    --c-neutral-300: #696969;
    --c-neutral-400: #606060;
    --c-neutral-500: #9c9c9c;
    --c-neutral-600: #a6a6a6;
    --c-neutral-700: #2b2b2b;
    --c-neutral-800: #333;
    --c-neutral-900: #181818;
    --ease1: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease2: cubic-bezier(0.5, 1, 0.89, 1);
    --bg-secondary-100: var(--c-secondary-100);
    --bg-primary-100: var(--c-primary-100);
    --bg-white: var(--c-white);
    --bg-black: var(--c-black);
    --bg-primary: var(--c-primary);
    --bg-primary-rgb: 28, 73, 188;
    --bg-secondary: var(--c-secondary);
    --bg-secondary-200: var(--c-secondary-200);
    --bg-secondary-rgb: 28, 73, 188;
    --bg-body: var(--c-secondary-100);
    --bg-neutral-100: var(--c-neutral-100);
    --bg-neutral-200: var(--c-neutral-200);
    --bg-neutral-700: var(--c-neutral-700);
    --bg-neutral-800: var(--c-neutral-800);
    --bg-neutral-900: var(--c-neutral-900);
    --text-white: var(--c-white);
    --text-black: var(--c-black);
    --text-primary: var(--c-primary);
    --text-secondary: var(--c-secondary);
    --border-neutral-100: var(--c-neutral-200);
    --c-text-body: var(--c-neutral-700);
    --c-text-200: var(--c-neutral-200);
    --c-text-300: var(--c-neutral-300);
    --c-text-400: var(--c-neutral-400);
    --c-text-500: var(--c-neutral-500);
    --c-text-600: var(--c-neutral-600);
    --c-text-700: var(--c-neutral-700);
    --width-container: 127rem;
    --danger: #f40259;
    --bg-danger: #faf2f2;
    --success: #0acd58;
    --bg-success: #ecf9ee;
    --info: #0288d1;
    --bg-info: #e6f1fc;
    --ff-main: Estedad, YekanBakh, Arial, sans-serif;
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 12px;
    --fs-14: 12px;
    --fs-15: 13px;
    --fs-16: 14px;
    --fs-17: 14px;
    --fs-18: 15px;
    --fs-20: 16px;
    --fs-22: 17px;
    --fs-24: 18px;
    --fs-28: 19px;
    --fs-30: 20px;
    --fs-33: 20px;
    --fs-36: 20px;
    --fs-42: 20px;
    --fw-100: "wght" 100, "dots" 1;
    --fw-150: "wght" 150, "dots" 1;
    --fw-200: "wght" 200, "dots" 1;
    --fw-250: "wght" 250, "dots" 1;
    --fw-300: "wght" 300, "dots" 1;
    --fw-350: "wght" 350, "dots" 1;
    --fw-400: "wght" 400, "dots" 1;
    --fw-450: "wght" 450, "dots" 1;
    --fw-500: "wght" 500, "dots" 1;
    --fw-600: "wght" 600, "dots" 1;
    --gutter-x: 2rem;
    --heading_h1_fontsize: 2.8rem;
    --swiper-pagination-bullet-width: 15px;
    --swiper-pagination-bullet-height: 9px;
    --swiper-pagination-color: var(--c-primary);
    --swiper-pagination-bullet-horizontal-gap: 2px;
    --swiper-pagination-bullet-inactive-color: var(--c-neutral-600);
    --swiper-pagination-bullet-inactive-opacity: 0.4;
    --swiper-navigation-size: 3.6rem;
    --br-12: 12px;
    --br-16: 8px;
    --br-20: 13px;
    --br-22: 14px;
    --br-24: 16px;
    --br-32: 20px
}

[data-theme="dark"] {
    --c-dark-100: #040b24;
    --c-dark-200: #1d283a;
    --c-dark-300: #101116;
    --c-dark-400: #99b3ff;
    --c-neutral-700: #c4c5c5;
    --text-black: var(--c-white);
    --c-text-300: var(--c-white);
    --c-text-400: var(--c-neutral-600);
    --c-text-body: var(--c-white);
    --text-secondary: var(--c-primary);
    --bg-secondary-100: var(--c-dark-300);
    --bg-primary-100: var(--c-dark-100);
    --bg-neutral-200: var(--c-dark-100);
    --bg-secondary-200: var(--c-dark-100);
    --bg-body: var(--c-dark-100);
    --bg-white: var(--c-dark-200);
    --bg-neutral-100: var(--c-dark-100);
    --bg-black: var(--c-dark-100)
}

@font-face {
    font-family: YekanBakh;
    src: url("/fonts/YekanBakhFaNum-Thin.woff2") format("woff2");
    font-weight: 100 249;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: YekanBakh;
    src: url("/fonts/YekanBakhFaNum-Light.woff2") format("woff2");
    font-weight: 250 399;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: YekanBakh;
    src: url("/fonts/YekanBakhFaNum-Regular.woff2") format("woff2");
    font-weight: 400 599;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: YekanBakh;
    src: url("/fonts/YekanBakhFaNum-SemiBold.woff2") format("woff2");
    font-weight: 600 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "icomoon";
    src: url("/fonts/icomoon.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Estedad;
    src: url(/fonts/Estedad-FD-Thin.5efb4f18.woff2);
    font-weight: 300
}

@font-face {
    font-family: Estedad;
    src: url(/fonts/Estedad-FD-Regular.1b639b90.woff2);
    font-weight: 400
}

@font-face {
    font-family: Estedad;
    src: url(/fonts/Estedad-FD-Medium.d65e58fc.woff2);
    font-weight: 500
}

@font-face {
    font-family: Estedad;
    src: url(/fonts/Estedad-FD-SemiBold.2d199d27.woff2);
    font-weight: 600
}

@font-face {
    font-family: Estedad;
    src: url(/fonts/Estedad-FD-Bold.d3aed6ad.woff2);
    font-weight: 700
}

@font-face {
    font-family: Estedad;
    src: url(/fonts/Estedad-FD-ExtraBold.50daa4ed.woff2);
    font-weight: 800
}

@font-face {
    font-family: Estedad;
    src: url(/fonts/Estedad-FD-Black.c7a07256.woff2);
    font-weight: 900
}

@font-face {
    font-family: Estedad-EN;
    src: url(/fonts/Estedad.fc3d3cf5.woff2);
    font-weight: 300
}

@font-face {
    font-family: Estedad-EN;
    src: url(/fonts/Estedad.fc3d3cf5.woff2);
    font-weight: 400
}

@font-face {
    font-family: Estedad-EN;
    src: url(/fonts/Estedad.fc3d3cf5.woff2);
    font-weight: 500
}

@font-face {
    font-family: Estedad-EN;
    src: url(/fonts/Estedad.fc3d3cf5.woff2);
    font-weight: 600
}

@font-face {
    font-family: Estedad-EN;
    src: url(/fonts/Estedad.fc3d3cf5.woff2);
    font-weight: 700
}

@font-face {
    font-family: Estedad-EN;
    src: url(/fonts/Estedad.fc3d3cf5.woff2);
    font-weight: 800
}

@font-face {
    font-family: Estedad-EN;
    src: url(/fonts/Estedad.fc3d3cf5.woff2);
    font-weight: 900
}

* {
    -webkit-tap-highlight-color: transparent;
    font-weight: 400;
}

::-moz-selection {
    color: var(--c-neutral-800);
    background: #cadefe
}

::selection {
    color: var(--c-neutral-800);
    background: #cadefe
}

*:focus-visible {
    outline: none;
    outline-offset: 4px
}

[role="button"] {
    cursor: pointer
}

body {
    position: relative;
    direction: rtl;
    font-family: var(--ff-main);
    font-size: var(--fs-14);
    line-height: 2;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--c-text-body);
    background-color: var(--bg-body);
    font-variation-settings: "wght" 300, "dots" 1;
    font-feature-settings: "kern" on, "liga" on, "dlig" on;
    -moz-font-feature-settings: "kern" on, "liga" on, "dlig" on;
    -webkit-font-feature-settings: "kern" on, "liga" on, "dlig" on;
    -ms-font-feature-settings: "kern" on, "liga" on, "dlig" on;
    -o-font-feature-settings: "kern" on, "liga" on, "dlig" on;
    font-weight: 400;

}

[data-theme="dark"] body::before {
    content: "";
    background-color: var(--bg-body);
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none
}

html {
    font-size: 50%;
    scroll-behavior: smooth;
    font-weight: 400;

}

:target {
    scroll-margin-top: 14rem
}

i,
svg {
    vertical-align: baseline;
    display: inline-block
}

input {
    font-family: var(--ff-main), Arial;
    outline: none !important;
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

video {
    width: 100%;
    display: block;
    border-radius: var(--br-32);
    overflow: hidden;
    height: auto;
    border: 2px solid var(--bg-white)
}

a {
    transition: 0.3s;
    color: currentColor;
    text-decoration: none
}

ins {
    text-decoration: none
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type="number"] {
    -moz-appearance: textfield
}

.site-main {
    margin-top: 3.5rem;
    margin-bottom: min(10rem, 15vw)
}

del {
    text-decoration: line-through
}

#mask {
    position: fixed;
    z-index: 60;
    background: rgba(0, 0, 0, .65);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none
}

code.highlighted {
    padding: 0 !important;
    position: relative
}

.copy-code--btn {
    position: absolute;
    width: 4rem;
    height: 4rem;
    background: #21262d;
    top: 1rem;
    right: 0;
    margin: 0 1rem;
    border: 1px solid #ffffff46;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    transition: 0.3s -webkit-filter;
    transition: 0.3s filter;
    transition: 0.3s filter, 0.3s -webkit-filter;
    float: right
}

.copy-code--btn span {
    position: absolute;
    right: calc(100% + 0.5rem);
    font-size: 12.5px;
    background: var(--c-neutral-300);
    border-radius: 4px;
    padding: 0 .5rem;
    display: none
}

.code__editor .copy-code--btn {
    top: -1.5rem
}

.copy-code--btn .icon-done {
    font-size: 1.6rem;
    color: var(--success);
    display: none
}

.copy-code--btn.active {
    border-color: var(--success)
}

.copy-code--btn:hover {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2)
}

.copy-code--btn.active span,
.copy-code--btn.active .icon-done {
    display: inline-block
}

.copy-code--btn.active .icon-copy {
    display: none
}

.sw-auto-height .swiper-slide {
    height: auto
}

.lg-outer .lg-thumb {
    margin: 0 auto
}

.lg-outer.lg-thumb-open .lg-thumb-outer {
    direction: ltr
}

.btn--modal {
    cursor: pointer
}

.empty-error {
    color: var(--danger);
    background-color: var(--bg-danger);
    padding: 1rem 2rem;
    border-radius: var(--br-32);
    font-size: var(--fs-16)
}

.ltr {
    direction: ltr
}

.overflow-x {
    overflow-x: auto;
    display: flex;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    white-space: nowrap
}

.lg-outer .lg-thumb-outer {
    background-color: #000;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.lg-backdrop {
    background-color: #0000009c;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px)
}

.order-first {
    order: -1
}

.ai-center {
    align-items: center
}

.ai-end {
    align-items: end
}

.main-text {
    line-height: 2.7;
    font-size: var(--fs-15)
}

.nowrap {
    white-space: nowrap
}

.h-100 {
    height: 100%
}

.w-100 {
    width: 100%
}

.tabcontent.active {
    display: block !important
}

.tabcontent {
    display: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s
}

@-webkit-keyframes fadeEffect {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeEffect {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.rangesliders-wrapper,
.wrapper-features,
.mobile .sw--custom-features .swiper-wrapper,
.desktop .sw--custom-features,
.smssolution-contents--desc,
.mobile .sw--features .swiper-wrapper,
.desktop .sw--features {
    -webkit-mask-size: 200% 100%;
    -webkit-mask-position: 200% 0%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-animation: mfadeEffect 1s forwards;
    animation: mfadeEffect 1s forwards
}

.desktop .sw--features {
    padding-bottom: 19px !important
}

@-webkit-keyframes mfadeEffect {
    0% {
        -webkit-mask-position: -200% 0
    }

    100% {
        -webkit-mask-position: 50% 0
    }
}

@keyframes mfadeEffect {
    0% {
        -webkit-mask-position: -200% 0
    }

    100% {
        -webkit-mask-position: 50% 0
    }
}

.gutter-b {
    margin-bottom: var(--gutter-x)
}

canvas {
    position: fixed;
    opacity: .15;
    inset: 0;
    z-index: -1;
    transform: scale(2);
    transition: 1s;
    pointer-events: none
}

html.mobile main canvas {
    display: none
}

@media (min-width:2000px) {
    canvas {
        transform: scale(3)
    }
}

.required {
    color: var(--c-secondary);
    order: -1;
    margin-left: 2px
}

.title--between {
    display: flex;
    justify-content: space-between;
    gap: min(2rem, 3vw);
    flex-wrap: wrap;
    align-items: center
}

.justify-center {
    justify-content: center
}

.btns--box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    row-gap: 1rem;
    margin-top: min(4rem, 6vw)
}

.mobile .plugins-container {
    display: flex;
    flex-direction: column
}

.mobile .plugins-content {
    order: 10
}

.form-signup--single .btn--simple-dark {
    width: 100%;
    margin: 1rem auto 0;
    display: flex;
    justify-content: space-between;
    height: 40px
}

.form-signup--single .btn--simple-dark span {
    font-size: 24px
}

.form-signup__img {
    width: 100%
}

.form-signup__img img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    margin-bottom: 15px
}

.form-signup__txt {
    text-align: center
}

.form-signup--single {
    background: var(--bg-white);
    border-radius: var(--br-32);
    padding: 2rem
}

.form-signup__txt .title {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-20);
    font-variation-settings: var(--fw-400);
    color: var(--text-black);
    font-size: var(--fs-18)
}

.form-signup__txt .desc {
    text-align: center;
    font-size: var(--fs-13);
    color: var(--c-text-400);
    margin: 1.5rem 0 2rem
}

.form-signup--single .plan-form-input {
    background: var(--bg-neutral-100);
    display: flex;
    align-items: center;
    border-radius: var(--br-32);
    direction: ltr;
    transition: 0.3s;
    height: 44px
}

.form-signup--single .plan-form-input .code {
    min-width: 60px;
    border-right: 4px solid var(--bg-white);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--c-text-300)
}

.form-signup--single .plan-form-input input {
    padding: 0 1.4rem;
    width: 100%
}

.form-signup--single .plan-form-input input::-webkit-input-placeholder {
    opacity: .5
}

.form-signup--single .plan-form-input input::-moz-placeholder {
    opacity: .5
}

.form-signup--single .plan-form-input input:-ms-input-placeholder {
    opacity: .5
}

.form-signup--single .plan-form-input input::-ms-input-placeholder {
    opacity: .5
}

.form-signup--single .plan-form-input input::placeholder {
    opacity: .5
}

.form-signup--single .disable .plan-form-input {
    background: #f5e0e8
}

[data-theme="dark"] .form-signup--single .disable .plan-form-input {
    background: #672d42
}

.form-signup--single .send-mobilenumber {
    width: 100%;
    margin-top: 10px;
    height: 46px;
    font-size: 14px
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-h {
    overflow: hidden
}

.line-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.line-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.line-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.position-static {
    position: static
}

.relative {
    position: relative
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.modular.bg-global+.pt-xs {
    padding-top: 3.6rem
}

.modular.bg-global+.pt-sm {
    padding-top: 4.5rem
}

.modular.bg-global+.pt-md {
    padding-top: 6rem
}

.modular.bg-global+.pt-lg {
    padding-top: 7.5rem
}

.modular.bg-global+.pt-xl {
    padding-top: 10rem
}

.modular.bg-global+.pt-xxl {
    padding-top: 12rem
}

.pt-xs {
    padding-top: 3.6rem
}

.pt-sm {
    padding-top: 4.5rem
}

.pt-md {
    padding-top: 6rem
}

.pt-lg {
    padding-top: min(7.5rem, 10vw)
}

.pt-xl {
    padding-top: min(10rem, 15vw)
}

.pt-xxl {
    padding-top: min(12rem, 18vw)
}

.mb-1 {
    margin-bottom: 1rem
}

.pb-xs {
    padding-bottom: 3.6rem
}

.pb-sm {
    padding-bottom: 4.5rem
}

.pb-md {
    padding-bottom: 6rem
}

.pb-lg {
    padding-bottom: min(7.5rem, 10vw)
}

.pb-xl {
    padding-bottom: min(10rem, 15vw)
}

.pb-xxl {
    padding-bottom: min(12rem, 18vw)
}

.clr-white {
    color: var(--c-white)
}

.clr-primary {
    color: var(--c-primary)
}

.clr-secondary {
    color: var(--c-secondary)
}

.clr-neutral-500 {
    color: var(--c-neutral-500)
}

.mx-auto {
    margin: 0 auto
}

.fs-14 {
    font-size: var(--fs-14)
}

.fs-15 {
    font-size: var(--fs-15)
}

.fs-16 {
    font-size: var(--fs-16)
}

.fs-17 {
    font-size: var(--fs-17)
}

.fs-18 {
    font-size: var(--fs-18)
}

.fs-20 {
    font-size: var(--fs-20)
}

.fs-22 {
    font-size: var(--fs-22)
}

.fs-24 {
    font-size: var(--fs-24)
}

.fs-28 {
    font-size: var(--fs-28)
}

.fs-30 {
    font-size: var(--fs-30);
    line-height: 1.5
}

.fs-36 {
    font-size: var(--fs-36);
    line-height: 1.5
}

.fs-33 {
    font-size: var(--fs-33);
    line-height: 1.5
}

.fs-42 {
    font-size: var(--fs-42);
    line-height: 1.5
}

.fs-18-min {
    font-size: var(--fs-18-min)
}

.title-wrapper {
    margin-bottom: 2.2rem
}

.title-wrapper .subtitle {
    margin-top: 1.5rem
}

.fw-200 {
    font-variation-settings: var(--fw-200)
}

.fw-250 {
    font-variation-settings: var(--fw-250)
}

.fw-350 {
    font-variation-settings: var(--fw-350)
}

.fw-400 {
    font-variation-settings: var(--fw-400)
}

.fw-500 {
    font-variation-settings: var(--fw-500)
}

.fw-600 {
    font-variation-settings: var(--fw-600)
}

.general--iconiclist__item {
    display: flex;
    align-items: center;
    gap: 1.2rem
}

.general--iconiclist__item:not(:last-child) {
    margin-bottom: 2rem
}

.general--iconiclist__item .text {
    font-size: var(--fs-15);
    flex: auto
}

.general--iconiclist__item .title {
    font-variation-settings: var(--fw-500)
}

.general--iconiclist__item .desc {
    margin-top: .4rem
}

.general--iconiclist__item .icon {
    width: 4rem;
    flex: none;
    font-size: 3.6rem;
    color: var(--c-primary)
}

.general--iconiclist__item .icon.num {
    min-width: 3rem;
    width: auto
}

.general--iconiclist {
    margin-top: 2.4rem
}

.description-txt {
    line-height: 2.5;
    text-align: justify
}

.general-tabbtns {
    background-color: var(--bg-white);
    display: flex;
    white-space: nowrap;
    padding: 1.2rem;
    gap: 1.6rem;
    overflow-x: auto;
    border-radius: var(--br-32);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none
}

.general-tabs-wrap {
    display: grid;
    justify-content: center;
    margin-bottom: 3.2rem
}

.general-tabbtns .tablinks.active {
    background-color: var(--bg-primary);
    box-shadow: 0 4px 4px 0 rgba(132, 132, 132, .15);
    color: #fff;
}

.general-tabbtns .tablinks {
    border-radius: var(--br-32);
    background: var(--bg-neutral-100);
    min-width: 10rem;
    text-align: center;
    padding: .8rem 1.5rem;
    transition: 0.3s;
    border: 1px solid var(--bg-white);
    flex: none
}

.mobile .operator-wrapper .btns--box {
    justify-content: center;
    margin-top: 2.4rem
}

.modular-main>.section:not(:first-child, .section--hero, .section--testimonal, .section--codes, .section--content.type4, .section--list, .section--editor, .section--webservicebtns) {
    content-visibility: auto;
    contain-intrinsic-size: 1000px
}

.modular-main {
    position: relative
}

.accordion-content:not(.open-in-desktop) {
    display: none
}

.accordion-content.show {
    display: block
}

.modular.bg-global {
    min-height: 38.5rem;
    position: absolute;
    width: 100%;
    z-index: -1
}

.modular .bg-global__img {
    background-size: cover;
    background-position: left
}

.bg-global {
    background-color: var(--bg-primary);
    isolation: isolate;
    position: relative;
    overflow: hidden
}

[data-theme="dark"] .bg-global {
    background-color: var(--c-black)
}

.bg-global__img {
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1
}

.blog--header .bg-global__img {
    background-size: cover;
    background-position: left
}

.breadcrumb--ab .bg-global {
    padding-top: min(13rem, 24vw);
    padding-bottom: 4rem
}

.breadcrumb--ab .bg-global.blog--header {
    padding-bottom: 13rem
}

.loaded.bg-global__img {
    animation: loadHero 1.5s ease-in 1 forwards;
    -webkit-animation: loadHero 1.5s ease-in forwards;
    background-color: var(--bg-body)
}

[data-theme="dark"] .bg-global__img {
    -webkit-filter: brightness(.3);
    filter: brightness(.3)
}

.mobile .section--content .editor-content,
.mobile .section--content .title-wrapper {
    text-align: center
}

.mobile .section--content .btns--box {
    justify-content: center
}

@-webkit-keyframes loadHero {
    0% {
        transform: scale(1.1);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes loadHero {
    0% {
        transform: scale(1.1);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.mobile .grid-slides {
    width: calc(100% + var(--gutter-x));
    margin-right: calc(-1 * (var(--gutter-x) * 0.5));
    display: grid;
    grid-auto-flow: column;
    scroll-behavior: smooth;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    gap: min(3rem, 4vw);
    padding: 0 2rem;
    box-sizing: border-box;
    grid-template-columns: none
}

::-webkit-scrollbar {
    width: 5px;
    height: 4px
}

::-webkit-scrollbar-track {
    background: #f6f6f6;
    border-radius: 100vw
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #3d3d3d
}

::-webkit-scrollbar-thumb {
    background: var(--c-primary);
    /* border-radius: 100vw; */
    cursor: pointer;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--c-secondary)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-primary)
}

.hide-scrollbar::-webkit-scrollbar {
    display: none !important
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none
}

.hide-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important
}

.mobile .swiper:not(.custom-style) .swiper-wrapper {
    width: calc(100% + var(--gutter-x));
    margin-right: calc(-1 * (var(--gutter-x) * 0.5));
    padding: 0 2rem
}

.mobile .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.mobile .swiper-wrapper {
    display: grid;
    grid-auto-flow: column;
    scroll-behavior: smooth;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    grid-auto-columns: min(30rem, 100%);
    gap: min(3rem, 4vw)
}

.mobile .swiper-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.mobile .swiper-arrows,
.mobile .side-arrows {
    display: none
}

.mobile .swiper-button-prev,
.mobile .swiper-button-next {
    display: none
}

.bg-dark {
    background: var(--c-neutral-900);
    color: var(--text-white)
}

@media (min-width:22.5em) {
    :root {
        --fs-13: 13px;
        --fs-14: 13px;
        --fs-15: 14px;
        --fs-16: 15px;
        --fs-17: 16px;
        --fs-18: 16px;
        --fs-20: 18px;
        --fs-22: 20px;
        --fs-24: 22px;
        --fs-28: 23px;
        --fs-30: 24px;
        --fs-33: 26px;
        --fs-36: 28px;
        --fs-42: 30px
    }

    html {
        font-size: 51.5%
    }
}

@media (min-width:36em) {
    .general-tabbtns {
        border-radius: var(--br-32);
        width: initial;
        margin-right: unset
    }

    a:is(:hover, :focus-visible) {
        text-decoration: none;
        color: var(--c-primary)
    }

    html {
        font-size: 53.5%
    }

    .swiper:not(.custom-style) {
        width: auto;
        margin-right: auto;
        padding: unset
    }
}

@media (min-width:48em) {
    .title-wrapper {
        margin-bottom: 4.2rem
    }

    .title-wrapper.xs {
        margin-bottom: 3rem
    }

    .title-wrapper.xxs {
        margin-bottom: 1.6rem
    }

    html {
        font-size: 56.5%
    }
}

@media (min-width:64em) {
    html {
        font-size: 59.5%
    }

    :root {
        --fs-13: 13px;
        --fs-14: 14px;
        --fs-15: 15px;
        --fs-16: 16px;
        --fs-17: 17px;
        --fs-18: 18px;
        --fs-20: 20px;
        --fs-22: 22px;
        --fs-24: 24px;
        --fs-28: 28px;
        --fs-30: 30px;
        --fs-33: 33px;
        --fs-36: 36px;
        --fs-42: 42px;
        --br-32: 32px;
        --br-16: 16px;
        --br-24: 24px;
        --br-20: 20px;
        --br-22: 22px
    }
}

@media (min-width:75em) {
    html {
        font-size: 62.5%
    }

    .subtitle--sm .subtitle {
        max-width: 50%;
        margin: 1.5rem auto 0;
        font-variation-settings: var(--fw-100)
    }
}

#request-wrap {
    position: fixed;
    top: 5rem;
    right: 0;
    bottom: 3rem;
    left: 0;
    z-index: 999999;
    display: none;
    overflow: hidden;
    outline: 0;
    padding-top: 5rem
}

#request-wrap .close-request-box {
    position: fixed;
    background-color: #19222ebd;
    inset: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px)
}

#request-wrap .request-box-holder {
    width: min(412px, 90%);
    flex-direction: column;
    display: flex;
    max-height: 100%;
    height: auto;
    margin-inline: auto;
    position: relative
}

#request-wrap .request-box {
    position: relative;
    flex: 1 1 auto;
    text-align: center;
    overflow: hidden;
    background: var(-bg-white);
    padding: 1rem;
    padding-top: 15px;
    border-radius: 12px;
    flex-direction: column;
    display: flex
}

#request-wrap .icon-close {
    position: absolute;
    left: 0;
    font-size: 13px;
    top: -4.5rem;
    cursor: pointer;
    z-index: 30;
    color: var(--c-white);
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 1rem;
    background: var(--text-secondary);
    padding: 10px;
    border-radius: 7px;
    transition: 0.3s
}

#request-wrap .icon-close:hover {
    background: rgb(0 65 255 / 58%)
}

#request-wrap .icon-close b {
    font-family: var(--ff-main);
    font-size: 14px
}

#request-wrap .request-box .form-signup--single {
    overflow-y: auto;
    height: 100%;
    padding: 1rem;
    margin-bottom: 0
}

#request-wrap .request-box .form-signup__img img {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%
}

.load-more-faqs.btn {
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    justify-content: center;
    margin: 3rem auto
}

muchat-chatbox-bubble {
    color: #000
}

/* components/header.css */
#header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    pointer-events: none
}

.header-banner img {
    width: 100%
}

.header-banner {
    display: block
}

.header-wrap-menu {
    align-items: stretch;
    display: flex;
    gap: 1rem;
    font-size: var(--fs-15);
    flex-wrap: wrap;
    font-weight: 500;
}

.header-wrap-menu>li {
    display: flex;
    flex-direction: column
}

.header-wrap-menu>li:first-child>:is(a, span) {
    margin-right: 0;
    padding-right: 0
}

.header-primary {
    padding: 1.5rem 0;
    pointer-events: auto;
    background: rgba(255, 255, 255, .51);
    box-shadow: 0 -12px 10px 0 rgba(211, 211, 211, .15);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px)
}

[data-theme="dark"] .header-primary {
    background-color: #101116bd;
    box-shadow: 0 1px 10px 0 rgb(255 255 255 / 8%)
}

.header-primary--right {
    justify-self: center;
    display: flex;
    align-items: center
}

.header-primary--inner {
    display: grid;
    grid-template-columns: min(74px, 25vw) auto min(74px, 25vw);
    gap: 2rem
}

.header-primary--left {
    display: flex;
    align-items: center;
    gap: .8rem
}

.btn--header-demo,
.btn--header-login {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 4.2rem;
    min-width: 13.3rem;
    gap: .8rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    z-index: 1;
    padding: 1rem 1rem 1rem 1.6rem;
    position: relative;
    transition: 0.3s;
    white-space: nowrap;
    border-radius: var(--br-32);
    cursor: pointer;
    font-size: var(--fs-14);
    display: none;
    font-weight: 500;
}

.btn--header-demo i,
.btn--header-login i {
    font-size: 1.8rem;
    vertical-align: baseline
}

.btn--header-login {
    border: 1px solid var(--bg-primary);
    background: var(--bg-white)
}

.btn--header-demo {
    background: var(--bg-primary);
    color: #fff
}

.btn--header-login:hover {
    border-color: var(--c-secondary);
    color: var(--text-secondary)
}

.btn--header-login:hover i {
    color: var(--text-secondary)
}

.btn--header-demo:hover {
    background: var(--c-secondary);
    color: var(--text-white)
}

.sms-logo {
    max-width: 14rem;
    display: block
}

[data-theme="dark"] .mobile-menu-wrapper .img-logo.logo1,
[data-theme="dark"] .sms-logo .img-logo.logo1 {
    display: none !important
}

[data-theme="dark"] .mobile-menu-wrapper .img-logo.logo2,
[data-theme="dark"] .sms-logo .img-logo.logo2 {
    display: block !important
}

[data-theme="light"] .mobile-menu-wrapper .img-logo.logo2,
[data-theme="light"] .sms-logo .img-logo.logo2 {
    display: none !important
}

[data-theme="light"] .mobile-menu-wrapper .img-logo.logo1,
[data-theme="light"] .sms-logo .img-logo.logo1 {
    display: block !important
}

.sms-logo img {
    width: 100%
}

.switch-theme {
    background: var(--bg-neutral-100);
    height: min(40px, 12.111vw);
    display: flex;
    align-items: center;
    border-radius: 36px;
    position: relative;
    isolation: isolate;
    width: min(74px, 25vw);
    justify-content: space-between;
    padding: 0 5px
}

.switch-theme button {
    width: min(32px, 9.889vw);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    height: 100%;
    cursor: pointer;
    opacity: .5
}

.switch-theme::before {
    content: "";
    background: var(--bg-primary);
    position: absolute;
    width: min(32px, 9.889vw);
    height: min(32px, 9.889vw);
    border-radius: 50%;
    display: block;
    z-index: -1;
    left: min(37px, 12vw);
    transition: 0.5s var(--ease1)
}

.switch-theme.dark::before {
    left: 5px
}

[data-theme="dark"] .switch-theme button.active {
    color: var(--c-black)
}

.header-primary--nav {
    display: none
}

.header-secondary-container {
    background-color: var(--bg-neutral-700);
    color: var(--text-white);
    pointer-events: auto;
    transition: transform 0.6s;
    z-index: -1;
    position: relative;
    opacity: 1
}

[data-theme="dark"] .header-secondary-container {
    background-color: var(--bg-black);
    box-shadow: inset 0 -1px 6px 0 rgb(128 160 255 / 23%)
}

.header-secondary {
    display: none;
    overflow: hidden
}

.nav-up .header-secondary-container {
    transform: translateY(-6rem);
    pointer-events: none
}

.nav-up .header-secondary--inner {
    transform: translateY(-3rem);
    opacity: 0
}

.header-secondary--inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.6s, opacity 0.5s;
    transform: translateY(0);
    opacity: 1
}

.header-secondary .header-wrap-menu>li>:is(a, span) {
    padding: 10px 10px;
    font-size: var(--fs-16)
}

.header--phone {
    display: flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap
}

.header--phone i {
    font-size: 2rem;
    vertical-align: baseline
}

.header-wrap-menu>li>:is(a, span) {
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    gap: .8rem;
    transition: 0.3s
}

.header-wrap-menu>li>.sub-menu li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 0;
    padding-right: 0;
    margin: 0 4rem;
    padding-top: 14px;
    padding-bottom: 14px
}

.header-wrap-menu>li>.sub-menu li:first-child {
    margin-top: 2rem
}

.header-wrap-menu>li>.sub-menu li:last-child {
    margin-bottom: 2rem
}

.header-wrap-menu>li ul li ul li:first-child {
    margin-top: 1rem !important
}

.header-wrap-menu>li ul li ul li:last-child {
    margin-top: 1rem !important
}

.header-wrap-menu>.menu-item-has-children>span:after,
.header-wrap-menu>.menu-item-has-children>a:after {
    content: "\e90e";
    font-family: icomoon;
    display: inline-block;
    margin-right: 7px;
    font-size: 8px;
    transition: 0.6s
}

.header-wrap-menu>li>.sub-menu li.menu-item-has-children>a:after {
    content: "\e907";
    margin-right: auto;
    font-family: "icomoon";
    padding-right: 9px;
    font-size: 11px;
    color: rgba(80, 80, 73, .6)
}

.header-wrap-menu>li>.sub-menu li:not(:last-child)>a {
    border-bottom: 1px solid var(--c-secondary)
}

.header-wrap-menu>.menu-item-has-children>.sub-menu {
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 48%);
    -webkit-clip-path: inset(0 -100vmax -100vmax -100vmax);
    clip-path: inset(0 -100vmax -100vmax -100vmax)
}

.header-wrap-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
    z-index: 9999;
    overflow: visible;
    pointer-events: auto
}

.header-wrap-menu .sub-menu {
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
    min-width: 26rem;
    position: absolute;
    top: 100%;
    right: 0;
    right: auto;
    border-radius: 0 0 12px 12px;
    background: var(--bg-submenu);
    pointer-events: none;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-in
}

.header-wrap-menu>li ul li ul {
    top: 0 !important;
    right: 100% !important;
    border-radius: 12px;
    min-width: 19.7rem !important
}

.mm-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    width: min(38px, 12vw);
    height: min(38px, 12vw);
    border-radius: 50%;
    font-size: 16px
}

.mobile body {
    padding-bottom: 6rem
}

.fix-menu {
    position: fixed;
    bottom: -1px;
    right: 0;
    left: 0;
    padding: 1.2rem min(2rem, 2vw);
    display: flex;
    z-index: 12;
    background: rgba(255, 255, 255, .51);
    box-shadow: 0 -12px 10px 0 rgba(211, 211, 211, .15);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    gap: min(2vw, 16rem);
    align-items: center;
    justify-content: space-between
}

[data-theme="dark"] .fix-menu {
    background: #101116bd
}

.fix-menu .menu--item.login {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: min(11vw, 5rem);
    min-width: 13.3rem;
    gap: .8rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    z-index: 1;
    padding: 1rem 1rem 1rem 1.6rem;
    position: relative;
    transition: 0.3s;
    white-space: nowrap;
    border-radius: var(--br-32);
    cursor: pointer;
    background: var(--bg-primary);
    color: var(--c-neutral-700)
}

.fix-menu .menu--item {
    display: flex;
    align-items: center;
    gap: min(2rem, 1vw);
    justify-content: center;
    flex: 1;
    font-size: min(12px, 3.2vw)
}

.fix-menu .menu--item.call i {
    transform: rotateY(180deg)
}

.fix-menu .menu--item i {
    font-size: min(15px, 4.5vw);
    margin-left: .5rem
}

#menumobile {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(40rem, 85%);
    background: var(--bg-secondary-200);
    z-index: 1010;
    transition: all 0.5s;
    right: -100%;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3) !important;
    flex-direction: column;
    display: flex
}

#menumobile.active {
    right: 0
}

#nomenumobile {
    color: var(--c-neutral-500);
    font-size: 25px;
    line-height: 1;
    position: absolute;
    left: 12px;
    top: 13px
}

.title-mm {
    padding: 40px 16px 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-body);
    flex-direction: column
}

.title-mm .btn {
    margin-top: 2rem;
    gap: 1rem
}

.mobile .title-mm {
    padding: 16px 21px
}

#menumobile img {
    width: 140px;
    -o-object-fit: contain;
    object-fit: contain;
    height: auto
}

.main-mm {
    padding: 20px 16px;
    overflow-y: auto;
    font-size: var(--fs-14);
    line-height: 1.7;
    padding-bottom: 9rem
}

.mt-auto {
    margin-top: auto !important
}

.main-mm ul li {
    position: relative
}

.main-mm ul li a {
    position: relative;
    display: flex;
    font-variation-settings: var(--fw-400);
    align-items: center;
    justify-content: space-between
}

.mm-arrow-btn {
    cursor: pointer;
    transform: rotate(270deg);
    font-size: 9px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s
}

.mm-arrow-btn i {
    vertical-align: unset
}

#menumobile .sub-menu {
    display: none;
    padding: 2rem 3rem
}

#menumobile .main-mm>ul>li.menu-item-has-children>.sub-menu::before {
    content: "";
    position: absolute;
    background: var(--c-secondary-300);
    border-radius: 10px;
    inset: 0 -4rem -6rem -4rem;
    pointer-events: none
}

#menumobile .main-mm>ul>li.menu-item-has-children>.sub-menu {
    position: relative
}

#menumobile .main-mm>ul>li.menu-item-has-children>.sub-menu>li.menu-item-has-children .sub-menu {
    border-right: 1px solid var(--c-neutral-300);
    padding: 0 2rem;
    margin: 2rem 0 0
}

#menumobile li:not(:last-child) {
    margin-bottom: 18px
}

.main-mm>ul>li {
    border-radius: 8px;
    background: var(--bg-body);
    overflow: hidden
}

[data-theme="dark"] .main-mm>ul>li {
    border: 1px solid #ffffff26
}

.main-mm>ul>li>a {
    padding: 2rem
}

.main-mm>ul>li:not(:last-child) {
    margin-bottom: 12px
}

.main-mm>ul>li:not(.menu-item-has-children)>a:after {
    content: "\e916";
    font-family: "icomoon";
    cursor: pointer;
    font-size: 9px
}

.main-mm li.active>a {
    color: var(--text-secondary) !important
}

[data-theme="dark"] .main-mm li.active>a {
    color: var(--c-secondary) !important
}

.main-mm li.active>a .mm-arrow-btn {
    transform: rotate(90deg)
}

#breadcrumbs .container>span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 2.4rem;
    color: var(--c-text-300);
    font-size: var(--fs-13)
}

#breadcrumbs .breadcrumb_last {
    color: var(--text-secondary);
    padding-left: 10px
}

#breadcrumbs .sep {
    width: 8px;
    height: 1px;
    background: var(--bg-neutral-700);
    border-radius: 2px;
    flex: none
}

[data-theme="dark"] #breadcrumbs .sep {
    background: var(--c-white)
}

.breadcrumb--ab #breadcrumbs .container>span {
    position: absolute;
    z-index: 7;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px)
}

@media (min-width:36em) {
    .fix-menu {
        display: none
    }

    .btn--header-demo,
    .btn--header-login {
        display: inline-flex
    }

    .header-primary--inner {
        display: flex;
        align-items: center
    }

    .header-primary--right {
        gap: 2.4rem;
        flex: 1
    }
}

@media (min-width:75em) {
    .mm-menu {
        display: none
    }

    .header-primary--nav {
        display: flex
    }

    .header-secondary {
        display: block
    }
}

/* components/buttons.css */
.button,
.af-submit-button,
#cancel-comment-reply-link,
.btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 4rem;
    min-width: 12rem;
    display: inline-flex;
    line-height: 1.8;
    justify-content: center;
    font-family: inherit;
    z-index: 1;
    position: relative;
    transition: 0.3s;
    line-height: 1.1;
    cursor: pointer
}

#cancel-comment-reply-link,
.btn--simple-primary {
    background: var(--bg-primary);
    border-radius: var(--br-32);
    align-items: center;
    min-width: 12.7rem;
    padding: 0 2rem;
    color: var(--c-neutral-700)
}

#cancel-comment-reply-link:hover,
.btn--simple-primary:hover {
    background: var(--bg-secondary);
    color: var(--c-white)
}

.btn--simple-dark {
    background: var(--bg-black);
    border-radius: var(--br-32);
    align-items: center;
    min-width: 12.7rem;
    padding: 1rem 2rem 1rem 1rem;
    color: var(--c-white)
}

.btn--white,
.btn--dark,
.btn--primary {
    -webkit-filter: url(#goo);
    filter: url(#goo)
}

.btn--primary .txt::before {
    content: "";
    position: absolute;
    background: var(--bg-primary);
    left: 0;
    right: 0;
    height: 100%;
    width: calc(100% + 4rem);
    border-radius: var(--br-32);
    z-index: -1;
    transition: 0.5s
}

.btn--primary i::after {
    content: "";
    position: absolute;
    background: var(--bg-primary);
    left: 0;
    height: 100%;
    width: calc(100% + 1rem);
    border-radius: var(--br-32);
    z-index: -1;
    transition: 0.5s;
    top: 0
}

.btn:hover .txt {
    transform: translateX(.9rem)
}

.btn:hover .txt::before {
    width: calc(100% + 1.2rem)
}

.btn:hover i::after {
    width: 4rem
}

.btn:hover i {
    transform: translateX(-.9rem)
}

.btn--primary .txt {
    color: #fff;
    padding: 0 2.4rem 0 1.2rem;
    display: flex;
    align-items: center;
    border-radius: var(--br-32);
    position: relative;
    transition: 0.5s;
    font-weight: 300;
}

.btn--primary i {
    color: var(--text-primary);
    display: block;
    padding: .4rem;
    font-size: 2rem;
    border-radius: var(--br-32);
    position: relative;
    transition: 0.5s
}

.btn--primary i::before {
    background: var(--bg-white);
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.btn--white .txt::before,
.btn--dark .txt::before {
    content: "";
    position: absolute;
    background: var(--bg-neutral-800);
    left: 0;
    right: 0;
    height: 100%;
    width: calc(100% + 4rem);
    border-radius: var(--br-32);
    z-index: -1;
    transition: 0.5s
}

.btn--white .txt::before {
    background: var(--c-white)
}

.btn--white i::after,
.btn--dark i::after {
    content: "";
    position: absolute;
    background: var(--bg-neutral-800);
    left: 0;
    height: 100%;
    width: calc(100% + 1rem);
    border-radius: var(--br-32);
    z-index: -1;
    transition: 0.5s;
    top: 0
}

.btn--white i::after {
    background: var(--c-white)
}

.btn--white .txt,
.btn--dark .txt {
    color: #fff;
    padding: 0 2.4rem 0 1.2rem;
    display: flex;
    align-items: center;
    border-radius: var(--br-32);
    position: relative;
    transition: 0.5s
}

.btn--white .txt {
    color: var(--c-black)
}

.btn--white i,
.btn--dark i {
    color: var(--c-text-700);
    display: block;
    padding: .4rem;
    font-size: 2rem;
    border-radius: var(--br-32);
    position: relative;
    transition: 0.5s
}

.btn--white i::before,
.btn--dark i::before {
    background: #fff;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

/* components/cards.css */
.banner--single__item {
    display: block
}

.banner--single__item:not(:only-child) {
    margin-bottom: 1.2rem
}

.banner--single__item img {
    border-radius: var(--br-32);
    width: 100%
}

[data-content="related"] .swiper-slide {
    height: auto
}

.swiper-slide .feature-card {
    height: 100%
}

.feature-card {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 33px;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-22);
    background: var(--bg-white);
    flex: none;
    text-align: center;
    position: relative
}

.feature-card__icon {
    width: 4.2rem;
    height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    background-color: var(--bg-neutral-100);
    border-radius: 50%;
    font-size: 20px;
    margin-bottom: 1.5rem
}

.feature-card__title {
    font-size: var(--fs-16);
    font-variation-settings: var(--fw-400)
}

.feature-card__desc {
    font-size: var(--fs-13);
    color: var(--c-text-300);
    margin-top: 1.6rem;
    display: block
}

.btn-readmore {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #edeff2;
    gap: 6px;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: inline-flex;
    color: var(--c-text-300);
    border-radius: 10px;
    height: 36px;
    align-items: center;
    min-width: 130px;
    justify-content: center;
    font-size: var(--fs-13);
    padding: 10px
}

.mobile[data-theme="dark"] .btn-readmore {
    background: var(--c-black)
}

.btn-readmore i {
    font-size: 9px;
    display: block;
    line-height: 1
}

.planbycount-card {
    flex: none;
    width: calc((100% - var(--space) * calc(var(--col) - 1)) / var(--col));
    border-radius: var(--br-24);
    background: var(--bg-white);
    box-shadow: 0 22px 32px -12px rgba(173, 173, 173, .15);
    padding: 1.4rem .8rem .8rem;
    flex-direction: column;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.planbycount--body {
    border-radius: var(--br-20);
    border: 1px solid var(--bg-neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: min(2rem, 4vw) 2rem;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    margin-top: auto;
    flex-direction: column;
    gap: 10px;
    min-height: 7.5rem
}

.planbycount--body.no-discount {
    padding-left: 2rem !important
}

.planbycount--head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.4rem
}

a.planbycount-card:hover .planbycount--head__arrow {
    color: var(--text-secondary)
}

.planbycount--head__arrow {
    margin-right: auto;
    font-size: 2.4rem;
    color: var(--text-primary);
    transition: 0.3s
}

.planbycount--head__icon {
    width: min(4.8rem, 10vw);
    height: min(4.8rem, 10vw);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-neutral-100);
    border-radius: 50%;
    color: var(--c-primary);
    font-size: 2.2rem
}

.planbycount--head__title {
    font-size: 1.6rem;
    font-variation-settings: var(--fw-400);
    color: var(--c-text-body)
}

.planbycount--head__title em {
    display: block;
    font-size: 12px;
    opacity: .5
}

.planbycount--body__title {
    font-size: min(15px, 3.8vw);
    color: var(--c-text-300)
}

.planbycount-body--price {
    display: flex;
    gap: 1rem;
    align-items: center
}

.planbycount-body--price .price {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.planbycount-body--price .price .sale {
    font-size: var(--fs-13);
    color: var(--c-text-300);
    font-variation-settings: var(--fw-100)
}

.planbycount-body--price .price .regular b {
    font-size: var(--fs-13);
    color: var(--c-text-300)
}

.planbycount-body--price .price .regular em {
    font-size: var(--fs-18);
    font-variation-settings: var(--fw-400);
    color: var(--c-text-body)
}

.planbycount-body--price .discount {
    font-size: min(15px, 4vw);
    color: var(--text-secondary);
    position: absolute;
    left: 0;
    padding-left: .5rem;
    top: 61%;
    transform: translateY(-50%)
}

.planbycount-body--price .discount::before {
    content: "";
    background-color: var(--bg-secondary);
    display: block;
    width: 3px;
    height: 3.5rem;
    position: absolute;
    right: calc(100% + 1px);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px 0 0 2px
}

.plugin-card-adv {
    background: var(--bg-white);
    border-radius: var(--br-24);
    padding: 1.4rem;
    display: flex;
    gap: 8px;
    flex-direction: column;
    height: 100%
}

.plugin-adv__icon img {
    aspect-ratio: 1 / 1;
    -o-object-fit: contain;
    object-fit: contain;
    background: var(--c-secondary-100);
    border-radius: var(--br-20);
    padding: 1rem;
    width: 100%;
    height: 100%
}

.plugin-adv-detail {
    flex: 1
}

.plugin-adv__title {
    font-size: var(--fs-18);
    font-variation-settings: var(--fw-450);
    margin-bottom: 1.2rem;
    text-align: center
}

.plugin-adv-btns {
    display: flex;
    gap: 1.2rem;
    flex-direction: column;
    flex-wrap: wrap
}

.plugin-adv-btns a {
    height: 4rem;
    border-radius: var(--br-32);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: auto;
    min-width: 10rem
}

.plugin-adv-btns .help {
    background-color: var(--c-secondary-300);
    color: var(--c-secondary);
    padding: 1rem;
    min-width: 8rem
}

.plugin-adv-btns .help:hover {
    background-color: var(--c-secondary);
    color: var(--c-white)
}

.plugin-adv-btns .plugin-dl {
    background-color: var(--bg-primary-100);
    padding: 4px;
    justify-content: start;
    gap: .8rem
}

.plugin-adv-btns .plugin-dl:hover {
    background-color: var(--c-primary);
    color: var(--c-black)
}

.plugin-adv__icon {
    width: 100%
}

.plugin-adv-btns .plugin-dl i {
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    border-radius: 50%;
    color: var(--c-primary);
    font-size: 1.8rem
}

.plugin-adv-btns .plugin-dl span {
    flex: 1;
    text-align: center;
    padding-left: .8rem
}

@media (min-width:31.25em) {
    .planbycount--body {
        min-height: 7.5rem;
        flex-direction: row;
        gap: 0;
        padding-left: 4.7rem
    }

    .planbycount-body--price .discount {
        top: 50%
    }
}

@media (min-width:36em) {
    .feature-card {
        width: calc((100% - var(--space) * calc(var(--col) - 1)) / var(--col))
    }
}

@media (min-width:48em) {
    .plugin-card-adv {
        flex-direction: row;
        align-items: center
    }

    .plugin-adv-btns {
        flex-direction: row
    }

    .plugin-adv-btns .plugin-dl span {
        text-align: right
    }

    .plugin-adv__title {
        text-align: right
    }

    .plugin-adv__icon {
        width: 12.4rem;
        flex: none
    }

    .plugin-card-adv {
        padding: .8rem .8rem .8rem 1.4rem
    }
}

@media (min-width:64em) {
    .btn-readmore {
        background: rgba(var(--bg-primary-rgb), .2);
        color: var(--text-primary);
        border-radius: var(--br-32);
        height: 32px;
        gap: 0;
        min-width: 3rem
    }

    .btn-readmore i {
        font-size: 11px
    }

    .feature-card:hover .btn-readmore {
        color: var(--c-white);
        background-color: var(--bg-primary)
    }

    .feature-card {
        padding: 2rem 1.5rem 2.8rem
    }

    .btn-readmore span {
        line-height: 1;
        white-space: nowrap;
        max-width: 0;
        overflow: hidden;
        transition: max-width 0.4s, margin 0.4s;
        margin: 0
    }

    .feature-card:hover .btn-readmore span {
        max-width: 77px;
        margin-left: 5px;
        /* margin-right: 10px */
    }
}

/* sections/section-hero.css */
.section--hero {
    z-index: 1;
    overflow-x: clip
}

.hero-container {
    position: relative
}

.desktop .hero-container.not-canvas::before {
    content: "";
    width: 87rem;
    display: block;
    height: 40rem;
    position: absolute;
    background: rgb(255 190 0 / 19%);
    border-radius: 50%;
    top: 0;
    left: 1%;
    transform: rotate(248deg);
    transform-origin: revert-layer;
    transform-origin: center;
    z-index: -1;
    -webkit-filter: blur(80px);
    filter: blur(80px);
    pointer-events: none
}

.desktop .hero-container.not-canvas::after {
    content: "";
    width: 68rem;
    display: block;
    height: 68rem;
    position: absolute;
    background: rgb(0 65 255 / 12%);
    border-radius: 50%;
    top: -30rem;
    left: -25rem;
    transform-origin: bottom;
    z-index: -1;
    -webkit-filter: blur(90px);
    filter: blur(90px);
    pointer-events: none
}

.desktop .hero-container.not-canvas .bg1 {
    width: 40rem;
    display: block;
    height: 40rem;
    position: absolute;
    background: rgb(255 190 0 / 17%);
    border-radius: 50%;
    top: -26rem;
    right: -29rem;
    transform: rotate(327deg);
    transform-origin: bottom;
    z-index: -1;
    -webkit-filter: blur(62px);
    filter: blur(62px);
    pointer-events: none
}

.desktop .hero-container.not-canvas .bg2 {
    width: 68rem;
    display: block;
    height: 68rem;
    position: absolute;
    background: rgb(0 65 255 / 9%);
    border-radius: 50%;
    top: 50%;
    right: -53rem;
    transform: rotate(327deg);
    transform-origin: bottom;
    z-index: -1;
    -webkit-filter: blur(72px);
    filter: blur(72px);
    pointer-events: none
}

.mobile .hero-container.not-canvas .bg1 {
    width: 31rem;
    display: block;
    height: 47rem;
    position: absolute;
    background: rgb(255 190 0 / 20%);
    border-radius: 50%;
    top: 48%;
    right: -14%;
    transform: rotate(337deg);
    transform-origin: bottom;
    z-index: -1;
    -webkit-filter: blur(62px);
    filter: blur(62px);
    pointer-events: none
}

.mobile .hero-container.not-canvas .bg2 {
    width: 68rem;
    display: block;
    height: 68rem;
    position: absolute;
    background: rgb(0 65 255 / 9%);
    border-radius: 50%;
    top: 17%;
    right: 10%;
    transform-origin: bottom;
    z-index: -1;
    -webkit-filter: blur(72px);
    filter: blur(72px);
    pointer-events: none
}

.hero--text {
    margin: auto;
    text-align: center
}

.hero--bottomtitle {
    font-size: var(--fs-24);
    line-height: 1.5;
    font-weight: 500;
}

.hero--img img {
    border-radius: var(--br-12);
    width: 100%
}

.hero--img {
    padding-top: 5.5rem
}

.hero--desc {
    font-size: var(--fs-16);
    margin-top: 1rem;
    line-height: 2.2;
    font-weight: 400;
}

.hero--title {
    font-size: 22px;
    display: inline-block;
    font-variation-settings: var(--fw-200);
    line-height: 1.5;
    margin: 1rem 0 1.6rem
}

.hero--title strong {
    font-variation-settings: var(--fw-450)
}

.hero--toptitle {
    display: block;
    font-size: var(--fs-16);
    color: var(--text-secondary)
}

[data-theme="dark"] .hero--toptitle {
    display: block;
    font-size: var(--fs-16);
    color: #fff;
}

.hero--text .btn {
    margin-top: 2.9rem
}

.hero--text .btn strong {
    font-variation-settings: var(--fw-400);
    font-size: var(--fs-20);
    margin: 0 2px
}

[data-theme="light"] .hero--img .hero2 {
    display: block !important
}

[data-theme="dark"] .hero--img .hero2 {
    display: none !important
}

[data-theme="light"] .hero--img .hero1 {
    display: none !important
}

[data-theme="dark"] .hero--img .hero1 {
    display: block !important
}

@media (min-width:22.5em) {
    .hero--title {
        font-size: 3.2rem
    }
}

@media (min-width:36em) {
    .hero--title {
        font-size: 4.2rem
    }

    .hero--text .btn {
        margin-top: 4.9rem
    }
}

@media (min-width:64em) {
    .hero-container.has-img {
        display: grid;
        grid-template-columns: 39% 1fr
    }

    .hero--img {
        padding-top: 0
    }

    .hero--img {
        padding-right: 5rem;
        padding-left: 0rem
    }
}

@media (min-width:75em) {
    .hero--img {
        padding-right: 10.5rem;
        padding-left: 3rem
    }
}

/* sections/section-smssolutions.css */
.smssolution-tabs-wrap {
    display: grid;
    justify-content: center;
    margin-bottom: 3.2rem
}

.smssolution-contents--desc {
    text-align: justify
}

.smssolution-tabbtns {
    background-color: var(--bg-white);
    display: flex;
    white-space: nowrap;
    padding: 1.2rem;
    gap: 1.6rem;
    overflow-x: auto;
    border-radius: var(--br-32)
}

.smssolution-contents--cards {
    margin-top: 3rem
}

.smssolution-contents--cards .btns--box {
    justify-content: center
}

.smssolution-tabbtns .tablinks {
    border-radius: var(--br-32);
    background: var(--bg-neutral-100);
    min-width: 110px;
    text-align: center;
    padding: .8rem 8px;
    transition: 0.3s
}

.smssolution-tabbtns .tablinks.active {
    background-color: var(--bg-primary);
    box-shadow: 0 4px 4px 0 rgba(132, 132, 132, .15)
}

.smssolution-contents--desc .btns--box {
    padding-right: 10px
}

.smssolution-contents--desc>.title {
    font-size: var(--fs-33)
}

.smssolution-contents--desc>.desc {
    line-height: 2.6
}

.desktop .sw--features {
    overflow: visible;
    overflow-x: clip
}

.mobile .sw--features .swiper-wrapper {
    grid-template-rows: -webkit-min-content -webkit-min-content;
    grid-template-rows: min-content min-content;
    grid-auto-columns: 232px;
    padding-bottom: 3rem !important;
    row-gap: 4rem
}

.sw--features .swiper-slide {
    height: auto
}

.wrapper-custom--features .swiper-pagination {
    position: absolute;
    right: -.5rem;
    transform: translateY(-50%);
    margin: 0;
    flex-direction: column;
    gap: 1rem
}

.wrapper-custom--features .swiper-pagination .swiper-pagination-bullet {
    height: 2.5rem;
    width: .9rem;
    margin: 0 !important
}

.wrapper-custom--features .swiper-pagination-bullet {
    margin: 0 0.5rem !important
}

.desktop .sw--custom-features {
    height: 55rem;
    padding-right: 25px !important
}

.custom-features__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background-color: var(--bg-white);
    border-radius: var(--br-32);
    padding: 2.7rem 2.4rem;
    height: 100%
}

.mobile .sw--custom-features .swiper-wrapper {
    grid-auto-columns: 37rem
}

.custom-features__item .icon {
    width: 4.4rem;
    height: 4.4rem;
    flex: none;
    font-size: 4rem;
    color: var(--c-primary);
    border-radius: 50%;
    background-color: var(--bg-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem
}

.custom-features__item .num {
    padding-top: .5rem
}

.custom-features__item .text {
    font-size: var(--fs-15);
    flex: auto;
    text-align: justify
}

.custom-features__item .title {
    font-variation-settings: var(--fw-500)
}

.custom-features__item .desc {
    margin-top: .4rem;
    font-size: var(--fs-14)
}

.wrapper-features {
    display: grid;
    grid-auto-flow: column;
    scroll-behavior: smooth;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    gap: min(3rem, 4vw);
    grid-template-rows: -webkit-min-content -webkit-min-content;
    grid-template-rows: min-content min-content;
    grid-auto-columns: 232px;
    row-gap: 4rem;
    width: calc(100% + var(--gutter-x));
    margin-right: calc(-1 * (var(--gutter-x) * 0.5));
    padding: 0 2rem;
    padding-bottom: 3rem
}

.wrapper-planbycount {
    --col: 2
}

.wrapper-planbycount {
    display: flex;
    flex-wrap: wrap;
    --space: min(2rem, 3vw);
    gap: var(--space);
    --col: 2;
    justify-content: center
}

.rangeslider-plan__line {
    background: var(--bg-primary);
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    position: absolute;
    border-radius: 24px;
    pointer-events: none
}

.rangeslider-plan {
    padding: 43px 30px 0;
    margin-bottom: 1rem;
    --position: 0%
}

.rangeslider-plan .pos {
    position: absolute;
    inset: 0;
    width: var(--position);
    pointer-events: none
}

.rangeslider {
    border-radius: 24px;
    background: #dadada;
    height: 8px;
    position: relative;
    cursor: col-resize;
    direction: ltr
}

[data-theme="dark"] .rangeslider {
    background: var(--c-dark-200)
}

.rangeslider-plan__input {
    position: absolute;
    opacity: 0;
    inset: 0
}

.rangeslider-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    color: var(--c-text-300);
    font-size: var(--fs-13);
    margin-bottom: 2rem
}

.rangeslider-title b {
    font-variation-settings: var(--fw-500);
    font-size: var(--fs-15);
    color: var(--c-text-body);
    margin-left: 3px
}

.rangeslider-plan__btn .plan__btn {
    width: 16px;
    height: 16px;
    background: var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 190, 0, .4);
    display: block
}

.rangeslider-plan__btn {
    position: absolute;
    transform: translateY(12px);
    z-index: 2;
    pointer-events: none;
    left: 96%;
    bottom: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.rangeslider-plan__tooltip {
    min-width: 60px;
    height: 23px;
    background: var(--bg-neutral-900);
    border-radius: 8px;
    top: -36px;
    position: absolute;
    color: var(--text-white);
    text-align: center;
    font-size: 12px
}

.rangeslider-plan__tooltip::before {
    content: "";
    border: 6px solid transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    position: absolute;
    top: 100%;
    border-bottom-width: 0;
    border-top-color: var(--bg-neutral-900);
    left: 50%;
    transform: translate(-50%, 0)
}

.nodesc .rangeslider-title {
    margin-bottom: 3rem
}

.nodesc .rangeslider-plan {
    margin-bottom: 2rem
}

@media (min-width:31.25em) {
    .rangeslider-plan__btn {
        left: 98%
    }
}

@media (min-width:36em) {
    .wrapper-features {
        display: flex;
        --space: 2rem;
        gap: var(--space);
        row-gap: 3.5rem;
        --col: 2;
        flex-wrap: wrap;
        justify-content: center;
        overflow: hidden;
        width: auto;
        margin: inherit;
        padding: 0;
        padding-bottom: 2rem
    }

    .smssolution-tabbtns {
        border-radius: var(--br-32);
        width: initial;
        margin-right: unset
    }
}

@media (min-width:48em) {
    .nodesc .wrapper-features {
        --col: 3
    }

    .nodesc .wrapper-planbycount {
        --col: 2 !important
    }

    .wrapper-features {
        --col: 3
    }

    .nodesc .rangeslider-title,
    .nodesc .rangeslider-plan {
        margin-right: auto;
        margin-left: auto;
        width: 51%
    }
}

@media (min-width:64em) {
    .nodesc .wrapper-features {
        --col: 4
    }

    .nodesc .wrapper-planbycount {
        --col: 4 !important
    }

    .smssolution-contents--desc {
        width: 40%;
        flex: none
    }

    .nodesc .smssolution-contents--cards {
        flex: auto;
        width: 100%
    }

    .smssolution-contents--cards {
        flex: none;
        width: calc(60% - 4rem);
        margin: 0
    }

    .smssolution-contents {
        display: flex;
        gap: 4rem;
        align-items: center
    }
}

/* sections/section-plans.css */
.wrapper-plans {
    display: flex;
    scroll-behavior: smooth;
    overflow-x: auto;
    gap: min(3rem, 4vw);
    width: calc(100% + var(--gutter-x));
    margin-right: calc(-1 * (var(--gutter-x) * 0.5));
    padding: 0 3rem
}

.wrapper-plans .plan-card {
    width: 240px
}

.plan-card {
    background: var(--bg-white);
    flex: none;
    border-radius: var(--br-32);
    border: 1px solid rgba(255, 255, 255, .65);
    background: linear-gradient(55deg, rgba(255, 255, 255, .44) 2.1%, rgba(191, 191, 191, .14) 94.58%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 1.2rem;
    display: block
}

.plan-card--inner {
    background-color: var(--bg-white);
    -webkit-filter: drop-shadow(0 7px 12px rgba(184, 184, 184, .25));
    filter: drop-shadow(0 7px 12px rgba(184, 184, 184, .25));
    border-radius: var(--br-32);
    padding: 3rem 2rem 5rem;
    text-align: center
}

.plan-card .price .currency {
    font-size: var(--fs-12);
    font-variation-settings: var(--fw-200)
}

.plan-card .price {
    background: #fff;
    backdrop-filter: blur(60px);
    color: var(--text-primary);
    font-size: var(--fs-16);
    border-radius: 18px;
    padding: 1.3rem 1rem;
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: -1.4rem auto;
    transform: translateY(-1.4rem);
    z-index: 9;
    position: relative;
    line-height: 1;
    font-variation-settings: var(--fw-00);
    display: block;
    min-width: 11.8rem;
    text-align: center;
    font-weight: 400;
}

.plan-card .price b {
    font-size: var(--fs-16)
}

.plan-card--inner>i {
    width: 7.2rem;
    height: 7.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-neutral-100);
    color: var(--text-primary);
    font-size: 3.6rem;
    margin: 0 auto 1.4rem
}

.plan-card--inner h3>* {
    font-size: var(--fs-16);
    font-variation-settings: var(--fw-500);
    font-weight: 700;
}

.plan-form {
    display: flex;
    border-radius: var(--br-32);
    background: var(--bg-white);
    box-shadow: 0 4px 28px 0 rgba(0, 0, 0, .08);
    padding: 1.6rem 2rem;
    gap: 8.4rem;
    align-items: center;
    margin: 0 2vw;
    margin-top: 3.2rem;
    position: relative
}

.plan-form svg {
    width: 21rem;
    flex: none;
    position: absolute;
    bottom: 0;
    -webkit-clip-path: inset(0 6rem 0 0%);
    clip-path: inset(0 6rem 0 0%);
    right: -6rem;
    opacity: .6;
    pointer-events: none
}

.plan-form--content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    text-align: center;
    width: 100%
}

.plan-form--content__txt .title {
    font-size: var(--fs-18);
    font-variation-settings: var(--fw-400)
}

.plan-form--content__txt .desc {
    color: var(--c-text-500);
    margin-top: 1rem
}

.plan-form--content .plan--action {
    display: flex;
    background: var(--bg-neutral-100);
    border-radius: var(--br-32);
    padding: .8rem;
    gap: 7px;
    border: 1px solid transparent;
    transition: 0.3s;
    z-index: 1
}

.plan-form--content .plan--action:focus-within {
    border-color: var(--bg-primary)
}

.plan-form--content .plan-form-input {
    background: var(--bg-white);
    display: flex;
    align-items: center;
    border-radius: var(--br-32);
    direction: ltr;
    transition: 0.3s
}

.plan-form--content .disable .plan-form-input {
    background: #f5e0e8
}

[data-theme="dark"] .plan-form--content .disable .plan-form-input {
    background: #672d42
}

.plan-form--content .plan-form-input input {
    padding: 0 1rem;
    width: min(120px, 40vw)
}

.plan-form--content .plan-form-input input::-webkit-input-placeholder {
    opacity: .5
}

.plan-form--content .plan-form-input input::-moz-placeholder {
    opacity: .5
}

.plan-form--content .plan-form-input input:-ms-input-placeholder {
    opacity: .5
}

.plan-form--content .plan-form-input input::-ms-input-placeholder {
    opacity: .5
}

.plan-form--content .plan-form-input input::placeholder {
    opacity: .5
}

.plan-form--content .plan-form-input .code {
    min-width: min(6rem, 14vw);
    border-right: 4px solid var(--bg-neutral-100);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--c-text-300)
}

.plan-form--content .send-mobilenumber {
    background: var(--bg-primary);
    border-radius: var(--br-24);
    min-width: min(12.7rem, 21vw);
    text-align: center;
    height: 4rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.3s;
    -webkit-filter: grayscale(.2) contrast(1);
    filter: grayscale(.2) contrast(1);
    color: #fff
}

.plan-form--content .plan--action.active button {
    -webkit-filter: grayscale(0) contrast(1.2);
    filter: grayscale(0) contrast(1.2)
}

.plan-form--content .plan--action.active button:hover {
    -webkit-filter: grayscale(0) contrast(1.3);
    filter: grayscale(0) contrast(1.3)
}

.plans-container {
    position: relative
}

.plans-container::before {
    content: "";
    background-color: var(--bg-primary);
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 3.2rem;
    height: 60%;
    margin: auto;
    background-repeat: no-repeat;
    background-position: right
}

.section--plans .btns--box {
    justify-content: center;
    margin-top: 2rem
}

html.desktop .sw--features:not(.swiper-initialized) .swiper-slide {
    flex-shrink: unset;
    margin-left: 20px;
    width: 295px;
    flex: 0 0 295px
}

@media (min-width:36em) {
    .wrapper-plans {
        width: auto;
        margin-right: auto;
        padding: unset;
        margin: 0 2rem
    }

    .wrapper-plans {
        --space: 1.4rem;
        gap: var(--space);
        --col: 2;
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: initial
    }

    .wrapper-plans .plan-card {
        width: calc((100% - var(--space) * calc(var(--col) - 1)) / var(--col));
        box-shadow: 32px 33px 16px -17px rgba(117, 117, 117, .11)
    }
}

@media (min-width:48em) {
    .plan-form--content {
        align-items: baseline;
        justify-content: space-between;
        flex-direction: row;
        flex: auto;
        gap: 10rem;
        text-align: justify;
        width: auto
    }

    .plan--action {
        align-self: end
    }
}

@media (min-width:64em) {
    .wrapper-plans {
        --col: 4
    }

    .plan-form {
        margin-top: 3.2rem;
        padding: 3.6rem 1.6rem 2rem
    }

    .plan-form svg {
        position: static;
        -webkit-clip-path: unset;
        clip-path: unset;
        opacity: 1
    }
}

@media (min-width:75em) {
    .plan-form {
        margin: 0 10.5rem;
        margin-top: 3.2rem;
        padding: 3.6rem 1.6rem 2rem
    }
}

/* sections/section-content.css */
.blockcontent--text .title-wrapper {
    margin-bottom: 0
}

.blockcontent--text {
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center
}

.blockcontent-features {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: min(2vw, 4rem);
    column-gap: min(2vw, 4rem);
    row-gap: 2rem;
    padding-top: 4rem;
    width: 100%;
    --space: min(2vw, 4rem);
    --col: 3
}

.features--item {
    flex: none;
    width: calc((100% - var(--space) * calc(var(--col) - 1)) / var(--col));
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;
    justify-content: center
}

.desktop .blockcontent--img {
    margin-top: 3rem;
    flex: 1
}

.features--item>i {
    background: linear-gradient(180deg, rgba(27, 69, 219, .25) 0%, rgba(27, 69, 219, 0) 100%);
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 2.1rem
}

[data-theme="dark"] .features--item>i,
[data-theme="dark"] .features--content__num {
    color: #99b3ff
}

.features--content__num {
    display: block;
    color: var(--text-secondary);
    direction: ltr;
    font-size: var(--fs-20);
    line-height: 1;
    white-space: nowrap
}

.features--content__num i {
    direction: rtl
}

.span.features--content__title {
    white-space: nowrap
}

.features--content {
    flex: 1;
    text-align: center
}

.features--content__num b {
    font-size: var(--fs-24);
    min-width: 6rem
}

.blockcontent-container .subtitle {
    color: var(--text-secondary)
}

.blockcontent-container .title {
    font-variation-settings: var(--fw-100)
}

.blockcontent-container .title strong {
    font-variation-settings: var(--fw-450)
}

.blockcontent-container .editor-content {
    line-height: 2.6;
    margin-top: 2rem
}

.mobile .blockcontent--img {
    margin-top: 2rem
}

.simplecontent--img img {
    width: 100%;
    border-radius: var(--br-32)
}

.simplecontent--text {
    background: var(--bg-white);
    margin: -12rem 1.5rem 0;
    border-radius: var(--br-32);
    padding: 3rem 2.4rem 2rem;
    position: relative;
    z-index: 2
}

.simplecontent--text .btns--box {
    justify-content: center;
    margin-top: 2.4rem
}

.simplecontent--text .editor-content {
    line-height: 2.5
}

.content--type2 {
    background-color: var(--bg-primary);
    overflow: hidden
}

[data-theme="dark"] .content--type2 {
    background-color: var(--c-dark-300)
}

.about--img {
    position: relative;
    isolation: isolate
}

.mobile .about--img {
    width: calc(100% + var(--gutter-x));
    margin-right: calc(-1 * (var(--gutter-x) * 0.5))
}

.about--img img {
    margin: auto;
    width: 100%
}

.about--img::before {
    content: "";
    width: 81%;
    height: 43%;
    background-color: #ffe134;
    position: absolute;
    pointer-events: none;
    bottom: 0;
    -webkit-filter: blur(7rem);
    filter: blur(7rem);
    left: -4%;
    z-index: -1
}

.mobile .about--img::before {
    width: 100%;
    height: 87%;
    left: 0
}

.about--text {
    padding-bottom: 2rem;
    padding-top: 9rem;
    text-align: center
}

.about-brands-wrapper {
    background: var(--bg-body);
    position: relative;
    z-index: 7
}

.about-brands {
    display: grid;
    transform: translateY(-50%);
    grid-template-columns: repeat(auto-fit, 20rem);
    grid-auto-columns: 20rem;
    align-items: center;
    gap: 1rem;
    overflow-x: auto
}

.mobile .about-brands {
    width: calc(100% + var(--gutter-x));
    margin-right: calc(-1 * (var(--gutter-x) * 0.5));
    display: grid;
    grid-auto-flow: column;
    scroll-behavior: smooth;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    gap: min(3rem, 4vw);
    padding: 0 2rem;
    box-sizing: border-box;
    grid-template-columns: none;
    grid-auto-columns: 26rem
}

.about-brands li {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.about-brands li img {
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    width: 100%;
    filter: drop-shadow(0 0 2px #fff)
}

.about-brands .brand {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.section--content.type4 {
    overflow-x: clip
}

.section--content.type4 .container {
    position: relative
}

.section--content.type4 .container::before {
    content: "";
    width: 49rem;
    display: block;
    height: 78rem;
    position: absolute;
    background: rgb(255 190 0 / 11%);
    border-radius: 50%;
    top: -10rem;
    left: 17%;
    transform: rotate(330deg);
    transform-origin: center;
    z-index: -1;
    -webkit-filter: blur(72px);
    filter: blur(72px);
    pointer-events: none
}

.section--content.type4 .container::after {
    content: "";
    width: 68rem;
    display: block;
    height: 68rem;
    position: absolute;
    background: rgb(0 65 255 / 11%);
    border-radius: 50%;
    top: -45%;
    left: -6%;
    transform: rotate(327deg);
    transform-origin: bottom;
    z-index: -1;
    -webkit-filter: blur(100px);
    filter: blur(100px);
    pointer-events: none
}

.mobile .section--content.type4 .container::before {
    background: rgb(255 190 0 / 22%)
}

.mobile .section--content.type4 .container::after {
    transform: none;
    width: 100%;
    height: 107%;
    top: 0;
    left: 0;
    border-radius: 0%;
    background: rgb(0 65 255 / 15%)
}

.videocontent--text .title-wrapper .subtitle {
    color: var(--c-secondary);
    margin-top: 1rem
}

.video--wrap {
    position: relative
}

.mobile .video--wrap {
    margin-bottom: 2rem
}

.video--wrap video {
    -o-object-fit: cover;
    object-fit: cover
}

.content--video-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    cursor: pointer
}

.content--video-btn i {
    width: 7.4rem;
    height: 7.4rem;
    background: #4b4b4b85;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.5rem;
    position: relative;
    isolation: isolate;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.content--video-btn i::after {
    content: "";
    inset: 1rem;
    background: var(--c-secondary);
    position: absolute;
    border-radius: 50%;
    z-index: -2;
    transition: 0.7s
}

.blockcontent--img img {
    border-radius: var(--br-32);
    width: 100%;
    -webkit-filter: brightness(.8);
    filter: brightness()
}

[data-theme="dark"] .blockcontent--img img {
    -webkit-filter: brightness(.8);
    filter: brightness(.8)
}

.video--wrap img {
    width: 100%;
    border-radius: var(--br-32)
}

@media (min-width:48em) {
    .desktop .blockcontent-container {
        display: flex;
        align-items: center;
        gap: 15rem;

    }

    .desktop .blockcontent--text {
        flex: 0 0 46%;
        max-width: 46%;
        text-align: right;
        display: block
    }

    .features--item {
        flex-direction: row;
        justify-content: inherit
    }

    .features--content {
        text-align: right
    }

    .features--content__num {
        text-align: right
    }

    .desktop .blockcontent--img {
        margin-top: 0
    }
}

@media (min-width:64em) {
    .about--text {
        flex: 1;
        text-align: right;
        padding-bottom: 12rem
    }

    .about-container {
        display: flex;
        align-items: end
    }

    .about--img {
        transform: scale(1.2);
        transform-origin: bottom;
        padding-top: 10.5rem;
        width: 54%;
        flex: none
    }

    .about-brands {
        grid-template-columns: repeat(2, 1fr) 300px repeat(2, 1fr);
        gap: 15px
    }

    .about-brands li.item1 {
        grid-column: 3
    }

    .about-brands li.item2 {
        grid-column: 2
    }

    .about-brands li.item3 {
        grid-column: 4
    }

    .about-brands li.item4 {
        grid-column: 1
    }

    .about-brands li.item5 {
        grid-column: 5
    }

    .simplecontent--text {
        margin: -16rem 10rem 0
    }

    .videocontent-container {
        display: flex;
        gap: 3rem;
        align-items: center
    }

    .video--wrap,
    .videocontent--text {
        flex: 1
    }
}

/* sections/section-testimonal.css */
.section--testimonal {
    overflow-x: clip
}

.section--testimonal .container {
    position: relative
}

.desktop .home .section--testimonal .container::before {
    content: "";
    width: 58rem;
    display: block;
    height: 58rem;
    position: absolute;
    background: rgb(255 190 0 / 16%);
    border-radius: 50%;
    top: 11%;
    left: 14%;
    transform: rotate(245deg);
    transform-origin: revert-layer;
    transform-origin: center;
    z-index: -1;
    -webkit-filter: blur(80px);
    filter: blur(80px);
    pointer-events: none
}

.testimonial--customer-item {
    display: flex;
    padding: 1.6rem min(2rem, 4vw);
    -webkit-filter: blur(.6rem);
    filter: blur(.6rem);
    border-radius: 3.2rem;
    background: var(--bg-white);
    gap: min(2.3rem, 3vw);
    border: 1px solid var(--bg-neutral-200);
    height: 100%;
    transition: 0.5s cubic-bezier(.39, .58, .57, 1)
}

.mobile .sw--logos .swiper-wrapper {
    grid-auto-columns: 19rem
}

.sw--testimonial-video {
    border-radius: var(--br-32)
}

.testimonial--video-item {
    position: relative
}

.testimonial--video-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    cursor: pointer
}

.testimonial--video-btn i {
    width: 7rem;
    height: 7rem;
    background: #4b4b4b85;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.2rem;
    position: relative;
    isolation: isolate;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.testimonial--video-btn i::after {
    content: "";
    inset: .8rem;
    background: var(--c-secondary);
    position: absolute;
    border-radius: 50%;
    z-index: -2;
    transition: 0.7s
}

.testimonial--video-btn:hover i::after {
    background: var(--bg-primary)
}

.customer-text {
    margin: auto 0;
    color: var(--c-text-body)
}

.splide--testimonial .testimonial--customer-item {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25)
}

.swiper-slide-active {
    z-index: 2
}

.customer-img {
    flex: 0 0 min(30vw, 17.2rem);
    max-width: min(30vw, 17.2rem)
}

.customer-img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--br-24)
}

.customer-text .name {
    font-size: var(--fs-16);
    font-variation-settings: var(--fw-400)
}

.customer-text .pos {
    font-size: var(--fs-14)
}

.customer-text .logo {
    margin-top: min(1.8rem, 3vw)
}

.customer-text .logo img {
    width: auto;
    width: 12rem;
    -o-object-fit: contain;
    object-fit: contain;
    background: var(--bg-neutral-100);
    border-radius: var(--br-16);
    padding: 1px 1rem;
    aspect-ratio: 5 / 2
}

[data-theme="dark"] .customer-text .logo img {
    background: var(--c-white)
}

.testimonial-container {
    overflow: hidden
}

.testimonial-arrows {
    gap: 1.4rem;
    z-index: 2;
    position: absolute;
    right: 0;
    display: none;
    flex-direction: column;
    top: 50%;
    transform: translateY(-50%)
}

.testimonial-arrows .custom {
    position: static;
    margin: 0;
    transform: rotate(270deg)
}

.splide--testimonial .center .testimonial--customer-item,
.sw--testimonial .swiper-slide-active .testimonial--customer-item {
    -webkit-filter: blur(0);
    filter: blur(0);
    box-shadow: 0 0 32px 0 rgba(122, 122, 122, .25)
}

.sw--testimonial .swiper-slide {
    height: auto
}

.splide--testimonial .splide__track,
.sw--testimonial {
    overflow: visible
}

.testimonial--customer {
    margin-bottom: 4rem
}

.splide--testimonial .splide__track {
    padding-right: 5rem;
    padding-left: 5rem
}

.splide--testimonial:not(.is-initialized) .splide__slide {
    width: 100%
}

.splide--testimonial-video:not(.is-initialized) .splide__slide {
    width: 100%
}

.logo--item {
    border-radius: var(--br-24);
    background: var(--c-white);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.sw--logos .swiper-slide {
    height: auto
}

.logo--item img {
    aspect-ratio: 1.75;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
    padding: 1rem 2rem
}

.sw--logos {
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 9%, rgba(0, 0, 0, 1) 91%, transparent 101%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 9%, rgba(0, 0, 0, 1) 91%, transparent 101%)
}

.sw--logos {
    margin-top: 5.5rem
}

html.desktop .sw--logos:not(.swiper-initialized) .swiper-slide {
    flex-shrink: unset;
    margin-left: 20px;
    width: 190px;
    flex: 0 0 190px
}

@media (min-width:36em) {
    .customer-img img {
        aspect-ratio: 3/3.5
    }
}

@media (min-width:48em) {
    .testimonial--video-btn i {
        width: 9rem;
        height: 9rem;
        font-size: 3rem
    }

    .testimonial--video-btn i::after {
        inset: 1.2rem
    }
}

@media (min-width:64em) {
    .testimonial--customer {
        margin-bottom: 0
    }

    .testimonial-wrapper {
        display: grid;
        align-items: center;
        grid-template-columns: 38% minmax(0, 1fr);
        gap: 4.5rem
    }

    .sw--testimonial {
        height: 51.3rem
    }

    .sw--testimonial .testimonial--customer-item {
        opacity: 0
    }

    .testimonial--customer-item {
        height: auto;
        box-shadow: none
    }

    .sw--testimonial .swiper-slide-active .testimonial--customer-item {
        transform: translateX(-2rem);
        transform-origin: left
    }

    .sw--testimonial .swiper-slide-visible .testimonial--customer-item {
        opacity: 1
    }

    .sw--testimonial .swiper-slide {
        flex: 1;
        transform-origin: right;
        height: 100%
    }

    .pagination--testimonial {
        display: none
    }

    .testimonial-arrows {
        display: flex
    }
}

/* Site extras */
html.is-home {
    --text: var(--c-text-body);
    --text-soft: var(--c-text-300);
    --text-link: var(--text-secondary);
    --bg-soft: var(--bg-neutral-100);
    --bg-muted: var(--bg-secondary-200);
    --line: var(--border-neutral-100);
    --shadow: 0 22px 32px -12px rgba(173, 173, 173, 0.28);
    --ease-out: var(--ease2);
}

html.is-home[data-theme="dark"] {
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

html.is-home[data-theme="light"] {
    color-scheme: light;
}

html.is-home[dir="ltr"] body {
    direction: ltr;
}

html.is-home body {
    font-weight: 300;
}

html.is-home .hero--title {
    font-weight: 200;
}

html.is-home .hero--title strong {
    font-weight: 600;
}

html.is-home .fw-200,
html.is-home .fw-250 {
    font-weight: 300;
}

html.is-home .fw-350,
html.is-home .fw-400,
html.is-home .fw-500 {
    font-weight: 400;
}

html.is-home .fw-600 {
    font-weight: 600;
}

html.is-home .modular-main>.section {
    content-visibility: visible;
}

html.is-home ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

html.is-home :focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 3px;
}

html.is-home .goo-defs {
    position: absolute;
    width: 0;
    height: 0;
}

html.is-home .brand {
    max-width: 14rem;
    display: block;
    flex: none;
}

html.is-home .brand img {
    width: 70px;
    height: auto;
    /* border-radius: 12px; */
    /* background: #000; */
}

html.is-home .LangSwitch {
    display: none;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-neutral-100);
    gap: 2px;
    font-weight: 500;
}

html.is-home .LangSwitch button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    min-width: 36px;
    height: 32px;
    padding: 0 8px;
    cursor: pointer;
    color: var(--c-text-300);
}

html.is-home .LangSwitch button.is-active {
    background: var(--bg-primary);
    color: #fff;
}

html.is-home .header-wrap-menu li.is-current>a,
html.is-home .header-wrap-menu a.is-current {
    color: var(--c-primary);
}

html.is-home[data-theme="dark"] .switch-theme::before {
    left: 5px;
}

html.is-home .home-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 11, 36, 0.46);
    backdrop-filter: blur(2px);
    z-index: 60;
    border: 0;
}

html.is-home .home-backdrop[hidden] {
    display: none;
}

html.is-home .home-drawer {
    position: fixed;
    z-index: 70;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(360px, 88vw);
    background: var(--bg-white);
    box-shadow: var(--shadow);
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(110%);
    visibility: hidden;
    transition: transform 0.4s var(--ease-out), visibility 0.4s;
    overflow: auto;
}

html.is-home[dir="ltr"] .home-drawer {
    transform: translateX(-110%);
}

body.is-home.Panel--opened {
    overflow: hidden;
}

body.is-home.Panel--opened .home-drawer {
    transform: translateX(0);
    visibility: visible;
}

html.is-home .home-drawer a,
html.is-home .home-drawer button {
    display: flex;
    width: 100%;
    text-align: start;
    background: transparent;
    border: 0;
    border-radius: 14px;
    padding: 12px 12px;
    cursor: pointer;
}

html.is-home .home-drawer a:hover,
html.is-home .home-drawer button:hover {
    background: var(--bg-soft);
}

html.is-home .home-drawer .drawer-langs {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

html.is-home .home-drawer .drawer-langs button {
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-soft);
}

html.is-home .home-drawer .drawer-langs button.is-active {
    background: var(--c-primary);
    color: var(--c-neutral-700);
}

html.is-home .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html.is-home .section {
    position: relative;
    scroll-margin-top: 14rem;
}

html.is-home main {
    position: relative;
}

html.is-home .hero--img {
    position: relative;
    overflow: visible;
}

html.is-home .browser {
    background: var(--bg-white);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--line);
}

html.is-home .browser__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg-soft);
}

html.is-home .browser__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e9fa;
    display: block;
}

html.is-home .browser__bar i:nth-child(1) {
    background: #ffbe00;
}

html.is-home .browser__bar i:nth-child(2) {
    background: #99b3ff;
}

html.is-home .browser__bar span {
    margin-inline-start: 8px;
    background: var(--bg-white);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-soft);
}

html.is-home .browser__body {
    display: grid;
    grid-template-columns: 72px 1fr;
    min-height: 280px;
}

html.is-home .mock-side {
    background: #10182e;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html.is-home .mock-side b,
html.is-home .mock-side span {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
}

html.is-home .mock-side b {
    width: 70%;
    background: var(--c-primary);
}

html.is-home .mock-main {
    padding: 16px;
    display: grid;
    gap: 12px;
}

html.is-home .mock-hero-bar {
    height: 86px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 190, 0, 0.9), transparent 42%),
        linear-gradient(120deg, #0041ff, #1d283a 70%);
}

html.is-home .mock-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

html.is-home .mock-pills span,
html.is-home .mock-lines span {
    display: block;
    border-radius: 12px;
    background: var(--bg-soft);
}

html.is-home .mock-pills span {
    height: 54px;
}

html.is-home .mock-lines {
    display: grid;
    gap: 8px;
}

html.is-home .mock-lines span {
    height: 12px;
}

html.is-home .mock-lines span:nth-child(2) {
    width: 76%;
}

html.is-home .float-card {
    position: absolute;
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    animation: home-float 5.5s ease-in-out infinite;
    font-weight: 500;
}

html.is-home .float-card svg {
    width: 18px;
    height: 18px;
    color: var(--c-primary);
}

html.is-home .float-card--a {
    top: 14%;
    inset-inline-start: 12px;
    z-index: 2;
}

html.is-home .float-card--b {
    bottom: 10%;
    inset-inline-end: 12px;
    z-index: 2;
    animation-delay: -1.8s;
}

@keyframes home-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

html.is-home .section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 28px;
}

html.is-home .section-head h2 {
    margin: 0;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.45;
}

html.is-home .section-head p {
    margin: 10px 0 0;
    color: var(--text-soft);
}

html.is-home .feature-card h3 {
    margin: 0;
}

html.is-home .advantage {
    display: grid;
    gap: 14px;
    background: var(--bg-white);
    border-radius: 28px;
    padding: 22px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

html.is-home .advantage::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 190, 0, 0.28);
    filter: blur(40px);
    inset-inline-end: -40px;
    top: -60px;
}

html.is-home .advantage article,
html.is-home .advantage header {
    position: relative;
}

html.is-home .advantage h3 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 6px;
}

html.is-home .advantage p {
    color: var(--text-soft);
    font-size: 14px;
}

html.is-home .deliver-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

html.is-home .deliver-head .section-head {
    margin: 0;
    text-align: start;
}

html.is-home .deliver-arrows {
    display: flex;
    gap: 8px;
    flex: none;
}

html.is-home .deliver-arrows button {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    border: 0;
    background: var(--bg-white);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--c-text-body);
    transition: transform 0.3s var(--ease-out), background-color 0.3s;
}

html.is-home .deliver-arrows button:hover {
    background: var(--bg-primary);
    color: var(--c-neutral-700);
}

html.is-home .deliver-arrows button:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 3px;
}

html.is-home .deliver-arrows svg {
    width: 18px;
    height: 18px;
}

html.is-home .deliver-window {
    overflow: hidden;
    margin-inline: -0.4rem;
    padding: 0.4rem;
}

html.is-home .deliver-row {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html.is-home .deliver-row::-webkit-scrollbar {
    display: none;
}

html.is-home .deliver-card {
    flex: 0 0 min(26rem, 82vw);
    scroll-snap-align: start;
    background: var(--bg-white);
    border-radius: var(--br-22);
    padding: 2rem 1.6rem 2.2rem;
    box-shadow: var(--shadow);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}

html.is-home .deliver-card:hover {
    transform: translateY(-6px);
}

html.is-home .deliver-card svg {
    width: 28px;
    height: 28px;
    color: var(--c-primary);
}

html.is-home .deliver-card h3 {
    margin: 10px 0 6px;
    font-size: 16px;
    font-weight: 400;
}

html.is-home .deliver-card p {
    color: var(--text-soft);
    font-size: 13px;
}

html.is-home .about-grid,
html.is-home .cta-band,
html.is-home .footer-grid {
    display: grid;
    gap: 18px;
}

html.is-home .process-grid {
    display: grid;
    gap: 2.4rem;
    position: relative;
}

html.is-home .process-timeline {
    display: grid;
    gap: 1.4rem;
    position: relative;
}

html.is-home .process-timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 2.1rem;
    top: 1.6rem;
    bottom: 1.6rem;
    width: 2px;
    background: linear-gradient(var(--bg-primary), rgb(0 65 255 / 28%));
    border-radius: 99px;
}

html.is-home .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    background: var(--bg-white);
    border-radius: var(--br-24);
    padding: 1.8rem 1.8rem 1.8rem 1.4rem;
    box-shadow: var(--shadow);
    position: relative;
}

html.is-home .process-step__num {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-primary);
    color: var(--c-neutral-700);
    font-weight: 600;
    font-size: var(--fs-16);
    position: relative;
    z-index: 1;
}

html.is-home .process-step h3 {
    margin: 0 0 0.4rem;
    font-size: var(--fs-16);
    font-weight: 500;
}

html.is-home .process-step p,
html.is-home .process-reason p {
    margin: 0;
    color: var(--text-soft);
    font-size: var(--fs-14);
}

html.is-home .process-reasons {
    display: grid;
    gap: 1.2rem;
}

html.is-home .process-reason {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: start;
    background: var(--bg-white);
    border-radius: var(--br-22);
    padding: 1.6rem;
    box-shadow: var(--shadow);
}

html.is-home .process-reason i {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-neutral-100);
    color: var(--text-primary);
    font-size: 2rem;
}

html.is-home .process-reason h3 {
    margin: 0 0 0.4rem;
    font-size: var(--fs-16);
    font-weight: 500;
}

html.is-home .about-copy p+p {
    margin-top: 12px;
}

html.is-home .portrait {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--bg-white);
}

html.is-home .portrait img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
}

html.is-home .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

html.is-home .stats article {
    background: var(--bg-white);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--shadow);
}

html.is-home .stats strong {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-link);
    line-height: 1.2;
}

html.is-home .stats span {
    color: var(--text-soft);
    font-size: 13px;
}

html.is-home .outcome-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

html.is-home .outcome-head h2 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    max-width: 640px;
}

html.is-home .outcome-arrows {
    display: flex;
    gap: 8px;
}

html.is-home .outcome-arrows button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: var(--bg-white);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: grid;
    place-items: center;
}

html.is-home .outcome-arrows svg {
    width: 18px;
    height: 18px;
}

html.is-home .is-flip {
    transform: scaleX(-1);
}

html.is-home[dir="ltr"] .outcome-arrows svg,
html.is-home[dir="ltr"] .deliver-arrows svg {
    transform: scaleX(-1);
}

html.is-home[dir="ltr"] .outcome-arrows .is-flip,
html.is-home[dir="ltr"] .deliver-arrows .is-flip {
    transform: none;
}

html.is-home .outcome-window {
    overflow: hidden;
}

html.is-home .outcome-track {
    display: flex;
    gap: 16px;
    transition: transform 0.5s var(--ease-out);
}

html.is-home .outcome-card {
    flex: 0 0 100%;
    background: var(--bg-white);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow);
    min-height: 180px;
}

html.is-home .outcome-card em {
    font-style: normal;
    color: var(--text-link);
    font-size: 13px;
}

html.is-home .outcome-card h3 {
    margin: 8px 0;
    font-size: 18px;
    font-weight: 400;
}

html.is-home .outcome-card p {
    color: var(--text-soft);
}

html.is-home .work-grid,
html.is-home .logo-row {
    display: grid;
    gap: 14px;
}

html.is-home .work-card,
html.is-home .logo-card {
    background: var(--bg-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
}

html.is-home .work-card img,
html.is-home .logo-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

html.is-home .logo-card img {
    height: 84px;
    object-fit: contain;
    padding: 12px;
    background: #fff;
}

html.is-home .work-card figcaption,
html.is-home .logo-card figcaption {
    padding: 12px 14px 14px;
}

html.is-home .faq-list {
    display: grid;
    gap: 10px;
}

html.is-home .faq-item {
    background: var(--bg-white);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

html.is-home .faq-item button {
    width: 100%;
    text-align: start;
    background: transparent;
    border: 0;
    padding: 16px 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 16px;
}

html.is-home .faq-item button svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--ease-out);
    flex: none;
}

html.is-home .faq-item.is-open button svg {
    transform: rotate(45deg);
}

html.is-home .faq-item p {
    padding: 0 18px 16px;
    color: var(--text-soft);
}

html.is-home .cta-band {
    background: #10182e;
    color: #fff;
    border-radius: 28px;
    padding: 28px 22px;
    position: relative;
    overflow: hidden;
}

html.is-home .cta-band::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 190, 0, 0.35);
    filter: blur(40px);
    inset-inline-end: -60px;
    bottom: -80px;
}

html.is-home .cta-band h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 400;
    position: relative;
}

html.is-home .cta-band p {
    position: relative;
    color: rgba(255, 255, 255, 0.78);
    margin: 10px 0 18px;
    max-width: 560px;
}

html.is-home .contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

html.is-home .contact-row a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-white);
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: var(--shadow);
}

html.is-home .contact-row img {
    width: 18px;
    height: 18px;
}

html.is-home .site-footer {
    background: #101116;
    color: #fff;
    padding: 42px 0 28px;
    margin-top: 20px;
}

html.is-home .site-footer a {
    color: rgba(255, 255, 255, 0.82);
}

html.is-home .site-footer h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

html.is-home .site-footer li+li {
    margin-top: 6px;
}

html.is-home .site-footer p {
    color: rgba(255, 255, 255, 0.72);
}

html.is-home .footer-bottom {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

@media (min-width: 36em) {
    html.is-home .LangSwitch {
        display: inline-flex;
    }
}

@media (max-width: 35.99em) {
    html.is-home .float-card {
        font-size: 12px;
        padding: 8px 10px;
        max-width: calc(100% - 24px);
    }

    html.is-home .float-card--a {
        top: 8%;
        inset-inline-start: 8px;
    }

    html.is-home .float-card--b {
        bottom: 8%;
        inset-inline-end: 8px;
    }

    html.is-home .deliver-head,
    html.is-home .outcome-head {
        flex-direction: column;
        align-items: stretch;
    }

    html.is-home .plan-form--content .plan--action {
        flex-wrap: wrap;
        width: 100%;
    }

    html.is-home .header-primary--left {
        justify-self: end;
    }
}

@media (min-width: 640px) {
    html.is-home .advantage {
        grid-template-columns: 1fr 1fr;
    }

    html.is-home .outcome-card {
        flex-basis: calc(50% - 8px);
    }
}

@media (min-width: 960px) {
    html.is-home .advantage {
        grid-template-columns: repeat(3, 1fr);
    }

    html.is-home .about-grid,
    html.is-home .cta-band,
    html.is-home .footer-grid {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
    }

    html.is-home .footer-grid {
        align-items: start;
        grid-template-columns: 1.3fr 0.7fr 0.8fr;
    }

    html.is-home .process-grid {
        grid-template-columns: 0.95fr 1.05fr;
        align-items: start;
        gap: 3rem;
    }

    html.is-home .work-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    html.is-home .logo-row {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media (min-width: 75em) {

    html.is-home .home-drawer,
    html.is-home .home-backdrop {
        display: none;
    }
}

html.is-home .sw,
html.is-home .sw.swiper-rtl {
    position: relative;
}

html.is-home .swiper-button-next,
html.is-home .swiper-button-prev {
    width: 4.2rem;
    height: 4.2rem;
    margin-top: calc(0px - (4.2rem / 2));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bg-primary-rgb), 24%);
    border-radius: 100vw;
    color: var(--text-primary);
    z-index: 10;
    cursor: pointer;
}

html.is-home .swiper-button-next:after,
html.is-home .swiper-rtl .swiper-button-prev:after,
html.is-home[dir="rtl"] .swiper-button-prev:after {
    content: "\e927";
}

html.is-home .swiper-button-prev:after,
html.is-home .swiper-rtl .swiper-button-next:after,
html.is-home[dir="rtl"] .swiper-button-next:after {
    content: "\e929";
}

html.is-home .swiper-button-next:after,
html.is-home .swiper-button-prev:after {
    color: inherit;
    font-family: "icomoon" !important;
    font-size: 13px;
    line-height: 1;
    border: 0.2rem solid var(--text-primary);
    padding: 0.5rem;
    border-radius: 100vw;
    transition: 0.3s;
}

html.is-home .swiper-button-next:not(.swiper-button-disabled):is(:hover, :focus-visible),
html.is-home .swiper-button-prev:not(.swiper-button-disabled):is(:hover, :focus-visible) {
    background-color: rgba(var(--bg-secondary-rgb), 14%);
    color: var(--text-secondary);
}

html.is-home .swiper-button-next:not(.swiper-button-disabled):is(:hover, :focus-visible):after,
html.is-home .swiper-button-prev:not(.swiper-button-disabled):is(:hover, :focus-visible):after {
    border-color: var(--text-secondary);
    padding: 0.7rem;
}

html.is-home .swiper-button-next.swiper-button-disabled,
html.is-home .swiper-button-prev.swiper-button-disabled {
    opacity: 0.2;
    filter: blur(1px) brightness(0);
    cursor: no-drop;
    pointer-events: auto;
}

html.is-home[data-theme="dark"] .swiper-button-next.swiper-button-disabled,
html.is-home[data-theme="dark"] .swiper-button-prev.swiper-button-disabled {
    filter: none;
}

html.is-home .testimonial-arrows {
    display: none;
    flex-direction: column;
    gap: 1.4rem;
    z-index: 2;
    position: absolute;
    right: 0;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
}

html.is-home .testimonial-arrows .custom {
    position: static;
    margin: 0;
    inset: auto;
    transform: rotate(270deg);
}

html.is-home.desktop .testimonial-arrows,
html.desktop .testimonial-arrows {
    display: flex;
}

html.is-home .sw--testimonial {
    overflow: visible;
}

html.is-home #Clients .sw--logos {
    margin-top: 0;
}

html.is-home .side-arrows .swiper-button-next,
html.is-home .side-arrows .swiper-button-prev {
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

html.is-home .testimonial--customer-item,
html.is-home .testimonial--video-item {
    cursor: pointer;
}

html.is-home .testimonial--video-item {
    overflow: hidden;
    border-radius: var(--br-32);
}

html.is-home .testimonial--video-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

@media (max-width: 63.99em) {
    html.is-home .testimonial-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.4rem;
    }

    html.is-home .sw--testimonial {
        height: auto;
    }
}

html.is-home #About .blockcontent-features {
    --col: 2;
}

html.is-home #About .blockcontent-container {
    align-items: center;
}

html.is-home #About .blockcontent--img {
    position: relative;
    isolation: isolate;
    flex: 0 1 38rem;
    width: min(100%, 38rem);
    max-width: 38rem;
    margin-top: 0;
    padding-top: 0;
    transform: none;
}

html.is-home #About .blockcontent--img::before {
    content: "";
    position: absolute;
    inset-inline-end: -6%;
    bottom: 8%;
    width: 62%;
    height: 42%;
    background: #1c49bc42;
    filter: blur(4.8rem);
    z-index: -1;
    pointer-events: none;
}

html.is-home #About .blockcontent--img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 46rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--br-32);
    filter: none;
    -webkit-filter: none;
}

@media (max-width: 63.99em) {
    html.is-home #About .blockcontent--img {
        width: min(100%, 28rem);
        max-width: 28rem;
        margin-inline: auto;
    }

    html.is-home #About .blockcontent--img img {
        max-height: 34rem;
    }
}

html.is-home .contact-board {
    display: grid;
    gap: 3.2rem;
    position: relative;
    isolation: isolate;
    background: var(--bg-white);
    border: 1px solid var(--bg-neutral-200);
    border-radius: var(--br-32);
    padding: clamp(2.4rem, 4vw, 4.4rem);
    box-shadow: var(--shadow);
    overflow: hidden;
}

html.is-home .contact-board::before,
html.is-home .contact-board::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

html.is-home .contact-board::before {
    width: 28rem;
    height: 28rem;
    background: #1c49bc42;
    filter: blur(72px);
    inset-inline-end: -8rem;
    bottom: -10rem;
}

html.is-home .contact-board::after {
    width: 22rem;
    height: 22rem;
    background: rgb(0 65 255 / 12%);
    filter: blur(80px);
    inset-inline-start: -6rem;
    top: -8rem;
}

html.is-home .contact-board .title-wrapper {
    margin-bottom: 0;
}

html.is-home .contact-board .editor-content {
    margin-top: 1.6rem;
}

html.is-home .contact-board .btns--box {
    margin-top: 2.4rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.2rem;
}

html.is-home .contact-board__channels {
    display: grid;
    gap: 1.2rem;
}

html.is-home .contact-channel {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.5rem 1.8rem;
    border-radius: var(--br-24);
    background: var(--bg-neutral-100);
    border: 1px solid transparent;
    transition: 0.35s cubic-bezier(.39, .58, .57, 1);
}

html.is-home .contact-channel:hover {
    background: var(--bg-white);
    border-color: var(--bg-neutral-200);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

html.is-home .contact-channel__icon {
    width: 5rem;
    height: 5rem;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(27, 69, 219, 0.25) 0%, rgba(27, 69, 219, 0) 100%);
}

html.is-home .contact-channel__icon img {
    width: 2.2rem;
    height: 2.2rem;
}

html.is-home .contact-channel__copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

html.is-home .contact-channel__copy strong {
    font-size: var(--fs-16);
    font-variation-settings: var(--fw-450);
}

html.is-home .contact-channel__copy em {
    color: var(--text-soft);
    font-size: var(--fs-13);
    font-style: normal;
}

html.is-home .contact-channel .icon-simple-arrow-left {
    color: var(--text-secondary);
    font-size: 1.6rem;
}

html.is-home .contact-board__empty {
    color: var(--text-soft);
}

html.is-home[dir="ltr"] .blockcontent--text,
html.is-home[dir="ltr"] .features--content,
html.is-home[dir="ltr"] .features--content__num {
    text-align: left;
}

html.is-home[dir="ltr"] .contact-channel .icon-simple-arrow-left {
    transform: scaleX(-1);
}

@media (min-width: 64em) {
    html.is-home .contact-board {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        gap: 4.5rem;
    }
}

html.is-home .wrapper-plans .plan-card {
    width: 28rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

html.is-home .plan-card--inner {
    padding: 2.4rem 1.6rem 2rem;
}

html.is-home .plan-card--inner h3 {
    margin: 0;
}

html.is-home .plan-card__price,
html.is-home .plan-card__props {
    margin: 0 0.2rem;
    padding: 1.2rem 1.3rem;
    border-radius: 2rem;
    text-align: start;
}

html.is-home .plan-card__price {
    /* background: var(--bg-primary); */
    color: var(--c-neutral-700);
}

.plan-card__price strong {
    text-align: center;
}

html.is-home .plan-card__props {
    background: var(--bg-white);
    /* box-shadow: 0 6px 16px rgba(184, 184, 184, 0.6); */
}

html.is-home .plan-card__price em,
html.is-home .plan-card__props em {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: inherit;
    opacity: 0.72;
    font-variation-settings: var(--fw-400);
}

html.is-home .plan-card__price strong>* {
    display: block;
    font-size: var(--fs-16);
    line-height: 1.55;
    font-variation-settings: var(--fw-450);
    font-weight: 400;
}

html.is-home .plan-specs {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

html.is-home .plan-specs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed rgba(43, 43, 43, 0.12);
    font-size: var(--fs-13);
    line-height: 1.5;
}

html.is-home .plan-specs li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

html.is-home .plan-specs li:first-child {
    padding-top: 0;
}

html.is-home .plan-specs span {
    color: var(--c-text-300);
    font-weight: 400;
}

html.is-home .plan-specs b {
    color: var(--c-neutral-700);
    font-variation-settings: var(--fw-450);
    text-align: end;
}

html.mobile.is-home .testimonial--video {
    display: none;
}

html.mobile.is-home .testimonial-wrapper {
    display: block;
    gap: 0;
}

html.mobile.is-home .testimonial--customer {
    margin-bottom: 0;
}

html.mobile.is-home .sw--testimonial {
    overflow: visible;
    padding-bottom: 0.4rem;
}

html.mobile.is-home .sw--testimonial .swiper-wrapper {
    display: flex;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    overflow: visible;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 0;
    scroll-snap-type: none;
}

html.mobile.is-home .testimonial--customer-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    padding: 1.2rem;
    border-radius: 2.4rem;
    filter: none;
    -webkit-filter: none;
    background: var(--bg-white);
    box-shadow: 0 10px 28px rgba(43, 43, 43, 0.08);
}

html.mobile.is-home .sw--testimonial .swiper-slide .testimonial--customer-item {
    opacity: 0.55;
    transform: scale(0.96);
}

html.mobile.is-home .sw--testimonial .swiper-slide-active .testimonial--customer-item {
    opacity: 1;
    transform: none;
    filter: none;
    -webkit-filter: none;
    box-shadow: 0 16px 36px rgba(43, 43, 43, 0.12);
}

html.mobile.is-home .customer-img {
    flex: none;
    max-width: none;
    width: 100%;
}

html.mobile.is-home .customer-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 1.6rem;
}

html.mobile.is-home .customer-text .name {
    font-size: var(--fs-18);
    font-variation-settings: var(--fw-500);
}

html.mobile.is-home .customer-text .pos {
    margin-top: 0.35rem;
    line-height: 1.6;
}

html.mobile.is-home .pagination--testimonial {
    display: flex;
    justify-content: center;
    position: static;
    margin-top: 1.6rem;
}

html.mobile.is-home .pagination--testimonial .swiper-pagination-bullet {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--c-text-300);
    opacity: 0.45;
}

html.mobile.is-home .pagination--testimonial .swiper-pagination-bullet-active {
    background: var(--bg-primary);
    opacity: 1;
    width: 1.6rem;
    border-radius: 999px;
}

html.mobile.is-home #Clients .clients-logos {
    position: relative;
}

html.mobile.is-home #Clients .sw--logos {
    mask-image: none;
    -webkit-mask-image: none;
    margin-top: 0.8rem;
    overflow: visible;
}

html.mobile.is-home #Clients .sw--logos .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
    gap: 1.2rem;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none !important;
}

html.mobile.is-home #Clients .sw--logos .swiper-slide {
    width: auto !important;
    height: auto;
}

html.mobile.is-home #Clients .logo--item {
    min-height: 10.4rem;
    padding: 1.2rem 1rem;
    border: 1px solid var(--bg-neutral-200);
    border-radius: 2rem;
    box-shadow: 0 8px 20px rgba(43, 43, 43, 0.06);
}

html.mobile.is-home #Clients .logo--item img {
    padding: 0.4rem;
    aspect-ratio: 16 / 9;
}

html.mobile.is-home #Clients .side-arrows {
    display: none;
}

html.is-home[data-theme="dark"] .logo--item {
    background: rgba(255, 255, 255, 0.06);
}

.desc span {
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {

    html.is-home *,
    html.is-home *::before,
    html.is-home *::after {
        animation: none !important;
        transition: none !important;
    }
}