/*
   Dotsaap — public site design layer
   Loaded after the theme's style.css. One palette (taken from the logo),
   one button system, one card system, and real mobile sizing.
   Backup of the previous version: /design_backup_20261109/css/
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
    --ds-brand: #1b17ff;          /* logo blue */
    --ds-brand-hover: #120fd6;
    --ds-brand-soft: #eeeeff;
    --ds-brand-grad: linear-gradient(135deg, #1b17ff 0%, #5a4dff 100%);
    --ds-ink: #0f1029;            /* headings */
    --ds-text: #4b5068;           /* body */
    --ds-muted: #7a7f96;
    --ds-line: #e7e8f0;
    --ds-surface: #ffffff;
    --ds-surface-2: #f6f7fb;      /* alternating sections */
    --ds-night: #0b0a2e;          /* footer / dark blocks */
    --ds-ok: #16a34a;
    --ds-radius: 16px;
    --ds-radius-sm: 12px;
    --ds-shadow-sm: 0 1px 2px rgba(15, 16, 41, .04), 0 4px 12px rgba(15, 16, 41, .04);
    --ds-shadow: 0 2px 4px rgba(15, 16, 41, .04), 0 16px 40px rgba(15, 16, 41, .08);
    --ds-header-h: 76px;
    --ds-font: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ds-font-head: 'Outfit', 'IBM Plex Sans Arabic', system-ui, sans-serif;

    /* Re-point the theme's own variables so every theme rule follows the brand */
    --tp-theme-1: var(--ds-night);
    --tp-theme-2: var(--ds-brand);
    --tp-theme-3: var(--ds-brand);
    --tp-heading-primary: var(--ds-ink);
    --tp-text-body: var(--ds-text);
    --tp-common-sky: var(--ds-brand);
    --tp-common-sky-2: #6d6aff;
    --tp-grey-2: var(--ds-surface-2);
    --tp-border-1: var(--ds-line);
    --tp-border-2: var(--ds-line);
    --tp-ff-body: var(--ds-font);
    --tp-ff-heading: var(--ds-font-head);
}

/* ------------------------------------------------------------------ */
/* 2. Base                                                             */
/* ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }

body {
    font-family: var(--ds-font) !important;
    color: var(--ds-text);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    background: var(--ds-surface);
}

h1, h2, h3, h4, h5, h6,
.tp-section-title, .tp-section-title-sm, .tp-section-title-md,
.tp-hero__title, .tp-hero__title-lg, .tp-service__title-sm,
.tp-price__title, .tp-brand__title, .tp-cta__title, .breadcrumb__title {
    font-family: var(--ds-font-head) !important;
    color: var(--ds-ink);
    letter-spacing: -0.02em;
}

p { color: var(--ds-text); }

a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

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

::selection { background: var(--ds-brand); color: #fff; }

.grey-bg, .tp-feature__area, .tp-price__area, .tp-counter__grey-bg, .tp-team__grey-bg { background-color: var(--ds-surface-2) !important; }
.theme-bg { background-color: var(--ds-night) !important; }

/* Titles flagged white in the markup must stay white */
.text-white,
.tp-section-title.text-white,
.tp-section-title-md.text-white,
.tp-choose__subtitle.text-white { color: #fff !important; }

/* Section titles — fluid, never overflow on phones */
.tp-section-title {
    font-size: clamp(28px, 4.2vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}
.tp-section-title-sm,
.tp-section-title-md {
    font-size: clamp(26px, 3.6vw, 38px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
}
.tp-section-title-sm.pb-25, .tp-section-title-sm.pb-20 { padding-bottom: 16px !important; }

/* ------------------------------------------------------------------ */
/* 3. Buttons — one primary, one outline                               */
/* ------------------------------------------------------------------ */
.tp-btn, .tp-btn-blue, .tp-btn-blue-square, .tp-btn-sky, .tp-btn-sky-sm, .tp-btn-pink,
.tp-btn-border,
.tp-faq__content a,
.tp-submit-button button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 26px !important;
    border-radius: var(--ds-radius-sm) !important;
    font-family: var(--ds-font-head) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Bootstrap visibility helpers must win over the display above */
.tp-btn.d-none, .tp-btn-blue.d-none, .tp-btn-border.d-none, .tp-btn-blue-square.d-none { display: none !important; }
@media (min-width: 768px) {
    .tp-btn.d-md-inline-block, .tp-btn-blue.d-md-inline-block, .tp-btn-border.d-md-inline-block { display: inline-flex !important; }
    .tp-btn-blue-square.d-md-block { display: inline-flex !important; }
}

.tp-btn, .tp-btn-blue, .tp-btn-blue-square, .tp-btn-sky, .tp-btn-sky-sm, .tp-btn-pink,
.tp-faq__content a,
.tp-submit-button button {
    background: var(--ds-brand) !important;
    color: #fff !important;
    border: 1px solid var(--ds-brand) !important;
    box-shadow: 0 6px 18px rgba(27, 23, 255, .22) !important;
}
.tp-btn:hover, .tp-btn-blue:hover, .tp-btn-blue-square:hover, .tp-btn-sky:hover, .tp-btn-sky-sm:hover, .tp-btn-pink:hover,
.tp-faq__content a:hover,
.tp-submit-button button:hover {
    background: var(--ds-brand-hover) !important;
    border-color: var(--ds-brand-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(27, 23, 255, .28) !important;
}

.tp-btn-border {
    background: transparent !important;
    color: var(--ds-ink) !important;
    border: 1.5px solid var(--ds-line) !important;
    box-shadow: none !important;
}
.tp-btn-border:hover {
    border-color: var(--ds-brand) !important;
    color: var(--ds-brand) !important;
    background: var(--ds-brand-soft) !important;
    transform: translateY(-1px);
}

/* Theme buttons draw hover "fill" pseudo-elements — switch them off */
.tp-btn::before, .tp-btn::after,
.tp-btn-blue::before, .tp-btn-blue::after,
.tp-btn-blue-square::before, .tp-btn-blue-square::after,
.tp-btn-sky::before, .tp-btn-sky::after,
.tp-btn-border::before, .tp-btn-border::after { display: none !important; }
.tp-btn span, .tp-btn-blue span, .tp-btn-blue-square span, .tp-btn-sky span, .tp-btn-border span { color: inherit !important; position: static !important; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(27, 23, 255, .35);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 4. Header                                                           */
/* ------------------------------------------------------------------ */
.tp-header__top-area { display: none !important; }   /* thin announcement bar duplicated the header */

#header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: var(--ds-header-h);
    display: flex;
    align-items: center;
    padding: 10px 0 !important;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(15, 16, 41, .06) !important;
    box-shadow: 0 1px 0 rgba(15, 16, 41, .02) !important;
    z-index: 999 !important;
    animation: none !important;
    transform: none !important;
}
#header-sticky > .container-fluid { max-width: 1320px; padding-left: 24px; padding-right: 24px; }

.tp-header__logo img { max-height: 40px; width: auto; }

.tp-header__main-menu ul { display: flex; justify-content: center; flex-wrap: nowrap; gap: 4px; margin: 0; }
.tp-header__main-menu ul li { margin: 0 !important; padding: 0 !important; }
.tp-header__main-menu ul li a {
    display: inline-block;
    font-family: var(--ds-font-head) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ds-ink) !important;
    padding: 10px 14px !important;
    border-radius: 10px;
}
.tp-header__main-menu ul li a::after, .tp-header__main-menu ul li a::before { display: none !important; }
.tp-header__main-menu ul li a:hover,
.tp-header__main-menu ul li.active > a { color: var(--ds-brand) !important; background: var(--ds-brand-soft); }

.tp-header__right, .tp-header__right-two { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tp-header__right .mr-10, .tp-header__right-two .mr-10, .tp-header__right-two .mr-15 { margin-right: 0 !important; }
.tp-header__right a, .tp-header__right-two a { min-height: 42px; padding: 9px 18px !important; font-size: 14px !important; }

.tp-header__bars {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 12px;
    background: var(--ds-brand-soft) !important;
    color: var(--ds-brand) !important;
    font-size: 18px;
    line-height: 1;
}
@media (min-width: 992px) { .tp-header__bars.d-lg-none { display: none !important; } }
.tp-header__right .tp-header__bars { margin-left: 4px; }
@media (min-width: 1200px) { .tp-header__right .tp-header__bars { display: none !important; } }

/* Off-canvas mobile menu */
.tpoffcanvas {
    background: #fff !important;
    width: min(360px, 88vw) !important;
    padding: 28px 24px !important;
    box-shadow: -20px 0 50px rgba(15, 16, 41, .18);
}
.tpoffcanvas__logo img { max-height: 36px; }
.tpoffcanvas__close-btn button {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--ds-surface-2) !important; color: var(--ds-ink) !important;
}
.tpoffcanvas .mean-container .mean-nav ul li a {
    font-family: var(--ds-font-head) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: var(--ds-ink) !important;
    text-transform: none !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--ds-line) !important;
}
.tpoffcanvas .mean-container .mean-nav ul li a:hover { color: var(--ds-brand) !important; }
.tpoffcanvas__login-btn { padding: 0 !important; }
.tpoffcanvas__login-btn .tp-btn { width: 100%; }
.offcanva-title { font-size: 18px !important; color: var(--ds-ink) !important; }
.tpoffcanvas__info-icon a {
    background: var(--ds-brand-soft) !important; color: var(--ds-brand) !important;
    border: 0 !important; border-radius: 12px !important;
}
.tpoffcanvas__info-address span { color: var(--ds-muted) !important; }
.tpoffcanvas__info-address a { color: var(--ds-ink) !important; word-break: break-word; }
.tpoffcanvas__social .social-icon a {
    background: var(--ds-surface-2) !important; color: var(--ds-ink) !important; border-radius: 10px !important;
}
.tpoffcanvas__social .social-icon a:hover { background: var(--ds-brand) !important; color: #fff !important; }
.body-overlay { background: rgba(11, 10, 46, .45) !important; backdrop-filter: blur(2px); }

/* ------------------------------------------------------------------ */
/* 5. Hero (home)                                                      */
/* ------------------------------------------------------------------ */
.tp-hero__bg-2, .tp-hero__bg {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 50% at 15% 10%, rgba(27, 23, 255, .08) 0%, transparent 70%),
        radial-gradient(50% 50% at 90% 30%, rgba(90, 77, 255, .08) 0%, transparent 70%),
        linear-gradient(180deg, #fbfbff 0%, var(--ds-surface-2) 100%) !important;
    padding-top: calc(var(--ds-header-h) + 80px) !important;
    padding-bottom: 96px !important;
}
.tp-hero__bg-2::before, .tp-hero__bg-2::after { display: none !important; }

.tp-hero__title-lg, .tp-hero__title {
    font-size: clamp(36px, 6vw, 64px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
    color: var(--ds-ink) !important;
    margin-bottom: 24px;
}
.tp-hero__title-lg span, .tp-hero__title span {
    background: var(--ds-brand-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.tp-hero__title-lg span::after, .tp-hero__title-lg span::before { display: none !important; }

/* Store / CTA images in hero */
.tp-hero__btn a img, .tp-app__thumb-sm-1 img, .tp-app__thumb-sm-2 img { border-radius: 10px; transition: transform .2s ease; }
.tp-hero__btn a:hover img, .tp-app__thumb-sm-1 a:hover img, .tp-app__thumb-sm-2 a:hover img { transform: translateY(-2px); }

.tp-hero__contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--ds-line);
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--ds-text) !important;
    font-size: 14px;
    box-shadow: var(--ds-shadow-sm);
}
.tp-hero__contact a b { color: var(--ds-brand) !important; }
.tp-hero__contact a:hover { border-color: var(--ds-brand); }

.tp-hero__thumb-2 { margin-top: 48px; position: relative; z-index: 1; }
.tp-hero__thumb-2 > img, .tp-hero__thumb > img {
    border-radius: 20px !important;
    border: 1px solid var(--ds-line) !important;
    background: #fff;
    box-shadow: var(--ds-shadow) !important;
    animation: none !important;
}
.tp-hero__img-1 img, .tp-hero__img-2 img {
    border-radius: 14px !important;
    border: 1px solid var(--ds-line) !important;
    background: #fff;
    box-shadow: var(--ds-shadow) !important;
}

/* ------------------------------------------------------------------ */
/* 6. Brand strip / CTA blocks                                         */
/* ------------------------------------------------------------------ */
.tp-brand__area { padding-top: 72px !important; padding-bottom: 72px !important; background: #fff; }
.tp-brand__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    color: var(--ds-muted) !important;
}
.tp-brand__item img { filter: grayscale(1); opacity: .65; transition: all .2s ease; }
.tp-brand__item:hover img { filter: none; opacity: 1; }

.tp-cta__bg.grey-bg,
.tp-cta__wrapper-2 {
    background: radial-gradient(80% 120% at 100% 0%, rgba(90, 77, 255, .55) 0%, transparent 60%), var(--ds-night) !important;
    border-radius: 24px !important;
    overflow: hidden;
}
.tp-cta__wrapper-2 { padding: 72px 32px !important; }
.tp-cta__title, .tp-cta__item .tp-section-title { color: #fff !important; }
.tp-cta__item .tp-section-title { padding-bottom: 24px !important; }
.tp-cta__wrapper-2 .tp-btn-sky { background: #fff !important; color: var(--ds-night) !important; border-color: #fff !important; box-shadow: none !important; }
.tp-cta__wrapper-2 .tp-btn-sky:hover { background: var(--ds-brand-soft) !important; color: var(--ds-brand) !important; }
.tp-cta__shape-1, .tp-cta__shape-2, .tp-cta__shape-3, .tp-cta__shape-4, .tp-cta__shape-5 { opacity: .35; }

/* ------------------------------------------------------------------ */
/* 7. Feature / service cards                                          */
/* ------------------------------------------------------------------ */
.tp-service__item {
    background: #fff !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: var(--ds-radius) !important;
    padding: 32px 28px !important;
    box-shadow: var(--ds-shadow-sm) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.tp-service__item:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ds-shadow) !important;
    border-color: rgba(27, 23, 255, .25) !important;
}
.tp-service__item::before, .tp-service__item::after { display: none !important; }
.tp-service__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--ds-brand-soft) !important;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.tp-service__icon img { width: 28px !important; height: 28px !important; object-fit: contain; }
.tp-service__title-sm { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 10px; }
.tp-service__title-sm a { color: var(--ds-ink) !important; }
.tp-service__title-sm a:hover { color: var(--ds-brand) !important; }
.tp-service__content { flex: 1 1 auto; }
.tp-service__content p { font-size: 15px !important; line-height: 1.65; color: var(--ds-text) !important; margin-bottom: 20px; }
.tp-service__link { margin-top: auto; }
.tp-service__link a {
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ds-surface-2) !important; color: var(--ds-ink) !important;
}
.tp-service__item:hover .tp-service__link a { background: var(--ds-brand) !important; color: #fff !important; }
.tp-service__link a svg path { fill: currentColor; }
/* stack spacing for grid columns */
.tp-feature__area .row > [class*="col-"], .tp-service__area .row > [class*="col-"] { margin-bottom: 24px; }

/* Platform / split sections */
.tp-platform__area { background: #fff; }
.tp-platform__content p { font-size: 16px; line-height: 1.7; }
.tp-platform__thumb img, .tp-platform__wrapper img { border-radius: 20px; }
.tp-platform__shape-1, .tp-platform__shape-2 { opacity: .5; }

/* Counters */
.tp-counter__item, .tp-counter-2__item {
    background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
    padding: 28px 20px !important; box-shadow: var(--ds-shadow-sm);
}

/* ------------------------------------------------------------------ */
/* 8. Pricing                                                          */
/* ------------------------------------------------------------------ */
.tp-price__item {
    background: #fff !important;
    border: 1px solid var(--ds-line) !important;
    border-radius: 20px !important;
    padding: 32px 28px !important;
    box-shadow: var(--ds-shadow-sm) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.tp-price__item:hover { transform: translateY(-4px) !important; box-shadow: var(--ds-shadow) !important; border-color: rgba(27, 23, 255, .25) !important; }
.tp-price__active { border: 2px solid var(--ds-brand) !important; box-shadow: 0 20px 48px rgba(27, 23, 255, .14) !important; }
.tp-price__active::before { background: var(--ds-brand) !important; font-family: var(--ds-font-head) !important; font-size: 11px !important; letter-spacing: .06em; }
.tp-price__item .icon-box {
    width: 52px !important; height: 52px !important; border-radius: 14px !important;
    background: var(--ds-brand-soft) !important; color: var(--ds-brand) !important;
    font-size: 20px !important; margin-bottom: 8px !important; box-shadow: none !important;
}
.tp-price__item .icon-box:empty, .tp-price__item .icon-box i:not([class*="fa-"]) { visibility: hidden; }
.tp-price__item .badge { border-radius: 999px !important; padding: 6px 12px !important; font-weight: 600 !important; font-size: 12px !important; background: var(--ds-surface-2) !important; border-color: var(--ds-line) !important; }
.tp-price__title {
    font-size: clamp(30px, 3.4vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--ds-ink) !important;
    margin: 12px 0 20px !important;
    word-break: break-word;
}
.tp-price__small_title { font-size: 14px !important; color: var(--ds-muted) !important; font-weight: 500 !important; }
.tp-price__list { flex: 1 1 auto; margin-top: 0 !important; margin-bottom: 24px !important; padding-top: 20px; border-top: 1px solid var(--ds-line); }
.tp-price__list ul { padding: 0; margin: 0; }
.tp-price__list ul li {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0 !important;
    margin-bottom: 10px !important;
    font-size: 15px !important;
    line-height: 1.5;
    color: var(--ds-text) !important;
}
.tp-price__list ul li::before { display: none !important; }   /* removes the duplicate yellow dot */
.tp-price__list ul li i { margin: 3px 0 0 !important; font-size: 15px !important; color: var(--ds-ok) !important; flex: 0 0 auto; }
.tp-price__list ul li.text-muted i { color: #c4c7d4 !important; }
.tp-price__btn { margin-top: auto; }
.tp-price__btn a { width: 100%; }
.tp-price__btn a.tp-btn-border { color: var(--ds-ink) !important; }
.tp-price__active .tp-price__btn a,
.tp-price__active .tp-price__btn a.tp-btn-border { background: var(--ds-brand) !important; border-color: var(--ds-brand) !important; color: #fff !important; }
#price .row > [class*="col-"] { margin-bottom: 8px !important; }

/* ------------------------------------------------------------------ */
/* 9. FAQ / accordions / support                                       */
/* ------------------------------------------------------------------ */
.tp-faq__area { background: #fff; }
.tp-custom-accordio .accordion-items,
.tp-custom-accordio-2 .accordion-items,
.tp-custom-accordio-3 .accordion-items {
    border: 1px solid var(--ds-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.tp-custom-accordio .accordion-buttons,
.tp-custom-accordio-2 .accordion-buttons,
.tp-custom-accordio-3 .accordion-buttons {
    font-family: var(--ds-font-head) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    color: var(--ds-ink) !important;
    background: transparent !important;
    padding: 20px 56px 20px 22px !important;
    box-shadow: none !important;
    border: 0 !important;
    text-align: start;
    width: 100%;
}
.tp-custom-accordio .accordion-buttons:not(.collapsed),
.tp-custom-accordio-2 .accordion-buttons:not(.collapsed),
.tp-custom-accordio-3 .accordion-buttons:not(.collapsed) { color: var(--ds-brand) !important; }
.tp-custom-accordio .accordion-body,
.tp-custom-accordio-2 .accordion-body,
.tp-custom-accordio-3 .accordion-body {
    padding: 0 22px 22px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--ds-text) !important;
}

.tp-faq__right-side, .tp-support__bg, .tp-support__bg-2 {
    background: var(--ds-surface-2) !important;
    border: 1px solid var(--ds-line);
    border-radius: 20px !important;
    padding: 40px 32px !important;
}
.tp-faq__icon a { background: #fff !important; box-shadow: var(--ds-shadow-sm) !important; }
.tp-faq__icon svg path { fill: var(--ds-brand) !important; }
.tp-faq__faq-sm-title { font-size: 22px !important; }
.tp-faq__content a { width: 100%; margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* 10. Testimonials / team / choose                                    */
/* ------------------------------------------------------------------ */
.tp-testimonial__slider-item {
    background: #fff; border: 1px solid var(--ds-line); border-radius: 20px; box-shadow: var(--ds-shadow-sm);
}
.tp-testimonial__slider-quote i { color: var(--ds-brand) !important; }
.tp-team__item { border-radius: 20px; overflow: hidden; }
.tp-team__img img { border-radius: 16px; }
.tp-choose__area { background-color: var(--ds-night) !important; }

/* ------------------------------------------------------------------ */
/* 11. Inner page banner (breadcrumb)                                  */
/* ------------------------------------------------------------------ */
.breadcrumb__area {
    background-image:
        radial-gradient(60% 80% at 85% 0%, rgba(90, 77, 255, .14) 0%, transparent 70%),
        radial-gradient(50% 70% at 0% 100%, rgba(27, 23, 255, .08) 0%, transparent 70%),
        linear-gradient(180deg, #fbfbff 0%, var(--ds-surface-2) 100%) !important;
    background-size: cover !important;
    padding-top: calc(var(--ds-header-h) + 64px) !important;
    padding-bottom: 64px !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ds-line);
}
.breadcrumb__area.breadcrumb-height { padding-top: calc(var(--ds-header-h) + 64px) !important; padding-bottom: 64px !important; }
.breadcrumb__title {
    font-size: clamp(32px, 5vw, 52px) !important;
    font-weight: 800 !important;
    color: var(--ds-ink) !important;
    margin-bottom: 12px !important;
}
.breadcrumb__list, .breadcrumb__list span, .breadcrumb__list a {
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ds-muted) !important;
}
.breadcrumb__list a:hover { color: var(--ds-brand) !important; }
.breadcrumb__list .dvdr { margin: 0 8px; opacity: .6; }
.breadcrumb__scroll-bottom { display: none !important; }

/* ------------------------------------------------------------------ */
/* 12. Login / register / password                                     */
/* ------------------------------------------------------------------ */
.tp-login-area { background: var(--ds-surface-2); padding: 64px 0; }
.tp-login-area > .container-fluid { max-width: 1120px; margin: 0 auto; padding: 0 16px !important; }
.tp-login-area .row {
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--ds-shadow);
}
.tp-login-thumb {
    background: linear-gradient(160deg, var(--ds-brand) 0%, #5a4dff 100%) !important;
    align-items: center;
    padding: 48px !important;
    min-height: 100%;
    height: 100%;
}
.tp-login-thumb img { max-width: 360px; width: 100%; filter: drop-shadow(0 20px 40px rgba(11, 10, 46, .25)); }
.tp-login-wrapper { padding: 56px 48px !important; }
.tplogin { width: 100%; max-width: 420px; }
.tp-login-title {
    font-size: clamp(26px, 3vw, 32px) !important;
    font-weight: 800 !important;
    color: var(--ds-ink) !important;
    margin-bottom: 28px !important;
}
.tplogin__form label, .tp-contact-input label {
    display: block;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ds-ink) !important;
    margin-bottom: 8px !important;
}
.tplogin__form input[type="text"],
.tplogin__form input[type="email"],
.tplogin__form input[type="password"],
.tp-contact-input input,
.tp-contact-input textarea,
.contact-form-box input,
.contact-form-box textarea,
.sidebar__search input {
    width: 100%;
    height: 52px;
    padding: 0 16px !important;
    font-size: 15px !important;
    color: var(--ds-ink) !important;
    background: #fff !important;
    border: 1.5px solid var(--ds-line) !important;
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tp-contact-input textarea, .contact-form-box textarea { height: 160px; padding: 14px 16px !important; resize: vertical; }
.tplogin__form input:focus,
.tp-contact-input input:focus, .tp-contact-input textarea:focus,
.contact-form-box input:focus, .contact-form-box textarea:focus,
.sidebar__search input:focus {
    border-color: var(--ds-brand) !important;
    box-shadow: 0 0 0 4px rgba(27, 23, 255, .12) !important;
    outline: none;
}
.tplogin__form .is-invalid { border-color: #dc2626 !important; }
.tplogin__form .invalid-feedback { display: block; font-size: 13px; margin-top: 6px; }
.tp-mail, .tp-password { margin-bottom: 18px !important; }
.tp-forgot-password { align-items: center; gap: 12px; margin-bottom: 24px !important; font-size: 14px; }
.tp-forgot-password .checkbox { display: flex; align-items: center; gap: 8px; }
.tp-forgot-password .checkbox label { margin: 0 !important; font-weight: 500 !important; color: var(--ds-text) !important; }
.tp-forgot-password input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ds-brand); margin: 0; }
.tp-forgot-password a, .tp-signup a { color: var(--ds-brand) !important; font-weight: 600; font-size: 14px; }
.tp-login-button button { width: 100%; min-height: 52px; font-size: 16px !important; }
.tp-signup { margin-top: 20px !important; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.tp-signup .account a { color: var(--ds-muted) !important; font-weight: 500; }

/* ------------------------------------------------------------------ */
/* 13. Contact / blog                                                  */
/* ------------------------------------------------------------------ */
.contact-info, .contact-form-box {
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: 20px;
    padding: 32px !important;
    box-shadow: var(--ds-shadow-sm);
}
.contact-icon, .contact-icon a, .contact-icon i { color: var(--ds-brand) !important; }
.contact-title { color: var(--ds-ink) !important; }
.tp-contact-input { margin-bottom: 16px; }

.postbox__item, .sidebar__widget {
    background: #fff;
    border: 1px solid var(--ds-line) !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: var(--ds-shadow-sm);
}
.postbox__content, .sidebar__widget { padding: 28px !important; }
.postbox__thumb img { width: 100%; object-fit: cover; }
.postbox__title a { color: var(--ds-ink) !important; }
.postbox__title a:hover { color: var(--ds-brand) !important; }
.postbox__meta span, .postbox__meta a { color: var(--ds-muted) !important; font-size: 14px; }

/* ------------------------------------------------------------------ */
/* 14. Footer                                                          */
/* ------------------------------------------------------------------ */
.tp-footer__area {
    background: radial-gradient(70% 60% at 50% 0%, rgba(90, 77, 255, .35) 0%, transparent 70%), var(--ds-night) !important;
    padding-top: 96px !important;
    padding-bottom: 32px !important;
}
.tp-footer__content .tp-section-title { color: #fff !important; }
.tp-footer__content p { color: rgba(255, 255, 255, .72) !important; font-size: 17px; max-width: 560px; margin: 0 auto 28px; }
.tp-footer__thumb { gap: 12px; flex-wrap: wrap; }
.tp-footer__thumb-sm { margin: 0 !important; }
.tp-footer__thumb-sm img { border-radius: 12px; transition: transform .2s ease; }
.tp-footer__thumb-sm a:hover img { transform: translateY(-2px); }
.tp-footer-bottom__area { margin-top: 64px !important; }
.tp-footer-bottom__border-top { border-top: 1px solid rgba(255, 255, 255, .1) !important; padding-top: 32px !important; }
.tp-footer-bottom__logo img {
    max-height: 36px; width: auto;
    background: #fff; padding: 6px 10px; border-radius: 10px;   /* dark logo stays visible on the dark footer */
}
.tp-footer-bottom__menu ul {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 20px; margin: 0; padding: 0;
}
.tp-footer-bottom__menu ul li { margin: 0 !important; padding: 0 !important; list-style: none; }
.tp-footer-bottom__menu ul li::before, .tp-footer-bottom__menu ul li::after { display: none !important; }
.tp-footer-bottom__menu ul li a {
    font-family: var(--ds-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, .72) !important;
}
.tp-footer-bottom__menu ul li a:hover { color: #fff !important; }
.tp-footer-bottom__social select.language-switch {
    height: 42px;
    max-width: 220px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 14px;
    text-align: start !important;
}
.tp-footer-bottom__social select.language-switch option { color: var(--ds-ink); }
.tp-footer-bottom__social .nice-select { display: none !important; }
.tp-footer-bottom__social select.language-switch { display: inline-block !important; }

/* Scroll-to-top */
.scroll-top.scroll-to-target {
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    background: var(--ds-brand) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(27, 23, 255, .3) !important;
    right: 20px !important;
}

/* ------------------------------------------------------------------ */
/* 15. Arabic / RTL                                                    */
/* ------------------------------------------------------------------ */
html[lang="ar"] body, [dir="rtl"] body { letter-spacing: 0 !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .tp-section-title, html[lang="ar"] .tp-hero__title-lg {
    font-family: 'IBM Plex Sans Arabic', var(--ds-font-head) !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
}

/* ------------------------------------------------------------------ */
/* 16. Responsive                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1199px) {
    .tp-header__main-menu ul li a { padding: 8px 10px !important; font-size: 14px !important; }
    .tp-header__right a.tp-btn-border, .tp-header__right-two a.tp-btn-border { display: none !important; }
}

@media (max-width: 991px) {
    :root { --ds-header-h: 68px; }
    .tp-login-thumb { display: none !important; }        /* form first on tablets/phones */
    .tp-login-wrapper { padding: 40px 28px !important; }
    .tp-hero__img-1, .tp-hero__img-2 { display: none !important; }
    .tp-platform__content, .tp-faq__right-side { margin-top: 32px; }
    .tp-footer-bottom__logo, .tp-footer-bottom__social { text-align: center !important; margin-top: 20px; }
    .tp-footer-bottom__menu { margin-bottom: 4px; }
}

@media (max-width: 767px) {
    :root { --ds-header-h: 64px; }
    body { font-size: 15px; }
    #header-sticky > .container-fluid { padding-left: 16px; padding-right: 16px; }
    .tp-header__logo img { max-height: 34px; }

    /* section rhythm — the theme uses 110–190px paddings, far too tall on phones */
    .pt-190, .pt-170, .pt-150, .pt-140, .pt-130, .pt-120, .pt-115, .pt-110, .pt-100 { padding-top: 64px !important; }
    .pb-190, .pb-170, .pb-150, .pb-140, .pb-130, .pb-120, .pb-115, .pb-110, .pb-100, .pb-90 { padding-bottom: 56px !important; }
    .mb-70, .pb-60, .pb-50 { margin-bottom: 0; }
    .tp-feature__section-box.mb-70 { margin-bottom: 32px !important; }
    .tp-price__section.pb-60, .tp-testimonial__section.pb-50 { padding-bottom: 32px !important; }

    .tp-hero__bg-2, .tp-hero__bg { padding-top: calc(var(--ds-header-h) + 48px) !important; padding-bottom: 56px !important; }
    .tp-hero__title-lg, .tp-hero__title { margin-bottom: 20px; }
    .tp-hero__btn, .tp-hero__button { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .tp-hero__btn a, .tp-hero__button a { margin: 0 !important; }
    .tp-hero__btn img { max-height: 46px; width: auto; }
    .tp-hero__thumb-2 { margin-top: 32px; }

    .tp-service__item { padding: 24px 22px !important; }
    .tp-price__item { padding: 26px 22px !important; }
    .tp-cta__wrapper-2 { padding: 48px 20px !important; border-radius: 20px !important; }
    .tp-cta__shape-1, .tp-cta__shape-2, .tp-cta__shape-3, .tp-cta__shape-4, .tp-cta__shape-5 { display: none; }
    .tp-faq__right-side, .tp-support__bg, .tp-support__bg-2 { padding: 28px 22px !important; }

    .breadcrumb__area, .breadcrumb__area.breadcrumb-height { padding-top: calc(var(--ds-header-h) + 40px) !important; padding-bottom: 40px !important; }

    .tp-login-area { padding: 32px 0; }
    .tp-login-area .row { border-radius: 20px; }
    .tp-login-wrapper { padding: 32px 20px !important; }

    .contact-info, .contact-form-box { padding: 24px !important; }

    .tp-footer__area { padding-top: 64px !important; }
    .tp-footer__content p { font-size: 15px; }
    .tp-footer-bottom__area { margin-top: 40px !important; }
    .tp-footer-bottom__menu ul { gap: 4px 16px; }
    .tp-footer-bottom__social select.language-switch { max-width: 100%; }

    .scroll-top.scroll-to-target { right: 14px !important; bottom: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ */
/* 17. Polish pass                                                     */
/* ------------------------------------------------------------------ */
/* Header: both buttons the same height */
.tp-header__right a.tp-btn, .tp-header__right a.tp-btn-border,
.tp-header__right-two a.tp-btn-blue, .tp-header__right-two a.tp-btn-border, .tp-header__right-two a.tp-btn-blue-square {
    height: 44px; min-height: 44px; padding: 0 20px !important; box-sizing: border-box;
}
.tp-header__right-two a.tp-btn-border { background: #fff !important; }

/* Login: image panel fills the card height, matches the illustration's own backdrop */
.tp-login-area .row { align-items: stretch !important; }
.tp-login-area .row > [class*="col-"] { display: flex; }
.tp-login-thumb, .tp-login-wrapper { width: 100%; }
.tp-login-thumb { background: #c1e0ff !important; }
.tp-login-thumb img { filter: none; }
.tp-login-wrapper { align-items: center; }

/* Pricing: plans without an icon don't show an empty tile */
.tp-price__item .icon-box:has(> i[class=""]),
.tp-price__item .icon-box:has(> i:not([class])) { visibility: hidden; }
.tp-price__title { margin: 4px 0 4px !important; }
.tp-price__item > .d-flex.mb-4 { margin-bottom: 12px !important; }

/* Contact: form box was a card nested in a card */
#contact.contact-form-box { background: transparent; border: 0; box-shadow: none; padding: 32px 0 0 !important; }
.contact-form-box .contact-form-box { max-width: 860px; margin: 0 auto; padding: 40px !important; }
.contact-title { font-size: clamp(24px, 3vw, 32px) !important; margin-bottom: 24px !important; }
.contact-form-box .col-8 { width: 100%; }
.contact-info { height: 100%; }
.contact-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 14px; background: var(--ds-brand-soft) !important;
    margin-bottom: 16px; font-size: 22px;
}
.tp-conatact-area.pt-125 { padding-top: 72px !important; }
.tp-conatact-area.pb-125 { padding-bottom: 72px !important; }
.tp-submit-button { text-align: center; }

/* Feature cards: no dead space above the arrow on phones */
.tp-service__content { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.tp-service__link { position: static !important; padding-top: 4px; }
.tp-service__link a svg, .tp-service__link a i { width: 18px; }

@media (max-width: 767px) {
    .contact-form-box .contact-form-box { padding: 24px 18px !important; }
    #contact.contact-form-box { padding-top: 16px !important; }
    .tp-conatact-area.pt-125 { padding-top: 40px !important; }
    .tp-conatact-area.pb-125 { padding-bottom: 48px !important; }
}

/* ------------------------------------------------------------------ */
/* 18. Text CTAs (replaced image buttons and store badges)             */
/* ------------------------------------------------------------------ */
.tp-hero__subtitle p {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.65;
    color: var(--ds-text);
}
.tp-hero__actions { gap: 12px; }
.tp-hero__actions .tp-btn, .tp-hero__actions .tp-btn-border { min-height: 52px; padding: 14px 28px !important; font-size: 16px !important; }
.tp-app__download .gap-3 { gap: 12px !important; }
.tp-app__content p { font-size: 17px; line-height: 1.7; }

.tp-footer__thumb .tp-btn-light {
    background: #fff !important; color: var(--ds-night) !important; border-color: #fff !important; box-shadow: none !important;
}
.tp-footer__thumb .tp-btn-light:hover { background: var(--ds-brand-soft) !important; color: var(--ds-brand) !important; }
.tp-footer__thumb .tp-btn-ghost {
    background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .3) !important;
}
.tp-footer__thumb .tp-btn-ghost:hover { border-color: #fff !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important; }

@media (max-width: 575px) {
    .tp-hero__actions .tp-btn, .tp-hero__actions .tp-btn-border,
    .tp-footer__thumb .tp-btn, .tp-footer__thumb .tp-btn-border,
    .tp-app__download .tp-btn, .tp-app__download .tp-btn-border { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* 19. Button fixes                                                    */
/* The theme fixes outline buttons at height:65px/line-height:65px and  */
/* the pricing partial re-declares display:inline-block inline — both  */
/* pushed labels to the top and made paired buttons different heights. */
/* ------------------------------------------------------------------ */
.tp-btn, .tp-btn-blue, .tp-btn-blue-square, .tp-btn-sky, .tp-btn-sky-sm, .tp-btn-pink, .tp-btn-border,
.tp-price__btn a, .tp-faq__content a, .tp-submit-button button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.2 !important;
    padding: 12px 24px !important;
    box-sizing: border-box !important;
    vertical-align: middle;
}
/* keep Bootstrap hide helpers working */
.tp-btn.d-none, .tp-btn-blue.d-none, .tp-btn-blue-square.d-none, .tp-btn-border.d-none,
.tp-btn-sky.d-none, .tp-btn-pink.d-none { display: none !important; }
@media (min-width: 768px) {
    .tp-btn.d-md-inline-block, .tp-btn-blue.d-md-inline-block, .tp-btn-border.d-md-inline-block,
    .tp-btn-blue-square.d-md-block { display: inline-flex !important; }
}
.tp-btn-border { border-width: 1.5px !important; }

/* header: both buttons identical size */
.tp-header__right a.tp-btn, .tp-header__right a.tp-btn-border,
.tp-header__right-two a.tp-btn-blue, .tp-header__right-two a.tp-btn-border, .tp-header__right-two a.tp-btn-blue-square {
    height: 44px !important; min-height: 44px !important; padding: 0 20px !important; font-size: 14px !important;
}

/* pricing buttons: full width, same height in every card */
.tp-price__btn a { width: 100% !important; min-height: 52px !important; }

/* footer pair: white label on dark background, same height */
.tp-footer__thumb a { min-height: 52px !important; padding: 0 28px !important; }
footer .tp-footer__thumb a.tp-btn-ghost, footer .tp-footer__thumb a.tp-btn-ghost span { color: #fff !important; }
footer .tp-footer__thumb a.tp-btn-light, footer .tp-footer__thumb a.tp-btn-light span { color: var(--ds-night) !important; }

/* feature-card arrow stays visible on the blue hover square */
.tp-service__link a svg { width: 22px !important; height: auto !important; }
.tp-service__link a svg path { fill: currentColor !important; }
.tp-service__item:hover .tp-service__link a,
.tp-service__item:hover .tp-service__link a svg path { color: #fff !important; fill: #fff !important; }

/* 20. Pricing page fixes */
.tp-support__bg { display: none !important; }                      /* decorative blob that stretched across the FAQ */
.tp-support__bg-2 { background: var(--ds-surface-2) !important; border: 0 !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.tp-support__faq .accordion-items { background: #fff !important; }
.tp-choose__thumb-box { gap: 12px; margin-top: 8px; }
.tp-choose__thumb-box a.tp-btn-light { background: #fff !important; color: var(--ds-night) !important; border-color: #fff !important; box-shadow: none !important; min-height: 52px !important; }
.tp-choose__thumb-box a.tp-btn-ghost { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; min-height: 52px !important; }
.tp-choose__thumb-box a.tp-btn-ghost:hover { border-color: #fff !important; background: rgba(255,255,255,.08) !important; }
.tp-price__active > .d-flex:first-child { padding-right: 56px; }  /* keep plan badge clear of the "Most popular" ribbon */


/* ------------------------------------------------------------------ */
/* 21. Pricing v2 — billing toggle and plan cards                      */
/* ------------------------------------------------------------------ */
.ds-price-sub { color: var(--ds-muted); font-size: 15px; margin-bottom: 24px; }
.ds-billing-toggle {
    display: inline-flex; gap: 4px; padding: 4px;
    background: #fff; border: 1px solid var(--ds-line); border-radius: 999px; box-shadow: var(--ds-shadow-sm);
}
.ds-billing-toggle button {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: transparent; cursor: pointer;
    padding: 10px 20px; border-radius: 999px;
    font-family: var(--ds-font-head); font-weight: 600; font-size: 15px; color: var(--ds-text);
    transition: background-color .2s ease, color .2s ease;
}
.ds-billing-toggle button.active { background: var(--ds-brand); color: #fff; }
.ds-save { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #dcfce7; color: #166534; }
.ds-billing-toggle button.active .ds-save { background: rgba(255,255,255,.2); color: #fff; }

.ds-plan-name { font-size: 22px !important; font-weight: 700 !important; margin: 0 !important; color: var(--ds-ink) !important; }
.ds-plan-badge {
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
    background: var(--ds-brand-soft); color: var(--ds-brand); white-space: nowrap;
}
.tp-price__active::before { display: none !important; }
.tp-price__active > .d-flex:first-child { padding-right: 0 !important; }
#price .tp-price__title {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    font-family: var(--ds-font-head) !important; font-size: clamp(30px, 2.6vw, 38px) !important;
    font-weight: 800 !important; color: var(--ds-ink) !important; margin: 4px 0 0 !important; line-height: 1.1;
}
.ds-plan-note { min-height: 40px; font-size: 13px; line-height: 1.5; color: var(--ds-muted); margin: 6px 0 16px; }
#price .tp-price__item { padding: 28px 24px !important; }
#price .tp-price__list ul li { font-size: 14.5px !important; }
#price .tp-price__list ul li span { flex: 1; }
#price .tp-price__list ul li.ds-off { color: #a3a7b8 !important; }
#price .tp-price__list ul li.ds-off i { color: #cbd0dc !important; }
@media (max-width: 575px) {
    .ds-billing-toggle button { padding: 9px 14px; font-size: 14px; }
}

/* 22. Standalone AI plan card on the pricing page */
.ds-ai-plan {
    background: radial-gradient(70% 120% at 100% 0%, rgba(90,77,255,.10) 0%, transparent 60%), #fff;
    border: 1px solid var(--ds-line); border-radius: 20px; padding: 32px; box-shadow: var(--ds-shadow-sm);
}
.ds-ai-plan-title { font-size: clamp(24px, 2.6vw, 30px) !important; font-weight: 800 !important; margin: 12px 0 8px !important; color: var(--ds-ink) !important; }
.ds-ai-plan-text { font-size: 15.5px; color: var(--ds-text); max-width: 560px; }
.ds-ai-plan-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.ds-ai-plan-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ds-text); }
.ds-ai-plan-list i { color: var(--ds-ok); margin-top: 4px; }
.ds-ai-plan-price { background: var(--ds-surface-2); border-radius: 16px; padding: 24px; }
.ds-ai-plan-price .tp-price__btn a { width: 100%; }
@media (max-width: 767px) { .ds-ai-plan { padding: 22px; } .ds-ai-plan-list { grid-template-columns: 1fr; } }

/* 23. Keep the "back to top" button above the AI chat bubble */
.scroll-top.scroll-to-target { bottom: 92px !important; }

/* ------------------------------------------------------------------ */
/* 24. Language toggle + Arabic (RTL) layout                           */
/* ------------------------------------------------------------------ */
.ds-lang-toggle {
    display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
    border-radius: 12px; border: 1.5px solid var(--ds-line); background: #fff;
    color: var(--ds-ink) !important; font-weight: 600; font-size: 14px; white-space: nowrap;
    font-family: 'IBM Plex Sans Arabic', var(--ds-font) !important;
}
.ds-lang-toggle:hover { border-color: var(--ds-brand); color: var(--ds-brand) !important; }
@media (max-width: 575px) { .ds-lang-toggle { height: 40px; padding: 0 10px; font-size: 13px; } }

[dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button {
    font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif !important;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .tp-section-title, [dir="rtl"] .tp-section-title-sm, [dir="rtl"] .tp-hero__title-lg, [dir="rtl"] .breadcrumb__title,
[dir="rtl"] .tp-price__title, [dir="rtl"] .ds-plan-name, [dir="rtl"] .tp-btn, [dir="rtl"] .tp-btn-blue, [dir="rtl"] .tp-btn-border {
    font-family: 'IBM Plex Sans Arabic', 'Outfit', system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}
[dir="rtl"] .tp-hero__title-lg, [dir="rtl"] .tp-section-title, [dir="rtl"] .tp-section-title-sm { line-height: 1.35 !important; }
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .text-md-start, [dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-md-end, [dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .tp-header__right, [dir="rtl"] .tp-header__right-two { justify-content: flex-start !important; }
[dir="rtl"] .breadcrumb__list .dvdr i { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .tp-service__link a svg, [dir="rtl"] .tp-service__item:hover .tp-service__link a svg { transform: scaleX(-1); }
[dir="rtl"] .tp-custom-accordio .accordion-buttons, [dir="rtl"] .tp-custom-accordio-2 .accordion-buttons, [dir="rtl"] .tp-custom-accordio-3 .accordion-buttons {
    padding: 20px 22px 20px 56px !important; text-align: right;
}
[dir="rtl"] .accordion-buttons::after { right: auto !important; left: 22px !important; }
[dir="rtl"] .scroll-top.scroll-to-target { right: auto !important; left: 20px !important; }
[dir="rtl"] .tp-price__list ul li { text-align: right; }
/* RTL: mirror the floating images in the dark call-to-action box so they don't cover the text */
[dir="rtl"] .tp-cta__thumb { right: auto !important; left: 10%; }
@media (min-width: 992px) and (max-width: 1199px) { [dir="rtl"] .tp-cta__thumb { left: 1%; } }
@media (max-width: 767px) { [dir="rtl"] .tp-cta__thumb { left: 0; } }
[dir="rtl"] .tp-cta__thumb-2 { left: auto !important; right: 4%; }
[dir="rtl"] .tp-cta__item-left { text-align: right; }
.ds-lang-short { display: none; }
@media (max-width: 575px) {
    .ds-lang-full { display: none; }
    .ds-lang-short { display: inline; }
    .ds-lang-toggle { width: 40px; padding: 0 !important; justify-content: center; }
    .tp-header__right-two, .tp-header__right { gap: 8px !important; }
}
/* Slick sliders don't support RTL without their rtl option: run them LTR, keep the content RTL */
[dir="rtl"] .slick-slider, [dir="rtl"] .slick-list, [dir="rtl"] .slick-track { direction: ltr; }
[dir="rtl"] .slick-slide { direction: rtl; }

/* Service slider on About had -3px side margins that caused a sideways scroll on phones */
.tp-service__slider-wrapper { overflow: hidden; }

/* ---------- Referral program (public page) ---------- */
.ds-ref-public{padding:calc(var(--ds-header-h) + 70px) 0 80px;background:radial-gradient(900px 400px at 85% 10%,#eeeeff 0,transparent 60%),radial-gradient(700px 360px at 0 100%,#ecfdf3 0,transparent 60%),#fff}
.ds-ref-chip{display:inline-flex;align-items:center;gap:8px;background:var(--ds-brand-soft);color:var(--ds-brand);font-weight:700;font-size:14px;padding:7px 14px;border-radius:30px}
.ds-ref-title{font-family:var(--ds-font-head);color:var(--ds-ink);font-size:clamp(32px,4.4vw,52px);line-height:1.12;margin:18px 0 16px;font-weight:700}
.ds-ref-lead{font-size:18px;color:var(--ds-text);line-height:1.7;max-width:560px}
.ds-ref-btn{border-radius:12px!important}
.ds-ref-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ds-ink);padding:14px 6px}
.ds-ref-ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px}
.ds-ref-ticks li{color:var(--ds-text);font-size:15.5px}
.ds-ref-ticks i{color:var(--ds-ok);margin-inline-end:8px}
.ds-ref-calc-card{background:#fff;border:1px solid var(--ds-line);border-radius:22px;box-shadow:var(--ds-shadow);padding:32px}
.ds-ref-calc-card h3{font-family:var(--ds-font-head);font-size:24px;color:var(--ds-ink);margin-bottom:20px}
.ds-ref-calc-card label{font-weight:600;color:var(--ds-ink);display:block;margin-bottom:8px}
.ds-ref-calc-card .form-range{accent-color:var(--ds-brand)}
.ds-ref-result{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 10px}
.ds-ref-result div{background:var(--ds-surface-2);border-radius:14px;padding:16px}
.ds-ref-result span{display:block;color:var(--ds-muted);font-size:13px;margin-bottom:4px}
.ds-ref-result strong{font-family:var(--ds-font-head);font-size:clamp(20px,2.4vw,28px);color:var(--ds-ok)}
.ds-ref-calc-card small{color:var(--ds-muted)}
.ds-ref-steps{padding:80px 0;background:var(--ds-surface-2)}
.ds-ref-steps h2,.ds-ref-faq h2{font-family:var(--ds-font-head);color:var(--ds-ink);font-size:clamp(28px,3vw,40px);font-weight:700}
.ds-ref-step{position:relative;background:#fff;border:1px solid var(--ds-line);border-radius:20px;padding:30px 26px;height:100%;box-shadow:var(--ds-shadow-sm)}
.ds-ref-step>i{font-size:26px;color:var(--ds-brand);background:var(--ds-brand-soft);width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ds-ref-step-n{position:absolute;top:22px;inset-inline-end:24px;font-family:var(--ds-font-head);font-size:42px;font-weight:800;color:#eceefa}
.ds-ref-step h4{font-family:var(--ds-font-head);color:var(--ds-ink);font-size:21px}
.ds-ref-step p{color:var(--ds-text);margin:0}
.ds-ref-faq{padding:80px 0}
.ds-ref-faq .accordion{max-width:820px;margin:0 auto}
.ds-ref-faq .accordion-item{border:1px solid var(--ds-line);border-radius:14px!important;margin-bottom:12px;overflow:hidden}
.ds-ref-faq .accordion-button{font-weight:600;color:var(--ds-ink);font-size:16.5px;box-shadow:none}
.ds-ref-faq .accordion-button:not(.collapsed){background:var(--ds-brand-soft);color:var(--ds-brand)}
[dir="rtl"] .ds-ref-faq .accordion-button::after{margin-left:0;margin-right:auto}
.ds-footer-earn{color:#4ade80!important;font-weight:600}
.ds-pricing-ref{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;margin:36px auto 0;max-width:760px;padding:16px 22px;border-radius:16px;background:linear-gradient(135deg,#ecfdf3,#eeeeff);border:1px solid var(--ds-line);color:var(--ds-ink);font-weight:500;text-align:center}
.ds-pricing-ref i{color:var(--ds-ok);font-size:20px}
.ds-pricing-ref a{font-weight:700;color:var(--ds-brand)}
@media (max-width:575.98px){.ds-ref-public{padding-top:calc(var(--ds-header-h) + 40px)}.ds-ref-calc-card{padding:22px}.ds-ref-result{grid-template-columns:1fr}}

[dir="rtl"] .ds-flip-rtl{transform:scaleX(-1);display:inline-block}
.ds-ref-public,.ds-ref-steps,.ds-ref-faq{overflow-x:hidden}
.ds-ref-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.ds-ref-plans button{border:1px solid var(--ds-line);background:#fff;border-radius:12px;padding:10px 12px;font-weight:700;color:var(--ds-ink);text-align:center;transition:.15s}
.ds-ref-plans button small{display:block;font-weight:500;color:var(--ds-muted);font-size:12px;margin-top:2px}
.ds-ref-plans button.active{border-color:var(--ds-brand);background:var(--ds-brand-soft);color:var(--ds-brand);box-shadow:0 0 0 3px rgba(27,23,255,.08)}
.ds-ref-result strong{white-space:nowrap}

/* Theme rows are 3px wider than the container on phones: clip the page sideways (clip keeps the sticky header working) */
html,body{overflow-x:clip}
/* Industry landing pages */
.ds-sol-chat{background:#fff;border:1px solid var(--ds-line,#e7e8f0);border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(15,16,41,.10);max-width:420px;margin-inline:auto}
.ds-sol-chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#075e54;color:#fff}
.ds-sol-chat-head strong{display:block;font-size:15px;color:#fff}
.ds-sol-chat-head small{font-size:12px;opacity:.85}
.ds-sol-chat-head>i{margin-inline-start:auto;font-size:22px}
.ds-sol-av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ds-sol-chat-body{background:#efe7dd;padding:18px 14px;display:flex;flex-direction:column;gap:10px}
.ds-sol-msg{display:flex}
.ds-sol-msg span{max-width:86%;padding:9px 13px;border-radius:12px;font-size:14.5px;line-height:1.65;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.ds-sol-msg.in span{background:#fff}
.ds-sol-msg.out{justify-content:flex-end}
.ds-sol-msg.out span{background:#d9fdd3}
.ds-sol-uses{padding:70px 0;background:#fff}
.ds-sol-uses h2{font-family:var(--ds-font-head);color:var(--ds-ink);font-weight:700}
.ds-sol-use{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--ds-line,#e7e8f0);border-radius:16px;height:100%}
.ds-sol-use>i{flex:0 0 34px;height:34px;border-radius:50%;background:#ecfdf3;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:14px}
.ds-sol-use h4{font-size:17px;color:var(--ds-ink);margin:2px 0 6px;font-weight:700}
.ds-sol-use p{margin:0;color:var(--ds-text);line-height:1.7}
.ds-sol-others{margin-top:22px;color:var(--ds-text)}
.ds-sol-others a{color:var(--ds-brand);font-weight:600}
.ds-footer-solutions{text-align:center;margin:0 0 18px;font-size:14px}
.ds-footer-solutions a{margin:0 8px;white-space:nowrap}